feat: implement more of playback and reply flow

js/src/stores/playback-store.ts

@@ -8,6 +8,7 @@ interface PlaybackState {
   particles: StreamParticle[];
   currentIndex: number;
   status: PlaybackStatus;
+  paused: boolean;
   downloadUrlCache: Record<string, string>;
 
   initStream: (
@@ -18,6 +19,8 @@ interface PlaybackState {
   next: () => void;
   prev: () => void;
   goTo: (index: number) => void;
+  pause: () => void;
+  resume: () => void;
   cacheDownloadUrl: (particleId: string, url: string) => void;
   reset: () => void;
 }
@@ -27,6 +30,7 @@ export const usePlaybackStore = create<PlaybackState>((set, get) => ({
   particles: [],
   currentIndex: 0,
   status: "idle",
+  paused: false,
   downloadUrlCache: {},
 
   initStream: (streamId, particles, startIndex) => {
@@ -42,26 +46,29 @@ export const usePlaybackStore = create<PlaybackState>((set, get) => ({
   next: () => {
     const { currentIndex, particles } = get();
     if (currentIndex < particles.length - 1) {
-      set({ currentIndex: currentIndex + 1 });
+      set({ currentIndex: currentIndex + 1, paused: false });
     } else {
-      set({ status: "ended" });
+      set({ status: "ended", paused: false });
     }
   },
 
   prev: () => {
     const { currentIndex } = get();
     if (currentIndex > 0) {
-      set({ currentIndex: currentIndex - 1, status: "playing" });
+      set({ currentIndex: currentIndex - 1, status: "playing", paused: false });
     }
   },
 
   goTo: (index) => {
     const { particles } = get();
     if (index >= 0 && index < particles.length) {
-      set({ currentIndex: index, status: "playing" });
+      set({ currentIndex: index, status: "playing", paused: false });
     }
   },
 
+  pause: () => set({ paused: true }),
+  resume: () => set({ paused: false }),
+
   cacheDownloadUrl: (particleId, url) => {
     set({
       downloadUrlCache: { ...get().downloadUrlCache, [particleId]: url },
@@ -74,6 +81,7 @@ export const usePlaybackStore = create<PlaybackState>((set, get) => ({
       particles: [],
       currentIndex: 0,
       status: "idle",
+      paused: false,
       downloadUrlCache: {},
     });
   },