Another speculative fix for missing overlay that actually seems to work

killergerbah · Feb 25, 2024 · f20a304 · f20a304
1 parent d52774c
commit f20a304
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/extension/src/controllers/mobile-video-overlay-controller.ts b/extension/src/controllers/mobile-video-overlay-controller.ts
@@ -170,6 +170,11 @@ export class MobileVideoOverlayController {
         this._show();
     }
 
+    disposeOverlay() {
+        this._overlay.dispose();
+        this._overlay = MobileVideoOverlayController._elementOverlay(this._context.video, this._overlay.offsetAnchor);
+    }
+
     private _show() {
         if (!this._context.synced || this._forceHiding) {
             return;

diff --git a/extension/src/services/binding.ts b/extension/src/services/binding.ts
@@ -451,6 +451,7 @@ export default class Binding {
         if (this.subSyncAvailable) {
             this.videoChangeListener = () => {
                 this.videoDataSyncController.requestSubtitles();
+                this.mobileVideoOverlayController.disposeOverlay();
             };
             this.video.addEventListener('loadedmetadata', this.videoChangeListener);
         }

diff --git a/extension/src/ui/hooks/use-mobile-video-overlay-model.ts b/extension/src/ui/hooks/use-mobile-video-overlay-model.ts
@@ -16,6 +16,7 @@ interface Params {
 
 export const useMobileVideoOverlayModel = ({ location }: Params) => {
     const [model, setModel] = useState<MobileOverlayModel>();
+
     useEffect(() => {
         if (!location) {
             return;
@@ -30,17 +31,25 @@ export const useMobileVideoOverlayModel = ({ location }: Params) => {
                 },
                 src: location.src,
             };
-            const model = await chrome.tabs.sendMessage(location.tabId, command);
-            setModel(model);
+            const initialModel = await chrome.tabs.sendMessage(location.tabId, command);
+            setModel(initialModel);
         };
 
         let timeout: NodeJS.Timeout | undefined;
+        let cancelled = false;
 
         const init = async () => {
             try {
+                if (cancelled) {
+                    return;
+                }
+
                 await requestModel();
             } catch (e) {
-                console.log('Failed to request overlay model, retrying in 1s');
+                console.log(
+                    'Failed to request overlay model, retrying in 1s. Message: ' +
+                        (e instanceof Error ? e.message : String(e))
+                );
                 timeout = setTimeout(() => init(), 1000);
             }
         };
@@ -51,8 +60,11 @@ export const useMobileVideoOverlayModel = ({ location }: Params) => {
             if (timeout !== undefined) {
                 clearTimeout(timeout);
             }
+
+            cancelled = true;
         };
     }, [location]);
+
     useEffect(() => {
         if (!location) {
             return;