70 lines
1.4 KiB
TypeScript
70 lines
1.4 KiB
TypeScript
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
||
|
|
|
||
|
|
const Template = ({
|
||
|
|
origin,
|
||
|
|
query,
|
||
|
|
title,
|
||
|
|
width,
|
||
|
|
height,
|
||
|
|
}: {
|
||
|
|
origin: string;
|
||
|
|
query: string;
|
||
|
|
title: string;
|
||
|
|
width: number;
|
||
|
|
height: number;
|
||
|
|
}) => (
|
||
|
|
<iframe
|
||
|
|
src={`${origin}/embed/video?${query}`}
|
||
|
|
title={title}
|
||
|
|
height={`${height}px`}
|
||
|
|
width={`${width}px`}
|
||
|
|
referrerPolicy="origin"
|
||
|
|
scrolling="no"
|
||
|
|
allowFullScreen
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
const origins = {
|
||
|
|
DemoServer: `https://watch.owncast.online`,
|
||
|
|
RetroStrangeTV: `https://live.retrostrange.com`,
|
||
|
|
localhost: `http://localhost:3000`,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default {
|
||
|
|
title: 'owncast/Player/Embeds',
|
||
|
|
component: Template,
|
||
|
|
argTypes: {
|
||
|
|
origin: {
|
||
|
|
options: Object.keys(origins),
|
||
|
|
mapping: origins,
|
||
|
|
control: {
|
||
|
|
type: 'select',
|
||
|
|
},
|
||
|
|
defaultValue: origins.DemoServer,
|
||
|
|
},
|
||
|
|
query: {
|
||
|
|
type: 'string',
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
defaultValue: 'My Title',
|
||
|
|
type: 'string',
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
defaultValue: 350,
|
||
|
|
type: 'number',
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
defaultValue: 550,
|
||
|
|
type: 'number',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
} satisfies ComponentMeta<typeof Template>;
|
||
|
|
|
||
|
|
export const Default: ComponentStory<typeof Template> = Template.bind({});
|
||
|
|
Default.args = {};
|
||
|
|
|
||
|
|
export const InitiallyMuted: ComponentStory<typeof Template> = Template.bind({});
|
||
|
|
InitiallyMuted.args = {
|
||
|
|
query: 'initiallyMuted=true',
|
||
|
|
};
|
