fix(webview): improve stability of youtube player

PKM-er · Mar 18, 2024 · f649692 · f649692
1 parent 95898ff
commit f649692
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 13 deletions.
diff --git a/apps/app/src/lib/remote-player/hook/ready-state.ts b/apps/app/src/lib/remote-player/hook/ready-state.ts
@@ -14,7 +14,7 @@ export function handleReadyState(plugin: MediaPlugin) {
   plugin.registerDomEvent(player, "canplay", onCanPlay);
   plugin.registerDomEvent(player, "canplaythrough", onCanPlayThrough);
 
-  if (player.readyState === 0) player.load();
+  // if (player.readyState === 0) player.load();
   if (player.readyState >= 0) onLoadStart();
   if (player.readyState >= 1) onLoadedMetadata();
   if (player.readyState >= 2) onLoadedData();

diff --git a/apps/app/src/lib/remote-player/lib/plugin.ts b/apps/app/src/lib/remote-player/lib/plugin.ts
@@ -119,6 +119,11 @@ export default class MediaPlugin extends LifeCycle {
     window.clearTimeout(timeoutId);
   }
 
+  rehookMediaEl(media: HTMLMediaElement) {
+    this.#media = media;
+    this.hookMediaEl();
+  }
+
   async hookMediaEl() {
     handleReadyState(this);
     fluentTimeUpdate(this);

diff --git a/apps/app/src/web/userscript/youtube-no-ad.ts b/apps/app/src/web/userscript/youtube-no-ad.ts
@@ -7,10 +7,6 @@ import YouTubePlugin from "./youtube";
 const { waitForSelector } = requireMx();
 
 export default class YouTubePluginNoAd extends YouTubePlugin {
-  findMedia(): Promise<HTMLMediaElement> {
-    return waitForSelector<HTMLMediaElement>("ytd-app #movie_player video");
-  }
-
   async onload(): Promise<void> {
     await super.onload();
     waitForSelector<HTMLElement>(".video-ads.ytp-ad-module", this.app).then(

diff --git a/apps/app/src/web/userscript/youtube.ts b/apps/app/src/web/userscript/youtube.ts
@@ -80,8 +80,32 @@ import { requireMx } from "./_require";
 const { waitForSelector, MediaPlugin } = requireMx();
 
 export default class YouTubePlugin extends MediaPlugin {
-  findMedia(): Promise<HTMLMediaElement> {
-    return waitForSelector<HTMLMediaElement>("ytd-app #movie_player video");
+  async findMedia(): Promise<HTMLMediaElement> {
+    const media = await waitForSelector<HTMLMediaElement>(
+      "ytd-app #movie_player video",
+    );
+    this.app = media.closest<HTMLElement>("ytd-app")!;
+    this.moviePlayer = media.closest<HTMLElement>("#movie_player")!;
+    if (!this.app || !this.moviePlayer) {
+      throw new Error("Failed to find media");
+    }
+    this.watchIfDetached();
+    return media;
+  }
+
+  watchIfDetached() {
+    const container = this.moviePlayer;
+    const observer = new MutationObserver(async () => {
+      if (this.media.isConnected) return;
+      console.log("Re-attaching media");
+      const lastest = await this.findMedia();
+      if (!lastest) return;
+      console.log("found media");
+      this.rehookMediaEl(lastest);
+      console.log("media hooked");
+    });
+    observer.observe(container, { childList: true, subtree: true });
+    this.register(() => observer.disconnect());
   }
 
   getStyle() {
@@ -99,12 +123,8 @@ export default class YouTubePlugin extends MediaPlugin {
     });
   }
 
-  get app() {
-    return this.media.closest<HTMLElement>("ytd-app")!;
-  }
-  get moviePlayer() {
-    return this.media.closest<HTMLElement>("#movie_player")!;
-  }
+  app!: HTMLElement;
+  moviePlayer!: HTMLElement;
 
   async disableAutoPlay() {
     console.log("Disabling autoplay...");