Added absolutely positioned view of self.

public/script.js

@@ -5,6 +5,60 @@ const myVideo = document.createElement("video")
 
 myVideo.muted = true
 
+const dragElement = (element) => {
+    let startX, startY, startWidth, startHeight
+
+    const doDrag = (event) =>
+        (element.style.width = startWidth + event.clientX - startX + "px")
+
+    const initDrag = (event) => {
+        startX = event.clientX
+        startY = event.clientY
+        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,
+        pos3 = 0,
+        pos4 = 0
+
+    const elementDrag = (event) => {
+        pos1 = pos3 - event.clientX
+        pos2 = pos4 - event.clientY
+        pos3 = event.clientX
+        pos4 = event.clientY
+        element.style.top = `${element.offsetTop - pos2}px`
+        element.style.left = `${element.offsetLeft - pos1}px`
+        event.preventDefault()
+    }
+
+    const dragMouseDown = (event) => {
+        if (event.target == resizer) return false
+        pos3 = event.clientX
+        pos4 = event.clientY
+        document.addEventListener("mousemove", elementDrag)
+        document.addEventListener("mouseup", () => {
+            document.removeEventListener("mouseup", this)
+            document.removeEventListener("mousemove", elementDrag)
+        })
+        event.preventDefault()
+    }
+
+    element.addEventListener("mousedown", dragMouseDown)
+}
+
 const connectToNewUser = (userId, stream) => {
     const call = myPeer.call(userId, stream)
     const video = document.createElement("video")
@@ -16,9 +70,18 @@ const connectToNewUser = (userId, stream) => {
     call.on("close", () => video.remove())
 }
 
-const addVideoStream = (video, stream) => {
+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)
 }
 
@@ -28,12 +91,10 @@ navigator.mediaDevices
         audio: true,
     })
     .then((stream) => {
-        addVideoStream(myVideo, stream)
+        addVideoStream(myVideo, stream, true)
         myPeer.on("call", (call) => {
             call.answer(stream)
             const video = document.createElement("video")
-            // const fullscreen = document.createElement("button")
-            // fullscreen.dataset.id =
             call.on("close", () => video.remove())
             call.on("stream", (userVideoStream) =>
                 addVideoStream(video, userVideoStream)

public/style.css

@@ -18,12 +18,12 @@ body {
     scroll-behavior: smooth;
     width: 100%;
     height: 100vh;
-    grid-auto-rows: 10vh 74vh 16vh;
+    grid-auto-rows: 100vh;
     display: grid;
+    overflow: hidden;
 }
 
-nav,
+nav {
-footer {
     background-color: var(--secondary);
     color: white;
     display: flex;
@@ -49,7 +49,7 @@ a {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
     grid-template-rows: repeat(auto-fit, minmax(33%, 1fr));
-    background-color: var(--primary);
+    background-color: var(--secondary);
     color: white;
     padding: 4px 0 4px 0;
     gap: 2px;
@@ -60,6 +60,45 @@ video {
     max-height: 100%;
 }
 
+.your-video {
+    position: absolute;
+    width: 250px;
+    cursor: grab;
+    z-index: 1;
+}
+
+.your-video:active {
+    cursor: grabbing;
+}
+
+.your-video video {
+    border-radius: 2px;
+}
+
+.your-video .resizer {
+    width: 10px;
+    height: 10px;
+    background: var(--primary);
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    cursor: se-resize;
+}
+
+video::-webkit-media-controls-panel {
+    background: none;
+}
+
+video::-webkit-media-controls-play-button,
+video::-webkit-media-controls-timeline,
+video::-webkit-media-controls-volume-control-container,
+video::-webkit-media-controls-mute-button,
+video::-webkit-media-controls-volume-slider-container,
+video::-webkit-media-controls-volume-slider,
+video::-webkit-media-controls-current-time-display {
+    display: none;
+}
+
 button {
     border: none;
     border-radius: 2em;

views/room.ejs

@@ -17,8 +17,6 @@
         <title>Document</title>
     </head>
     <body>
-        <nav><a href="#">Home</a></nav>
         <div id="videos"></div>
-        <footer></footer>
     </body>
 </html>