Bit of a rewrite

public/scripts/goToRoom.js

@@ -0,0 +1,9 @@
+import { v4 as uuidv4 } from "https://jspm.dev/uuid"
+
+const input = document.querySelector("#go-input")
+const setHref = () =>
+    (document.querySelector("#go").href = input.value || uuidv4())
+
+setHref()
+
+input.addEventListener("keyup", setHref)

public/scripts/login.js

@@ -0,0 +1,23 @@
+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")
+
+document
+    .querySelector("#change-name")
+    .addEventListener("click", () => login.classList.remove("done"))
+
+const yourName = localStorage.getItem("name")
+
+if (yourName) nameDisplay.innerText = yourName
+else login.classList.remove("done")
+
+if (nameButton)
+    nameButton.addEventListener("click", () => {
+        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)
+    })

public/scripts/share.js

@@ -0,0 +1,19 @@
+const popup = document.querySelector("#popup")
+const hrefInput = document.querySelector("#href")
+
+document
+    .querySelector("#share")
+    .addEventListener("click", () => popup.classList.remove("dismissed"))
+
+hrefInput.value = window.location.href
+
+document.querySelector("#copy").addEventListener("click", () => {
+    hrefInput.focus()
+    hrefInput.select()
+    navigator.clipboard.writeText(hrefInput.value)
+    document.querySelector("#is-copied").classList.add("copied")
+})
+
+document
+    .querySelector("#close")
+    .addEventListener("click", () => popup.classList.add("dismissed"))

public/scripts/utils.js

@@ -1,12 +1,3 @@
-const socket = io("/")
-const videos = document.getElementById("videos")
-const myPeer = new Peer()
-const popup = document.querySelector("#popup")
-const hrefInput = document.querySelector("#href")
-const myVideo = document.createElement("video")
-
-myVideo.muted = true
-
 const dragElement = (element) => {
     let startX, startY, startWidth, startHeight
 
@@ -71,77 +62,31 @@ const dragElement = (element) => {
     element.addEventListener("touchstart", dragMouseDown)
 }
 
-const connectToNewUser = (userId, stream) => {
-    console.log("somebody joined", stream, userId)
+export const addVideoStream = (videoContainer, username, stream, isYours) => {
+    const videos = document.querySelector("#videos")
+
+    const video = videoContainer.querySelector("video")
+    video.srcObject = stream
+    video.addEventListener("loadedmetadata", () => video.play())
+    if (isYours) {
+        video.muted = true
+        videoContainer.classList.add("your-video")
+        videos.append(videoContainer)
+        return dragElement(videoContainer)
+    }
+
+    videoContainer.querySelector(".name").innerText = username
+
+    videos.append(videoContainer)
+}
+
+export const connectToNewUser = (userId, username, stream) => {
     const call = myPeer.call(userId, stream)
-    const video = document.createElement("video")
+    const video = template.content.firstElementChild.cloneNode(true)
 
     call.on("stream", (userVideoStream) =>
-        addVideoStream(video, userVideoStream)
+        addVideoStream(video, username, userVideoStream)
     )
 
     call.on("close", () => video.remove())
 }
-
-const addVideoStream = (video, stream, isYours) => {
-    video.srcObject = stream
-    video.addEventListener("loadedmetadata", () => video.play())
-    if (isYours) {
-        const container = document.createElement("div")
-        container.classList.add("your-video")
-        container.append(video)
-        videos.append(container)
-        return dragElement(container)
-    }
-
-    video.controls = "controls"
-    videos.append(video)
-}
-
-document
-    .querySelector("#share")
-    .addEventListener("click", () => popup.classList.remove("dismissed"))
-
-hrefInput.value = window.location.href
-
-document.querySelector("#copy").addEventListener("click", () => {
-    hrefInput.focus()
-    hrefInput.select()
-    navigator.clipboard.writeText(hrefInput.value)
-    document.querySelector("#is-copied").classList.add("copied")
-})
-
-document
-    .querySelector("#close")
-    .addEventListener("click", () => popup.classList.add("dismissed"))
-
-myPeer.on("open", (id) =>
-    navigator.mediaDevices
-        .getUserMedia({
-            video: true,
-            audio: true,
-        })
-        .then((stream) => {
-            console.log("You connected")
-            addVideoStream(myVideo, stream, true)
-            myPeer.on("call", (call) => {
-                call.answer(stream)
-                const video = document.createElement("video")
-                call.on("close", () => video.remove())
-                call.on("stream", (userVideoStream) =>
-                    addVideoStream(video, userVideoStream)
-                )
-            })
-
-            socket.on("user-connected", (userId) =>
-                connectToNewUser(userId, stream)
-            )
-            socket.emit("join-room", ROOM_ID, id)
-        })
-)
-
-socket.on("user-disconnected", (userId) => {
-    const call = myPeer.connections[userId]
-    if (call) call[0].close()
-    console.log("somebody left", userId)
-})

public/scripts/video.js

@@ -0,0 +1,35 @@
+import { addVideoStream, connectToNewUser } 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) => {
+    const stream = await navigator.mediaDevices.getUserMedia({
+        video: true,
+        audio: true,
+    })
+
+    const myVideo = template.content.firstElementChild.cloneNode(true)
+    addVideoStream(myVideo, yourName, stream, true)
+    myPeer.on("call", (call) => {
+        call.answer(stream)
+        const video = template.content.firstElementChild.cloneNode(true)
+        call.on("close", () => video.remove())
+        call.on("stream", (userVideoStream) =>
+            socket.emit("get-username", call.peer, (username) =>
+                addVideoStream(video, username, userVideoStream)
+            )
+        )
+    })
+
+    socket.on("user-connected", (userId, username) =>
+        connectToNewUser(userId, username, stream)
+    )
+    socket.emit("join-room", ROOM_ID, id, yourName)
+})
+
+socket.on("user-disconnected", (userId) => {
+    const call = myPeer.connections[userId]
+    if (call) call[0].close()
+})

