Bit of a rewrite

package.json

@@ -1,21 +1,17 @@
 {
     "name": "zoom-clone",
     "version": "1.0.0",
-    "description": "",
+    "main": "server.js",
-    "main": "index.js",
+    "author": "Henry Hiles",
-    "scripts": {
+    "type": "module",
-        "devStart": "nodemon server.js"
-    },
-    "keywords": [],
-    "author": "",
     "license": "ISC",
     "dependencies": {
         "ejs": "^3.1.6",
         "express": "^4.17.2",
-        "socket.io": "^2.4.1",
+        "socket.io": "^4.5.1",
         "uuid": "^8.3.2"
     },
     "devDependencies": {
-        "nodemon": "^2.0.15"
+        "@types/socket.io": "^3.0.2"
     }
 }

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) => {
+export const addVideoStream = (videoContainer, username, stream, isYours) => {
-    console.log("somebody joined", stream, userId)
+    const videos = document.querySelector("#videos")
-    const call = myPeer.call(userId, stream)
-    const video = document.createElement("video")
 
-    call.on("stream", (userVideoStream) =>
+    const video = videoContainer.querySelector("video")
-        addVideoStream(video, 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")
+        video.muted = true
-        container.classList.add("your-video")
+        videoContainer.classList.add("your-video")
-        container.append(video)
+        videos.append(videoContainer)
-        videos.append(container)
+        return dragElement(videoContainer)
-        return dragElement(container)
     }
 
-    video.controls = "controls"
+    videoContainer.querySelector(".name").innerText = username
-    videos.append(video)
+
+    videos.append(videoContainer)
 }
 
-document
+export const connectToNewUser = (userId, username, stream) => {
-    .querySelector("#share")
+    const call = myPeer.call(userId, stream)
-    .addEventListener("click", () => popup.classList.remove("dismissed"))
+    const video = template.content.firstElementChild.cloneNode(true)
 
-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)
+        addVideoStream(video, username, userVideoStream)
-                )
-            })
-
-            socket.on("user-connected", (userId) =>
-                connectToNewUser(userId, stream)
-            )
-            socket.emit("join-room", ROOM_ID, id)
-        })
     )
 
-socket.on("user-disconnected", (userId) => {
+    call.on("close", () => video.remove())
-    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 {
+#go {
-    background-color: var(--secondary);
+    margin: 0;
-    color: white;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    align-items: center;
+    justify-content: center;
-    max-width: 100vw;
-    padding: 20px;
-}
-
-nav a {
-    font-size: 1.5em;
 }
 
 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;
+}

server.js

@@ -1,23 +1,35 @@
-const express = require("express")
+import express from "express"
+import http from "http"
+import { Server } from "socket.io"
 const app = express()
-const server = require("http").Server(app)
+const server = http.Server(app)
-const io = require("socket.io")(server)
+const io = new Server(server)
-const { v4: uuidV4 } = require("uuid")
-
 app.set("view engine", "ejs")
 app.use(express.static("public"))
 
-app.get("/", (_, res) => res.redirect(`/${uuidV4()}`))
+app.get("/", (_, res) => res.render("index"))
 
 app.get("/:room", (req, res) => res.render("room", { roomId: req.params.room }))
 
+const users = {}
+
 io.on("connection", (socket) =>
-    socket.on("join-room", (roomId, userId) => {
+    socket.on("join-room", (roomId, userId, userName) => {
+        users[userId] = userName
         socket.join(roomId)
-        socket.to(roomId).broadcast.emit("user-connected", userId)
+        socket.to(roomId).emit("user-connected", userId, userName)
 
         socket.on("disconnect", () => {
-            socket.to(roomId).broadcast.emit("user-disconnected", userId)
+            delete users[userId]
+            socket.to(roomId).emit("user-disconnected", userId)
+        })
+
+        socket.on("get-username", (userId, callback) => callback(users[userId]))
+
+        socket.on("name-change", (name) => {
+            users[userId] = name
+
+            socket.to(roomId).emit("name-changed", userId)
         })
     })
 )

views/index.ejs

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <link rel="stylesheet" href="style.css" />
+        <script src="/socket.io/socket.io.js" defer></script>
+        <script src="scripts/login.js" defer></script>
+        <script src="scripts/goToRoom.js" type="module" defer></script>
+        <title>Video Chat</title>
+    </head>
+    <body>
+        <div id="login" class="done">
+            <h1 class="large-header">Login</h1>
+            <div>
+                <input id="name-input" type="text" placeholder="Username" />
+                <button class="button-circle" id="name">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        class="bi bi-pencil"
+                        viewBox="0 0 16 16"
+                    >
+                        <path
+                            d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
+                        />
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <div id="options" class="card">
+            <div id="change-name">
+                <span id="name-display"></span>
+                <button class="button-circle">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        class="bi bi-pencil"
+                        viewBox="0 0 16 16"
+                    >
+                        <path
+                            d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
+                        />
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <main>
+            <div class="card jumbo">
+                <h1 class="medium-header">Hi there</h1>
+                <hr />
+                <p>
+                    Please create a new room, or join an existing room using the
+                    form below. If a room doesn't exist it will be created.<br />
+                    If a room name is not specified a random one will be
+                    selected
+                </p>
+
+                <div class="input-group full-border">
+                    <input type="text" id="go-input" class="input-field" />
+                    <a class="input-item button" id="go">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            fill="currentColor"
+                            class="bi bi-search"
+                            viewBox="0 0 16 16"
+                        >
+                            <path
+                                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
+                            />
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </main>
+    </body>
+</html>

views/room.ejs

@@ -12,12 +12,52 @@
             src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"
         ></script>
         <script src="/socket.io/socket.io.js" defer></script>
-        <script src="script.js" defer></script>
+        <script src="scripts/login.js" defer></script>
+        <script src="scripts/share.js" defer></script>
+        <script src="scripts/video.js" type="module" defer></script>
         <link rel="stylesheet" href="style.css" />
-        <title>Document</title>
+        <title>Video Chat</title>
     </head>
     <body>
-        <div id="videos"></div>
+        <div id="login" class="done">
+            <h1 class="large-header">Login</h1>
+            <div>
+                <input id="name-input" type="text" placeholder="Username" />
+                <button class="button-circle" id="name">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        class="bi bi-pencil"
+                        viewBox="0 0 16 16"
+                    >
+                        <path
+                            d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
+                        />
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <main><div id="videos"></div></main>
+        <div id="options" class="card">
+            <div id="change-name">
+                <span id="name-display"></span>
+                <button class="button-circle">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        class="bi bi-pencil"
+                        viewBox="0 0 16 16"
+                    >
+                        <path
+                            d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
+                        />
+                    </svg>
+                </button>
+            </div>
             <button id="share">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -32,9 +72,12 @@
                     />
                 </svg>
             </button>
+        </div>
+
         <div id="popup" class="dismissed">
             <h1 class="medium-header">Share</h1>
             <hr />
+
             <div class="input-group">
                 <input type="text" id="href" readonly class="input-field" />
                 <button class="input-item" id="copy">Copy</button>
@@ -44,5 +87,12 @@
 
             <button id="close">&#10005;</button>
         </div>
+
+        <template id="video-template">
+            <div class="video">
+                <span class="name card"></span>
+                <video></video>
+            </div>
+        </template>
     </body>
 </html>