Fullscreen and leave call added

public/scripts/utils.js

@@ -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")
 

public/scripts/video.js

@@ -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({

public/style.css

@@ -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;