fix(app): fix potential autoplay from webpage and embed media

apps/app/src/components/provider.tsx

@@ -26,6 +26,7 @@ export function MediaProviderEnhanced({
           return (
             <WebView
               aria-hidden
+              webpreferences="autoplayPolicy=user-gesture-required"
               // devtools
               partition={partition}
               ref={(inst) => {

apps/app/src/lib/remote-player/lib/inline-eval.ts

@@ -1,6 +1,7 @@
 import type { WebviewTag } from "electron";
 
 export async function evalInWebview(code: string, webview: WebviewTag) {
-  code = code.replaceAll(/\bexport\b/g, "");
-  return await webview.executeJavaScript(`(async function(){${code}})()`);
+  // set userGesture to true to allow full control
+  // like triggering play/pause without user interaction
+  return await webview.executeJavaScript(`(async function(){${code}})()`, true);
 }

apps/app/src/media-view/base.tsx

@@ -19,11 +19,7 @@ export interface PlayerComponent extends Component {
   root: ReactDOM.Root | null;
 }
 
-export function setTempFrag(
-  hash: string,
-  store: MediaViewStoreApi,
-  playAfterSeek = false,
-) {
+export function setTempFrag(hash: string, store: MediaViewStoreApi) {
   store.setState({ hash });
   const tf = parseTempFrag(hash);
   const player = store.getState().player;
@@ -40,11 +36,23 @@ export function setTempFrag(
     player.currentTime = tf.end;
   }
 
-  if (isTimestamp(tf)) {
-    const evt = new Event("hashchange");
-    if (playAfterSeek) {
-      player.play(evt);
-    }
+  // trying to fix youtube and vimeo autoplay on seek
+  if (
+    ["video/vimeo", "video/youtube"].includes(player.state.source.type) &&
+    !player.state.autoplay &&
+    // when first loaded, the provider is not yet available
+    !player.provider
+  ) {
+    const unload = player.listen("play", async () => {
+      setTimeout(() => {
+        player.pause();
+      }, 200);
+      unload();
+    });
+  }
+
+  if (isTimestamp(tf) && player.provider) {
+    player.play(new Event("hashchange"));
   }
 }
 

apps/app/src/web/userscript/bilibili.ts

@@ -4,28 +4,15 @@ import { requireMx } from "./_require";
 const { waitForSelector, MediaPlugin } = requireMx();
 
 export default class BilibiliPlugin extends MediaPlugin {
-  preventAutoplay() {
-    function pause(evt: Event) {
-      if (evt.target instanceof HTMLMediaElement) {
-        evt.target.pause();
-      }
-      window.clearTimeout(timeoutId);
-    }
-    this.media.addEventListener("play", pause, { once: true });
-    const timeoutId = window.setTimeout(() => {
-      this.media.removeEventListener("play", pause);
-    }, 5e3);
-  }
-
   findMedia(): Promise<HTMLMediaElement> {
     return waitForSelector<HTMLMediaElement>("#bilibili-player video");
   }
   async onload(): Promise<void> {
     await super.onload();
-    this.untilMediaReady("loadeddata").then(() => {
-      this.preventAutoplay();
-    });
-    this.preventAutoplay();
+    // this.untilMediaReady("loadeddata").then(() => {
+    //   this.preventAutoplay();
+    // });
+    // this.preventAutoplay();
     // disable auto play recommendation
     localStorage.setItem("recommend_auto_play", "close");
     const player = document.querySelector<HTMLDivElement>("#bilibili-player");