Mobile fixes

public/script.js

@@ -11,25 +11,11 @@ const dragElement = (element) => {
     let startX, startY, startWidth, startHeight
 
     const doDrag = (event) =>
-        (element.style.width = startWidth + event.clientX - startX + "px")
+        (element.style.width =
-
+            startWidth +
-    const initDrag = (event) => {
+            (event.clientX || event.touches[0].clientX) -
-        startX = event.clientX
+            startX +
-        startY = event.clientY
+            "px")
-        startWidth = element.clientWidth
-        startHeight = element.clientHeight
-
-        document.addEventListener("mousemove", doDrag)
-        document.addEventListener("mouseup", () => {
-            document.removeEventListener("mousemove", doDrag)
-            document.removeEventListener("mouseup", this)
-        })
-    }
-
-    const resizer = document.createElement("div")
-    resizer.className = "resizer"
-    element.appendChild(resizer)
-    resizer.addEventListener("mousedown", initDrag)
 
     let pos1 = 0,
         pos2 = 0,
@@ -37,28 +23,52 @@ const dragElement = (element) => {
         pos4 = 0
 
     const elementDrag = (event) => {
-        pos1 = pos3 - event.clientX
+        pos1 = pos3 - (event.clientX || event.touches[0].clientX)
-        pos2 = pos4 - event.clientY
+        pos2 = pos4 - (event.clientY || event.touches[0].clientY)
-        pos3 = event.clientX
+        pos3 = event.clientX || event.touches[0].clientX
-        pos4 = event.clientY
+        pos4 = event.clientY || event.touches[0].clientY
         element.style.top = `${element.offsetTop - pos2}px`
         element.style.left = `${element.offsetLeft - pos1}px`
-        event.preventDefault()
     }
 
+    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 false
+        if (event.target == resizer) return
-        pos3 = event.clientX
+
-        pos4 = event.clientY
+        pos3 = event.clientX || event.touches[0].clientX
+        pos4 = event.clientY || event.touches[0].clientY
         document.addEventListener("mousemove", elementDrag)
-        document.addEventListener("mouseup", () => {
+        document.addEventListener("touchmove", elementDrag)
-            document.removeEventListener("mouseup", this)
+        document.addEventListener("touchend", () => removeFunctions())
-            document.removeEventListener("mousemove", elementDrag)
+        document.addEventListener("mouseup", () => removeFunctions())
-        })
-        event.preventDefault()
     }
 
     element.addEventListener("mousedown", dragMouseDown)
+    element.addEventListener("touchstart", dragMouseDown)
 }
 
 const connectToNewUser = (userId, stream) => {

public/style.css

@@ -154,12 +154,14 @@ video.your-video {
     left: 50%;
     border-radius: 0.5em;
     transform: translate(-50%, -50%);
+    max-width: 95%;
     width: 500px;
     transition: 0.3s opacity ease-in-out;
 }
 
 #popup.dismissed {
     opacity: 0;
+    display: none;
 }
 
 #popup hr {