adding shortcuts on the video player buttons controltext

web/assets/css/keyboard-shortcuts.css

@@ -0,0 +1,60 @@
+#keyboardShortcutsPopup {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.popup {
+    /*background-color: white; */
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    width: 70%;
+    max-width: 800px;
+    height: 70%;
+    max-height: 600px;
+    overflow: auto;
+    position: relative;
+}
+
+h2 {
+    font-weight: bold;
+    font-size: 1.5em;
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+    border-top: 1px solid #ddd;
+}
+
+li {
+    border-bottom: 1px solid #ddd;
+    padding: 10px 0;
+}
+
+strong {
+    display: inline-block;
+    width: 380px;
+    /*font-weight: bold;*/
+    margin-right: 20px;
+}
+
+b1 {
+    font-weight: bold;
+}
+
+.closeButton {
+    cursor: pointer;
+}

web/assets/keyboard-shortcuts-helper.js

@@ -0,0 +1,31 @@
+function openKeyboardShortcutsPopup() {
+    var popup = document.getElementById("keyboardShortcutsPopup");
+    popup.style.display = "flex";
+    console.log("test1");
+    document.addEventListener("keydown", handleKeyDown);
+}
+
+function closeKeyboardShortcutsPopup() {
+    var popup = document.getElementById("keyboardShortcutsPopup");
+    popup.style.display = "none";
+    document.removeEventListener("keydown", handleKeyDown);
+}
+
+function handleKeyDown(event) {
+    if (event.key === "Escape") {
+        closeKeyboardShortcutsPopup();
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    // Get the overlay element
+    var overlay = document.getElementById("keyboardShortcutsPopup");
+
+    // Add click event listener to the overlay
+    overlay.addEventListener("click", function (event) {
+        // If the clicked element is the overlay itself, close the popup
+        if (event.target === overlay) {
+            closeKeyboardShortcutsPopup();
+        }
+    });
+});

web/template/home.gohtml

@@ -28,6 +28,7 @@
           rel="stylesheet">
     <link href="/static/assets/css-dist/home.css?v={{if .VersionTag}}{{.VersionTag}}{{else}}development{{end}}"
           rel="stylesheet">
+    <link rel="stylesheet" href="/static/assets/css/keyboard-shortcuts.css">
     <style>[x-cloak] {
             display: none !important;
         }</style>
@@ -121,6 +122,36 @@
                                 </div>
                                 <p>Settings</p>
                             </a>
+                            <script src="static/assets/keyboard-shortcuts-helper.js"></script>
+                            <div class="tum-live-menu-item" onclick="openKeyboardShortcutsPopup()" 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 id="keyboardShortcutsPopup" class="overlay" style="display: none;">
+                                <div class="popup"
+                                     :style="{ 'background-color': $store.theme.activeTheme === 'light' ? 'white' :  'rgba(22, 27, 34, 1)' }">
+                                <h2>
+                                        Keyboard Shortcuts
+                                        <span class="closeButton" onclick="closeKeyboardShortcutsPopup()"> <i class="icon-cancel"></i> </span>
+                                    </h2>
+                                    <ul>
+                                        <li><strong>Toggle play/pause</strong> <b1> K / k / SPACEBAR</b1></li>
+                                        <li><strong>Mute/Unmute</strong><b1> M / m</b1></li>
+                                        <li><strong>Open/Exit toggle fullscreen</strong><b1> F / f</b1></li>
+                                        <li><strong>Seek forward</strong><b1> L / l / ArrowRight / Right</b1></li>
+                                        <li><strong>Seek backwards</strong><b1> J / j / ArrowLeft / Left</b1></li>
+                                        <li><strong>Volume up</strong><b1> ArrowUp / Up</b1></li>
+                                        <li><strong>Volume down</strong><b1> ArrowDown / Down</b1></li>
+                                        <li><strong>Increase playback rate</strong><b1> <</b1></li>
+                                        <li><strong>Decrease playback rate</strong><b1> ></b1></li>
+                                        <li><strong>Seek to specific point in the video (7 advances to 70% of duration)</strong><b1> 0...9</b1></li>
+                                        <li><strong>Skip silence</strong><b1> S / s</b1></li>
+                                        <li><strong>Close any kind of popup - e.g. popup chat, popup keyboard shortcuts etc.</strong><b1> ESCAPE</b1></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,55 @@ class PlayerSettings {
         this.isEmbedded = isEmbedded;
     }
 
+    initShortcutsWhenMouseOn(seekingTime: number) {
+        const controlBar = this.player.getChild("controlBar");
+
+        // Set seek back/forward control text
+        controlBar.children()[0].controlText(`Seek back ${seekingTime} seconds (J/j)`);
+        controlBar.children()[2].controlText(`Seek forward ${seekingTime} seconds (L/l)`);
+
+        // function to update play/pause toggle control text
+        // when playing text should be pause(k), when pause text should be play(k)
+        function updatePlayToggleControlText() {
+            const playToggle = controlBar.getChild("PlayToggle");
+            const text = !this.player.paused() ? "Pause (K/k)" : "Play (K/k)";
+            playToggle.controlText(text);
+        }
+
+        // function to update mute/unmute toggle control text
+        function updateMuteToggleControlText() {
+            const muteToggle = controlBar.getChild("VolumePanel").getChild("MuteToggle");
+            const text = this.player.muted() ? "Unmute (M/m)" : "Mute (M/m)";
+            muteToggle.controlText(text);
+        }
+
+        // Set initial text for play/pause and mute/unmute when the player is ready
+        this.player.ready(() => {
+            // Call the update functions
+            updatePlayToggleControlText.call(this);
+            updateMuteToggleControlText.call(this);
+        });
+
+        // Listen for play/pause event
+        this.player.on(["play", "pause"], () => {
+            updatePlayToggleControlText.call(this);
+        });
+
+        // Listen for mute/unmute event
+        this.player.on("volumechange", () => {
+            updateMuteToggleControlText.call(this);
+        });
+
+        // Set fullscreen toggle control text
+        controlBar.getChild("FullscreenToggle").controlText("Fullscreen (F/f)");
+        // Listen for fullscreen/exit fullscreen event
+        this.player.on("fullscreenchange", () => {
+            const fullscreenToggle = controlBar.getChild("FullscreenToggle");
+            const text = document.fullscreenElement ? "Exit Fullscreen (F)" : "Fullscreen (F)";
+            fullscreenToggle.controlText(text);
+        });
+    }
+
     initTrackbars(streamID: number) {
         loadAndSetTrackbars(this.player, streamID);
     }
@@ -223,6 +272,7 @@ export const initPlayer = function (
         settings.addTimeToolTipClass(spriteID);
         settings.addStartInOverlay(streamStartIn, { ...options });
         settings.addOverlayIcon();
+        settings.initShortcutsWhenMouseOn(seekingTime);
     });
     // handle hotkeys from anywhere on the page
     document.addEventListener("keydown", (event) => player.handleKeyDown(event));