feat: list streams and story-mode catchup

js/src/stores/playback-store.ts

@@ -0,0 +1,80 @@
+import { create } from "zustand";
+import type { StreamParticle } from "@/api/types";
+
+type PlaybackStatus = "idle" | "playing" | "ended";
+
+interface PlaybackState {
+  streamId: string | null;
+  particles: StreamParticle[];
+  currentIndex: number;
+  status: PlaybackStatus;
+  downloadUrlCache: Record<string, string>;
+
+  initStream: (
+    streamId: string,
+    particles: StreamParticle[],
+    startIndex: number,
+  ) => void;
+  next: () => void;
+  prev: () => void;
+  goTo: (index: number) => void;
+  cacheDownloadUrl: (particleId: string, url: string) => void;
+  reset: () => void;
+}
+
+export const usePlaybackStore = create<PlaybackState>((set, get) => ({
+  streamId: null,
+  particles: [],
+  currentIndex: 0,
+  status: "idle",
+  downloadUrlCache: {},
+
+  initStream: (streamId, particles, startIndex) => {
+    set({
+      streamId,
+      particles,
+      currentIndex: startIndex,
+      status: particles.length > 0 ? "playing" : "ended",
+      downloadUrlCache: {},
+    });
+  },
+
+  next: () => {
+    const { currentIndex, particles } = get();
+    if (currentIndex < particles.length - 1) {
+      set({ currentIndex: currentIndex + 1 });
+    } else {
+      set({ status: "ended" });
+    }
+  },
+
+  prev: () => {
+    const { currentIndex } = get();
+    if (currentIndex > 0) {
+      set({ currentIndex: currentIndex - 1, status: "playing" });
+    }
+  },
+
+  goTo: (index) => {
+    const { particles } = get();
+    if (index >= 0 && index < particles.length) {
+      set({ currentIndex: index, status: "playing" });
+    }
+  },
+
+  cacheDownloadUrl: (particleId, url) => {
+    set({
+      downloadUrlCache: { ...get().downloadUrlCache, [particleId]: url },
+    });
+  },
+
+  reset: () => {
+    set({
+      streamId: null,
+      particles: [],
+      currentIndex: 0,
+      status: "idle",
+      downloadUrlCache: {},
+    });
+  },
+}));