fix(webpage): revert auto restore progress from bilibili

PKM-er · Feb 15, 2024 · 77f83db · 77f83db
1 parent ec12563
commit 77f83db
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 7 deletions.
diff --git a/apps/app/src/lib/remote-player/hook/handler-register.ts b/apps/app/src/lib/remote-player/hook/handler-register.ts
@@ -9,9 +9,17 @@ import {
   serializeMediaStatePropValue,
 } from "../type";
 
-export function registerHandlers(plugin: MediaPlugin) {
-  const player = plugin.media;
-  const port = plugin.controller;
+export interface MediaStateRef {
+  prevSeek: {
+    value: number;
+    time: number;
+  } | null;
+}
+
+export function registerHandlers(this: MediaPlugin) {
+  const player = this.media;
+  const port = this.controller;
+  const ref = this.stateRef;
   mediaReadonlyStateProps.forEach((prop) => {
     port.handle(`get${capitalize(prop)}`, () => ({
       value: serializeMediaStatePropValue(player[prop]),
@@ -30,9 +38,19 @@ export function registerHandlers(plugin: MediaPlugin) {
     port.handle(`get${capitalize(prop)}`, () => ({
       value: serializeMediaStatePropValue(player[prop]),
     }));
-    port.handle(`set${capitalize(prop)}`, (val) => {
-      (player as any)[prop] = val;
-    });
+    if (prop === "currentTime") {
+      port.handle(`set${capitalize(prop)}`, (val) => {
+        ref.prevSeek = {
+          value: player.currentTime,
+          time: Date.now(),
+        };
+        (player as any)[prop] = val;
+      });
+    } else {
+      port.handle(`set${capitalize(prop)}`, (val) => {
+        (player as any)[prop] = val;
+      });
+    }
   });
   mediaActionProps.forEach((prop) => {
     port.handle(prop, async (...args) => ({
@@ -73,6 +91,7 @@ export function registerHandlers(plugin: MediaPlugin) {
       transfer: [ab],
     };
   });
+  return ref;
 }
 
 async function streamToArrayBuffer(readableStream: ReadableStream<Uint8Array>) {

diff --git a/apps/app/src/lib/remote-player/lib/plugin.ts b/apps/app/src/lib/remote-player/lib/plugin.ts
@@ -1,6 +1,7 @@
 import { LifeCycle } from "@/lib/lifecycle";
 import { TimeoutError } from "@/lib/message";
 import { registerEvents } from "../hook/event-register";
+import type { MediaStateRef } from "../hook/handler-register";
 import { registerHandlers } from "../hook/handler-register";
 import { handleReadyState } from "../hook/ready-state";
 import { fluentTimeUpdate } from "../hook/time-update";
@@ -25,6 +26,7 @@ export default class MediaPlugin extends LifeCycle {
   }
 
   #media: HTMLMediaElement | null = null;
+  protected stateRef: MediaStateRef = { prevSeek: null };
   findMedia(): Promise<HTMLMediaElement> {
     return waitForSelector<HTMLMediaElement>("video, audio");
   }
@@ -110,7 +112,7 @@ export default class MediaPlugin extends LifeCycle {
     handleReadyState(this);
     fluentTimeUpdate(this);
     registerEvents(this);
-    registerHandlers(this);
+    registerHandlers.call(this);
     this.controller.send(mountedEvent, void 0);
   }
 }

diff --git a/apps/app/src/web/userscript/bilibili.ts b/apps/app/src/web/userscript/bilibili.ts
@@ -35,6 +35,7 @@ export default class BilibiliPlugin extends MediaPlugin {
       JSON.stringify({ media: { autoplay: false } }),
     );
     await super.onload();
+    this.revertAutoSeek();
     await this.untilMediaReady("canplay");
     await Promise.all([this.toggleDanmaku(false), this.untilWebFullscreen()]);
   }
@@ -103,6 +104,45 @@ export default class BilibiliPlugin extends MediaPlugin {
     fsButton.click();
   }
 
+  async revertAutoSeek() {
+    const plyaer = this.player;
+    const toastContainer = plyaer.querySelector<HTMLDivElement>(
+      ".bpx-player-toast-auto",
+    );
+    if (!toastContainer) {
+      console.log("toast container not found");
+      return;
+    }
+
+    const handler = () => {
+      if (
+        this.stateRef.prevSeek &&
+        this.stateRef.prevSeek.time > Date.now() - 5e3
+      ) {
+        // if the seek is recent (within 5 seconds)
+        this.media.currentTime = this.stateRef.prevSeek.value;
+      } else {
+        this.media.currentTime = 0;
+      }
+    };
+
+    const observer = new MutationObserver((mutations) => {
+      mutations
+        .find((m) => m.type === "childList" && m.addedNodes.length > 0)
+        ?.addedNodes.forEach((node) => {
+          if (node.textContent?.includes("已为您定位至")) {
+            (node as HTMLDivElement).style.opacity = "0";
+            handler();
+          }
+        });
+    });
+    observer.observe(toastContainer, {
+      childList: true,
+      subtree: true,
+    });
+    this.register(() => observer.disconnect());
+  }
+
   async untilWebFullscreen() {
     const playerEl = this.player;
     if (this.isWebFullscreen()) return;