Some improvements

public/scripts/utils.js

@@ -70,7 +70,7 @@ export const addVideoStream = (videoContainer, username, stream, isYours) => {
 
     const video = videoContainer.querySelector("video")
     video.srcObject = stream
-    if (CSS.supports("::-webkit-media-controls-panel"))
+    if (CSS.supports("video::-webkit-media-controls-panel"))
         video.controls = "controls"
     video.addEventListener("loadedmetadata", async () => {
         if (isYours) {

public/scripts/video.js

@@ -42,6 +42,7 @@ myPeer.on("open", async (id) => {
             connectToNewUser(userId, username, stream, myPeer)
         )
     } catch (error) {
+        console.log(error)
         if (error instanceof DOMException) return showNoVideoPrompt()
 
         throw error

public/style.css

@@ -106,25 +106,24 @@ video::-webkit-media-controls-current-time-display {
 }
 
 button,
-#stop-call {
+.button {
     border: none;
     border-radius: 2em;
     color: #f5f0f0;
     background-color: transparent;
     font-size: 1em;
-    padding: 10px 12px;
     text-decoration: none;
 }
 
-#stop-call:hover {
+:is(button, .button):not(.icon) {
-    color: #ff0000;
+    padding: 8px 12px;
 }
 
 #stop-call {
-    margin-right: 5px;
+    display: flex;
-    margin-top: 2px;
+    justify-content: center;
-    color: #cf2f2f;
+    align-items: center;
-    text-decoration: underline;
+    background-color: #cf2f2f;
 }
 
 .button-primary {
@@ -150,14 +149,22 @@ video.your-video {
 #options {
     position: absolute;
     top: 10px;
+    align-items: center;
+    gap: 15px;
     right: 10px;
     display: flex;
 }
 
+#change-name {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
 .card {
     background-color: #00000050;
     color: white;
-    padding: 0 10px;
+    padding: 10px;
     z-index: 2;
     border-radius: 10px;
 }
@@ -182,11 +189,10 @@ hr {
 
 .video .name {
     position: absolute;
-    bottom: 2vw;
+    bottom: 10px;
-    left: 2vw;
+    left: 10px;
     display: flex;
-    font-size: 1.5vw;
+    font-size: 1em;
-    padding: 1vw;
 }
 
 .video.your-video .name {
@@ -334,9 +340,6 @@ hr {
     text-decoration: underline;
 }
 
-.stop-call {
-}
-
 :is(textarea, input[type="text"]) {
     border: none;
     color: white;

views/room.ejs

@@ -46,10 +46,10 @@
         </div>
         <main><div id="videos"></div></main>
         <div id="options" class="card">
-            <a href="/" id="stop-call">Leave Call</a>
+            <a href="/" id="stop-call" class="button">Leave Call</a>
             <div id="change-name">
                 <span id="name-display"></span>
-                <button class="button-circle">
+                <button class="button-circle icon">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="16"
@@ -64,7 +64,7 @@
                     </svg>
                 </button>
             </div>
-            <button id="share">
+            <button id="share" class="icon">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
@@ -78,7 +78,7 @@
                     />
                 </svg>
             </button>
-            <button id="fullscreen">
+            <button id="fullscreen" class="icon">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"