perf(webview): disable av1 for websites

close #337

apps/app/src/components/provider.tsx

@@ -10,8 +10,8 @@ import { useCallback } from "react";
 import { getPartition } from "@/lib/remote-player/const";
 import { WebviewProviderLoader } from "@/lib/remote-player/loader";
 import { cn } from "@/lib/utils";
-import { channelId } from "@/web/bili-req/channel";
-import { BILI_REQ_STORE } from "@/web/bili-req/const";
+import { channelId } from "@/web/preload/channel";
+import { BILI_REQ_STORE } from "@/web/preload/const";
 import { useApp, useMediaViewStore } from "./context";
 import { useControls } from "./hook/use-hash";
 import { WebView } from "./webview";

apps/app/src/components/webview/index.tsx

@@ -30,11 +30,11 @@ function usePreload() {
   const plugin = usePlugin();
   const [preloadReady, setPreloadReady] = useState<boolean | null>(false);
   useEffect(() => {
-    plugin.biliReq
+    plugin.preload
       .untilReady()
       .then(() => setPreloadReady(true))
       .catch(() => setPreloadReady(null));
-  }, [plugin.biliReq]);
+  }, [plugin.preload]);
   return preloadReady;
 }
 

apps/app/src/lib/remote-player/provider.ts

@@ -15,8 +15,8 @@ import { MediaURL } from "@/info/media-url";
 import { MediaHost } from "@/info/supported";
 import { GET_PORT_TIMEOUT, PORT_MESSAGE } from "@/lib/remote-player/const";
 import { LoginModal } from "@/login/modal";
-import { replaceEnv } from "@/web/bili-req/const";
 import { plugins } from "@/web/plugin";
+import { replaceEnv } from "@/web/preload/const";
 import { titleParser } from "@/web/title";
 import { MessageController, TimeoutError } from "../message";
 import { noHash } from "../url";

apps/app/src/lib/require.ts

@@ -41,7 +41,7 @@ export function getDialog() {
   return remote.dialog as typeof Electron.dialog;
 }
 
