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