Add prebuilt chat overlay example
This commit is contained in:
Ashley Blewer
parent
4554aa396a
commit
8e9b6337e8
|
|
@ -0,0 +1,17 @@
|
|||
# Chat overlay
|
||||
|
||||
|
||||
|
||||
## What does this demo do?
|
||||
|
||||
- Adds full-screen [Daily Prebuilt](https://www.daily.co/prebuilt) to a page
|
||||
- Using [`app-message`](https://docs.daily.co/reference#app-message) and [`sendAppMessage()`](https://docs.daily.co/reference#%EF%B8%8F-sendappmessage), send and receive chat messages (with or without `enable_chat` set to `true` in the room)
|
||||
- Allow users to send and receive chat messages while viewing other participants' videos
|
||||
|
||||
### Getting started
|
||||
|
||||
- Clone this repository and navigate to this folder (`git clone git@github.com:daily-demos/examples.git && cd prebuilt-ui/chat-overlay`)
|
||||
- Set `ROOM_URL` on the first line of `main.js` to a Daily room you have created. Sign up and create a room from the [Daily dashboard](https://dashboard.daily.co/signup), if you haven't already!
|
||||
- Run a server from this repo's directory. You can use something like `python -m SimpleHTTPServer` run on the command line in the repo's directory or use VSCode's Live Server extension. See [How do you set up a local testing server?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server) for more info.
|
||||
- Register for a Daily.co account and create a Room [in the dashboard](https://dashboard.daily.co/rooms), and use that room URL on this page. You can join that room directly using other browser tabs or another device.
|
||||
- Visit the server in your browser! You can use multiple tabs for testing out the chat experience.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>fullscreen embedded prebuilt with chat overlay</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
|
||||
<body onload="setup()">
|
||||
<aside id="chatBox" class="hidden">
|
||||
<div id="chatBoxTexts"></div>
|
||||
<input id="chatBoxInput" type="text">
|
||||
<button id="chatBoxButton">➡️</button>
|
||||
</aside>
|
||||
</body>
|
||||
<script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
|
||||
<script src="main.js"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
#chatBox {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
padding-left: 1.75em;
|
||||
margin-bottom: 7.5em;
|
||||
}
|
||||
|
||||
@media (min-width: 701px) {
|
||||
#chatBox {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 801px) {
|
||||
#chatBox {
|
||||
margin-bottom: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
#chatBox > input {
|
||||
border: 1px solid #c8d1dc;
|
||||
border-radius: 5px;
|
||||
width: 74vw;
|
||||
max-width: 22em;
|
||||
background-color: rgba(255, 255, 255)
|
||||
}
|
||||
|
||||
#chatBoxButton {
|
||||
border: 1px solid #c8d1dc;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(255, 255, 255);
|
||||
}
|
||||
|
||||
#chatBoxTexts > p {
|
||||
background-color: #121a2478;
|
||||
display: table;
|
||||
padding: 0.1em;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
font-size: 1.25em;
|
||||
border-radius: 0.5em;
|
||||
word-wrap: break-word;
|
||||
animation: fadeIn .5s cubic-bezier(.95,.05,.8,.04) forwards, fadeOut 15s cubic-bezier(.95,.05,.8,.04) forwards;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
const ROOM_URL = "https://acb.daily.co/no-chat"
|
||||
|
||||
async function setup() {
|
||||
callFrame = DailyIframe.createFrame({
|
||||
url: ROOM_URL,
|
||||
showLeaveButton: true,
|
||||
iframeStyle: {
|
||||
position: 'fixed',
|
||||
border: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
});
|
||||
await callFrame.join();
|
||||
document.getElementById("chatBox").classList.remove('hidden');
|
||||
addChatBox()
|
||||
}
|
||||
|
||||
function addChatMsg(event) {
|
||||
const chatMsg = document.createElement("p");
|
||||
chatMsg.innerText = (`${callFrame.participants()[event.fromId].user_name }: ${ event.data.message}`)
|
||||
document.getElementById("chatBoxTexts").appendChild(chatMsg)
|
||||
}
|
||||
|
||||
function addChatBox() {
|
||||
callFrame.on("app-message", (event) => addChatMsg(event))
|
||||
}
|
||||
|
||||
document.getElementById("chatBox").addEventListener("keyup", (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
document.getElementById("chatBoxButton").click();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("chatBoxButton").addEventListener("click", () => {
|
||||
let inputVal = document.getElementById("chatBoxInput").value;
|
||||
callFrame.sendAppMessage({ message: inputVal }, '*');
|
||||
const chatMsg = document.createElement("p");
|
||||
chatMsg.innerText = (`${callFrame.participants().local.user_name }: ${ inputVal }`);
|
||||
document.getElementById("chatBoxTexts").appendChild(chatMsg);
|
||||
document.getElementById("chatBoxInput").value = "";
|
||||
})
|
||||
Loading…
Reference in New Issue