Add custom video player controls

8 files changed, 35 insertions, 10 deletions

diff --git a/client-web/public/assets/icons/fullscreen.svg b/client-web/public/assets/icons/fullscreen.svg
new file mode 100644
index 0000000..cbe60cd
--- /dev/null
+++ b/client-web/public/assets/icons/fullscreen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#ffffff" d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z"/></svg>
\ No newline at end of file
diff --git a/client-web/source/locale/de.ts b/client-web/source/locale/de.ts
index a0831d0..663aac4 100644
--- a/client-web/source/locale/de.ts
+++ b/client-web/source/locale/de.ts
@@ -15,6 +15,7 @@ export const PO_DE: LanguageStrings = {
     summery_image: "(bild)",
     camera: "Kamera",
     file: "Datei",
+    fullscreen: "Vollbild",
     leave: "Verlassen",
     screen: "Bildschirm",
     image_alt: "Bild (Klicken zum Öffnen)",
diff --git a/client-web/source/locale/en.ts b/client-web/source/locale/en.ts
index 8ebbeb3..4498412 100644
--- a/client-web/source/locale/en.ts
+++ b/client-web/source/locale/en.ts
@@ -15,6 +15,7 @@ export const PO_EN: LanguageStrings = {
     summery_image: "(image)",
     camera: "Camera",
     file: "File",
+    fullscreen: "Fullscreen",
     leave: "Leave",
     screen: "Screen",
     image_alt: "Image (click to open)",
diff --git a/client-web/source/locale/es.ts b/client-web/source/locale/es.ts
index 7c0b6dc..1ee6e4e 100644
--- a/client-web/source/locale/es.ts
+++ b/client-web/source/locale/es.ts
@@ -18,6 +18,7 @@ export const PO_ES: LanguageStrings = {
     summery_image: "(imagen)",
     camera: "Cámara",
     file: "Archivo",
+    fullscreen: "Pantalla completa",
     leave: "Salir",
     screen: "Pantalla",
     image_alt: "Imagen (haga clic para abrir)",
diff --git a/client-web/source/locale/ja.ts b/client-web/source/locale/ja.ts
index 559d7ca..c20b926 100644
--- a/client-web/source/locale/ja.ts
+++ b/client-web/source/locale/ja.ts
@@ -18,6 +18,7 @@ export const PO_JA: LanguageStrings = {
     summery_image: "(写真)",
     camera: "カメラ",
     file: "ファイル",
+    fullscreen: "フルスクリーン",
     leave: "おすすめ",
     screen: "スクリーン",
     image_alt: "画像(クリックして開きます)",
diff --git a/client-web/source/locale/mod.ts b/client-web/source/locale/mod.ts
index a1aecb3..1082330 100644
--- a/client-web/source/locale/mod.ts
+++ b/client-web/source/locale/mod.ts
@@ -29,6 +29,7 @@ export interface LanguageStrings {
     camera: string,
     screen: string,
     file: string,
+    fullscreen: string,
     local: string,
     warn_short_secret: string,
     warn_no_webrtc: string,
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
 }
diff --git a/client-web/style/room.sass b/client-web/style/room.sass
index 8668de6..57f3f98 100644
--- a/client-web/style/room.sass
+++ b/client-web/style/room.sass
@@ -91,10 +91,18 @@
         position: absolute
         top: 0px
         right: 0px
+    button.bottomleft
+        position: absolute
+        bottom: 0px
+        left: 0px
     transition: filter 0.5s
     flex: 1 1 auto
     background-color: black
 
+.fullscreen
+    background-color: rgb(48,48,48)
+    z-index: 1
+
 .media-audio
     border-radius: 5px
     height: 5em