64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
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>
|
|
),
|
|
};
|