From bc319412bcb6035a47bf48da90ba46c7e989f514 Mon Sep 17 00:00:00 2001
From: Henry Hiles <henry@henryhiles.com>
Date: Tue, 7 Jun 2022 13:47:45 -0400
Subject: [PATCH] Fullscreen and leave call added

---
 public/scripts/utils.js | 16 ++++++++++++++--
 public/scripts/video.js | 12 +++++++++++-
 public/style.css        | 29 ++++++++++++++++++++++-------
 views/login.ejs         |  2 +-
 views/room.ejs          | 25 +++++++++++++++++++++++++
 5 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/public/scripts/utils.js b/public/scripts/utils.js
index e15f1bb..b78132b 100644
--- a/public/scripts/utils.js
+++ b/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")
 
diff --git a/public/scripts/video.js b/public/scripts/video.js
index 6bcee53..5b7cd21 100644
--- a/public/scripts/video.js
+++ b/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({
diff --git a/public/style.css b/public/style.css
index bad9b84..deb58b2 100644
--- a/public/style.css
+++ b/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;
diff --git a/views/login.ejs b/views/login.ejs
index 85b881b..bf60a4e 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -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">
diff --git a/views/room.ejs b/views/room.ejs
index ae382a3..3c1acb0 100644
--- a/views/room.ejs
+++ b/views/room.ejs
@@ -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">