web/packages/design-system/lib/components/VideoPlayer/VideoPlayer.stories.tsx

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: "Core Components/Video/VideoPlayer",
  component: VideoPlayer,
  beforeEach: () => {
    // Mock video methods to prevent actual playback
    window.HTMLMediaElement.prototype.play = () => Promise.resolve()
    window.HTMLMediaElement.prototype.pause = () => {}
  },

  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,
      },
    },
    sources: {
      table: {
        type: { summary: "{src: string; type: string}[]" },
      },
      description:
        "The different sources of the video, including their formats.",
    },
    poster: {
      table: {
        type: {
          summary:
            "{src: string, dimensions?: { width: number; height: number }}",
        },
      },
      description:
        "The poster image to be displayed before playback. Default behavior in iOS is that the first frame of the video is not visible until playback starts, so providing a poster image is recommended for better user experience.",
    },
    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 inlineSources = [
  {
    src: "https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/bltf1f715c41793a9fb/6943e943ca0c69c3d00bd620/Scandic_EB_Video.mp4",
    type: "video/mp4",
  },
]

const heroSources = [
  {
    src: "https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/bltc3aa53ac9bf6798c/693ad4b65b0889d6348893f3/Test_video.mp4",
    type: "video/mp4",
  },
  {
    src: "https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/blt029be07ddd444eea/693c251c09e17b33c93c1dd6/hero-banner-1920-vp9.webm",
    type: "video/webm",
  },
]

const defaultArgs = {
  sources: inlineSources,
  poster: {
    src: "https://imagevault.scandichotels.com/publishedmedia/dtpv2wgm6jhix2pqpp88/Scandic_Downtown_Camper_restaurang_bar_The_Nest_lounge_eld.jpg",
  },
  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",
    sources: heroSources,
  },
  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>
  ),
}