Fullscreen and leave call added
This commit is contained in:
parent
0eab4c62ac
commit
bc319412bc
5 changed files with 73 additions and 11 deletions
|
|
@ -72,9 +72,16 @@ export const addVideoStream = (videoContainer, username, stream, isYours) => {
|
|||
video.srcObject = stream
|
||||
if (CSS.supports("::-webkit-media-controls-panel"))
|
||||
video.controls = "controls"
|
||||
video.addEventListener("loadedmetadata", () => video.play())
|
||||
video.addEventListener("loadedmetadata", async () => {
|
||||
try {
|
||||
await video.play()
|
||||
} catch (error) {
|
||||
if (error instanceof DOMException)
|
||||
document.querySelector("#deniedautoplay").classList.add("show")
|
||||
else throw error
|
||||
}
|
||||
})
|
||||
if (isYours) {
|
||||
video.muted = true
|
||||
videoContainer.classList.add("your-video")
|
||||
videos.append(videoContainer)
|
||||
return dragElement(videoContainer)
|
||||
|
|
@ -85,6 +92,11 @@ export const addVideoStream = (videoContainer, username, stream, isYours) => {
|
|||
videos.append(videoContainer)
|
||||
}
|
||||
|
||||
export const toggleFullscreen = () =>
|
||||
document.fullscreenElement
|
||||
? document?.exitFullscreen?.()
|
||||
: document.documentElement?.requestFullscreen?.()
|
||||
|
||||
export const showNoVideoPrompt = () =>
|
||||
document.querySelector("#novideo").classList.add("show")
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
import { addVideoStream, connectToNewUser, showNoVideoPrompt } from "./utils.js"
|
||||
import {
|
||||
addVideoStream,
|
||||
connectToNewUser,
|
||||
showNoVideoPrompt,
|
||||
toggleFullscreen,
|
||||
} from "./utils.js"
|
||||
const socket = io("/")
|
||||
const myPeer = new Peer()
|
||||
const template = document.querySelector("#video-template")
|
||||
|
|
@ -8,6 +13,11 @@ myPeer.on("open", async (id) => {
|
|||
while (!localStorage.getItem("name")) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000))
|
||||
}
|
||||
|
||||
document
|
||||
.querySelector("#fullscreen")
|
||||
.addEventListener("click", toggleFullscreen)
|
||||
|
||||
const yourName = localStorage.getItem("name")
|
||||
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
|
|
|
|||
|
|
@ -105,7 +105,8 @@ video::-webkit-media-controls-current-time-display {
|
|||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
button,
|
||||
#stop-call {
|
||||
border: none;
|
||||
border-radius: 2em;
|
||||
color: #f5f0f0;
|
||||
|
|
@ -115,6 +116,17 @@ button {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
#stop-call:hover {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
#stop-call {
|
||||
margin-right: 5px;
|
||||
margin-top: 2px;
|
||||
color: #cf2f2f;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
|
@ -291,7 +303,8 @@ hr {
|
|||
}
|
||||
|
||||
#login,
|
||||
#novideo {
|
||||
#novideo,
|
||||
#deniedautoplay {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
display: flex;
|
||||
|
|
@ -304,24 +317,26 @@ hr {
|
|||
width: 100vw;
|
||||
}
|
||||
|
||||
#novideo:not(.show),
|
||||
#login.done {
|
||||
:is(#novideo, #deniedautoplay):not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#novideo p {
|
||||
:is(#novideo, #deniedautoplay) p {
|
||||
font-size: 1.3em;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
#novideo * {
|
||||
:is(#novideo, #deniedautoplay, #login) * {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#novideo a {
|
||||
:is(#novideo, #deniedautoplay) a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.stop-call {
|
||||
}
|
||||
|
||||
:is(textarea, input[type="text"]) {
|
||||
border: none;
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="login">
|
||||
<h1 class="large-header">Choose a name</h1>
|
||||
<h1 class="medium-header">Choose a name</h1>
|
||||
<div>
|
||||
<input id="name-input" type="text" placeholder="Username" />
|
||||
<button class="button-circle" id="name">
|
||||
|
|
|
|||
|
|
@ -34,8 +34,19 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="deniedautoplay">
|
||||
<h1 class="medium-header">Autoplay permission denied</h1>
|
||||
<div>
|
||||
<p>Please make sure this website has autoplay permission.</p>
|
||||
<p>
|
||||
Once you are done please
|
||||
<a href="javascript:window.location.reload()">reload</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<main><div id="videos"></div></main>
|
||||
<div id="options" class="card">
|
||||
<a href="/" id="stop-call">Leave Call</a>
|
||||
<div id="change-name">
|
||||
<span id="name-display"></span>
|
||||
<button class="button-circle">
|
||||
|
|
@ -67,6 +78,20 @@
|
|||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="fullscreen">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-fullscreen"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="popup" class="dismissed">
|
||||
|
|
|
|||
Reference in a new issue