Henry-Hiles/Video-Chat
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fullscreen and leave call added

Browse source
This commit is contained in:
Henry Hiles 2022-06-07 13:47:45 -04:00
parent 0eab4c62ac
commit bc319412bc
5 changed files with 73 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

16
public/scripts/utils.js
View file

@ -72,9 +72,16 @@ export const addVideoStream = (videoContainer, username, stream, isYours) => {
video.srcObject = stream video.srcObject = stream
if (CSS.supports("::-webkit-media-controls-panel")) if (CSS.supports("::-webkit-media-controls-panel"))
video.controls = "controls" 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) { if (isYours) {
video.muted = true
videoContainer.classList.add("your-video") videoContainer.classList.add("your-video")
videos.append(videoContainer) videos.append(videoContainer)
return dragElement(videoContainer) return dragElement(videoContainer)
@ -85,6 +92,11 @@ export const addVideoStream = (videoContainer, username, stream, isYours) => {
videos.append(videoContainer) videos.append(videoContainer)
} }
export const toggleFullscreen = () =>
document.fullscreenElement
? document?.exitFullscreen?.()
: document.documentElement?.requestFullscreen?.()
export const showNoVideoPrompt = () => export const showNoVideoPrompt = () =>
document.querySelector("#novideo").classList.add("show") document.querySelector("#novideo").classList.add("show")

12
public/scripts/video.js
View file

@ -1,4 +1,9 @@
import { addVideoStream, connectToNewUser, showNoVideoPrompt } from "./utils.js" import {
addVideoStream,
connectToNewUser,
showNoVideoPrompt,
toggleFullscreen,
} from "./utils.js"
const socket = io("/") const socket = io("/")
const myPeer = new Peer() const myPeer = new Peer()
const template = document.querySelector("#video-template") const template = document.querySelector("#video-template")
@ -8,6 +13,11 @@ myPeer.on("open", async (id) => {
while (!localStorage.getItem("name")) { while (!localStorage.getItem("name")) {
await new Promise((resolve) => setTimeout(resolve, 2000)) await new Promise((resolve) => setTimeout(resolve, 2000))
} }
document
.querySelector("#fullscreen")
.addEventListener("click", toggleFullscreen)
const yourName = localStorage.getItem("name") const yourName = localStorage.getItem("name")
const stream = await navigator.mediaDevices.getUserMedia({ const stream = await navigator.mediaDevices.getUserMedia({

29
public/style.css
View file

@ -105,7 +105,8 @@ video::-webkit-media-controls-current-time-display {
display: none; display: none;
} }
button { button,
#stop-call {
border: none; border: none;
border-radius: 2em; border-radius: 2em;
color: #f5f0f0; color: #f5f0f0;
@ -115,6 +116,17 @@ button {
text-decoration: none; text-decoration: none;
} }
#stop-call:hover {
color: #ff0000;
}
#stop-call {
margin-right: 5px;
margin-top: 2px;
color: #cf2f2f;
text-decoration: underline;
}
.button-primary { .button-primary {
background-color: var(--primary); background-color: var(--primary);
} }
@ -291,7 +303,8 @@ hr {
} }
#login, #login,
#novideo { #novideo,
#deniedautoplay {
background-color: var(--primary); background-color: var(--primary);
color: white; color: white;
display: flex; display: flex;
@ -304,24 +317,26 @@ hr {
width: 100vw; width: 100vw;
} }
#novideo:not(.show), :is(#novideo, #deniedautoplay):not(.show) {
#login.done {
display: none; display: none;
} }
#novideo p { :is(#novideo, #deniedautoplay) p {
font-size: 1.3em; font-size: 1.3em;
margin: 10px auto; margin: 10px auto;
} }
#novideo * { :is(#novideo, #deniedautoplay, #login) * {
text-align: center; text-align: center;
} }
#novideo a { :is(#novideo, #deniedautoplay) a {
text-decoration: underline; text-decoration: underline;
} }
.stop-call {
}
:is(textarea, input[type="text"]) { :is(textarea, input[type="text"]) {
border: none; border: none;
color: white; color: white;

2
views/login.ejs
View file

@ -11,7 +11,7 @@
</head> </head>
<body> <body>
<div id="login"> <div id="login">
<h1 class="large-header">Choose a name</h1> <h1 class="medium-header">Choose a name</h1>
<div> <div>
<input id="name-input" type="text" placeholder="Username" /> <input id="name-input" type="text" placeholder="Username" />
<button class="button-circle" id="name"> <button class="button-circle" id="name">

25
views/room.ejs
View file

@ -34,8 +34,19 @@
</p> </p>
</div> </div>
</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> <main><div id="videos"></div></main>
<div id="options" class="card"> <div id="options" class="card">
<a href="/" id="stop-call">Leave Call</a>
<div id="change-name"> <div id="change-name">
<span id="name-display"></span> <span id="name-display"></span>
<button class="button-circle"> <button class="button-circle">
@ -67,6 +78,20 @@
/> />
</svg> </svg>
</button> </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>
<div id="popup" class="dismissed"> <div id="popup" class="dismissed">