introduce store with idle tracking

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

@@ -0,0 +1,48 @@
+import * as ScreenOrientation from "expo-screen-orientation";
+
+import type { MakeSlice } from "./types";
+
+export interface InterfaceSlice {
+  interface: {
+    isIdle: boolean;
+  };
+  setIsIdle(state: boolean): void;
+  lockOrientation: () => Promise<void>;
+  unlockOrientation: () => Promise<void>;
+  presentFullscreenPlayer: () => Promise<void>;
+  dismissFullscreenPlayer: () => Promise<void>;
+}
+
+export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
+  interface: {
+    isIdle: true,
+  },
+  setIsIdle: (state) => {
+    set((s) => {
+      setTimeout(() => {
+        if (get().interface.isIdle === false) {
+          set((s) => {
+            s.interface.isIdle = true;
+          });
+        }
+      }, 6000);
+      s.interface.isIdle = state;
+    });
+  },
+  lockOrientation: async () => {
+    await ScreenOrientation.lockAsync(
+      ScreenOrientation.OrientationLock.LANDSCAPE,
+    );
+  },
+  unlockOrientation: async () => {
+    await ScreenOrientation.lockAsync(
+      ScreenOrientation.OrientationLock.PORTRAIT_UP,
+    );
+  },
+  presentFullscreenPlayer: async () => {
+    await get().lockOrientation();
+  },
+  dismissFullscreenPlayer: async () => {
+    await get().unlockOrientation();
+  },
+});

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

@@ -0,0 +1,13 @@
+import type { StateCreator } from "zustand";
+
+import type { InterfaceSlice } from "./interface";
+import type { VideoSlice } from "./video";
+
+export type AllSlices = InterfaceSlice & VideoSlice;
+
+export type MakeSlice<Slice> = StateCreator<
+  AllSlices,
+  [["zustand/immer", never]],
+  [],
+  Slice
+>;

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

@@ -0,0 +1,25 @@
+import type { AVPlaybackStatus, Video } from "expo-av";
+
+import type { MakeSlice } from "./types";
+
+export interface VideoSlice {
+  videoRef: Video | null;
+  status: AVPlaybackStatus | null;
+
+  setVideoRef(ref: Video | null): void;
+  setStatus(status: AVPlaybackStatus | null): void;
+}
+
+export const createVideoSlice: MakeSlice<VideoSlice> = (set) => ({
+  videoRef: null,
+  status: null,
+
+  setVideoRef: (ref) => {
+    set({ videoRef: ref });
+  },
+  setStatus: (status) => {
+    set((s) => {
+      s.status = status;
+    });
+  },
+});

apps/expo/src/stores/player/store.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+
+import type { AllSlices } from "./slices/types";
+import { createInterfaceSlice } from "./slices/interface";
+import { createVideoSlice } from "./slices/video";
+
+export const usePlayerStore = create(
+  immer<AllSlices>((...a) => ({
+    ...createInterfaceSlice(...a),
+    ...createVideoSlice(...a),
+  })),
+);