Some nice changes like a better grid that is more responsive.

public/scripts/login.js

@@ -1,29 +1,34 @@
-const socket = io("/")
-const login = document.querySelector("#login")
 const nameButton = document.querySelector("#name")
 const nameInput = document.querySelector("#name-input")
 const nameDisplay = document.querySelector("#name-display")
 
+const loginURL = new URL("login", window.location.origin)
+try {
+    loginURL.searchParams.append("roomId", ROOM_ID)
+} catch (error) {
+    if (!error instanceof ReferenceError) throw error
+}
+
 document
     .querySelector("#change-name")
-    .addEventListener("click", () => login.classList.remove("done"))
+    ?.addEventListener("click", () => (window.location = loginURL))
 
 const yourName = localStorage.getItem("name")
 
-if (yourName) nameDisplay.innerText = yourName
-else login.classList.remove("done")
+if (!yourName && window.location.pathname != "/login")
+    window.location = loginURL
+if (yourName && nameDisplay) nameDisplay.innerText = yourName
 
 const validate = () => {
     if (!nameInput.value) return (nameInput.required = true)
-    document.querySelector("#login").classList.add("done")
     localStorage.setItem("name", nameInput.value)
-    nameDisplay.innerText = nameInput.value
-    socket.emit("name-change", nameInput.value)
+
+    window.location.href =
+        new URLSearchParams(window.location.search).get("roomId") || "/"
 }
 
-if (nameButton) nameButton.addEventListener("click", validate)
-if (nameInput)
-    nameInput.addEventListener(
-        "keydown",
-        (event) => event.keyCode == "13" && validate()
-    )
+nameButton?.addEventListener?.("click", validate)
+nameInput?.addEventListener?.(
+    "keydown",
+    (event) => event.keyCode == "13" && validate()
+)

public/scripts/utils.js

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

public/scripts/video.js

@@ -2,10 +2,14 @@ import { addVideoStream, connectToNewUser, showNoVideoPrompt } from "./utils.js"
 const socket = io("/")
 const myPeer = new Peer()
 const template = document.querySelector("#video-template")
-const yourName = localStorage.getItem("name")
 
 myPeer.on("open", async (id) => {
     try {
+        while (!localStorage.getItem("name")) {
+            await new Promise((resolve) => setTimeout(resolve, 2000))
+        }
+        const yourName = localStorage.getItem("name")
+
         const stream = await navigator.mediaDevices.getUserMedia({
             video: true,
             audio: true,
@@ -28,13 +32,7 @@ myPeer.on("open", async (id) => {
             connectToNewUser(userId, username, stream, myPeer)
         )
     } catch (error) {
-        if (
-            error.name == "NotAllowedError" ||
-            error.name == "NotFoundError" ||
-            error.name == "PermissionDeniedError" ||
-            error.name == "DevicesNotFoundError"
-        )
-            return showNoVideoPrompt()
+        if (error instanceof DOMException) return showNoVideoPrompt()
 
         throw error
     }

public/style.css

@@ -21,6 +21,7 @@ body {
     height: 100vh;
     grid-auto-rows: 100vh;
     display: grid;
+    overflow: hidden;
 }
 
 #go {
@@ -41,19 +42,27 @@ main {
     background-color: var(--secondary);
 }
 
+@media (min-width: 800px) {
+    #videos {
+        grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
+    }
+}
+
 #videos {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
     grid-template-rows: repeat(auto-fit, minmax(33%, 1fr));
     color: white;
-    max-height: 100vh;
+    height: 100vh;
+    width: 100vw;
     background-color: var(--secondary);
     gap: 2px;
 }
 
 video {
     width: 100%;
+    height: 100%;
     max-height: 100vh;
+    object-fit: cover;
 }
 
 .your-video {
@@ -72,11 +81,12 @@ video {
 }
 
 .your-video .resizer {
-    width: 10px;
-    height: 10px;
+    width: 15px;
+    height: 15px;
     background: var(--primary);
     position: absolute;
     right: 0;
+    border-radius: 5px;
     bottom: 0;
     cursor: se-resize;
 }