feat(subtitle): remember choice of subtitle; disable subtitle by default

apps/app/package.json

@@ -63,7 +63,7 @@
     "@radix-ui/react-visually-hidden": "^1.0.3",
     "@radix-ui/rect": "1.0.1",
     "@tanstack/react-virtual": "^3.2.0",
-    "@vidstack/react": "npm:@aidenlx/vidstack-react@1.10.9-mod.1",
+    "@vidstack/react": "npm:@aidenlx/vidstack-react@1.10.9-mod.4",
     "ahooks": "^3.7.8",
     "arktype": "1.0.29-alpha",
     "assert-never": "^1.2.1",

apps/app/src/components/context.tsx

@@ -45,7 +45,7 @@ export interface SourceFacet {
 
 export interface MediaViewState {
   player: MediaPlayerInstance | null;
-  playerRef: React.RefCallback<MediaPlayerInstance>;
+  setPlayer: React.RefCallback<MediaPlayerInstance>;
   source:
     | {
         url: MediaInfo;
@@ -73,7 +73,9 @@ export interface MediaViewState {
 export function createMediaViewStore(plugin: MxPlugin) {
   const store = createStore<MediaViewState>((set, get, store) => ({
     player: null,
-    playerRef: (inst) => set({ player: inst }),
+    setPlayer: (inst) => {
+      set({ player: inst });
+    },
     source: undefined,
     hash: {
       autoplay: undefined,

apps/app/src/components/player.tsx

@@ -16,17 +16,17 @@ import { AudioLayout } from "./player/layouts/audio-layout";
 import { VideoLayout } from "./player/layouts/video-layout";
 import { MediaProviderEnhanced } from "./provider";
 import { useSource } from "./use-source";
-import { useRemoteTextTracks } from "./use-tracks";
+import { useTextTracks } from "./use-tracks";
 
 function HookLoader({
   onViewTypeChange,
 }: {
   onViewTypeChange: (viewType: "audio" | "unknown") => any;
 }) {
   useViewTypeDetect(onViewTypeChange);
-  useRemoteTextTracks();
   useTempFragHandler();
   useDefaultVolume();
+  useTextTracks();
   return <></>;
 }
 
@@ -40,7 +40,7 @@ function PlayerLayout() {
 }
 
 export function Player() {
-  const playerRef = useMediaViewStore((s) => s.playerRef);
+  const setPlayer = useMediaViewStore((s) => s.setPlayer);
   const { onEnded } = useAutoContinuePlay();
   const source = useSource();
   const isWebm = useMediaViewStore(({ source }) => {
@@ -69,7 +69,7 @@ export function Player() {
       playsInline
       title={title}
       viewType={viewType}
-      ref={playerRef}
+      ref={setPlayer}
       onEnded={onEnded}
       onError={(e) => handleError(e, source.src)}
       {...hashProps}

apps/app/src/components/player/caption-menu.tsx

@@ -1,15 +1,24 @@
 import { useCaptionOptions, useMediaState } from "@vidstack/react";
 import { SubtitlesIcon } from "@/components/icon";
+import { toTrackLabel, useLastSelectedTrack } from "../use-tracks";
 import { dataLpPassthrough } from "./buttons";
 import { useMenu } from "./menus";
 
 export function Captions() {
   const options = useCaptionOptions();
   const tracks = useMediaState("textTracks");
+  const [, cacheSelectedTrack] = useLastSelectedTrack();
   const onClick = useMenu((menu) => {
-    options.forEach(({ label, select, selected }) => {
+    options.forEach(({ label, select, selected, track }, i) => {
       menu.addItem((item) => {
-        item.setTitle(label).setChecked(selected).onClick(select);
+        item
+          .setTitle(track ? toTrackLabel(track, i) : label)
+          .setChecked(selected)
+          .onClick(() => {
+            select();
+            console.log("cacheSelectedTrack", track?.id ?? null, track?.mode);
+            cacheSelectedTrack(track?.id ?? null);
+          });
       });
     });
     return true;

apps/app/src/components/provider.tsx

@@ -5,7 +5,6 @@ import {
   type MediaProviderInstance,
   type MediaProviderLoader,
   type MediaProviderProps,
-  Track,
 } from "@vidstack/react";
 import { useCallback } from "react";
 import { getPartition } from "@/lib/remote-player/const";
@@ -15,7 +14,6 @@ import { channelId } from "@/web/bili-req/channel";
 import { BILI_REQ_STORE } from "@/web/bili-req/const";
 import { useApp, useMediaViewStore } from "./context";
 import { useControls } from "./hook/use-hash";
-import { useTextTracks } from "./use-tracks";
 import { WebView } from "./webview";
 
 const { preload } = channelId(BILI_REQ_STORE);
@@ -44,7 +42,6 @@ export function MediaProviderEnhanced({
       }
     });
   const controls = useControls();
-  const tracks = useTextTracks();
   return (
     <MediaProvider
       className={cn(
@@ -79,10 +76,6 @@ export function MediaProviderEnhanced({
         [appId, controls],
       )}
       {...props}
-    >
-      {tracks.map((props) => (
-        <Track {...props} key={props.id} />
-      ))}
-    </MediaProvider>
+    ></MediaProvider>
   );
 }