From 3782cda55007516bed7ccab4208cee841e599f7a Mon Sep 17 00:00:00 2001 From: Caetano-dev Date: Wed, 30 Jul 2025 16:31:09 -0300 Subject: [PATCH 01/10] Shows video progress indicator when interacting --- .../ft-shaka-video-player/ft-shaka-video-player.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js index 854f3d3dc4afc..ca2aabd92c9bf 100644 --- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js +++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js @@ -1977,6 +1977,8 @@ export default defineComponent({ const formattedSeconds = Math.abs(seconds) showValueChange(`${formattedSeconds}s`, popUpLayout.icon, popUpLayout.invertContentOrder) } + + showOverlayControls() } // #endregion mouse and keyboard helpers @@ -3032,6 +3034,10 @@ export default defineComponent({ const invertValueChangeContentOrder = ref(false) let valueChangeTimeout = null + function showOverlayControls() { + ui.getControls().showUI() + } + /** * Shows a popup with a message and an icon on top of the video player. * @param {string} message - The message to display. @@ -3051,6 +3057,8 @@ export default defineComponent({ valueChangeTimeout = setTimeout(() => { showValueChangePopup.value = false }, 2000) + + showOverlayControls() } return { From 28d21b833ea90e95159ea9572c8d1cee459bbdfa Mon Sep 17 00:00:00 2001 From: Caetano-dev Date: Sun, 10 Aug 2025 08:46:34 -0300 Subject: [PATCH 02/10] call showOverlayControls under showValueChange calls --- .../ft-shaka-video-player/ft-shaka-video-player.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js index ca2aabd92c9bf..e5f49838ab577 100644 --- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js +++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js @@ -978,6 +978,7 @@ export default defineComponent({ player.cancelTrickPlay() showValueChange(`${defaultPlaybackRate.value}x`) + showOverlayControls() } } @@ -1905,6 +1906,7 @@ export default defineComponent({ messageIcon = 'volume-high' } showValueChange(`${Math.round(video.value.volume * 100)}%`, messageIcon) + showOverlayControls() } /** @@ -1924,6 +1926,7 @@ export default defineComponent({ } showValueChange(`${newPlaybackRateString}x`) + showOverlayControls() } } @@ -1976,6 +1979,7 @@ export default defineComponent({ : { icon: 'arrow-left', invertContentOrder: false } const formattedSeconds = Math.abs(seconds) showValueChange(`${formattedSeconds}s`, popUpLayout.icon, popUpLayout.invertContentOrder) + showOverlayControls() } showOverlayControls() @@ -2217,6 +2221,7 @@ export default defineComponent({ const messageIcon = isMuted ? 'volume-mute' : 'volume-high' const message = isMuted ? '0%' : `${Math.round(video_.volume * 100)}%` showValueChange(message, messageIcon) + showOverlayControls() } break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.CAPTIONS: From 4cf0b5d502676cb60681a989d0062d8e7d7582fc Mon Sep 17 00:00:00 2001 From: Caetano-dev Date: Tue, 12 Aug 2025 08:31:06 -0300 Subject: [PATCH 03/10] call showOverlayControls in showValueChange --- .../ft-shaka-video-player/ft-shaka-video-player.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js index e5f49838ab577..ca2aabd92c9bf 100644 --- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js +++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js @@ -978,7 +978,6 @@ export default defineComponent({ player.cancelTrickPlay() showValueChange(`${defaultPlaybackRate.value}x`) - showOverlayControls() } } @@ -1906,7 +1905,6 @@ export default defineComponent({ messageIcon = 'volume-high' } showValueChange(`${Math.round(video.value.volume * 100)}%`, messageIcon) - showOverlayControls() } /** @@ -1926,7 +1924,6 @@ export default defineComponent({ } showValueChange(`${newPlaybackRateString}x`) - showOverlayControls() } } @@ -1979,7 +1976,6 @@ export default defineComponent({ : { icon: 'arrow-left', invertContentOrder: false } const formattedSeconds = Math.abs(seconds) showValueChange(`${formattedSeconds}s`, popUpLayout.icon, popUpLayout.invertContentOrder) - showOverlayControls() } showOverlayControls() @@ -2221,7 +2217,6 @@ export default defineComponent({ const messageIcon = isMuted ? 'volume-mute' : 'volume-high' const message = isMuted ? '0%' : `${Math.round(video_.volume * 100)}%` showValueChange(message, messageIcon) - showOverlayControls() } break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.CAPTIONS: From a109539d1c59363558001cd46c2887a010f77480 Mon Sep 17 00:00:00 2001 From: drull Date: Wed, 13 Aug 2025 11:08:06 -0300 Subject: [PATCH 04/10] Show overlay on more shortcuts --- .../ft-shaka-video-player/ft-shaka-video-player.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js index ca2aabd92c9bf..ec782b4a71028 100644 --- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js +++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js @@ -2206,6 +2206,7 @@ export default defineComponent({ // Toggle full screen event.preventDefault() ui.getControls().toggleFullScreen() + showOverlayControls() break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.MUTE: // Toggle mute only if metakey is not pressed @@ -2226,6 +2227,7 @@ export default defineComponent({ const currentlyVisible = player.isTextTrackVisible() player.setTextTrackVisibility(!currentlyVisible) + showOverlayControls() } break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.VOLUME_UP: @@ -2247,6 +2249,7 @@ export default defineComponent({ // Rewind by the time-skip interval (in seconds) seekBySeconds(-defaultSkipInterval.value * player.getPlaybackRate(), false, true) } + if (canChapterJump(event, 'previous')) showOverlayControls() break case KeyboardShortcuts.VIDEO_PLAYER.PLAYBACK.SMALL_FAST_FORWARD: event.preventDefault() @@ -2257,6 +2260,7 @@ export default defineComponent({ // Fast-Forward by the time-skip interval (in seconds) seekBySeconds(defaultSkipInterval.value * player.getPlaybackRate(), false, true) } + if (canChapterJump(event, 'next')) showOverlayControls() break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.PICTURE_IN_PICTURE: // Toggle picture in picture @@ -2288,6 +2292,7 @@ export default defineComponent({ const percentage = parseInt(event.key) / 10 video_.currentTime = seekRange.start + (length * percentage) + showOverlayControls() } break } @@ -2319,6 +2324,7 @@ export default defineComponent({ // use seek range instead of duration so that it works for live streams too const seekRange = player.seekRange() video_.currentTime = seekRange.start + showOverlayControls() } break case KeyboardShortcuts.VIDEO_PLAYER.PLAYBACK.END: @@ -2328,6 +2334,7 @@ export default defineComponent({ // use seek range instead of duration so that it works for live streams too const seekRange = player.seekRange() video_.currentTime = seekRange.end + showOverlayControls() } break case 'escape': From 7bf563841aeb21b220d0d8ba78974696699489ba Mon Sep 17 00:00:00 2001 From: drull Date: Wed, 13 Aug 2025 11:08:06 -0300 Subject: [PATCH 05/10] Show overlay on more shortcuts --- .../components/ft-shaka-video-player/ft-shaka-video-player.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js index ec782b4a71028..014dde2205bb7 100644 --- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js +++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js @@ -2594,6 +2594,8 @@ export default defineComponent({ document.removeEventListener('keydown', keyboardShortcutHandler) document.addEventListener('keydown', keyboardShortcutHandler) + document.addEventListener('fullscreenchange', showOverlayControls) + document.addEventListener('webkitfullscreenchange', showOverlayControls) player.addEventListener('loading', () => { hasLoaded.value = false @@ -2934,6 +2936,8 @@ export default defineComponent({ document.body.classList.remove('playerFullWindow') document.removeEventListener('keydown', keyboardShortcutHandler) + document.removeEventListener('fullscreenchange', showOverlayControls) + document.removeEventListener('webkitfullscreenchange', showOverlayControls) if (resizeObserver) { resizeObserver.disconnect() From b84b0cd6ef6cfce0e508382356fe2f791d2cf28a Mon Sep 17 00:00:00 2001 From: Caetano-dev Date: Sun, 17 Aug 2025 20:12:41 -0300 Subject: [PATCH 06/10] Move function implementation and code spacing --- .../ft-shaka-video-player/ft-shaka-video-player.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js index 014dde2205bb7..9fef033e6be18 100644 --- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js +++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js @@ -2245,22 +2245,22 @@ export default defineComponent({ if (canChapterJump(event, 'previous')) { // Jump to the previous chapter video_.currentTime = props.chapters[props.currentChapterIndex - 1].startSeconds + showOverlayControls() } else { // Rewind by the time-skip interval (in seconds) seekBySeconds(-defaultSkipInterval.value * player.getPlaybackRate(), false, true) } - if (canChapterJump(event, 'previous')) showOverlayControls() break case KeyboardShortcuts.VIDEO_PLAYER.PLAYBACK.SMALL_FAST_FORWARD: event.preventDefault() if (canChapterJump(event, 'next')) { // Jump to the next chapter video_.currentTime = (props.chapters[props.currentChapterIndex + 1].startSeconds) + showOverlayControls() } else { // Fast-Forward by the time-skip interval (in seconds) seekBySeconds(defaultSkipInterval.value * player.getPlaybackRate(), false, true) } - if (canChapterJump(event, 'next')) showOverlayControls() break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.PICTURE_IN_PICTURE: // Toggle picture in picture @@ -2595,7 +2595,9 @@ export default defineComponent({ document.removeEventListener('keydown', keyboardShortcutHandler) document.addEventListener('keydown', keyboardShortcutHandler) document.addEventListener('fullscreenchange', showOverlayControls) - document.addEventListener('webkitfullscreenchange', showOverlayControls) + if (process.platform === 'darwin') { + document.addEventListener('webkitfullscreenchange', showOverlayControls) + } player.addEventListener('loading', () => { hasLoaded.value = false @@ -2937,7 +2939,9 @@ export default defineComponent({ document.removeEventListener('keydown', keyboardShortcutHandler) document.removeEventListener('fullscreenchange', showOverlayControls) - document.removeEventListener('webkitfullscreenchange', showOverlayControls) + if (process.platform === 'darwin') { + document.removeEventListener('webkitfullscreenchange', showOverlayControls) + } if (resizeObserver) { resizeObserver.disconnect() From 6802829597f4629f2359c543f0e12bcd280f9ef1 Mon Sep 17 00:00:00 2001 From: drull Date: Mon, 18 Aug 2025 11:56:50 -0300 Subject: [PATCH 07/10] Remove overlay control from fullscreen --- .../ft-shaka-video-player/ft-shaka-video-player.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js index 9fef033e6be18..307f02b2bb2b7 100644 --- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js +++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js @@ -2206,7 +2206,6 @@ export default defineComponent({ // Toggle full screen event.preventDefault() ui.getControls().toggleFullScreen() - showOverlayControls() break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.MUTE: // Toggle mute only if metakey is not pressed @@ -2594,10 +2593,6 @@ export default defineComponent({ document.removeEventListener('keydown', keyboardShortcutHandler) document.addEventListener('keydown', keyboardShortcutHandler) - document.addEventListener('fullscreenchange', showOverlayControls) - if (process.platform === 'darwin') { - document.addEventListener('webkitfullscreenchange', showOverlayControls) - } player.addEventListener('loading', () => { hasLoaded.value = false @@ -2938,10 +2933,6 @@ export default defineComponent({ document.body.classList.remove('playerFullWindow') document.removeEventListener('keydown', keyboardShortcutHandler) - document.removeEventListener('fullscreenchange', showOverlayControls) - if (process.platform === 'darwin') { - document.removeEventListener('webkitfullscreenchange', showOverlayControls) - } if (resizeObserver) { resizeObserver.disconnect() From 6aa8bc1be303b334e3b1f4b702bef39042339079 Mon Sep 17 00:00:00 2001 From: Caetano-dev Date: Tue, 19 Aug 2025 09:09:49 -0300 Subject: [PATCH 08/10] use nextTick to show overlay controls --- .../ft-shaka-video-player/ft-shaka-video-player.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js index 307f02b2bb2b7..72d0706ffcce6 100644 --- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js +++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js @@ -1,4 +1,4 @@ -import { computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref, shallowRef, watch } from 'vue' +import { computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref, shallowRef, watch, nextTick } from 'vue' import shaka from 'shaka-player' import { useI18n } from '../../composables/use-i18n-polyfill' @@ -2593,6 +2593,9 @@ export default defineComponent({ document.removeEventListener('keydown', keyboardShortcutHandler) document.addEventListener('keydown', keyboardShortcutHandler) + document.addEventListener('fullscreenchange', () => { + nextTick(showOverlayControls) + }) player.addEventListener('loading', () => { hasLoaded.value = false @@ -2933,6 +2936,9 @@ export default defineComponent({ document.body.classList.remove('playerFullWindow') document.removeEventListener('keydown', keyboardShortcutHandler) + document.removeEventListener('fullscreenchange', () => { + nextTick(showOverlayControls) + }) if (resizeObserver) { resizeObserver.disconnect() From 4a53e12e29d012d9ce488e4879d2f2fff6c80415 Mon Sep 17 00:00:00 2001 From: Caetano Date: Sun, 24 Aug 2025 17:19:07 -0300 Subject: [PATCH 09/10] Change import order Co-authored-by: absidue <48293849+absidue@users.noreply.github.com> --- .../components/ft-shaka-video-player/ft-shaka-video-player.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js index 72d0706ffcce6..e8dfa0ad8d4e1 100644 --- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js +++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js @@ -1,4 +1,4 @@ -import { computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref, shallowRef, watch, nextTick } from 'vue' +import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, watch } from 'vue' import shaka from 'shaka-player' import { useI18n } from '../../composables/use-i18n-polyfill' From edfeef4d8fe7b789205ceae9f7dc75d9701c7e1b Mon Sep 17 00:00:00 2001 From: drull Date: Sat, 20 Sep 2025 13:54:18 -0300 Subject: [PATCH 10/10] Create named function for eventListeners --- .../ft-shaka-video-player/ft-shaka-video-player.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js index 708fabc81f190..df2f6b5729449 100644 --- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js +++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js @@ -2495,6 +2495,10 @@ export default defineComponent({ isOffline.value = true } + function fullscreenChangeHandler() { + nextTick(showOverlayControls) + } + window.addEventListener('online', onlineHandler) window.addEventListener('offline', offlineHandler) @@ -2593,9 +2597,7 @@ export default defineComponent({ document.removeEventListener('keydown', keyboardShortcutHandler) document.addEventListener('keydown', keyboardShortcutHandler) - document.addEventListener('fullscreenchange', () => { - nextTick(showOverlayControls) - }) + document.addEventListener('fullscreenchange', fullscreenChangeHandler) player.addEventListener('loading', () => { hasLoaded.value = false @@ -2936,9 +2938,7 @@ export default defineComponent({ document.body.classList.remove('playerFullWindow') document.removeEventListener('keydown', keyboardShortcutHandler) - document.removeEventListener('fullscreenchange', () => { - nextTick(showOverlayControls) - }) + document.removeEventListener('fullscreenchange', fullscreenChangeHandler) if (resizeObserver) { resizeObserver.disconnect()