feat(story): add dynamic playback arguments and common decorator for …

…Playback component

frontend/src/stories/Playback.stories.tsx

@@ -3,6 +3,8 @@ import Playback, { PlaybackProps } from "../components/Playback/Playback";
 import { AUTOPLAY } from "../types/Playback";
 
 import audio from "./assets/music.ogg";
+import useBoundStore from "@/util/stores";
+import { StoryFn } from "@storybook/react";
 
 export default {
     title: "Playback",
@@ -12,55 +14,76 @@ export default {
     },
 };
 
-export const Button = {
-    args: {
-        playbackArgs: {
+// Create a decorator that dynamically accepts a play_method
+const createCommonDecorator = (play_method: "BUFFER" | "EXTERNAL") => (Story: StoryFn) => {
+    const [initialized, setInitialized] = useState(false);
+
+    const setRound = useBoundStore((state) => state.setRound);
+    const setCurrentAction = useBoundStore((state) => state.setCurrentAction);
+    setRound([{
+        view: "TRIAL_VIEW",
+        playback: {
             view: AUTOPLAY,
-            play_method: "BUFFER",
+            play_method,
             show_animation: true,
             preload_message: "Loading audio...",
             instruction: "Click the button to play the audio.",
-            sections: [
-                {
-                    id: 0,
-                    url: audio,
-                }
-            ],
+            sections: [{ id: 0, url: audio }],
             play_from: 0.0,
             resume_play: false,
-        },
-        onPreloadReady: () => { },
-        autoAdvance: false,
-        responseTime: 10,
-        submitResult: () => { },
-        finishedPlaying: () => { },
-    } as PlaybackProps,
-    decorators: [
-        (Story) => {
+        }
+    }]);
+    setCurrentAction(0);
 
-            const [initialized, setInitialized] = useState(false);
+    if (!initialized) {
+        return (
+            <>
+                <button onClick={() => setInitialized(true)}>
+                    Initialize WebAudio
+                </button>
+            </>
+        );
+    }
 
+    return (
+        <div
+            style={{ width: "100%", height: "100%", backgroundColor: "#ddd", padding: "1rem" }}
+        >
+            <Story />
+        </div>
+    );
+};
 
-            if (!initialized) {
-                return (
-                    <>
-                        <button onClick={() => {
-                            setInitialized(true);
-                        }
-                        }>
-                            Initialize WebAudio
-                        </button>
-                    </>
-                )
+// Create playback arguments dynamically
+const createPlaybackArgs = (play_method: "BUFFER" | "EXTERNAL"): PlaybackProps => ({
+    playbackArgs: {
+        view: AUTOPLAY,
+        play_method,
+        show_animation: true,
+        preload_message: "Loading audio...",
+        instruction: "Click the button to play the audio.",
+        sections: [
+            {
+                id: 0,
+                url: audio,
             }
+        ],
+        play_from: 0.0,
+        resume_play: false,
+    },
+    onPreloadReady: () => { },
+    autoAdvance: false,
+    responseTime: 10,
+    submitResult: () => { },
+    finishedPlaying: () => { },
+});
 
-            return (
-                <div
-                    style={{ width: "100%", height: "100%", backgroundColor: "#ddd", padding: "1rem" }}
-                >
-                    <Story />
-                </div>
-            )
-        }
-    ],
+export const PlaybackAutoplayBuffer = {
+    args: createPlaybackArgs("BUFFER"),
+    decorators: [createCommonDecorator("BUFFER")],
+};
+
+export const PlaybackAutoplayExternal = {
+    args: createPlaybackArgs("EXTERNAL"),
+    decorators: [createCommonDecorator("EXTERNAL")],
 };