@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/organisms/VideoPlayer/VideoPlayer.stories.ts

@@ -0,0 +1,327 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import VideoPlayer from './VideoPlayer.vue'
+
+/** A 14-second VP9 tour from .storybook/public; WebM, so the Chromium of CI plays it too. */
+const VIDEO = '/demo-tour.webm'
+/** The first frame of VIDEO. */
+const POSTER = '/demo-tour-poster.jpg'
+/** The same tour cut to 9:16 (540×960), as a phone or TikTok video, and its first frame. */
+const VERTICAL_VIDEO = '/demo-tour-vertical.webm'
+const VERTICAL_POSTER = '/demo-tour-vertical-poster.jpg'
+
+const meta = {
+  title: 'Components/Organisms/VideoPlayer',
+  component: VideoPlayer,
+  decorators: [() => ({ template: '<div class="w-120"><story /></div>' })],
+  // The rebuilt player is clean: axe runs as a gate here, not in the repo-wide reporting mode
+  parameters: { a11y: { test: 'error' } },
+  args: {
+    src: VIDEO,
+    name: 'Rondleiding',
+    controls: 'full',
+  },
+  argTypes: {
+    src: { control: 'text' },
+    poster: { control: 'text' },
+    name: { control: 'text' },
+    autoplay: { control: 'boolean' },
+    muted: { control: 'boolean' },
+    loop: { control: 'boolean' },
+    controls: { control: 'inline-radio', options: ['full', 'toggle', 'none'] },
+  },
+} satisfies Meta<typeof VideoPlayer>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/** sRGB of a CSS colour over `backdrop`, via a 1px canvas (handles oklch and alpha). */
+const composite = (color: string, backdrop = 'transparent') => {
+  const context = document.createElement('canvas').getContext('2d')!
+  context.fillStyle = backdrop
+  context.fillRect(0, 0, 1, 1)
+  context.fillStyle = color
+  context.fillRect(0, 0, 1, 1)
+  return [...context.getImageData(0, 0, 1, 1).data.slice(0, 3)]
+}
+
+const contrast = (a: number[], b: number[]) => {
+  const luminance = (rgb: number[]) => {
+    const [r, g, b] = rgb.map((channel) => {
+      const c = channel / 255
+      return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+    })
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b
+  }
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+/**
+ * The big play button's focus ring lies on the frame: blue-600 against the white band holds
+ * 3:1, and on a white or a black frame at least one band does.
+ */
+const expectStartRing = async (button: HTMLElement) => {
+  const style = getComputedStyle(button)
+  await expect(style.outlineStyle).toBe('solid')
+  const ring = style.boxShadow
+    .split(/,(?![^(]*\))/)
+    .find((shadow) => / 2px$/.test(shadow.trim()))
+    ?.match(/(?:rgba?|oklch|oklab|color)\([^)]*\)/)?.[0]
+  await expect(ring).toBeDefined()
+  const [outline, band] = [composite(style.outlineColor), composite(ring!)]
+  await expect(contrast(outline, band)).toBeGreaterThanOrEqual(3)
+  for (const frame of ['#ffffff', '#000000']) {
+    const backdrop = composite(frame)
+    await expect(
+      Math.max(contrast(outline, backdrop), contrast(band, backdrop)),
+    ).toBeGreaterThanOrEqual(3)
+  }
+}
+
+/**
+ * Before the first play a big play button stands over the video, the one tab stop; the bar
+ * waits behind it. Started, the button fades and the focus goes to the bar's play button.
+ */
+export const Full: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const root = canvasElement.querySelector<HTMLElement>('[data-video-player]')!
+    const video = canvasElement.querySelector('video')!
+
+    // The begin state: only the big button is reachable
+    const start = canvas.getByRole('button', { name: 'Afspelen: Rondleiding' })
+    await expect(canvas.queryByRole('group')).toBeNull()
+    await expect(start.getBoundingClientRect().width).toBe(64)
+    await userEvent.tab()
+    await expect(start).toHaveFocus()
+    await expectStartRing(start)
+
+    // Muted here only: a test has no real gesture, and the browser plays sound only after one
+    video.muted = true
+
+    // Enter starts it; the focus lands on the bar's play button, and as keyboard focus the bar
+    // stays while the video plays
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => expect(video.paused).toBe(false), { timeout: 5000 })
+    const barPlay = canvas.getByRole('button', { name: 'Pauzeren' })
+    await waitFor(() => expect(barPlay).toHaveFocus())
+    await waitFor(() => expect(canvasElement.querySelector('[data-video-start]')).toBeNull())
+    const bar = canvas.getByRole('group', { name: 'Videobediening: Rondleiding' })
+    // Past the hide delay on the video's own clock, rather than a fixed sleep
+    const playedFrom = video.currentTime
+    await waitFor(() => expect(video.currentTime - playedFrom).toBeGreaterThan(2.8), {
+      timeout: 10000,
+    })
+    await expect(getComputedStyle(bar).opacity).toBe('1')
+    video.pause()
+
+    // Paused again, the big button stays away
+    await expect(canvasElement.querySelector('[data-video-start]')).toBeNull()
+    // Loaded: the bar knows the duration
+    await waitFor(
+      () =>
+        expect(canvas.getByRole('slider', { name: 'Tijdlijn' })).toHaveAttribute(
+          'aria-valuetext',
+          expect.stringMatching(/ van 0:13$/),
+        ),
+      { timeout: 5000 },
+    )
+    await expect(getComputedStyle(root).borderTopLeftRadius).toBe('8px')
+  },
+}
+
+/** The round play/pause button, with mute beside it on hover; a click on the video does nothing. */
+export const Toggle: Story = {
+  args: { controls: 'toggle' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const video = canvasElement.querySelector('video')!
+
+    await waitFor(() => expect(video.readyState).toBeGreaterThanOrEqual(1), { timeout: 5000 })
+    await expect(canvas.queryByRole('alert')).toBeNull()
+
+    // Before the first play only the big button is reachable; a click on it starts the video
+    await expect(canvas.getAllByRole('button')).toHaveLength(1)
+    // Muted here only: a test has no real gesture, and the browser plays sound only after one
+    video.muted = true
+    await userEvent.click(canvas.getByRole('button', { name: 'Afspelen: Rondleiding' }))
+    await waitFor(() => expect(video.paused).toBe(false), { timeout: 5000 })
+    await waitFor(() => expect(canvasElement.querySelector('[data-video-start]')).toBeNull())
+
+    // After a mouse click the focus moves into the corner, but the corner still hides
+    const corner = canvasElement.querySelector<HTMLElement>('[data-video-controls]')!
+    await expect(corner.contains(document.activeElement)).toBe(true)
+    await userEvent.unhover(video)
+    await waitFor(() => expect(getComputedStyle(corner).opacity).toBe('0'), { timeout: 4000 })
+    video.pause()
+
+    await waitFor(() =>
+      expect(canvas.getAllByRole('button').map((b) => b.getAttribute('aria-label'))).toEqual([
+        'Geluid aan: Rondleiding',
+        'Afspelen: Rondleiding',
+      ]),
+    )
+  },
+}
+
+/**
+ * No visible controls, and no click handler: a click on the video reaches the parent (the
+ * media library selects with it). Played and paused from outside, as on hover there.
+ */
+export const None: Story = {
+  args: { controls: 'none', autoplay: true, muted: true, loop: true },
+  play: async ({ canvasElement }) => {
+    const video = canvasElement.querySelector('video')!
+    await expect(within(canvasElement).queryByRole('button')).toBeNull()
+    await waitFor(() => expect(video.paused).toBe(false), { timeout: 5000 })
+    await expect(video.muted).toBe(true)
+    video.pause()
+  },
+}
+
+/**
+ * With a poster nothing is preloaded: the poster stands, with the big play button over it,
+ * until the video plays.
+ */
+export const Poster: Story = {
+  args: { poster: POSTER },
+  play: async ({ canvasElement }) => {
+    const video = canvasElement.querySelector('video')!
+    await expect(
+      within(canvasElement).getByRole('button', { name: 'Afspelen: Rondleiding' }),
+    ).toBeVisible()
+    await expect(video).toHaveAttribute('preload', 'none')
+    await expect(video).toHaveAttribute('poster', POSTER)
+  },
+}
+
+/** A source that does not load: a message, never the URL. */
+export const Error: Story = {
+  args: { src: '/missing-video.webm' },
+  play: async ({ canvasElement }) => {
+    const alert = await within(canvasElement).findByRole('alert', {}, { timeout: 5000 })
+    await expect(alert).toHaveTextContent('De video kan niet worden geladen')
+    await expect(alert.innerHTML).not.toContain('missing-video')
+    await expect(within(canvasElement).queryByRole('group')).toBeNull()
+  },
+}
+
+/** The radius is a default: a `rounded-*` class from the consumer wins. */
+export const CustomRadius: Story = {
+  render: (args) => ({
+    components: { VideoPlayer },
+    setup: () => ({ args }),
+    template: '<VideoPlayer v-bind="args" class="rounded-3xl" />',
+  }),
+  play: async ({ canvasElement }) => {
+    const root = canvasElement.querySelector<HTMLElement>('[data-video-player]')!
+    await expect(getComputedStyle(root).borderTopLeftRadius).toBe('24px')
+  },
+}
+
+/** Autoplay starts without sound; the bar has the sound button to turn it on. */
+export const Autoplay: Story = {
+  args: { autoplay: true, muted: true, loop: true },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const video = canvasElement.querySelector('video')!
+
+    await waitFor(() => expect(video.paused).toBe(false), { timeout: 5000 })
+    await expect(video.muted).toBe(true)
+
+    // Untouched while it plays: the bar fades and the cursor goes with it
+    const root = canvasElement.querySelector<HTMLElement>('[data-video-player]')!
+    await waitFor(() => expect(getComputedStyle(root).cursor).toBe('none'), { timeout: 4000 })
+
+    // A hidden bar lets clicks through; moving the mouse brings it back first
+    await userEvent.hover(video)
+    await expect(getComputedStyle(root).cursor).not.toBe('none')
+    await userEvent.click(canvas.getByRole('button', { name: 'Geluid aan' }))
+    await expect(video.muted).toBe(false)
+    video.pause()
+  },
+}
+
+/**
+ * A 9:16 video in a portrait frame of 360 by 640, filled the way a consumer does it (as the
+ * media library): `size-full` on the player and `object-cover` on its video.
+ */
+const verticalRender =
+  (frameClass = 'w-90'): Story['render'] =>
+  (args) => ({
+    components: { VideoPlayer },
+    setup: () => ({ args, frameClass }),
+    template: `
+    <div data-frame class="aspect-9/16" :class="frameClass">
+      <VideoPlayer v-bind="args" class="size-full [&>video]:h-full [&>video]:object-cover" />
+    </div>
+  `,
+  })
+
+/** Portrait with the full bar; the volume opens in a popover above the sound button. */
+export const Vertical: Story = {
+  args: { src: VERTICAL_VIDEO, poster: VERTICAL_POSTER, muted: true },
+  render: verticalRender(),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const frame = canvasElement.querySelector<HTMLElement>('[data-frame]')!.getBoundingClientRect()
+    const video = canvasElement.querySelector('video')!
+
+    // Plays in portrait (also in the Chromium of CI), started with the big button
+    await userEvent.click(canvas.getByRole('button', { name: 'Afspelen: Rondleiding' }))
+    await waitFor(() => expect(video.currentTime).toBeGreaterThan(0.3), { timeout: 5000 })
+    await expect(video.videoHeight / video.videoWidth).toBeCloseTo(16 / 9, 2)
+    video.pause()
+
+    // Fills the frame, cropped rather than stretched
+    const box = video.getBoundingClientRect()
+    await expect([box.width, box.height]).toEqual([frame.width, frame.height])
+    await expect(getComputedStyle(video).objectFit).toBe('cover')
+
+    // The bar fits the width; the volume popover fits inside the frame, clear of the corners
+    const capsule = canvas.getByRole('group').getBoundingClientRect()
+    await expect(capsule.left).toBeGreaterThanOrEqual(frame.left)
+    await expect(capsule.right).toBeLessThanOrEqual(frame.right)
+    canvas.getByRole('button', { name: /^Geluid/ }).focus()
+    const popover = canvasElement.querySelector<HTMLElement>('[data-volume-popover]')!
+    await waitFor(() => expect(getComputedStyle(popover).opacity).toBe('1'))
+    const volumeBox = popover.firstElementChild!.getBoundingClientRect()
+    await expect(volumeBox.top).toBeGreaterThanOrEqual(frame.top + 8)
+    await expect(volumeBox.right).toBeLessThanOrEqual(frame.right)
+    await expect(canvas.getByRole('slider', { name: 'Tijdlijn' })).toBeVisible()
+  },
+}
+
+/**
+ * A narrow portrait player (216px) with the corner toggle. Below 240px wide the big play button
+ * is 48px instead of 64, centred over the poster.
+ */
+export const VerticalToggle: Story = {
+  args: { src: VERTICAL_VIDEO, poster: VERTICAL_POSTER, controls: 'toggle' },
+  render: verticalRender('w-54'),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const frame = canvasElement.querySelector<HTMLElement>('[data-frame]')!.getBoundingClientRect()
+    const start = canvas.getByRole('button', { name: 'Afspelen: Rondleiding' })
+    const box = start.getBoundingClientRect()
+    await expect(box.width).toBe(48)
+    await expect(
+      Math.abs(box.left + box.width / 2 - (frame.left + frame.width / 2)),
+    ).toBeLessThanOrEqual(0.5)
+
+    // Muted here only: a test has no real gesture, and the browser plays sound only after one
+    canvasElement.querySelector('video')!.muted = true
+    await userEvent.click(start)
+    await waitFor(() => expect(canvasElement.querySelector('[data-video-start]')).toBeNull(), {
+      timeout: 5000,
+    })
+    canvasElement.querySelector('video')!.pause()
+    const corner = (
+      await canvas.findByRole('button', { name: 'Afspelen: Rondleiding' })
+    ).getBoundingClientRect()
+    await expect(corner.right).toBeLessThanOrEqual(frame.right)
+    await expect(corner.bottom).toBeLessThanOrEqual(frame.bottom)
+  },
+}