first version of a really buggy and ugly caption selector and renderer

apps/expo/src/stores/captions/index.ts

@@ -0,0 +1,33 @@
+import type { ContentCaption } from "subsrt-ts/dist/types/handler";
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+
+import type { Stream } from "@movie-web/provider-utils";
+
+type CaptionWithData = Stream["captions"][0] & {
+  data: ContentCaption[];
+};
+
+export interface CaptionsStore {
+  selectedCaption: CaptionWithData | null;
+  delay: number;
+  setSelectedCaption(caption: CaptionWithData | null): void;
+  setDelay(delay: number): void;
+}
+
+export const useCaptionsStore = create(
+  immer<CaptionsStore>((set) => ({
+    selectedCaption: null,
+    delay: 0,
+    setSelectedCaption: (caption) => {
+      set((s) => {
+        s.selectedCaption = caption;
+      });
+    },
+    setDelay: (delay) => {
+      set((s) => {
+        s.delay = delay;
+      });
+    },
+  })),
+);

apps/expo/src/stores/player/slices/interface.ts

@@ -1,13 +1,18 @@
 import * as ScreenOrientation from "expo-screen-orientation";
 
+import type { Stream } from "@movie-web/provider-utils";
+
 import type { MakeSlice } from "./types";
 
 export interface InterfaceSlice {
   interface: {
     isIdle: boolean;
     idleTimeout: NodeJS.Timeout | null;
+    stream: Stream | null;
+    selectedCaption: Stream["captions"][0] | null;
   };
   setIsIdle(state: boolean): void;
+  setStream(stream: Stream): void;
   lockOrientation: () => Promise<void>;
   unlockOrientation: () => Promise<void>;
   presentFullscreenPlayer: () => Promise<void>;
@@ -18,6 +23,8 @@ export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
   interface: {
     isIdle: true,
     idleTimeout: null,
+    stream: null,
+    selectedCaption: null,
   },
   setIsIdle: (state) => {
     set((s) => {
@@ -34,6 +41,11 @@ export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
       s.interface.isIdle = state;
     });
   },
+  setStream: (stream) => {
+    set((s) => {
+      s.interface.stream = stream;
+    });
+  },
   lockOrientation: async () => {
     await ScreenOrientation.lockAsync(
       ScreenOrientation.OrientationLock.LANDSCAPE,