Fix auto-pause pausing too much

killergerbah · Dec 28, 2022 · 3e71795 · 3e71795
1 parent 2e6d165
commit 3e71795
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 91 deletions.
diff --git a/client/src/components/Player.tsx b/client/src/components/Player.tsx
@@ -5,6 +5,7 @@ import {
     AsbplayerSettingsProvider,
     AudioModel,
     AudioTrackModel,
+    AutoPauseContext,
     AutoPausePreference,
     ImageModel,
     KeyBinder,
@@ -222,6 +223,39 @@ export default function Player({
     const lengthRef = useRef<number>(0);
     lengthRef.current = trackLength(audioRef, videoRef, subtitles, true);
 
+    const handleOnStartedShowingSubtitle = useCallback(() => {
+        if (
+            playMode !== PlayMode.autoPause ||
+            settingsProvider.autoPausePreference !== AutoPausePreference.atStart ||
+            videoFileUrl // Let VideoPlayer do the auto-pausing
+        ) {
+            return;
+        }
+
+        pause(clock, mediaAdapter, true);
+    }, [playMode, clock, mediaAdapter, videoFileUrl, settingsProvider]);
+
+    const handleOnWillStopShowingSubtitle = useCallback(() => {
+        if (
+            playMode !== PlayMode.autoPause ||
+            settingsProvider.autoPausePreference !== AutoPausePreference.atEnd ||
+            videoFileUrl // Let VideoPlayer do the auto-pausing
+        ) {
+            return;
+        }
+
+        pause(clock, mediaAdapter, true);
+    }, [playMode, clock, mediaAdapter, videoFileUrl, settingsProvider]);
+
+    const autoPauseContext = useMemo(() => {
+        const context = new AutoPauseContext();
+        context.onStartedShowing = handleOnStartedShowingSubtitle;
+        context.onWillStopShowing = handleOnWillStopShowingSubtitle;
+        return context;
+    }, [handleOnStartedShowingSubtitle, handleOnWillStopShowingSubtitle]);
+    const autoPauseContextRef = useRef<AutoPauseContext>();
+    autoPauseContextRef.current = autoPauseContext;
+
     const seek = useCallback(
         async (time: number, clock: Clock, forwardToMedia: boolean) => {
             clock.setTime(time);
@@ -230,6 +264,8 @@ export default function Player({
             if (forwardToMedia) {
                 await mediaAdapter.seek(time / 1000);
             }
+
+            autoPauseContextRef.current?.clear();
         },
         [forceUpdate, mediaAdapter]
     );
@@ -618,30 +654,6 @@ export default function Player({
         return () => clearInterval(interval);
     }, [subtitles, subtitleCollection, playMode, clock, seek]);
 
-    const handleOnStartedShowingSubtitle = useCallback(() => {
-        if (
-            playMode !== PlayMode.autoPause ||
-            settingsProvider.autoPausePreference !== AutoPausePreference.atStart ||
-            videoFileUrl // Let VideoPlayer do the auto-pausing
-        ) {
-            return;
-        }
-
-        pause(clock, mediaAdapter, true);
-    }, [playMode, clock, mediaAdapter, videoFileUrl, settingsProvider]);
-
-    const handleOnWillStopShowingSubtitle = useCallback(() => {
-        if (
-            playMode !== PlayMode.autoPause ||
-            settingsProvider.autoPausePreference !== AutoPausePreference.atEnd ||
-            videoFileUrl // Let VideoPlayer do the auto-pausing
-        ) {
-            return;
-        }
-
-        pause(clock, mediaAdapter, true);
-    }, [playMode, clock, mediaAdapter, videoFileUrl, settingsProvider]);
-
     useEffect(() => {
         if (videoPopOut && channelId && videoFileUrl) {
             window.open(
@@ -1079,8 +1091,7 @@ export default function Player({
                             onCopy={handleCopyFromSubtitlePlayer}
                             onOffsetChange={handleOffsetChange}
                             onToggleSubtitleTrack={handleToggleSubtitleTrack}
-                            onStartedShowing={handleOnStartedShowingSubtitle}
-                            onWillStopShowing={handleOnWillStopShowingSubtitle}
+                            autoPauseContext={autoPauseContext}
                             settingsProvider={settingsProvider}
                             keyBinder={keyBinder}
                         />

diff --git a/client/src/components/SubtitlePlayer.tsx b/client/src/components/SubtitlePlayer.tsx
@@ -9,6 +9,7 @@ import {
     SubtitleModel,
     SubtitleCollection,
     KeyBinder,
+    AutoPauseContext,
 } from '@project/common';
 import { SubtitleTextImage } from '@project/common/components';
 import FileCopy from '@material-ui/icons/FileCopy';
@@ -179,8 +180,7 @@ interface SubtitlePlayerProps {
     ) => void;
     onOffsetChange: (offset: number) => void;
     onToggleSubtitleTrack: (track: number) => void;
-    onStartedShowing?: () => void;
-    onWillStopShowing?: () => void;
+    autoPauseContext: AutoPauseContext;
     playing: boolean;
     subtitles?: DisplaySubtitleModel[];
     subtitleCollection?: SubtitleCollection<DisplaySubtitleModel>;
@@ -206,8 +206,7 @@ export default function SubtitlePlayer({
     onCopy,
     onOffsetChange,
     onToggleSubtitleTrack,
-    onStartedShowing,
-    onWillStopShowing,
+    autoPauseContext,
     playing,
     subtitles,
     subtitleCollection,
@@ -241,7 +240,9 @@ export default function SubtitlePlayer({
                 : [],
         [subtitles]
     );
-    const subtitleCollectionRef = useRef<SubtitleCollection<DisplaySubtitleModel>>(SubtitleCollection.empty<DisplaySubtitleModel>());
+    const subtitleCollectionRef = useRef<SubtitleCollection<DisplaySubtitleModel>>(
+        SubtitleCollection.empty<DisplaySubtitleModel>()
+    );
     subtitleCollectionRef.current = subtitleCollection ?? SubtitleCollection.empty<DisplaySubtitleModel>();
     const subtitleRefsRef = useRef<RefObject<HTMLTableRowElement>[]>([]);
     subtitleRefsRef.current = subtitleRefs;
@@ -260,12 +261,8 @@ export default function SubtitlePlayer({
     drawerOpenRef.current = drawerOpen;
     const [windowWidth] = useWindowSize(true);
     const classes = useSubtitlePlayerStyles({ compressed, windowWidth, appBarHidden });
-    const startedShowingSubtitleRef = useRef<SubtitleModel>();
-    const onStartedShowingRef = useRef<() => void>();
-    onStartedShowingRef.current = onStartedShowing;
-    const willStopShowingSubtitleRef = useRef<SubtitleModel>();
-    const onWillStopShowingRef = useRef<() => void>();
-    onWillStopShowingRef.current = onWillStopShowing;
+    const autoPauseContextRef = useRef<AutoPauseContext>();
+    autoPauseContextRef.current = autoPauseContext;
 
     // This effect should be scheduled only once as re-scheduling seems to cause performance issues.
     // Therefore all of the state it operates on is contained in refs.
@@ -306,20 +303,12 @@ export default function SubtitlePlayer({
                 }
             }
 
-            if (startedShowingSubtitleRef.current !== slice.startedShowing) {
-                if (slice.startedShowing !== undefined) {
-                    onStartedShowingRef.current?.();
-                }
-
-                startedShowingSubtitleRef.current = slice.startedShowing;
+            if (slice.startedShowing !== undefined) {
+                autoPauseContextRef.current?.startedShowing(slice.startedShowing);
             }
 
-            if (willStopShowingSubtitleRef.current !== slice.willStopShowing) {
-                if (slice.willStopShowing !== undefined) {
-                    onWillStopShowingRef.current?.();
-                }
-
-                willStopShowingSubtitleRef.current = slice.willStopShowing;
+            if (slice.willStopShowing !== undefined) {
+                autoPauseContextRef.current?.willStopShowing(slice.willStopShowing);
             }
 
             requestAnimationRef.current = requestAnimationFrame(update);

diff --git a/client/src/components/VideoPlayer.tsx b/client/src/components/VideoPlayer.tsx
@@ -16,6 +16,7 @@ import {
     AnkiSettings,
     SubtitleCollection,
     AutoPausePreference,
+    AutoPauseContext,
 } from '@project/common';
 import { SubtitleTextImage } from '@project/common/components';
 import Clock from '../services/Clock';
@@ -195,8 +196,6 @@ export default function VideoPlayer({
         [subtitles]
     );
     const [showSubtitles, setShowSubtitles] = useState<IndexedSubtitleModel[]>([]);
-    const [startedShowingSubtitle, setStartedShowingSubtitle] = useState<IndexedSubtitleModel>();
-    const [willStopShowingSubtitle, setWillStopShowingSubtitle] = useState<IndexedSubtitleModel>();
     const [subtitlesEnabled, setSubtitlesEnabled] = useState(true);
     const [disabledSubtitleTracks, setDisabledSubtitleTracks] = useState<{ [index: number]: boolean }>({});
     const [playMode, setPlayMode] = useState<PlayMode>(PlayMode.normal);
@@ -215,6 +214,26 @@ export default function VideoPlayer({
     const [alertOpen, setAlertOpen] = useState<boolean>(false);
     const [alertMessage, setAlertMessage] = useState<string>('');
     const [alertSeverity, setAlertSeverity] = useState<Color>('info');
+    const autoPauseContext = useMemo(() => {
+        const context = new AutoPauseContext();
+        context.onStartedShowing = () => {
+            if (playMode !== PlayMode.autoPause || miscSettings.autoPausePreference !== AutoPausePreference.atStart) {
+                return;
+            }
+
+            playerChannel.pause();
+        };
+        context.onWillStopShowing = () => {
+            if (playMode !== PlayMode.autoPause || miscSettings.autoPausePreference !== AutoPausePreference.atEnd) {
+                return;
+            }
+
+            playerChannel.pause();
+        };
+        return context;
+    }, [playerChannel, miscSettings, playMode]);
+    const autoPauseContextRef = useRef<AutoPauseContext>();
+    autoPauseContextRef.current = autoPauseContext;
 
     const keyBinder = useMemo<AppKeyBinder>(
         () => new AppKeyBinder(new DefaultKeyBinder(miscSettings.keyBindSet), extension),
@@ -327,6 +346,7 @@ export default function VideoPlayer({
 
             clock.stop();
             clock.setTime(currentTime * 1000);
+            autoPauseContextRef.current?.clear();
         });
 
         playerChannel.onAudioTrackSelected((id) => {
@@ -348,6 +368,8 @@ export default function VideoPlayer({
                 const offset = s.start - s.originalStart;
                 setOffset(offset);
             }
+
+            autoPauseContextRef.current?.clear();
         });
 
         playerChannel.onPlayMode((playMode) => setPlayMode(playMode));
@@ -441,26 +463,12 @@ export default function VideoPlayer({
                 }
             }
 
-            if (playMode === PlayMode.autoPause) {
-                if (miscSettings.autoPausePreference === AutoPausePreference.atStart) {
-                    if (
-                        slice.startedShowing &&
-                        slice.startedShowing !== startedShowingSubtitle &&
-                        !disabledSubtitleTracks[slice.startedShowing.track]
-                    ) {
-                        playerChannel.pause();
-                        setStartedShowingSubtitle(slice.startedShowing);
-                    }
-                } else {
-                    if (
-                        slice.willStopShowing &&
-                        slice.willStopShowing !== willStopShowingSubtitle &&
-                        !disabledSubtitleTracks[slice.willStopShowing.track]
-                    ) {
-                        playerChannel.pause();
-                        setWillStopShowingSubtitle(slice.willStopShowing);
-                    }
-                }
+            if (slice.startedShowing && !disabledSubtitleTracks[slice.startedShowing.track]) {
+                autoPauseContext.startedShowing(slice.startedShowing);
+            }
+
+            if (slice.willStopShowing && !disabledSubtitleTracks[slice.willStopShowing.track]) {
+                autoPauseContext.willStopShowing(slice.willStopShowing);
             }
 
             showSubtitles = showSubtitles.sort((s1, s2) => s1.track - s2.track);
@@ -471,18 +479,7 @@ export default function VideoPlayer({
         }, 100);
 
         return () => clearTimeout(interval);
-    }, [
-        subtitleCollection,
-        playerChannel,
-        playMode,
-        subtitles,
-        disabledSubtitleTracks,
-        clock,
-        length,
-        miscSettings,
-        startedShowingSubtitle,
-        willStopShowingSubtitle,
-    ]);
+    }, [subtitleCollection, playerChannel, subtitles, disabledSubtitleTracks, clock, length, autoPauseContext]);
 
     const handleOffsetChange = useCallback(
         (offset: number) => {

diff --git a/common/index.ts b/common/index.ts
@@ -11,3 +11,4 @@ export * from './src/Model';
 export * from './src/Message';
 export * from './src/ExtensionSettings';
 export * from './src/SubtitleCollection';
+export { default as AutoPauseContext } from './src/AutoPauseContext';
diff --git a/common/src/AutoPauseContext.ts b/common/src/AutoPauseContext.ts
@@ -0,0 +1,33 @@
+import { SubtitleModel } from './Model';
+
+export default class AutoPauseContext {
+    private lastStartedShowing?: SubtitleModel;
+    private lastWillStopShowing?: SubtitleModel;
+
+    onStartedShowing?: () => void;
+    onWillStopShowing?: () => void;
+    onNextToShow?: (subtitle: SubtitleModel) => void;
+
+    willStopShowing(subtitle: SubtitleModel) {
+        if (subtitle.end === this.lastWillStopShowing?.end) {
+            return;
+        }
+
+        this.onWillStopShowing?.();
+        this.lastWillStopShowing = subtitle;
+    }
+
+    startedShowing(subtitle: SubtitleModel) {
+        if (subtitle.start === this.lastStartedShowing?.start) {
+            return;
+        }
+
+        this.onStartedShowing?.();
+        this.lastStartedShowing = subtitle;
+    }
+
+    clear() {
+        this.lastStartedShowing = undefined;
+        this.lastWillStopShowing = undefined;
+    }
+}
diff --git a/extension/src/services/Binding.ts b/extension/src/services/Binding.ts
@@ -128,14 +128,14 @@ export default class Binding {
     set playMode(newPlayMode: PlayMode) {
         switch (newPlayMode) {
             case PlayMode.autoPause:
-                this.subtitleContainer.onStartedShowing = () => {
+                this.subtitleContainer.autoPauseContext.onStartedShowing = () => {
                     if (this.recordingMedia || this.autoPausePreference !== AutoPausePreference.atStart) {
                         return;
                     }
 
                     this.pause();
                 };
-                this.subtitleContainer.onWillStopShowing = () => {
+                this.subtitleContainer.autoPauseContext.onWillStopShowing = () => {
                     if (this.recordingMedia || this.autoPausePreference !== AutoPausePreference.atEnd) {
                         return;
                     }
@@ -170,8 +170,8 @@ export default class Binding {
                 break;
             case PlayMode.normal:
                 if (this._playMode === PlayMode.autoPause) {
-                    this.subtitleContainer.onStartedShowing = undefined;
-                    this.subtitleContainer.onWillStopShowing = undefined;
+                    this.subtitleContainer.autoPauseContext.onStartedShowing = undefined;
+                    this.subtitleContainer.autoPauseContext.onWillStopShowing = undefined;
                     this.subtitleContainer.notification('Auto-pause: Off');
                 } else if (this._playMode === PlayMode.condensed) {
                     this.subtitleContainer.onNextToShow = undefined;
@@ -285,6 +285,8 @@ export default class Binding {
             };
 
             chrome.runtime.sendMessage(command);
+
+            this.subtitleContainer.autoPauseContext.clear();
         };
 
         this.playbackRateListener = (event) => {