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