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

@@ -0,0 +1,92 @@
+const dragElement = (element) => {
+    let startX, startY, startWidth, startHeight
+
+    const doDrag = (event) =>
+        (element.style.width =
+            startWidth +
+            (event.clientX || event.touches[0].clientX) -
+            startX +
+            "px")
+
+    let pos1 = 0,
+        pos2 = 0,
+        pos3 = 0,
+        pos4 = 0
+
+    const elementDrag = (event) => {
+        pos1 = pos3 - (event.clientX || event.touches[0].clientX)
+        pos2 = pos4 - (event.clientY || event.touches[0].clientY)
+        pos3 = event.clientX || event.touches[0].clientX
+        pos4 = event.clientY || event.touches[0].clientY
+        element.style.top = `${element.offsetTop - pos2}px`
+        element.style.left = `${element.offsetLeft - pos1}px`
+    }
+
+    const removeFunctions = (resize) => {
+        document.removeEventListener("mousemove", resize ? doDrag : elementDrag)
+        document.removeEventListener("mouseup", this)
+        document.removeEventListener("touchmove", resize ? doDrag : elementDrag)
+        document.removeEventListener("touchend", this)
+    }
+
+    const initDrag = (event) => {
+        startX = event.clientX || event.touches[0].clientX
+        startY = event.clientY || event.touches[0].clientY
+        startWidth = element.clientWidth
+        startHeight = element.clientHeight
+
+        document.addEventListener("mousemove", doDrag)
+        document.addEventListener("touchmove", doDrag)
+        document.addEventListener("touchend", () => removeFunctions(true))
+        document.addEventListener("mouseup", () => removeFunctions(true))
+    }
+
+    const resizer = document.createElement("div")
+    resizer.className = "resizer"
+    element.appendChild(resizer)
+    resizer.addEventListener("mousedown", initDrag)
+    resizer.addEventListener("touchstart", initDrag)
+
+    const dragMouseDown = (event) => {
+        if (event.target == resizer) return
+
+        pos3 = event.clientX || event.touches[0].clientX
+        pos4 = event.clientY || event.touches[0].clientY
+        document.addEventListener("mousemove", elementDrag)
+        document.addEventListener("touchmove", elementDrag)
+        document.addEventListener("touchend", () => removeFunctions())
+        document.addEventListener("mouseup", () => removeFunctions())
+    }
+
+    element.addEventListener("mousedown", dragMouseDown)
+    element.addEventListener("touchstart", dragMouseDown)
+}
+
+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 = template.content.firstElementChild.cloneNode(true)
+
+    call.on("stream", (userVideoStream) =>
+        addVideoStream(video, username, userVideoStream)
+    )
+
+    call.on("close", () => video.remove())
+}

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()
+})