Add custom video player controls

1 files changed, 21 insertions, 10 deletions

diff --git a/client-web/source/resource/track.ts b/client-web/source/resource/track.ts
index 88fe2cc..878540b 100644
--- a/client-web/source/resource/track.ts
+++ b/client-web/source/resource/track.ts
@@ -119,23 +119,15 @@ function create_track_display(target: HTMLElement, stream: MediaStream, local: b
 
     media_el.srcObject = stream
     media_el.autoplay = true
-    media_el.controls = true
+    media_el.controls = !is_video
     media_el.ariaLabel = is_video ? PO.video_stream : PO.audio_stream
     media_el.addEventListener("pause", () => media_el.play())
 
     if (local) media_el.muted = true
 
-    target.querySelectorAll("video, audio, .preview").forEach(e => e.remove())
+    target.querySelectorAll("video, audio, .preview, .fullscreen").forEach(e => e.remove())
     target.prepend(media_el)
 
-    console.log(stream.getTracks());
-    const master = stream.getTracks()[0]
-    master.addEventListener("ended", () => {
-        // if (is_video) media_el.controls = false
-        // media_el.classList.add("media-freeze")
-        media_el.remove()
-    })
-
     if (is_video && PREFS.send_previews && local && preview_callback) preview_callback(media_el as HTMLVideoElement)
     if (is_audio && PREFS.audio_activity_threshold !== undefined) check_volume(stream, vol => {
         const active = vol > PREFS.audio_activity_threshold
@@ -144,6 +136,25 @@ function create_track_display(target: HTMLElement, stream: MediaStream, local: b
             else target.classList.remove("audio-active")
         }
     })
+    let fullscreen
+    if (is_video) {
+        fullscreen = e("button", { icon: "fullscreen", class: ["topright", "fullscreen"],
+        onclick() { 
+            if (document.fullscreenElement && document.fullscreenElement !== null) 
+                document.exitFullscreen()
+            else
+                media_el.requestFullscreen()
+        }}, PO.fullscreen)
+        target.prepend(fullscreen)
+    }
+
+    const master = stream.getTracks()[0]
+    master.addEventListener("ended", () => {
+        // if (is_video) media_el.controls = false
+        // media_el.classList.add("media-freeze")
+        media_el.remove()
+        fullscreen?.remove()
+    })
 
     return media_el
 }