-export function evalInMainPs(scriptPath: string) {
+export function evalInMainProcess(scriptPath: string) {
   const remote = require("@electron/remote");
   return remote.require(scriptPath);
 }

apps/app/src/mx-main.ts

@@ -44,7 +44,7 @@ import { MxSettingTabs } from "./settings/tab";
 import { initSwitcher } from "./switcher";
 import { registerTranscriptView } from "./transcript";
 import { TranscriptLoader } from "./transcript/handle/loader";
-import { BilibiliRequestHacker } from "./web/bili-req";
+import { WebviewPreload } from "./web/preload";
 import { modifySession } from "./web/session";
 import { resolveMxProtocol } from "./web/url-match";
 import "./login/modal";
@@ -104,7 +104,7 @@ export default class MxPlugin extends Plugin {
 
   mediaNote = this.addChild(new MediaNoteIndex(this));
   playlist = this.addChild(new PlaylistIndex(this));
-  biliReq = this.addChild(new BilibiliRequestHacker(this));
+  preload = this.addChild(new WebviewPreload(this));
   leafOpener = this.addChild(new LeafOpener(this));
   recorderNote = this.addChild(new RecorderNote(this));
   handleMediaNote = handleMediaNote;

apps/app/src/web/bili-req/index.ts → apps/app/src/web/preload/index.ts

@@ -5,7 +5,11 @@ import preloadLoader from "inline:./scripts/preload-patch";
 import userScript from "inline:./scripts/userscript";
 import { Component, Platform, WorkspaceWindow } from "obsidian";
 import path from "@/lib/path";
-import { evalInMainPs, getFsPromise, getUserDataPath } from "@/lib/require";
+import {
+  evalInMainProcess,
+  getFsPromise,
+  getUserDataPath,
+} from "@/lib/require";
 import type MxPlugin from "@/mx-main";
 import { buildPreloadLoader, channelId } from "./channel";
 import { BILI_REQ_STORE, replaceEnv } from "./const";
@@ -36,7 +40,7 @@ declare module "obsidian" {
   }
 }
 
-export class BilibiliRequestHacker extends Component {
+export class WebviewPreload extends Component {
   get app() {
     return this.plugin.app;
   }
@@ -110,7 +114,7 @@ export class BilibiliRequestHacker extends Component {
         );
       });
       try {
-        await evalInMainPs(preloadLoaderPath);
+        await evalInMainProcess(preloadLoaderPath);
         console.debug("preload patch loaded");
       } finally {
         await fs

apps/app/src/web/preload/scripts/no-av1.ts

@@ -0,0 +1,23 @@
+import { around } from "monkey-around";
+
+const av1Codec = /codecs="?av01\./;
+
+export function noAV1() {
+  const unloads = [
+    around(HTMLMediaElement.prototype as HTMLMediaElement, {
+      canPlayType: (next) =>
+        function canPlayType(this: HTMLVideoElement, type: string) {
+          if (av1Codec.test(type)) return "";
+          return next.call(this, type);
+        },
+    }),
+    around(window.MediaSource, {
+      isTypeSupported: (next) =>
+        function isTypeSupported(this: typeof MediaSource, type: string) {
+          if (av1Codec.test(type)) return false;
+          return next.call(this, type);
+        },
+    }),
+  ];
+  return () => unloads.forEach((u) => u());
+}

apps/app/src/web/bili-req/scripts/preload.ts → apps/app/src/web/preload/scripts/preload.ts

@@ -1,12 +1,12 @@
-import { json } from "../../../lib/json";
+import { json } from "@/lib/json";
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 declare const __USERSCRIPT__: string;
 
 process.once("document-start", () => {
-  if (!window.location.hostname.endsWith("bilibili.com")) {
-    return;
-  }
+  // if (!window.location.hostname.endsWith("bilibili.com")) {
+  //   return;
+  // }
   console.log("preload.js");
   const script = document.createElement("script");
   const scriptId = "monkey-patch-xmlhttprequest";

apps/app/src/web/preload/scripts/userscript.ts

@@ -0,0 +1,39 @@
+import { XHRIntercepter } from "@/lib/remote-player/lib/xhr-hijack";
+import { noAV1 } from "./no-av1";
+import { storeId } from "./store-id";
+
+noAV1();
+
+if (location.hostname.includes("bilibili.com")) {
+  const patterns = [
+    { hostname: "api.bilibili.com", pathname: "/x/player/v2" },
+    { hostname: "api.bilibili.com", pathname: "/x/player/wbi/v2" },
+  ].map((p) => new URLPattern(p));
+
+  const intercepter = new XHRIntercepter((url) =>
+    patterns.some((p) => p.test(url)),
+  );
+  intercepter.load();
+  (window as any)[storeId] = intercepter;
+
+  const enum Codec {
+    default = 0,
+    hevc = 1,
+    avc = 2,
+    av1 = 3,
+  }
+
+  localStorage.setItem("recommend_auto_play", "close");
+  // disable autoplay
+  localStorage.setItem(
+    "bpx_player_profile",
+    JSON.stringify({ media: { autoplay: false } }),
+  );
+  // default to hevc
+  localStorage.setItem(
+    "bilibili_player_codec_prefer_type",
+    JSON.stringify(Codec.hevc),
+  );
+
+  console.log("intercepter loaded");
+}

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

@@ -5,7 +5,7 @@ import type { VTTContent } from "@/transcript/handle/type";
 import { BiliApiError } from "../bili-api/base";
 import type { PlayerV2Response } from "../bili-api/player-v2";
 import type { SubtitlesConfig } from "../bili-api/subtitle";
-import { storeId } from "../bili-req/scripts/store-id";
+import { storeId } from "../preload/scripts/store-id";
 import { requireMx } from "./_require";
 
 const { waitForSelector, MediaPlugin } = requireMx();