adding shortcuts on the video player buttons controltext

web/assets/css/home.css

@@ -423,6 +423,34 @@ label:has(~ .tum-live-input) {
     border-bottom: 1px solid black;
 }
 
+.tum-live-popup-container {
+    @apply flex fixed top-0 left-0 w-full h-full items-center justify-center bg-black/50;
+}
+
+.tum-live-popup {
+    @apply p-5 rounded-md w-[70%] max-w-[800px] h-[70%] max-h-[600px] overflow-auto relative;
+}
+
+.tum-live-popup h2 {
+    @apply font-bold text-[1.5em] mb-[15px] justify-between items-center flex;
+}
+
+.tum-live-popup ul {
+    @apply list-none p-0 border-t border-t-gray-300;
+}
+
+.tum-live-popup li {
+    @apply py-2.5 border-b border-b-gray-300;
+}
+
+.tum-live-popup strong {
+    @apply inline-block w-[380px] font-bold mr-5;
+}
+
+.tum-live-popup b {
+    @apply font-bold;
+}
+
 .tum-live-search-result-main {
     @apply flex text-left rounded-lg text-4 text-sm py-1 px-2 mt-1 border border-black dark:border-gray-300 w-full text-black dark:text-gray-300;
     width: 100%;

web/template/home.gohtml

@@ -74,7 +74,7 @@
                             <p class="font-semibold">Signed in as</p>
                             <span>@{{$user.Name}}</span>
                         </header>
-                        <nav class="d-grid gap-3 font-light">
+                        <nav class="d-grid gap-3 font-light" x-data="{showPopup: false}">
                             {{if or (eq $user.Role 1) (eq $user.Role 2) }}
                                 <a href="/admin"
                                    class="tum-live-menu-item">
@@ -115,6 +115,33 @@
                                 </div>
                                 <p>Settings</p>
                             </a>
+                            <div class="tum-live-menu-item" @click="showPopup=true;" style="cursor: pointer;">
+                                <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
+                                    <i class="fa-solid fa-keyboard mr-3"></i>
+                                </div>
+                                <p>Keyboard Shortcuts</p>
+                            </div>
+                            <div x-ref="keyboardShortcutsPopup" x-show="showPopup" class="tum-live-popup-container overlay" @keydown.escape.window="showPopup=false;">
+                                <div class="tum-live-popup tum-live-bg" @click.outside="showPopup=false;">
+                                    <h2>Keyboard Shortcuts
+                                        <i class="icon-cancel" @click="showPopup=false;"></i>
+                                    </h2>
+                                    <ul>
+                                        <li><strong>Toggle play/pause</strong> <b> K / k / SPACEBAR</b></li>
+                                        <li><strong>Mute/Unmute</strong><b> M / m</b></li>
+                                        <li><strong>Open/Exit toggle fullscreen</strong><b> F / f</b></li>
+                                        <li><strong>Seek forward</strong><b> L / l / ArrowRight / Right</b></li>
+                                        <li><strong>Seek backwards</strong><b> J / j / ArrowLeft / Left</b></li>
+                                        <li><strong>Volume up</strong><b> ArrowUp / Up</b></li>
+                                        <li><strong>Volume down</strong><b> ArrowDown / Down</b></li>
+                                        <li><strong>Increase playback rate</strong><b> <</b></li>
+                                        <li><strong>Decrease playback rate</strong><b> ></b></li>
+                                        <li><strong>Seek to specific point in the video (7 advances to 70% of duration)</strong><b> 0...9</b></li>
+                                        <li><strong>Skip silence</strong><b> S / s</b></li>
+                                        <li><strong>Close any kind of popup - e.g. popup chat, popup keyboard shortcuts etc.</strong><b> ESCAPE</b></li>
+                                    </ul>
+                                </div>
+                            </div>
                             <div class="border-b dark:border-gray-800"></div>
                             <a href="https://github.com/TUM-Dev/gocast"
                                target="_blank"

web/ts/TUMLiveVjs.ts

@@ -30,6 +30,40 @@ class PlayerSettings {
         this.isEmbedded = isEmbedded;
     }
 
+    initControlTexts(seekingTime: number) {
+        const controlBar = this.player.getChild("controlBar");
+
+        // Set seek back/forward control text
+        controlBar.children()[0].controlText(`Seek back ${seekingTime} seconds (j)`);
+        controlBar.children()[2].controlText(`Seek forward ${seekingTime} seconds (l)`);
+
+        // Set initial text for play/pause, mute/unmute, fullscreen when the player is ready
+        this.updatePlayControlText();
+        this.updateMuteControlText();
+        this.updateFullscreenControlText();
+    }
+
+    // function to update play/pause control text to pause(k) when playing and play(k) else
+    updatePlayControlText() {
+        const playToggle = this.player.getChild("controlBar").getChild("PlayToggle");
+        const text = !this.player.paused() ? "Pause (k)" : "Play (k)";
+        playToggle.controlText(text);
+    }
+
+    // function to update mute/unmute control text
+    updateMuteControlText() {
+        const muteToggle = this.player.getChild("controlBar").getChild("VolumePanel").getChild("MuteToggle");
+        const text = this.player.muted() ? "Unmute (m)" : "Mute (m)";
+        muteToggle.controlText(text);
+    }
+
+    // function to update fullscreen/exit fullscreen control text
+    updateFullscreenControlText() {
+        const fullscreenToggle = this.player.getChild("controlBar").getChild("FullscreenToggle");
+        const text = document.fullscreenElement ? "Exit Fullscreen (f)" : "Fullscreen (f)";
+        fullscreenToggle.controlText(text);
+    }
+
     initTrackbars(streamID: number) {
         loadAndSetTrackbars(this.player, streamID);
     }
@@ -198,6 +232,15 @@ export const initPlayer = function (
     player.on("ratechange", function () {
         settings.storeRate();
     });
+    player.on(["play", "pause"], function () {
+        settings.updatePlayControlText();
+    });
+    player.on("volumechange", function () {
+        settings.updateMuteControlText();
+    });
+    player.on("fullscreenchange", function () {
+        settings.updateFullscreenControlText();
+    });
 
     // When catching up to live, resume at normal speed
     player.liveTracker.on("liveedgechange", function (evt) {
@@ -223,6 +266,7 @@ export const initPlayer = function (
         settings.addTimeToolTipClass(spriteID);
         settings.addStartInOverlay(streamStartIn, { ...options });
         settings.addOverlayIcon();
+        settings.initControlTexts(seekingTime);
     });
     // handle hotkeys from anywhere on the page
     document.addEventListener("keydown", (event) => player.handleKeyDown(event));