public/style.css

@@ -1,6 +1,7 @@
 :root {
     --primary: #14bbaa;
     --secondary: #2c3c4c;
+    --input-border: #858282;
 }
 
 *,
@@ -23,18 +24,11 @@ body {
     overflow: hidden;
 }
 
-nav {
-    background-color: var(--secondary);
-    color: white;
+#go {
+    margin: 0;
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    max-width: 100vw;
-    padding: 20px;
-}
-
-nav a {
-    font-size: 1.5em;
+    flex-direction: column;
+    justify-content: center;
 }
 
 a {
@@ -44,12 +38,14 @@ a {
     color: white;
     grid-template-columns: 1fr 500px;
 }
+main {
+    background-color: var(--secondary);
+}
 
 #videos {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
     grid-template-rows: repeat(auto-fit, minmax(33%, 1fr));
-    background-color: var(--secondary);
     color: white;
     padding: 4px 0 4px 0;
     gap: 2px;
@@ -105,7 +101,7 @@ button {
     color: #f5f0f0;
     background-color: transparent;
     font-size: 1em;
-    padding: 0.7rem 1.6rem;
+    padding: 10px 12px;
     text-decoration: none;
 }
 
@@ -128,7 +124,7 @@ button:not(:disabled) {
     cursor: pointer;
 }
 
-button:is(:disabled, :hover) {
+:is(button, .button):is(:disabled, :hover) {
     filter: brightness(0.9);
 }
 
@@ -136,11 +132,52 @@ video.your-video {
     display: none;
 }
 
-#share {
+#options {
     position: absolute;
     top: 10px;
-    color: white;
     right: 10px;
+    display: flex;
+}
+
+.card {
+    background-color: #00000050;
+    color: white;
+    padding: 0 10px;
+    z-index: 2;
+    border-radius: 10px;
+}
+
+.jumbo {
+    margin: 20px auto;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px 40px;
+}
+
+.jumbo p {
+    text-align: center;
+}
+
+hr {
+    width: 100%;
+}
+
+.video .name {
+    position: absolute;
+    bottom: 5px;
+    left: 10px;
+    display: flex;
+    padding: 10px;
+}
+
+.video.your-video .name {
+    display: none;
+}
+
+.video:not(.your-video) {
+    position: relative;
 }
 
 #popup {
@@ -165,11 +202,6 @@ video.your-video {
     display: none;
 }
 
-#popup hr {
-    width: 90%;
-    border-color: var(--secondary);
-}
-
 #close {
     color: #b0b0b0;
     position: absolute;
@@ -182,7 +214,24 @@ video.your-video {
     display: flex;
 }
 
+.medium-header {
+    display: flex;
+    font-size: 4rem;
+    font-weight: 250;
+    line-height: 1.2;
+    margin: 10px;
+}
+
+.large-header {
+    display: flex;
+    font-size: 5rem;
+    font-weight: 300;
+    line-height: 1.2;
+    margin: 10px;
+}
+
 .input-field {
+    border-left: 1px solid var(--input-border) !important;
     flex: 1;
 }
 
@@ -197,10 +246,13 @@ video.your-video {
     background-color: var(--secondary);
     font: inherit;
     font-weight: normal;
+    border-right: 1px solid var(--input-border) !important;
 }
 
 .input-field,
 .input-item {
+    border-top: 1px solid var(--input-border) !important;
+    border-bottom: 1px solid var(--input-border) !important;
     border: 1px solid #93806c40;
     padding: 0.5em 0.75em;
 }
@@ -225,3 +277,44 @@ video.your-video {
     color: #8f8d8d;
     padding: 20px;
 }
+
+@media (max-width: 500px) {
+    #login input {
+        max-width: 60vw;
+    }
+}
+
+#login {
+    background-color: var(--primary);
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+}
+
+#login.done {
+    display: none;
+}
+
+#login:not(.done) + div,
+#login:not(.done) + div + div {
+    display: none !important;
+}
+
+:is(textarea, input[type="text"]) {
+    border: none;
+    color: white;
+    background-color: transparent;
+    border-bottom: 0.05em solid white;
+    font-family: inherit;
+    font-size: 2rem;
+    max-width: 100%;
+    max-height: 90%;
+}
+
+:is(textarea, input[type="text"])::placeholder {
+    color: #dbcece;
+}