Initial Commit

packages/ui/react/react-audio-stream/src/components/stream-mixer/stream-mixer.stories.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+import { StreamProvider } from "../../provider/stream-provider.js";
+import type { PeerMixerState } from "../../session/session-shape/session-shape.types.js";
+import { FakeSession } from "../../test-utils.js";
+import { StreamMixer } from "./stream-mixer.js";
+
+const m = (
+    id: string,
+    extra: Partial<PeerMixerState> = {}
+): PeerMixerState => ({
+    id,
+    volume: 1,
+    muted: false,
+    soloed: false,
+    fxSlotCount: 0,
+    ...extra,
+});
+
+function wrap(session: FakeSession, children: ReactNode): ReactNode {
+    return (
+        <StreamProvider sessionFactory={() => session}>
+            {children}
+        </StreamProvider>
+    );
+}
+
+export default {
+    title: "react-audio-stream/StreamMixer",
+    component: StreamMixer,
+};
+
+export const Default = (): ReactNode =>
+    wrap(
+        new FakeSession({
+            mixer: [m("alice", { volume: 0.8 }), m("bob", { volume: 0.6 })],
+        }),
+        <StreamMixer />
+    );
+
+export const SoloedPeer = (): ReactNode =>
+    wrap(
+        new FakeSession({
+            mixer: [
+                m("alice", { volume: 0.8, soloed: true }),
+                m("bob", { volume: 0 }),
+                m("carol", { volume: 0 }),
+            ],
+        }),
+        <StreamMixer label="Solo demonstration" />
+    );
+
+export const Playground = (): ReactNode =>
+    wrap(
+        new FakeSession({
+            mixer: Array.from({ length: 6 }).map((_, i) =>
+                m(`peer-${i}`, { volume: 0.5 + i * 0.05, fxSlotCount: i })
+            ),
+        }),
+        <StreamMixer label="Six-peer mixer" />
+    );
+
+export const CustomRender = (): ReactNode =>
+    wrap(
+        new FakeSession({ mixer: [m("alice"), m("bob", { soloed: true })] }),
+        <StreamMixer
+            renderStrip={(peer, controls) => (
+                <article
+                    style={{
+                        display: "flex",
+                        gap: 8,
+                        padding: 8,
+                        border: "1px solid currentColor",
+                    }}
+                >
+                    <strong>{peer.id}</strong>
+                    <span>{peer.soloed ? "SOLO" : ""}</span>
+                    <button
+                        type="button"
+                        onClick={() => controls.setMute(!peer.muted)}
+                    >
+                        {peer.muted ? "unmute" : "mute"}
+                    </button>
+                </article>
+            )}
+        />
+    );