94 lines
2.2 KiB
TypeScript
94 lines
2.2 KiB
TypeScript
|
import type { Meta, StoryObj } from "@storybook/react";
|
||
|
|
import React from "react";
|
||
|
|
|
||
|
|
import VideoPlayer, { type IVideoPlayerProps } from "../src/react";
|
||
|
|
|
||
|
|
const DEMO_HLS_SOURCE = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
|
||
|
|
const DEMO_POSTER =
|
||
|
|
"https://images.unsplash.com/photo-1574267432553-4b4628081c31?auto=format&fit=crop&w=1280&q=80";
|
||
|
|
|
||
|
|
const meta: Meta<IVideoPlayerProps> = {
|
||
|
|
title: "React/VideoPlayer",
|
||
|
|
component: VideoPlayer,
|
||
|
|
tags: ["autodocs"],
|
||
|
|
args: {
|
||
|
|
src: DEMO_HLS_SOURCE,
|
||
|
|
type: "application/x-mpegurl",
|
||
|
|
preload: "auto",
|
||
|
|
muted: true,
|
||
|
|
fluid: true,
|
||
|
|
responsive: true,
|
||
|
|
controls: true,
|
||
|
|
aspectRatio: "16:9",
|
||
|
|
preferHQ: false,
|
||
|
|
width: 1280,
|
||
|
|
height: 720,
|
||
|
|
autoplay: false,
|
||
|
|
lazy: false,
|
||
|
|
debug: false,
|
||
|
|
forceHover: false,
|
||
|
|
full: true,
|
||
|
|
withRewind: true,
|
||
|
|
showErrors: false,
|
||
|
|
showProcessing: false,
|
||
|
|
withLoading: false,
|
||
|
|
withBlur: false,
|
||
|
|
duration: false,
|
||
|
|
cover: "",
|
||
|
|
},
|
||
|
|
argTypes: {
|
||
|
|
src: { control: "text" },
|
||
|
|
type: {
|
||
|
|
control: { type: "select" },
|
||
|
|
options: [
|
||
|
|
"application/x-mpegurl",
|
||
|
|
"application/vnd.apple.mpegurl",
|
||
|
|
"video/mp4",
|
||
|
|
],
|
||
|
|
},
|
||
|
|
preload: {
|
||
|
|
control: { type: "inline-radio" },
|
||
|
|
options: ["auto", "metadata", "none", "visibility"],
|
||
|
|
},
|
||
|
|
aspectRatio: {
|
||
|
|
control: { type: "select" },
|
||
|
|
options: ["16:9", "4:3", "1:1", "none"],
|
||
|
|
},
|
||
|
|
full: { control: "boolean" },
|
||
|
|
withRewind: { control: "boolean" },
|
||
|
|
duration: {
|
||
|
|
control: { type: "select" },
|
||
|
|
options: [false, 30, 120, 1800],
|
||
|
|
},
|
||
|
|
cover: {
|
||
|
|
control: "text",
|
||
|
|
description: "Poster URL (string) or leave empty",
|
||
|
|
},
|
||
|
|
width: { control: { type: "number", min: 0, step: 1 } },
|
||
|
|
height: { control: { type: "number", min: 0, step: 1 } },
|
||
|
|
className: { control: false },
|
||
|
|
},
|
||
|
|
render: args => {
|
||
|
|
const width = typeof args.width === "number" && args.width > 0 ? args.width : null;
|
||
|
|
const height =
|
||
|
|
typeof args.height === "number" && args.height > 0 ? args.height : null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{ maxWidth: 960, width: "100%" }}>
|
||
|
|
<VideoPlayer
|
||
|
|
{...args}
|
||
|
|
width={width}
|
||
|
|
height={height}
|
||
|
|
cover={args.cover ? args.cover : DEMO_POSTER}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export default meta;
|
||
|
|
|
||
|
|
type Story = StoryObj<IVideoPlayerProps>;
|
||
|
|
|
||
|
|
export const Playground: Story = {};
|