137 lines
3.6 KiB
TypeScript
137 lines
3.6 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
|
|
|
|
import { Lang } from '@scandic-hotels/common/constants/language'
|
|
import { VideoPlayer } from '.'
|
|
import { config as videoPlayerConfig } from './variants'
|
|
|
|
const meta: Meta<typeof VideoPlayer> = {
|
|
title: 'Components/🚧 VideoPlayer 🚧',
|
|
component: VideoPlayer,
|
|
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'This component is not ready for production use. It is still under development and may undergo significant changes.',
|
|
},
|
|
},
|
|
},
|
|
|
|
argTypes: {
|
|
className: {
|
|
table: {
|
|
disable: true,
|
|
},
|
|
},
|
|
src: {
|
|
table: {
|
|
type: { summary: 'string' },
|
|
},
|
|
description: 'The source URL of the video.',
|
|
},
|
|
captions: {
|
|
table: {
|
|
type: {
|
|
summary: 'Caption[]',
|
|
detail: '{ src: string; srcLang: Lang; isDefault: boolean }[]',
|
|
},
|
|
},
|
|
description:
|
|
'An array of caption objects for the video. Since this functionality only works when the controls are visible, captions are only supported in the inline variant.',
|
|
},
|
|
variant: {
|
|
control: 'select',
|
|
options: Object.keys(videoPlayerConfig.variants.variant),
|
|
table: {
|
|
defaultValue: {
|
|
summary: videoPlayerConfig.defaultVariants.variant,
|
|
},
|
|
type: {
|
|
summary: 'string',
|
|
detail: Object.keys(videoPlayerConfig.variants.variant).join(' | '),
|
|
},
|
|
},
|
|
description:
|
|
'The variant of the video player, which determines its style and behavior. The hero variant is typically used for large, prominent video displays and defaults to autoplay and muted playback.',
|
|
},
|
|
focalPoint: {
|
|
table: {
|
|
type: { summary: 'FocalPoint', detail: '{ x: number; y: number }' },
|
|
defaultValue: { summary: '{ x: 50, y: 50 }' },
|
|
},
|
|
description: 'The focal point of the video thumbnail.',
|
|
},
|
|
autoPlay: {
|
|
table: {
|
|
type: { summary: 'boolean' },
|
|
defaultValue: { summary: 'false' },
|
|
},
|
|
description:
|
|
'Whether the video should autoplay. Note that autoplay might be ignored by browsers unless the video is muted, which is the default behavior for this component.',
|
|
},
|
|
},
|
|
}
|
|
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof VideoPlayer>
|
|
|
|
const defaultArgs = {
|
|
src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/bltad0fe3c2ce340947/68eced6c14e5a8150ebba18c/Scandic_EB_Master.mp4',
|
|
captions: [
|
|
{
|
|
src: './video/captions_en.vtt',
|
|
srcLang: Lang.en,
|
|
isDefault: false,
|
|
},
|
|
{
|
|
src: './video/captions_sv.vtt',
|
|
srcLang: Lang.sv,
|
|
isDefault: false,
|
|
},
|
|
],
|
|
}
|
|
|
|
export const Default: Story = {
|
|
args: { ...defaultArgs },
|
|
}
|
|
|
|
export const Inline: Story = {
|
|
args: { ...Default.args, variant: 'inline' },
|
|
}
|
|
|
|
export const BareHero: Story = {
|
|
args: {
|
|
...Default.args,
|
|
variant: 'hero',
|
|
},
|
|
name: 'Hero (barebones)',
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story:
|
|
'The Hero variant is intended for use as a large video player, typically placed at the top of a page or section. It features autoplay and muted playback. It is pretty bare bones and requires a "wrapper" to override its size and aspect ratio. See the example below.',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
export const Hero: Story = {
|
|
args: {
|
|
...BareHero.args,
|
|
},
|
|
render: (args) => (
|
|
<div
|
|
style={{
|
|
width: 'min(100%, 1200px)',
|
|
height: 'max(20vh, 300px)',
|
|
borderRadius: 'var(--Corner-radius-lg)',
|
|
margin: 'auto',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<VideoPlayer {...args} />
|
|
</div>
|
|
),
|
|
}
|