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..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 @@ -2291,6 +2291,25 @@ export default defineComponent({ return } + // 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() { + for (const buttonClass of buttonWithTooltipClasses) { + 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,6 +2317,7 @@ export default defineComponent({ // Toggle Play/Pause event.preventDefault() video_.paused ? video_.play() : video_.pause() + blurTooltipButtons() break case KeyboardShortcuts.VIDEO_PLAYER.PLAYBACK.LARGE_REWIND: // Rewind by 2x the time-skip interval (in seconds) @@ -2325,6 +2345,7 @@ export default defineComponent({ // Toggle full screen event.preventDefault() ui.getControls().toggleFullScreen() + blurTooltipButtons() break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.MUTE: // Toggle mute only if metakey is not pressed @@ -2337,6 +2358,7 @@ export default defineComponent({ const message = isMuted ? '0%' : `${Math.round(video_.volume * 100)}%` showValueChange(message, messageIcon) } + blurTooltipButtons() break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.CAPTIONS: { // Toggle caption/subtitles @@ -2401,6 +2423,7 @@ export default defineComponent({ controls.togglePiP() } } + blurTooltipButtons() break case '0': case '1': @@ -2486,6 +2509,7 @@ export default defineComponent({ events.dispatchEvent(new CustomEvent('setFullWindow', { detail: !fullWindowEnabled.value })) + blurTooltipButtons() break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.THEATRE_MODE: // Toggle theatre mode @@ -2496,6 +2520,7 @@ export default defineComponent({ detail: !props.useTheatreMode })) } + blurTooltipButtons() break case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.TAKE_SCREENSHOT: if (enableScreenshot.value && props.format !== 'audio') { @@ -2503,6 +2528,7 @@ export default defineComponent({ // Take screenshot takeScreenshot() } + blurTooltipButtons() break } }