Blur shortcuts improvements (#461)

* extension: unblur shortcut * rename toggleBlur -> unblur * Revert "rename toggleBlur -> unblur" This reverts commit f232dc8. * Re-implement using modifications to subtitle elements' class list * rename toggleBlur -> unblur --------- Co-authored-by: R-J Lim <[email protected]>
killergerbah · Aug 24, 2024 · 5ddeac8 · 5ddeac8
1 parent 7405b74
commit 5ddeac8
Show file tree

Hide file tree

Showing 22 changed files with 125 additions and 117 deletions.
diff --git a/common/app/components/VideoPlayer.tsx b/common/app/components/VideoPlayer.tsx
@@ -838,7 +838,7 @@ export default function VideoPlayer({
     }, [keyBinder, playerChannel]);
 
     useEffect(() => {
-        return keyBinder.bindToggleBlurTrack(
+        return keyBinder.bindUnblurTrack(
             (event, targetTrack) => {
                 event.preventDefault();
                 let newSubtitleSettings = { ...subtitleSettings };

diff --git a/common/app/services/app-key-binder.ts b/common/app/services/app-key-binder.ts
@@ -231,12 +231,12 @@ export default class AppKeyBinder implements KeyBinder {
         );
     }
 
-    bindToggleBlurTrack(
-        onToggleBlurTrack: (event: KeyboardEvent, track: number) => void,
+    bindUnblurTrack(
+        onUnblurTrack: (event: KeyboardEvent, track: number) => void,
         disabledGetter: () => boolean,
         useCapture?: boolean | undefined
     ): () => void {
-        return this.defaultKeyBinder.bindToggleBlurTrack(onToggleBlurTrack, disabledGetter, useCapture);
+        return this.defaultKeyBinder.bindUnblurTrack(onUnblurTrack, disabledGetter, useCapture);
     }
 
     bindPlay(

diff --git a/common/components/SettingsForm.tsx b/common/components/SettingsForm.tsx
@@ -732,16 +732,16 @@ export default function SettingsForm({
                 label: t('binds.toggleAsbplayerSubtitleTrack3')!,
                 boundViaChrome: false,
             },
-            toggleAsbplayerBlurTrack1: {
-                label: t('binds.toggleAsbplayerBlurTrack', { trackNumber: 1 })!,
+            unblurAsbplayerTrack1: {
+                label: t('binds.unblurAsbplayerTrack', { trackNumber: 1 })!,
                 boundViaChrome: false,
             },
-            toggleAsbplayerBlurTrack2: {
-                label: t('binds.toggleAsbplayerBlurTrack', { trackNumber: 2 })!,
+            unblurAsbplayerTrack2: {
+                label: t('binds.unblurAsbplayerTrack', { trackNumber: 2 })!,
                 boundViaChrome: false,
             },
-            toggleAsbplayerBlurTrack3: {
-                label: t('binds.toggleAsbplayerBlurTrack', { trackNumber: 3 })!,
+            unblurAsbplayerTrack3: {
+                label: t('binds.unblurAsbplayerTrack', { trackNumber: 3 })!,
                 boundViaChrome: false,
             },
             seekBackward: { label: t('binds.seekBackward')!, boundViaChrome: false },

diff --git a/common/key-binder/key-binder.ts b/common/key-binder/key-binder.ts
@@ -110,8 +110,8 @@ export interface KeyBinder {
         disabledGetter: () => boolean,
         capture?: boolean
     ): () => void;
-    bindToggleBlurTrack(
-        onToggleBlurTrack: (event: KeyboardEvent, track: number) => void,
+    bindUnblurTrack(
+        onUnblurTrack: (event: KeyboardEvent, track: number) => void,
         disabledGetter: () => boolean,
         capture?: boolean
     ): () => void;
@@ -654,15 +654,15 @@ export class DefaultKeyBinder implements KeyBinder {
         };
     }
 
-    bindToggleBlurTrack(
-        onToggleBlurTrack: (event: KeyboardEvent, track: number) => void,
+    bindUnblurTrack(
+        onUnblurTrack: (event: KeyboardEvent, track: number) => void,
         disabledGetter: () => boolean,
         capture = false
     ) {
         const shortcuts = [
-            this.keyBindSet.toggleAsbplayerBlurTrack1.keys,
-            this.keyBindSet.toggleAsbplayerBlurTrack2.keys,
-            this.keyBindSet.toggleAsbplayerBlurTrack3.keys,
+            this.keyBindSet.unblurAsbplayerTrack1.keys,
+            this.keyBindSet.unblurAsbplayerTrack2.keys,
+            this.keyBindSet.unblurAsbplayerTrack3.keys,
         ].filter((s) => s);
 
         if (shortcuts.length === 0) {
@@ -674,7 +674,7 @@ export class DefaultKeyBinder implements KeyBinder {
                 return false;
             }
 
-            onToggleBlurTrack(event, track);
+            onUnblurTrack(event, track);
             return true;
         };
         let unbindHandlers: (() => void)[] = [];

diff --git a/common/locales/de.json b/common/locales/de.json
@@ -109,6 +109,7 @@
         "toggleAsbplayerSubtitleTrack3": "Untertitel 3 in asbplayer umschalten",
         "toggleAsbplayerSubtitleTracks": "Untertitel in absplayer umschalten",
         "toggleAsbplayerBlurTrack": "Toggle subtitle track {{trackNumber}} blur in asbplayer",
+        "unblurAsbplayerTrack": "Unblur subtitle track {{trackNumber}} in asbplayer",
         "toggleAutoPause": "Auto-Pause aktivieren / deaktivieren",
         "toggleCondensedPlayback": "Komprimiertes Audio-Playback aktivieren / deaktivieren",
         "toggleFastForwardPlayback": "Toggle fast forward playback",

diff --git a/common/locales/en.json b/common/locales/en.json
@@ -109,6 +109,7 @@
         "toggleAsbplayerSubtitleTrack3": "Toggle subtitle track 3 in asbplayer",
         "toggleAsbplayerSubtitleTracks": "Toggle subtitle track in asbplayer",
         "toggleAsbplayerBlurTrack": "Toggle subtitle track {{trackNumber}} blur in asbplayer",
+        "unblurAsbplayerTrack": "Unblur subtitle track {{trackNumber}} in asbplayer",
         "toggleAutoPause": "Toggle auto-pause",
         "toggleCondensedPlayback": "Toggle condensed playback",
         "toggleFastForwardPlayback": "Toggle fast forward playback",

diff --git a/common/locales/es.json b/common/locales/es.json
@@ -109,6 +109,7 @@
         "toggleAsbplayerSubtitleTrack3": "Activar/Desactivar pista de subtítulos 3 en asbplayer",
         "toggleAsbplayerSubtitleTracks": "Activar/Desactivar pista de subtítulos en asbplayer",
         "toggleAsbplayerBlurTrack": "Activar/Desactivar desenfoque de la pista de subtítulos {{trackNumber}} en asbplayer",
+        "unblurAsbplayerTrack": "Unblur subtitle track {{trackNumber}} in asbplayer",
         "toggleAutoPause": "Activar/Desactivar pausado automático",
         "toggleCondensedPlayback": "Activar/Desactivar reproducción condensada",
         "toggleFastForwardPlayback": "Activar/Desactivar reproducción acelerada",

diff --git a/common/locales/ja.json b/common/locales/ja.json
@@ -109,6 +109,7 @@
         "toggleAsbplayerSubtitleTrack3": "asbplayer の字幕トラック 3 オン/オフ",
         "toggleAsbplayerSubtitleTracks": "asbplayer の字幕トラック オン/オフ",
         "toggleAsbplayerBlurTrack": "asbplayer の字幕トラック {{trackNumber}} のぼかし オン/オフ",
+        "unblurAsbplayerTrack": "Unblur subtitle track {{trackNumber}} in asbplayer",
         "toggleAutoPause": "自動一時停止オン/オフ",
         "toggleCondensedPlayback": "短縮プレイバック",
         "toggleFastForwardPlayback": "早送りプレイバックオン/オフ",

diff --git a/common/locales/pl.json b/common/locales/pl.json
@@ -109,6 +109,7 @@
         "toggleAsbplayerSubtitleTrack3": "Przełącz ścieżkę napisów 3 w asbplayer",
         "toggleAsbplayerSubtitleTracks": "Przełącz ścieżki napisów w asbplayer",
         "toggleAsbplayerBlurTrack": "Przełącz rozmycie ścieżki napisów {{trackNumber}}",
+        "unblurAsbplayerTrack": "Unblur subtitle track {{trackNumber}} in asbplayer",
         "toggleAutoPause": "Przełącz automatyczną pauzę",
         "toggleCondensedPlayback": "Przełącz odtwarzanie skondensowane",
         "toggleFastForwardPlayback": "Przełącz tryb przyspieszonego odtwarzania",

diff --git a/common/locales/pt_BR.json b/common/locales/pt_BR.json
@@ -108,7 +108,8 @@
         "toggleAsbplayerSubtitleTrack2": "Alternar a faixa de legenda 2 no asbplayer",
         "toggleAsbplayerSubtitleTrack3": "Alternar a faixa de legenda 3 no asbplayer",
         "toggleAsbplayerSubtitleTracks": "Alterne a faixa de legenda no asbplayer",
-        "toggleAsbplayerBlurTrack": "Toggle subtitle track {{trackNumber}} blur in asbplayer",
+        "toggleAsbplayerBlurTrack": "Alternar o desfoque da faixa de legendas {{trackNumber}} no asbplayer",
+        "unblurAsbplayerTrack": "Desfocar a faixa de legenda {{trackNumber}} no asbplayer",
         "toggleAutoPause": "Alternar pausa automática",
         "toggleCondensedPlayback": "Alternar reprodução condensada",
         "toggleFastForwardPlayback": "Alternar reprodução de avanço rápido",

diff --git a/common/locales/ru.json b/common/locales/ru.json
@@ -108,7 +108,8 @@
         "toggleAsbplayerSubtitleTrack2": "Включить/выключить дорожку субтитров 2 в asbplayer",
         "toggleAsbplayerSubtitleTrack3": "Включить/выключить дорожку субтитров 3 в asbplayer",
         "toggleAsbplayerSubtitleTracks": "Включить/выключить дорожку субтитров в asbplayer",
-        "toggleAsbplayerBlurTrack": "Toggle subtitle track {{trackNumber}} blur in asbplayer",
+        "toggleAsbplayerBlurTrack": "Включить/выключить размытие дорожки субтитров {{trackNumber}} в asbplayer",
+        "unblurAsbplayerTrack": "Выключить размытие дорожки субтитров {{trackNumber}} в asbplayer",
         "toggleAutoPause": "Включить/выключить автоматическую паузу",
         "toggleCondensedPlayback": "Включить/выключить конденсированное воспроизведение",
         "toggleFastForwardPlayback": "Включить/выключить ускоренное воспроизведение",

diff --git a/common/locales/zh_CN.json b/common/locales/zh_CN.json
@@ -109,6 +109,7 @@
         "toggleAsbplayerSubtitleTrack3": "切换asbplayer中的字幕音轨3",
         "toggleAsbplayerSubtitleTracks": "在asbplayer中切换字幕音轨",
         "toggleAsbplayerBlurTrack": "Toggle subtitle track {{trackNumber}} blur in asbplayer",
+        "unblurAsbplayerTrack": "Unblur subtitle track {{trackNumber}} in asbplayer",
         "toggleAutoPause": "切换自动暂停",
         "toggleCondensedPlayback": "切换压缩播放",
         "toggleFastForwardPlayback": "Toggle fast forward playback",

diff --git a/common/settings/settings-import-export.test.ts b/common/settings/settings-import-export.test.ts
@@ -90,8 +90,8 @@ it('validates exported settings', () => {
             takeScreenshot: { keys: '⇧+⌃+V' },
             toggleAsbplayerSubtitleTrack1: { keys: 'W+1' },
             toggleAsbplayerSubtitleTrack2: { keys: 'W+2' },
-            toggleAsbplayerBlurTrack1: { keys: 'B+1' },
-            toggleAsbplayerBlurTrack2: { keys: 'B+2' },
+            unblurAsbplayerTrack1: { keys: 'B+1' },
+            unblurAsbplayerTrack2: { keys: 'B+2' },
             toggleAutoPause: { keys: '⇧+P' },
             toggleCondensedPlayback: { keys: '⇧+O' },
             toggleFastForwardPlayback: { keys: '⇧+F' },

diff --git a/common/settings/settings-import-export.ts b/common/settings/settings-import-export.ts
@@ -235,9 +235,9 @@ const settingsSchema = {
                 toggleAsbplayerSubtitleTrack1: { $ref: '/KeyBind' },
                 toggleAsbplayerSubtitleTrack2: { $ref: '/KeyBind' },
                 toggleAsbplayerSubtitleTrack3: { $ref: '/KeyBind' },
-                toggleAsbplayerBlurTrack1: { $ref: '/KeyBind' },
-                toggleAsbplayerBlurTrack2: { $ref: '/KeyBind' },
-                toggleAsbplayerBlurTrack3: { $ref: '/KeyBind' },
+                unblurAsbplayerTrack1: { $ref: '/KeyBind' },
+                unblurAsbplayerTrack2: { $ref: '/KeyBind' },
+                unblurAsbplayerTrack3: { $ref: '/KeyBind' },
                 seekBackward: { $ref: '/KeyBind' },
                 seekForward: { $ref: '/KeyBind' },
                 seekToPreviousSubtitle: { $ref: '/KeyBind' },

diff --git a/common/settings/settings-provider.ts b/common/settings/settings-provider.ts
@@ -84,9 +84,9 @@ export const defaultSettings: AsbplayerSettings = {
         toggleAsbplayerSubtitleTrack1: { keys: 'W+1' },
         toggleAsbplayerSubtitleTrack2: { keys: 'W+2' },
         toggleAsbplayerSubtitleTrack3: { keys: 'W+3' },
-        toggleAsbplayerBlurTrack1: { keys: 'B+1' },
-        toggleAsbplayerBlurTrack2: { keys: 'B+2' },
-        toggleAsbplayerBlurTrack3: { keys: 'B+3' },
+        unblurAsbplayerTrack1: { keys: 'B+1' },
+        unblurAsbplayerTrack2: { keys: 'B+2' },
+        unblurAsbplayerTrack3: { keys: 'B+3' },
         seekBackward: { keys: 'A' },
         seekForward: { keys: 'D' },
         seekToPreviousSubtitle: { keys: 'left' },

diff --git a/common/settings/settings.ts b/common/settings/settings.ts
@@ -213,9 +213,9 @@ export interface KeyBindSet {
     readonly toggleAsbplayerSubtitleTrack1: KeyBind;
     readonly toggleAsbplayerSubtitleTrack2: KeyBind;
     readonly toggleAsbplayerSubtitleTrack3: KeyBind;
-    readonly toggleAsbplayerBlurTrack1: KeyBind;
-    readonly toggleAsbplayerBlurTrack2: KeyBind;
-    readonly toggleAsbplayerBlurTrack3: KeyBind;
+    readonly unblurAsbplayerTrack1: KeyBind;
+    readonly unblurAsbplayerTrack2: KeyBind;
+    readonly unblurAsbplayerTrack3: KeyBind;
     readonly seekBackward: KeyBind;
     readonly seekForward: KeyBind;
     readonly seekToPreviousSubtitle: KeyBind;

diff --git a/common/src/message.ts b/common/src/message.ts
@@ -275,12 +275,6 @@ export interface ToggleSubtitlesMessage extends Message {
     readonly command: 'toggle-subtitles';
 }
 
-export interface BlurSubtitlesMessage extends Message {
-    readonly command: 'blur-subtitles';
-    readonly track: number;
-    readonly trackCount: number;
-}
-
 export interface ToggleSubtitlesInListFromVideoMessage extends Message {
     readonly command: 'toggleSubtitleTrackInList';
     readonly track: number;

diff --git a/extension/src/background.ts b/extension/src/background.ts
@@ -54,7 +54,6 @@ import CurrentTabHandler from './handlers/mobile-overlay/current-tab-handler';
 import UpdateMobileOverlayModelHandler from './handlers/video/update-mobile-overlay-model-handler';
 import { isMobile } from './services/device-detection';
 import { enqueueUpdateAlert } from './services/update-alert';
-import BlurSubtitlesHandler from './handlers/video/blur-subtitles-handler';
 
 if (!isFirefoxBuild) {
     chrome.storage.session.setAccessLevel({ accessLevel: 'TRUSTED_AND_UNTRUSTED_CONTEXTS' });
@@ -120,7 +119,6 @@ const handlers: CommandHandler[] = [
     new StopRecordingMediaHandler(audioRecorder, imageCapturer, cardPublisher, settings),
     new TakeScreenshotHandler(imageCapturer, cardPublisher),
     new ToggleSubtitlesHandler(settings, tabRegistry),
-    new BlurSubtitlesHandler(settings, tabRegistry),
     new SyncHandler(tabRegistry),
     new HttpPostHandler(),
     new ToggleSidePanelHandler(tabRegistry),

diff --git a/extension/src/controllers/subtitle-controller.ts b/extension/src/controllers/subtitle-controller.ts
@@ -46,6 +46,7 @@ export default class SubtitleController {
     private subtitleCollection: SubtitleCollection<SubtitleModelWithIndex>;
     private subtitlesElementOverlay: ElementOverlay;
     private notificationElementOverlay: ElementOverlay;
+    private unblurredSubtitleTracks: { [key: number]: boolean | undefined };
     disabledSubtitleTracks: { [key: number]: boolean | undefined };
     subtitleFileNames?: string[];
     _forceHideSubtitles: boolean;
@@ -77,6 +78,7 @@ export default class SubtitleController {
         this._subtitles = [];
         this.subtitleCollection = new SubtitleCollection<SubtitleModelWithIndex>([]);
         this.showingSubtitles = [];
+        this.unblurredSubtitleTracks = {};
         this.disabledSubtitleTracks = {};
         this._forceHideSubtitles = false;
         this._displaySubtitles = true;
@@ -139,6 +141,7 @@ export default class SubtitleController {
     setSubtitleSettings(newSubtitleSettings: SubtitleSettings) {
         const styles = this._computeStyles(newSubtitleSettings);
         const classes = this._computeClasses(newSubtitleSettings);
+        this.unblurredSubtitleTracks = {};
 
         if (
             this.subtitleStyles === undefined ||
@@ -340,6 +343,7 @@ export default class SubtitleController {
             if ((!showOffset && !this._displaySubtitles) || this._forceHideSubtitles) {
                 this.subtitlesElementOverlay.hide();
             } else if (subtitlesAreNew || shouldRenderOffset) {
+                this._resetUnblurState();
                 this._renderSubtitles(showingSubtitles);
 
                 if (showOffset) {
@@ -356,6 +360,22 @@ export default class SubtitleController {
         this._setSubtitlesHtml(this._buildSubtitlesHtml(subtitles));
     }
 
+    private _resetUnblurState() {
+        if (Object.keys(this.unblurredSubtitleTracks).length === 0) {
+            return;
+        }
+
+        for (const element of this.subtitlesElementOverlay.displayingElements()) {
+            const track = Number(element.dataset.track);
+
+            if (this.unblurredSubtitleTracks[track] === true) {
+                element.classList.add('asbplayer-subtitles-blurred');
+            }
+        }
+
+        this.unblurredSubtitleTracks = {};
+    }
+
     private _autoCopyToClipboard(subtitles: SubtitleModel[]) {
         if (this.autoCopyCurrentSubtitle && subtitles.length > 0 && document.hasFocus()) {
             const text = subtitles
@@ -395,7 +415,9 @@ export default class SubtitleController {
                         const width = imageScale * subtitle.textImage.image.width;
 
                         return `
-                            <div style="max-width:${width}px;margin:auto;" class="${className}"}">
+                            <div data-track="${
+                                subtitle.track ?? 0
+                            }" style="max-width:${width}px;margin:auto;" class="${className}"}">
                                 <img
                                     style="width:100%;"
                                     alt="subtitle"
@@ -413,7 +435,9 @@ export default class SubtitleController {
     }
 
     private _buildTextHtml(text: string, track?: number) {
-        return `<span class="${this._subtitleClasses(track)}" style="${this._subtitleStyles(track)}">${text}</span>`;
+        return `<span data-track="${track ?? 0}" class="${this._subtitleClasses(track)}" style="${this._subtitleStyles(
+            track
+        )}">${text}</span>`;
     }
 
     unbind() {
@@ -474,6 +498,17 @@ export default class SubtitleController {
         ];
     }
 
+    unblur(track: number) {
+        for (const element of this.subtitlesElementOverlay.displayingElements()) {
+            const elementTrack = Number(element.dataset.track);
+
+            if (track === elementTrack && element.classList.contains('asbplayer-subtitles-blurred')) {
+                this.unblurredSubtitleTracks[track] = true;
+                element.classList.remove('asbplayer-subtitles-blurred');
+            }
+        }
+    }
+
     offset(offset: number, skipNotifyPlayer = false) {
         if (!this.subtitles || this.subtitles.length === 0) {
             return;

diff --git a/extension/src/handlers/video/blur-subtitles-handler.ts b/extension/src/handlers/video/blur-subtitles-handler.ts