From bdf64a24dc6b41a11a7d9d1e468760e4ecfc20f5 Mon Sep 17 00:00:00 2001 From: barisgul15 Date: Mon, 22 Jan 2024 14:17:44 +0100 Subject: [PATCH 1/5] adding shortcuts on the video palyer buttons controltext --- web/ts/TUMLiveVjs.ts | 59 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/web/ts/TUMLiveVjs.ts b/web/ts/TUMLiveVjs.ts index 9d5acba9f..cf83b8b65 100644 --- a/web/ts/TUMLiveVjs.ts +++ b/web/ts/TUMLiveVjs.ts @@ -30,6 +30,64 @@ class PlayerSettings { this.isEmbedded = isEmbedded; } + initShortcutsWhenMouseOn(seekingTime: number) { + console.log("test59"); + + const controlBar = this.player.getChild("controlBar"); + console.log(controlBar); + + function updatePlayToggleText() { + const playToggle = controlBar.getChild("PlayToggle"); + const currentText = playToggle.contentEl().innerHTML; + const newText = `${currentText} (K)`; + var controlText = playToggle.getAttribute("controlText"); + console.log(controlText); + playToggle.controlText(newText); + } + + function updateMuteToggleText() { + const muteToggle = controlBar.getChild("VolumePanel").getChild("MuteToggle"); + + if (muteToggle) { + const isMuted = this.player.muted(); + const text = isMuted ? "Unmute (M)" : "Mute (M)"; + muteToggle.controlText(text); + } + } + + // Set initial text when the player is ready + this.player.ready(() => { + // Call the update functions + updatePlayToggleText.call(this); + updateMuteToggleText.call(this); + }); + + // Listen for play and pause events + this.player.on(["play", "pause"], () => { + updatePlayToggleText.call(this); + }); + + // Listen for mute event + this.player.on("volumechange", () => { + updateMuteToggleText.call(this); + }); + + // Set fullscreen toggle + controlBar.getChild("FullscreenToggle").controlText("Fullscreen (F)"); + this.player.on("fullscreenchange", () => { + const fullscreenToggle = controlBar.getChild("FullscreenToggle"); + if (fullscreenToggle) { + const isFullscreen = document.fullscreenElement; + const text = isFullscreen ? "Exit Fullscreen (F)" : "Fullscreen (F)"; + fullscreenToggle.controlText(text); + } + }); + + controlBar.children()[0].controlText(`Seek back ${seekingTime} seconds (J)`); + controlBar.children()[2].controlText(`Seek forward ${seekingTime} seconds (L)`); + } + + initTrackbars(streamID: number) { loadAndSetTrackbars(this.player, streamID); } @@ -223,6 +281,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)); From ae9ea26a42cd30c09e6f11c70e0a935812aa09e3 Mon Sep 17 00:00:00 2001 From: barisgul15 Date: Mon, 22 Jan 2024 16:06:08 +0100 Subject: [PATCH 2/5] tooltips when mouse is on video player buttons implemented --- web/ts/TUMLiveVjs.ts | 61 +++++++++++++++++++------------------------- 1 file changed, 26 insertions(+), 35 deletions(-) diff --git a/web/ts/TUMLiveVjs.ts b/web/ts/TUMLiveVjs.ts index cf83b8b65..0e4e79bb8 100644 --- a/web/ts/TUMLiveVjs.ts +++ b/web/ts/TUMLiveVjs.ts @@ -31,63 +31,54 @@ class PlayerSettings { } initShortcutsWhenMouseOn(seekingTime: number) { - console.log("test59"); - const controlBar = this.player.getChild("controlBar"); - console.log(controlBar); - function updatePlayToggleText() { + // 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 currentText = playToggle.contentEl().innerHTML; - const newText = `${currentText} (K)`; - var controlText = playToggle.getAttribute("controlText"); - console.log(controlText); - playToggle.controlText(newText); + const text = !this.player.paused() ? "Pause (K/k)" : "Play (K/k)"; + playToggle.controlText(text); } - function updateMuteToggleText() { + // function to update mute/unmute toggle control text + function updateMuteToggleControlText() { const muteToggle = controlBar.getChild("VolumePanel").getChild("MuteToggle"); - - if (muteToggle) { - const isMuted = this.player.muted(); - const text = isMuted ? "Unmute (M)" : "Mute (M)"; - muteToggle.controlText(text); - } + const text = this.player.muted() ? "Unmute (M/m)" : "Mute (M/m)"; + muteToggle.controlText(text); } - // Set initial text when the player is ready + // Set initial text for play/pause and mute/unmute when the player is ready this.player.ready(() => { // Call the update functions - updatePlayToggleText.call(this); - updateMuteToggleText.call(this); + updatePlayToggleControlText.call(this); + updateMuteToggleControlText.call(this); }); - // Listen for play and pause events + // Listen for play/pause event this.player.on(["play", "pause"], () => { - updatePlayToggleText.call(this); + updatePlayToggleControlText.call(this); }); - // Listen for mute event - this.player.on("volumechange", () => { - updateMuteToggleText.call(this); + // Listen for mute/unmute event + this.player.on('volumechange', () => { + updateMuteToggleControlText.call(this); }); - // Set fullscreen toggle - controlBar.getChild("FullscreenToggle").controlText("Fullscreen (F)"); + // 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"); - if (fullscreenToggle) { - const isFullscreen = document.fullscreenElement; - const text = isFullscreen ? "Exit Fullscreen (F)" : "Fullscreen (F)"; - fullscreenToggle.controlText(text); - } + const text = document.fullscreenElement ? "Exit Fullscreen (F)" : "Fullscreen (F)"; + fullscreenToggle.controlText(text); }); - - controlBar.children()[0].controlText(`Seek back ${seekingTime} seconds (J)`); - controlBar.children()[2].controlText(`Seek forward ${seekingTime} seconds (L)`); } - initTrackbars(streamID: number) { loadAndSetTrackbars(this.player, streamID); } From e1e625188b0aa678452266517fcd0feeb631224a Mon Sep 17 00:00:00 2001 From: barisgul15 Date: Mon, 22 Jan 2024 16:08:19 +0100 Subject: [PATCH 3/5] eslint fix --- web/ts/TUMLiveVjs.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ts/TUMLiveVjs.ts b/web/ts/TUMLiveVjs.ts index 0e4e79bb8..f064f31e7 100644 --- a/web/ts/TUMLiveVjs.ts +++ b/web/ts/TUMLiveVjs.ts @@ -65,7 +65,7 @@ class PlayerSettings { }); // Listen for mute/unmute event - this.player.on('volumechange', () => { + this.player.on("volumechange", () => { updateMuteToggleControlText.call(this); }); From 5918e8025aa13f5ca7c3bbbf97d5dd1e73fc442a Mon Sep 17 00:00:00 2001 From: barisgul15 Date: Sun, 28 Jan 2024 23:19:34 +0100 Subject: [PATCH 4/5] keyboard shortcuts added to hamburger menu on home screen --- web/assets/css/keyboard-shortcuts.css | 60 +++++++++++++++++++++++++ web/assets/keyboard-shortcuts-helper.js | 31 +++++++++++++ web/template/home.gohtml | 33 +++++++++++++- 3 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 web/assets/css/keyboard-shortcuts.css create mode 100644 web/assets/keyboard-shortcuts-helper.js diff --git a/web/assets/css/keyboard-shortcuts.css b/web/assets/css/keyboard-shortcuts.css new file mode 100644 index 000000000..564e1bef0 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/assets/keyboard-shortcuts-helper.js b/web/assets/keyboard-shortcuts-helper.js new file mode 100644 index 000000000..44cfe2a5a --- /dev/null +++ b/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(); + } + }); +}); \ No newline at end of file diff --git a/web/template/home.gohtml b/web/template/home.gohtml index 9a8d3ad5d..54fef4d3e 100644 --- a/web/template/home.gohtml +++ b/web/template/home.gohtml @@ -28,6 +28,7 @@ rel="stylesheet"> + @@ -108,7 +109,7 @@ @@ -121,6 +122,36 @@

Settings

+ +
+
+ +
+

Keyboard Shortcuts

+
+
Date: Sun, 28 Jan 2024 23:27:40 +0100 Subject: [PATCH 5/5] deleted a console print which I created for debugging --- web/template/home.gohtml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/template/home.gohtml b/web/template/home.gohtml index 54fef4d3e..e35adc898 100644 --- a/web/template/home.gohtml +++ b/web/template/home.gohtml @@ -109,7 +109,7 @@