From 2871f5b0cadfba9cf5e5cca73e8bb82e568774f6 Mon Sep 17 00:00:00 2001 From: David Date: Sun, 10 May 2026 02:19:26 +0200 Subject: [PATCH 1/5] blur active element on shortcut to prevent 'focus-visible' property from staying true --- .../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 02ee2146bf928..2fc9ac6f6e1ca 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 @@ -2298,6 +2298,7 @@ export default defineComponent({ // Toggle Play/Pause event.preventDefault() video_.paused ? video_.play() : video_.pause() + document.activeElement.blur() // Clear focus to prevent tooltip from staying visible break case KeyboardShortcuts.VIDEO_PLAYER.PLAYBACK.LARGE_REWIND: // Rewind by 2x the time-skip interval (in seconds) @@ -2325,6 +2326,7 @@ export default defineComponent({ // Toggle full screen event.preventDefault() ui.getControls().toggleFullScreen() + document.activeElement.blur() // Clear focus to prevent tooltip from staying visible break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.MUTE: // Toggle mute only if metakey is not pressed @@ -2337,6 +2339,7 @@ export default defineComponent({ const message = isMuted ? '0%' : `${Math.round(video_.volume * 100)}%` showValueChange(message, messageIcon) } + document.activeElement.blur() // Clear focus to prevent tooltip from staying visible break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.CAPTIONS: { // Toggle caption/subtitles @@ -2401,6 +2404,7 @@ export default defineComponent({ controls.togglePiP() } } + document.activeElement.blur() // Clear focus to prevent tooltip from staying visible break case '0': case '1': @@ -2486,6 +2490,7 @@ export default defineComponent({ events.dispatchEvent(new CustomEvent('setFullWindow', { detail: !fullWindowEnabled.value })) + document.activeElement.blur() // Clear focus to prevent tooltip from staying visible break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.THEATRE_MODE: // Toggle theatre mode From 7f0f29ee39e13d515d097ccf811464e597e0e6f6 Mon Sep 17 00:00:00 2001 From: David Date: Sun, 10 May 2026 15:49:28 +0200 Subject: [PATCH 2/5] Use querySelector instead of blurring whole body --- .../ft-shaka-video-player.js | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 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 2fc9ac6f6e1ca..c7cb0d83fb0c7 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 @@ -2291,6 +2291,14 @@ export default defineComponent({ return } + // Clear focus to prevent tooltip from staying visible + function blurButton(buttonClass) { + const button = document.querySelector(`.${buttonClass}`) + if (button) { + button.blur() + } + } + switch (event.key.toLowerCase()) { case ' ': case 'spacebar': // older browsers might return spacebar instead of a space character @@ -2298,7 +2306,7 @@ export default defineComponent({ // Toggle Play/Pause event.preventDefault() video_.paused ? video_.play() : video_.pause() - document.activeElement.blur() // Clear focus to prevent tooltip from staying visible + blurButton('shaka-play-button') break case KeyboardShortcuts.VIDEO_PLAYER.PLAYBACK.LARGE_REWIND: // Rewind by 2x the time-skip interval (in seconds) @@ -2326,7 +2334,7 @@ export default defineComponent({ // Toggle full screen event.preventDefault() ui.getControls().toggleFullScreen() - document.activeElement.blur() // Clear focus to prevent tooltip from staying visible + blurButton('shaka-fullscreen-button') break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.MUTE: // Toggle mute only if metakey is not pressed @@ -2339,7 +2347,7 @@ export default defineComponent({ const message = isMuted ? '0%' : `${Math.round(video_.volume * 100)}%` showValueChange(message, messageIcon) } - document.activeElement.blur() // Clear focus to prevent tooltip from staying visible + blurButton('shaka-mute-button') break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.CAPTIONS: { // Toggle caption/subtitles @@ -2404,7 +2412,7 @@ export default defineComponent({ controls.togglePiP() } } - document.activeElement.blur() // Clear focus to prevent tooltip from staying visible + blurButton('shaka-pip-button') break case '0': case '1': @@ -2490,7 +2498,7 @@ export default defineComponent({ events.dispatchEvent(new CustomEvent('setFullWindow', { detail: !fullWindowEnabled.value })) - document.activeElement.blur() // Clear focus to prevent tooltip from staying visible + blurButton('full-window-button') break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.THEATRE_MODE: // Toggle theatre mode @@ -2501,6 +2509,7 @@ export default defineComponent({ detail: !props.useTheatreMode })) } + blurButton('theatre-button') break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.TAKE_SCREENSHOT: if (enableScreenshot.value && props.format !== 'audio') { @@ -2508,6 +2517,7 @@ export default defineComponent({ // Take screenshot takeScreenshot() } + blurButton('screenshot-button') break } } From d095d4cd0c8c35f43a15e3aaa34a03a11caf8e6a Mon Sep 17 00:00:00 2001 From: David Date: Sun, 10 May 2026 22:33:51 +0200 Subject: [PATCH 3/5] Fix tooltips staying visible if another shortcut is used while hovering a button --- .../ft-shaka-video-player.js | 37 ++++++++++++------- 1 file changed, 24 insertions(+), 13 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 c7cb0d83fb0c7..ee170b44d2ca5 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 @@ -964,7 +964,7 @@ export default defineComponent({ classList.contains('shaka-fast-foward-container') || classList.contains('shaka-rewind-container') || classList.contains('shaka-play-button-container') || - classList.contains('shaka-play-button') || + classList.contains('sc') || classList.contains('shaka-controls-container')) { // @@ -2291,11 +2291,22 @@ export default defineComponent({ return } - // Clear focus to prevent tooltip from staying visible - function blurButton(buttonClass) { - const button = document.querySelector(`.${buttonClass}`) - if (button) { - button.blur() + // Blur player buttons to remove :focus-visible state, preventing tooltips from staying visible + function blurTooltipButtons() { + const buttonWithTooltipClasses = [ + 'shaka-play-button', + 'shaka-fullscreen-button', + 'shaka-mute-button', + 'shaka-pip-button', + 'full-window-button', + 'theatre-button', + 'screenshot-button' + ] + for (const buttonClass of buttonWithTooltipClasses) { + const button = document.querySelector(`.${buttonClass}`) + if (button) { + button.blur() + } } } @@ -2306,7 +2317,7 @@ export default defineComponent({ // Toggle Play/Pause event.preventDefault() video_.paused ? video_.play() : video_.pause() - blurButton('shaka-play-button') + blurTooltipButtons() break case KeyboardShortcuts.VIDEO_PLAYER.PLAYBACK.LARGE_REWIND: // Rewind by 2x the time-skip interval (in seconds) @@ -2334,7 +2345,7 @@ export default defineComponent({ // Toggle full screen event.preventDefault() ui.getControls().toggleFullScreen() - blurButton('shaka-fullscreen-button') + blurTooltipButtons() break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.MUTE: // Toggle mute only if metakey is not pressed @@ -2347,7 +2358,7 @@ export default defineComponent({ const message = isMuted ? '0%' : `${Math.round(video_.volume * 100)}%` showValueChange(message, messageIcon) } - blurButton('shaka-mute-button') + blurTooltipButtons() break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.CAPTIONS: { // Toggle caption/subtitles @@ -2412,7 +2423,7 @@ export default defineComponent({ controls.togglePiP() } } - blurButton('shaka-pip-button') + blurTooltipButtons() break case '0': case '1': @@ -2498,7 +2509,7 @@ export default defineComponent({ events.dispatchEvent(new CustomEvent('setFullWindow', { detail: !fullWindowEnabled.value })) - blurButton('full-window-button') + blurTooltipButtons() break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.THEATRE_MODE: // Toggle theatre mode @@ -2509,7 +2520,7 @@ export default defineComponent({ detail: !props.useTheatreMode })) } - blurButton('theatre-button') + blurTooltipButtons() break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.TAKE_SCREENSHOT: if (enableScreenshot.value && props.format !== 'audio') { @@ -2517,7 +2528,7 @@ export default defineComponent({ // Take screenshot takeScreenshot() } - blurButton('screenshot-button') + blurTooltipButtons() break } } From f88a1f6c4c4b75705c620dbdd4ce82f0b7006c73 Mon Sep 17 00:00:00 2001 From: David Date: Sun, 10 May 2026 22:41:02 +0200 Subject: [PATCH 4/5] Fix unwanted change --- .../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 ee170b44d2ca5..149c780e8a880 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 @@ -964,7 +964,7 @@ export default defineComponent({ classList.contains('shaka-fast-foward-container') || classList.contains('shaka-rewind-container') || classList.contains('shaka-play-button-container') || - classList.contains('sc') || + classList.contains('shaka-play-button') || classList.contains('shaka-controls-container')) { // From bf7e7c219688364f12ce225e88690a727cfc6900 Mon Sep 17 00:00:00 2001 From: David <6506416+Shadorc@users.noreply.github.com> Date: Tue, 12 May 2026 12:28:05 +0200 Subject: [PATCH 5/5] Avoid creating array on every call Co-authored-by: PikachuEXE --- .../ft-shaka-video-player.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 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 149c780e8a880..bb97849cc43be 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 @@ -2292,16 +2292,16 @@ export default defineComponent({ } // Blur player buttons to remove :focus-visible state, preventing tooltips from staying visible + const buttonWithTooltipClasses = [ + 'shaka-play-button', + 'shaka-fullscreen-button', + 'shaka-mute-button', + 'shaka-pip-button', + 'full-window-button', + 'theatre-button', + 'screenshot-button', + ] function blurTooltipButtons() { - const buttonWithTooltipClasses = [ - 'shaka-play-button', - 'shaka-fullscreen-button', - 'shaka-mute-button', - 'shaka-pip-button', - 'full-window-button', - 'theatre-button', - 'screenshot-button' - ] for (const buttonClass of buttonWithTooltipClasses) { const button = document.querySelector(`.${buttonClass}`) if (button) {