87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
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>
|
|
)}
|
|
/>
|
|
);
|