Initial Commit

packages/foundation/data/react-packer/src/hooks/use-packed-video/use-packed-video.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { createPackedResourceManager } from "@suaveplan/packer-browser";
+import { PackedResourceProvider } from "../../provider/packed-resource-provider/packed-resource-provider.js";
+import { usePackedVideo } from "./use-packed-video.js";
+
+const BYTES = new Uint8Array(16);
+
+function makeManager(): ReturnType<typeof createPackedResourceManager> {
+    return createPackedResourceManager({
+        fetch: async (): Promise<Response> =>
+            new Response(BYTES, {
+                status: 200,
+                headers: { "content-type": "video/webm" },
+            }),
+    });
+}
+
+function Demo({ src }: { src: string | null }): React.ReactElement {
+    const { url, status, error } = usePackedVideo(src);
+    return (
+        <div>
+            <p>status: {status}</p>
+            <p>error: {error?.code ?? "<none>"}</p>
+            {url !== null ? (
+                <video controls src={url}>
+                    <track kind="captions" />
+                </video>
+            ) : null}
+        </div>
+    );
+}
+
+const meta: Meta<typeof Demo> = {
+    title: "react-packer/usePackedVideo",
+    component: Demo,
+};
+export default meta;
+type Story = StoryObj<typeof Demo>;
+
+export const Default: Story = {
+    render: () => (
+        <PackedResourceProvider value={{ manager: makeManager() }}>
+            <Demo src="/demo.video.packed" />
+        </PackedResourceProvider>
+    ),
+};
+
+export const Idle: Story = {
+    render: () => (
+        <PackedResourceProvider value={{ manager: makeManager() }}>
+            <Demo src={null} />
+        </PackedResourceProvider>
+    ),
+};
+
+export const PlaygroundStory: Story = {
+    name: "Playground",
+    render: () => (
+        <PackedResourceProvider value={{ manager: makeManager() }}>
+            <Demo src="/playground.video.packed" />
+        </PackedResourceProvider>
+    ),
+};