@nexxtmove/ui 2.6.0 → 2.8.0

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

@@ -0,0 +1,792 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import { defineComponent, ref, type PropType } from 'vue'
+import VideoControls from './VideoControls.vue'
+import type { NexxtVideoControlsProps } from './VideoControls.vue'
+
+/**
+ * A 14-second VP9 tour from .storybook/public (a villa with a pool, a white interior, an attic),
+ * so the bar is seen over light and darker frames in one video. WebM, so the Chromium of CI
+ * plays it too.
+ */
+const VIDEO = '/demo-tour.webm'
+/** The same tour cut to 9:16 (540×960), as a phone or TikTok video. */
+const VERTICAL_VIDEO = '/demo-tour-vertical.webm'
+
+/** Below 320px the time goes, below 160px sound and full screen (and with them the volume). */
+const WIDTHS = [480, 380, 300, 150]
+
+type ControlsArgs = Omit<NexxtVideoControlsProps, 'target' | 'fullscreenTarget'>
+
+/** A video with the controls on it, as a player lays them out: the root is the full-screen target. */
+const Stage = defineComponent({
+  components: { VideoControls },
+  props: {
+    width: { type: Number, default: 480 },
+    src: { type: String, default: VIDEO },
+    controls: { type: Object as PropType<ControlsArgs>, default: () => ({}) },
+  },
+  setup: () => ({ video: ref<HTMLVideoElement | null>(null), root: ref(null) }),
+  template: `
+    <div
+      ref="root"
+      class="relative shrink-0 overflow-hidden rounded-lg bg-black"
+      :style="{ width: width + 'px' }"
+      :data-width="width"
+    >
+      <video ref="video" :src="src" :muted="true" loop playsinline preload="auto" class="block w-full" />
+      <VideoControls :target="video" :fullscreen-target="root" v-bind="controls" />
+    </div>
+  `,
+})
+
+const meta = {
+  title: 'Components/Organisms/VideoControls',
+  component: VideoControls,
+  // The new stories are clean: axe runs as a gate here, not in the repo-wide reporting mode
+  parameters: { a11y: { test: 'error' } },
+  args: {
+    target: null,
+    variant: 'full',
+    name: 'Rondleiding',
+    autoHide: true,
+    hideDelay: 2500,
+  },
+  argTypes: {
+    target: { control: false },
+    fullscreenTarget: { control: false },
+    variant: { control: 'inline-radio', options: ['full', 'toggle'] },
+    showMute: { control: 'boolean', if: { arg: 'variant', eq: 'toggle' } },
+    name: { control: 'text' },
+    autoHide: { control: 'boolean' },
+    hideDelay: { control: 'number' },
+  },
+} satisfies Meta<typeof VideoControls>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/** The args the stage passes on; the stage brings its own video and full-screen root. */
+const controlsOf = ({
+  variant,
+  showMute,
+  name,
+  autoHide,
+  hideDelay,
+  messages,
+}: ControlsArgs): ControlsArgs => ({
+  variant,
+  showMute,
+  name,
+  autoHide,
+  hideDelay,
+  messages,
+})
+
+const single: Story['render'] = (args) => ({
+  components: { Stage },
+  setup: () => ({ controls: controlsOf(args) }),
+  template: `<Stage :controls="controls" />`,
+})
+
+/**
+ * The bar. Over the light interior the dark capsule carries the contrast; over the darker
+ * frames the white hairline outlines it.
+ */
+export const Full: Story = { render: single }
+
+/**
+ * The corner: play/pause, with mute to its left on hover or focus. It hides while playing like
+ * the bar. Tab runs mute → play, as seen; play keeps its place when mute appears.
+ */
+export const Toggle: Story = {
+  args: { variant: 'toggle' },
+  render: single,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const video = canvasElement.querySelector('video')!
+    const play = canvas.getByRole('button', { name: 'Afspelen: Rondleiding' })
+    const mute = canvas.getByRole('button', { name: 'Geluid aan: Rondleiding' })
+    // Loaded first, so the video has its final height before anything is measured
+    await waitFor(() => expect(video.readyState).toBeGreaterThanOrEqual(1), { timeout: 5000 })
+    const before = play.getBoundingClientRect()
+    await expect(getComputedStyle(mute).opacity).toBe('0')
+
+    // A pointer over the video brings mute, to the left of play, which stays where it was
+    await userEvent.hover(video)
+    await waitFor(() => expect(getComputedStyle(mute).opacity).toBe('1'))
+    await expect(mute.getBoundingClientRect().right).toBeLessThanOrEqual(
+      play.getBoundingClientRect().left,
+    )
+    const after = play.getBoundingClientRect()
+    await expect([after.left, after.top]).toEqual([before.left, before.top])
+
+    const speaker = () => glyphLeft(mute.querySelector('[data-sound-glyph] > *')!)
+    const mutedLeft = await speaker()
+    await userEvent.click(mute)
+    await expect(video.muted).toBe(false)
+    // Muted (speaker with a cross) to full (speaker with waves): the speaker stays put
+    await expect(Math.abs((await speaker()) - mutedLeft)).toBeLessThanOrEqual(0.5)
+    await expect(canvas.getByRole('button', { name: 'Geluid uit: Rondleiding' })).toBe(mute)
+    await userEvent.unhover(video)
+
+    // The keyboard reaches mute first, then play; the ring holds 3:1 as on the bar
+    mute.blur()
+    await userEvent.tab()
+    await expect(mute).toHaveFocus()
+    await waitFor(() => expect(getComputedStyle(mute).opacity).toBe('1'))
+    const style = getComputedStyle(mute)
+    await expect(style.outlineStyle).toBe('solid')
+    const ringColor = style.boxShadow
+      .split(/,(?![^(]*\))/)
+      .find((shadow) => / 2px$/.test(shadow.trim()))
+      ?.match(/(?:rgba?|oklch|oklab|color)\([^)]*\)/)?.[0]
+    await expect(
+      contrast(composite(style.outlineColor), composite(ringColor!)),
+    ).toBeGreaterThanOrEqual(3)
+    // The corner ring lies on the frame itself: on white the blue band carries it, on black the white
+    for (const frame of ['#ffffff', '#000000']) {
+      const backdrop = composite(frame)
+      const best = Math.max(
+        contrast(composite(ringColor!), backdrop),
+        contrast(composite(style.outlineColor), backdrop),
+      )
+      await expect(best).toBeGreaterThanOrEqual(3)
+    }
+    await userEvent.tab()
+    await expect(play).toHaveFocus()
+  },
+}
+
+/**
+ * The toggle without mute, for a background video that is always muted and may only be paused.
+ * Play/pause keeps the toggle's corner; hover and focus bring nothing else.
+ */
+export const ToggleWithoutMute: Story = {
+  name: 'Toggle zonder geluid',
+  args: { variant: 'toggle', showMute: false },
+  render: single,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const video = canvasElement.querySelector('video')!
+    const stage = canvasElement.querySelector<HTMLElement>('[data-width]')!
+    const play = canvas.getByRole('button', { name: 'Afspelen: Rondleiding' })
+    await waitFor(() => expect(video.readyState).toBeGreaterThanOrEqual(1), { timeout: 5000 })
+    await expect(canvas.getAllByRole('button')).toHaveLength(1)
+
+    // The same corner as the toggle with mute: 12px from the right and the bottom
+    const corner = () => {
+      const box = play.getBoundingClientRect()
+      const frame = stage.getBoundingClientRect()
+      return [Math.round(frame.right - box.right), Math.round(frame.bottom - box.bottom)]
+    }
+    const before = corner()
+    await expect(before).toEqual([12, 12])
+
+    await userEvent.hover(video)
+    await expect(canvas.getAllByRole('button')).toHaveLength(1)
+    await expect(corner()).toEqual(before)
+    await userEvent.unhover(video)
+
+    await userEvent.tab()
+    await expect(play).toHaveFocus()
+  },
+}
+
+/** Whether an element takes part in the layout: `display: none` on it or an ancestor says no. */
+const shown = (element: Element | null | undefined) => Boolean(element?.checkVisibility())
+
+/**
+ * Where a Font Awesome glyph really is: its `::before` is swapped for a span with the same
+ * character and font for a moment, laid out the way the pseudo-element is. The `<i>` box says
+ * nothing, as the glyph is centred inside it (as in NexxtIconPicker's stories).
+ */
+const glyphLeft = async (icon: Element) => {
+  await document.fonts.ready
+  const style = document.createElement('style')
+  style.textContent = '[data-glyph-measure]::before { content: none !important; }'
+  document.head.append(style)
+  const before = getComputedStyle(icon, '::before')
+  const span = document.createElement('span')
+  span.textContent = /^"(.*?)"/u.exec(before.content)?.[1] ?? ''
+  Object.assign(span.style, {
+    fontFamily: before.fontFamily,
+    fontWeight: before.fontWeight,
+    fontSize: before.fontSize,
+    lineHeight: before.lineHeight,
+  })
+  icon.setAttribute('data-glyph-measure', '')
+  icon.append(span)
+  const { left, width } = span.getBoundingClientRect()
+  span.remove()
+  icon.removeAttribute('data-glyph-measure')
+  style.remove()
+  await expect(width).toBeGreaterThan(0)
+  return left
+}
+
+/**
+ * Opens the volume popover of a stage with the focus on its sound button, and checks that it
+ * lies inside the player, clear of the rounded corners, so the player's overflow never clips it.
+ */
+const expectPopoverInside = async (stage: HTMLElement) => {
+  const sound = stage.querySelector<HTMLElement>('button[aria-label^="Geluid"]')!
+  const popoverOf = () => stage.querySelector<HTMLElement>('[data-volume-popover]')
+  sound.focus()
+  await waitFor(() => expect(getComputedStyle(popoverOf()!).opacity).toBe('1'))
+  const popover = popoverOf()!
+
+  const box = popover.firstElementChild!.getBoundingClientRect()
+  const frame = stage.getBoundingClientRect()
+  const radius = parseFloat(getComputedStyle(stage).borderTopLeftRadius)
+  await expect(box.top).toBeGreaterThanOrEqual(frame.top + radius)
+  await expect(box.left).toBeGreaterThanOrEqual(frame.left)
+  await expect(box.right).toBeLessThanOrEqual(frame.right)
+  sound.blur()
+}
+
+/** Every part of the bar in one stage, found without the accessibility tree (hidden parts too). */
+const parts = (stage: Element) => ({
+  play: stage.querySelector('button[aria-label="Afspelen"]'),
+  time: [...stage.querySelectorAll('[aria-hidden="true"]')].find((el) =>
+    /\d:\d\d \/ \d:\d\d/.test(el.textContent ?? ''),
+  ),
+  timeline: stage.querySelector('[aria-label="Tijdlijn"]'),
+  sound: stage.querySelector('button[aria-label^="Geluid"]'),
+  volume: stage.querySelector('[aria-label="Volume"]'),
+  fullscreen: stage.querySelector('button[aria-label^="Volledig scherm"]'),
+})
+
+/**
+ * Whether the stylesheets hold a rule for `selector` inside a media query matching `media`.
+ * Tailwind writes a variant it does not know as nothing at all, so this proves the variant
+ * compiled, independent of the device the test runs on.
+ */
+const hasRuleInMedia = (selector: string, media: string) => {
+  const walk = (rules: CSSRuleList, inMedia: boolean): boolean =>
+    [...rules].some((rule) => {
+      if (rule instanceof CSSMediaRule) {
+        return walk(rule.cssRules, inMedia || rule.conditionText.includes(media))
+      }
+      if (rule instanceof CSSStyleRule) {
+        if (rule.selectorText.includes(selector) && inMedia) return true
+        return walk(rule.cssRules, inMedia)
+      }
+      return 'cssRules' in rule && walk((rule as CSSGroupingRule).cssRules, inMedia)
+    })
+
+  return [...document.styleSheets].some((sheet) => {
+    try {
+      return walk(sheet.cssRules, false)
+    } catch {
+      return false
+    }
+  })
+}
+
+/**
+ * A 9:16 video, at 360 and 270px wide: in portrait the bar is narrow, so the time is gone at
+ * 270. The bar stays inside the video's width, and the volume popover inside the video.
+ */
+export const Vertical: Story = {
+  render: (args) => ({
+    components: { Stage },
+    setup: () => ({ controls: controlsOf(args), VERTICAL_VIDEO }),
+    template: `
+      <div class="flex flex-wrap items-end gap-4">
+        <Stage v-for="width in [360, 270]" :key="width" :src="VERTICAL_VIDEO" :width="width" :controls="controls" />
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const stages = [...canvasElement.querySelectorAll<HTMLElement>('[data-width]')]
+    await expect(stages).toHaveLength(2)
+
+    for (const stage of stages) {
+      const width = Number(stage.dataset.width)
+      const video = stage.querySelector('video')!
+      const { play, time, timeline, sound } = parts(stage)
+
+      // Loaded in portrait, and drawn undistorted at the stage's width
+      await waitFor(() => expect(video.videoHeight / video.videoWidth).toBeCloseTo(16 / 9, 2), {
+        timeout: 5000,
+      })
+      const box = video.getBoundingClientRect()
+      await expect(box.width).toBe(width)
+      await expect(Math.abs(box.height - (width * 16) / 9)).toBeLessThan(1)
+
+      await expect(shown(play)).toBe(true)
+      await expect(shown(timeline)).toBe(true)
+      await expect(shown(sound)).toBe(true)
+      // The popover appears once the player is measured tall enough
+      await waitFor(() => expect(shown(stage.querySelector('[aria-label="Volume"]'))).toBe(true))
+      await expect(shown(time)).toBe(width >= 320)
+      await expectPopoverInside(stage)
+
+      const capsule = stage.querySelector('[role="group"]')!.getBoundingClientRect()
+      const frame = stage.getBoundingClientRect()
+      await expect(capsule.left).toBeGreaterThanOrEqual(frame.left)
+      await expect(capsule.right).toBeLessThanOrEqual(frame.right)
+      await expect(capsule.bottom).toBeLessThanOrEqual(frame.bottom)
+    }
+  },
+}
+
+/**
+ * At 480, 380, 300 and 150px video width. Play and the timeline always stay;
+ * the volume goes below 384px, the time below 320px, sound and full screen below 160px. The
+ * breakpoints are container queries on the bar, so they follow the video, not the viewport.
+ * On a touch screen (`pointer: coarse`) there is never a volume slider.
+ */
+export const Widths: Story = {
+  render: (args) => ({
+    components: { Stage },
+    setup: () => {
+      const controls = controlsOf(args)
+      return { controls, WIDTHS }
+    },
+    template: `
+      <div class="flex flex-wrap items-end gap-4">
+        <Stage v-for="width in WIDTHS" :key="width" :width="width" :controls="controls" />
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const stages = [...canvasElement.querySelectorAll<HTMLElement>('[data-width]')]
+    await expect(stages).toHaveLength(4)
+
+    for (const stage of stages) {
+      const width = Number(stage.getAttribute('data-width'))
+      const video = stage.querySelector('video')!
+      await waitFor(() => expect(video.readyState).toBeGreaterThanOrEqual(1), { timeout: 5000 })
+      const { play, time, timeline, sound, fullscreen } = parts(stage)
+
+      await expect(shown(play)).toBe(true)
+      await expect(shown(timeline)).toBe(true)
+      await expect(shown(time)).toBe(width >= 320)
+      await expect(shown(sound)).toBe(width >= 160)
+      // No touch screen here: the popover is there wherever the sound button is and the
+      // player is tall enough (the 150px one is neither)
+      await waitFor(() =>
+        expect(shown(stage.querySelector('[aria-label="Volume"]'))).toBe(width >= 160),
+      )
+      if (width >= 160) await expectPopoverInside(stage)
+      // Full screen is only offered where the frame allows it, as with any embed
+      if (fullscreen) await expect(shown(fullscreen)).toBe(width >= 160)
+      // The timeline keeps its room even in the narrowest bar
+      await expect(timeline!.getBoundingClientRect().width).toBeGreaterThanOrEqual(48)
+    }
+
+    await expect(hasRuleInMedia('pointer-coarse\\:opacity-100', 'pointer: coarse')).toBe(true)
+  },
+}
+
+/**
+ * Tab runs Play → Timeline → Sound → Volume (→ Full screen); the sliders follow the APG keys,
+ * and Space and M work with the focus anywhere in the bar, and nowhere else.
+ */
+export const Keyboard: Story = {
+  render: single,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const video = canvasElement.querySelector('video')!
+    const timeline = canvas.getByRole('slider', { name: 'Tijdlijn' })
+    const capsule = canvas.getByRole('group', { name: 'Videobediening: Rondleiding' })
+
+    await waitFor(() => expect(timeline).toHaveAttribute('aria-valuemax', '13'), { timeout: 5000 })
+    // Waited for: the popover appears once the player is measured tall enough
+    const volume = await canvas.findByRole('slider', { name: 'Volume' })
+
+    await userEvent.tab()
+    await expect(canvas.getByRole('button', { name: 'Afspelen' })).toHaveFocus()
+    await userEvent.tab()
+    await expect(timeline).toHaveFocus()
+    await userEvent.tab()
+    await expect(canvas.getByRole('button', { name: 'Geluid aan' })).toHaveFocus()
+    await userEvent.tab()
+    await expect(volume).toHaveFocus()
+
+    timeline.focus()
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(timeline).toHaveAttribute('aria-valuetext', '0:05 van 0:13')
+    await expect(timeline).toHaveAttribute('aria-valuenow', '5')
+    await userEvent.keyboard('{Home}')
+    await expect(timeline).toHaveAttribute('aria-valuetext', '0:00 van 0:13')
+    await userEvent.keyboard('{End}')
+    await expect(timeline).toHaveAttribute('aria-valuetext', '0:13 van 0:13')
+    await userEvent.keyboard('{Home}')
+
+    // Space on the timeline plays, and the bar stays while the focus is in it
+    await userEvent.keyboard(' ')
+    await waitFor(() => expect(video.paused).toBe(false))
+    await expect(canvas.getByRole('button', { name: 'Pauzeren' })).toBeInTheDocument()
+    // 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(capsule).opacity).toBe('1')
+    await userEvent.keyboard(' ')
+    await waitFor(() => expect(video.paused).toBe(true))
+
+    // M from the volume slider: the muted video gets its sound back
+    volume.focus()
+    await userEvent.keyboard('m')
+    await expect(video.muted).toBe(false)
+    await userEvent.keyboard('{ArrowDown}')
+    await expect(volume).toHaveAttribute('aria-valuetext', '90 procent')
+
+    // Outside the bar the keys are the page's
+    volume.blur()
+    await userEvent.keyboard('m')
+    await userEvent.keyboard(' ')
+    await expect(video.muted).toBe(false)
+    await expect(video.paused).toBe(true)
+  },
+}
+
+/**
+ * The demo has a real sound track. It starts muted (as an autoplay must); M brings the sound
+ * back, the volume slider steps it, Home on the slider mutes, and the sound button unmutes at
+ * half volume rather than at nothing.
+ */
+export const Sound: Story = {
+  render: single,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const video = canvasElement.querySelector('video')! as HTMLVideoElement & {
+      webkitAudioDecodedByteCount?: number
+    }
+
+    await waitFor(() => expect(video.readyState).toBeGreaterThanOrEqual(2), { timeout: 5000 })
+    // Waited for: the popover appears once the player is measured tall enough
+    const volume = await canvas.findByRole('slider', { name: 'Volume' })
+    await HTMLMediaElement.prototype.play.call(video)
+    // There is sound to mute: the browser decodes the audio track
+    await waitFor(() => expect(video.webkitAudioDecodedByteCount ?? 1).toBeGreaterThan(0))
+    await expect(canvas.getByRole('button', { name: 'Geluid aan' })).toBeInTheDocument()
+    await expect(volume).toHaveAttribute('aria-valuetext', 'Gedempt')
+
+    volume.focus()
+    await userEvent.keyboard('m')
+    await expect(video.muted).toBe(false)
+    await expect(canvas.getByRole('button', { name: 'Geluid uit' })).toBeInTheDocument()
+    await userEvent.keyboard('{ArrowDown}')
+    await expect(video.volume).toBeCloseTo(0.9)
+    await expect(volume).toHaveAttribute('aria-valuetext', '90 procent')
+
+    await userEvent.keyboard('{Home}')
+    await expect(video.muted).toBe(true)
+    await expect(volume).toHaveAttribute('aria-valuetext', 'Gedempt')
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Geluid aan' }))
+    await expect(video.muted).toBe(false)
+    await expect(video.volume).toBe(0.5)
+    await expect(volume).toHaveAttribute('aria-valuetext', '50 procent')
+    video.pause()
+
+    // The speaker holds still while the waves change: the glyph's left edge is the same at 0,
+    // low, middle, high and muted
+    const speaker = () => glyphLeft(canvasElement.querySelector('[data-sound-glyph] > *')!)
+    const lefts: number[] = []
+    volume.focus()
+    for (const keys of [
+      '{Home}',
+      '{ArrowUp}{ArrowUp}{ArrowUp}',
+      '{ArrowUp}{ArrowUp}',
+      '{End}',
+      'm',
+    ]) {
+      await userEvent.keyboard(keys)
+      lefts.push(await speaker())
+    }
+    await expect(video.muted).toBe(true)
+    for (const left of lefts) await expect(Math.abs(left - lefts[0])).toBeLessThanOrEqual(0.5)
+  },
+}
+
+/**
+ * The knobs stay inside their tracks: at 0 the timeline knob does not cover the time, and at
+ * the end it does not run past the timeline; the volume knob likewise between its neighbours.
+ */
+export const KnobsInsideTracks: Story = {
+  render: single,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const stage = canvasElement.querySelector('[data-width]')!
+    const timeline = canvas.getByRole('slider', { name: 'Tijdlijn' })
+    const time = parts(stage).time!
+    const rect = (element: Element) => element.getBoundingClientRect()
+    const knobOf = (slider: HTMLElement) => slider.lastElementChild!
+
+    await waitFor(() => expect(timeline).toHaveAttribute('aria-valuemax', '13'), { timeout: 5000 })
+    // Waited for: the popover appears once the player is measured tall enough
+    const volume = await canvas.findByRole('slider', { name: 'Volume' })
+
+    timeline.focus()
+    for (const key of ['{Home}', '{End}']) {
+      await userEvent.keyboard(key)
+      const knob = rect(knobOf(timeline))
+      await expect(knob.left).toBeGreaterThanOrEqual(rect(time).right)
+      await expect(knob.left).toBeGreaterThanOrEqual(rect(timeline).left)
+      await expect(knob.right).toBeLessThanOrEqual(rect(timeline).right)
+    }
+
+    volume.focus()
+    for (const key of ['{Home}', '{End}']) {
+      await userEvent.keyboard(key)
+      const knob = rect(knobOf(volume))
+      await expect(knob.bottom).toBeLessThanOrEqual(rect(volume).bottom)
+      await expect(knob.top).toBeGreaterThanOrEqual(rect(volume).top)
+    }
+
+    // The opening round the track is even: as far from its ends to the top and bottom edge as
+    // from its sides to the left and right edge; and the track runs on the sound button's axis
+    const popoverBox = rect(volume.parentElement!)
+    const trackBox = rect(volume.firstElementChild!)
+    const gaps = [
+      trackBox.top - popoverBox.top,
+      popoverBox.bottom - trackBox.bottom,
+      trackBox.left - popoverBox.left,
+      popoverBox.right - trackBox.right,
+    ]
+    for (const gap of gaps) await expect(Math.abs(gap - gaps[0])).toBeLessThanOrEqual(0.5)
+
+    const centre = (box: DOMRect) => box.left + box.width / 2
+    const sound = canvas.getByRole('button', { name: /^Geluid/ })
+    await expect(
+      Math.abs(centre(rect(volume.firstElementChild!)) - centre(rect(sound))),
+    ).toBeLessThanOrEqual(0.5)
+  },
+}
+
+/**
+ * While the video plays and nothing moves, the bar fades out after 2500 ms (opacity over
+ * 300 ms, no movement) but stays in the tab order: focus on a button brings it straight back.
+ */
+export const AutoHide: Story = {
+  render: single,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const video = canvasElement.querySelector('video')!
+    const capsule = canvas.getByRole('group', { name: 'Videobediening: Rondleiding' })
+
+    await waitFor(() => expect(video.readyState).toBeGreaterThanOrEqual(2), { timeout: 5000 })
+    // The media method, not a story's play function (which the Storybook lint takes it for)
+    await HTMLMediaElement.prototype.play.call(video)
+    await expect(getComputedStyle(capsule).opacity).toBe('1')
+
+    await waitFor(() => expect(getComputedStyle(capsule).opacity).toBe('0'), { timeout: 4000 })
+    await expect(getComputedStyle(capsule).transitionDuration).toBe('0.3s')
+    await expect(getComputedStyle(capsule).pointerEvents).toBe('none')
+
+    await userEvent.tab()
+    await expect(canvas.getByRole('button', { name: 'Pauzeren' })).toHaveFocus()
+    await expect(getComputedStyle(capsule).transitionDuration).toBe('0.15s')
+    await waitFor(() => expect(getComputedStyle(capsule).opacity).toBe('1'))
+
+    // Keyboard focus keeps it up while the video plays
+    // 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(capsule).opacity).toBe('1')
+
+    // Mouse clicks (pause, play) keep the focus on the button, but no longer the bar
+    const play = canvas.getByRole('button', { name: 'Pauzeren' })
+    await userEvent.click(play)
+    await userEvent.click(play)
+    await waitFor(() => expect(video.paused).toBe(false))
+    await userEvent.unhover(play)
+    await expect(play).toHaveFocus()
+    await waitFor(() => expect(getComputedStyle(capsule).opacity).toBe('0'), { timeout: 4000 })
+
+    // The next key brings it back, and it stays
+    await userEvent.keyboard('{Shift}')
+    await waitFor(() => expect(getComputedStyle(capsule).opacity).toBe('1'))
+    video.pause()
+  },
+}
+
+/** sRGB of a CSS colour composited 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)
+  const [r, g, b] = context.getImageData(0, 0, 1, 1).data
+  return [r, g, b] as const
+}
+
+const luminance = ([r, g, b]: readonly number[]) => {
+  const [lr, lg, lb] = [r, g, b].map((channel) => {
+    const c = channel / 255
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+  })
+  return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb
+}
+
+const contrast = (a: readonly number[], b: readonly number[]) => {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+/**
+ * The focus ring is two bands: white directly around the control, blue-600 outside it. The
+ * white band holds 3:1 against the capsule over a white and over a black frame, and the blue
+ * band holds 3:1 against the white one, so the ring reads on every frame.
+ */
+export const FocusRing: Story = {
+  render: single,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const capsule = canvas.getByRole('group', { name: 'Videobediening: Rondleiding' })
+
+    // Loaded, so the player has its height and the volume popover is there
+    const video = canvasElement.querySelector('video')!
+    await waitFor(() => expect(video.readyState).toBeGreaterThanOrEqual(1), { timeout: 5000 })
+
+    await userEvent.tab()
+    const button = canvas.getByRole('button', { name: 'Afspelen' })
+    await expect(button).toHaveFocus()
+
+    const style = getComputedStyle(button)
+    await expect(style.outlineStyle).toBe('solid')
+    await expect(style.outlineWidth).toBe('2px')
+    await expect(style.outlineOffset).toBe('2px')
+
+    // Tailwind stacks several shadows, most of them transparent; the ring is the one with a spread
+    const ringColor = style.boxShadow
+      .split(/,(?![^(]*\))/)
+      .find((shadow) => / 2px$/.test(shadow.trim()))
+      ?.match(/(?:rgba?|oklch|oklab|color)\([^)]*\)/)?.[0]
+    await expect(ringColor).toBeDefined()
+
+    const capsuleColor = getComputedStyle(capsule.querySelector('[data-scrim]')!).backgroundColor
+    const outline = composite(style.outlineColor)
+    const ring = composite(ringColor!)
+
+    for (const frame of ['#ffffff', '#000000']) {
+      const backdrop = composite(capsuleColor, frame)
+      await expect(contrast(ring, backdrop)).toBeGreaterThanOrEqual(3)
+    }
+    await expect(contrast(outline, ring)).toBeGreaterThanOrEqual(3)
+
+    // The timeline's ring sits on its knob, which appears with the focus
+    await userEvent.tab()
+    const knob = canvas.getByRole('slider', { name: 'Tijdlijn' }).lastElementChild!
+    await waitFor(() => expect(getComputedStyle(knob).opacity).toBe('1'))
+    await expect(getComputedStyle(knob).outlineStyle).toBe('solid')
+
+    // The volume slider's ring is the same two bands, on its knob in the popover
+    await userEvent.tab()
+    await userEvent.tab()
+    const volume = await canvas.findByRole('slider', { name: 'Volume' })
+    await expect(volume).toHaveFocus()
+    const volumeKnob = getComputedStyle(volume.lastElementChild!)
+    await expect(volumeKnob.outlineStyle).toBe('solid')
+    await expect(contrast(composite(volumeKnob.outlineColor), ring)).toBeGreaterThanOrEqual(3)
+  },
+}
+
+/** The alpha of a computed colour (`oklab(0 0 0 / 0.5)`, `rgba(…, 0.25)`), 1 without one. */
+const alphaOf = (color: string) => Number(color.match(/[/,]\s*([\d.]+)\)$/)?.[1] ?? 1)
+
+/**
+ * The scrim on the real frames: the lightest stretch of the demo (the white room, 5.1–8.8 s, clear of the crossfades) is
+ * drawn with the same 4px blur as `backdrop-blur-xs`, the capsule's black alpha laid over it,
+ * and every pixel under each part checked. White time text ≥ 4.5:1, icons and knob ≥ 3:1, and
+ * the progress against the remaining track ≥ 3:1, on the worst pixel of the worst frame.
+ */
+export const ScrimContrast: Story = {
+  render: single,
+  play: async ({ canvasElement }) => {
+    const stage = canvasElement.querySelector<HTMLElement>('[data-width]')!
+    const video = stage.querySelector('video')!
+    const capsule = stage.querySelector('[role="group"]')!
+    const timeline = stage.querySelector<HTMLElement>('[aria-label="Tijdlijn"]')!
+    const { time } = parts(stage)
+
+    const scrimLayer = capsule.querySelector('[data-scrim]')!
+
+    await waitFor(() => expect(video.readyState).toBeGreaterThanOrEqual(2), { timeout: 5000 })
+    await expect(getComputedStyle(scrimLayer).backdropFilter).toBe('blur(4px)')
+    const scrim = alphaOf(getComputedStyle(scrimLayer).backgroundColor)
+    const track = alphaOf(getComputedStyle(timeline.firstElementChild!).backgroundColor)
+
+    // The volume popover, open, blurs the video itself: no ancestor of it is a backdrop root
+    await userEvent.hover(stage.querySelector('button[aria-label^="Geluid"]')!)
+    const popover = await waitFor(() => {
+      const element = stage.querySelector<HTMLElement>('[data-volume-popover]')!
+      expect(getComputedStyle(element).opacity).toBe('1')
+      return element.firstElementChild as HTMLElement
+    })
+    await expect(getComputedStyle(popover).backdropFilter).toBe('blur(4px)')
+    for (let node = popover.parentElement; node && node !== stage; node = node.parentElement) {
+      await expect(getComputedStyle(node).backdropFilter).toBe('none')
+    }
+    const volumeTrack = popover.querySelector('[role="slider"]')!.firstElementChild!
+    const popoverScrim = alphaOf(getComputedStyle(popover).backgroundColor)
+    const volumeTrackAlpha = alphaOf(getComputedStyle(volumeTrack).backgroundColor)
+
+    const frame = video.getBoundingClientRect()
+    const canvas = document.createElement('canvas')
+    canvas.width = frame.width
+    canvas.height = frame.height
+    const context = canvas.getContext('2d', { willReadFrequently: true })!
+    context.filter = 'blur(4px)'
+
+    /** The lowest contrast of white against `under` (a pixel's colour) over an element's area. */
+    const worst = (element: Element, under: (rgb: number[]) => number[], alpha = scrim) => {
+      const box = element.getBoundingClientRect()
+      const { data } = context.getImageData(
+        Math.round(box.left - frame.left),
+        Math.round(box.top - frame.top),
+        Math.max(1, Math.round(box.width)),
+        Math.max(1, Math.round(box.height)),
+      )
+      let lowest = Infinity
+      for (let index = 0; index < data.length; index += 4) {
+        const behind = [data[index], data[index + 1], data[index + 2]].map((c) => c * (1 - alpha))
+        lowest = Math.min(lowest, contrast([255, 255, 255], under(behind)))
+      }
+      return lowest
+    }
+    const result = { text: Infinity, icons: Infinity, progress: Infinity, volume: Infinity }
+
+    for (const at of [5.1, 5.6, 6.1, 6.6, 7.1, 7.6, 8.1, 8.6, 8.8]) {
+      video.currentTime = at
+      await new Promise((resolve) => video.addEventListener('seeked', resolve, { once: true }))
+      context.drawImage(video, 0, 0, frame.width, frame.height)
+
+      result.text = Math.min(
+        result.text,
+        worst(time!, (rgb) => rgb),
+      )
+      result.icons = Math.min(
+        result.icons,
+        worst(capsule, (rgb) => rgb),
+      )
+      result.progress = Math.min(
+        result.progress,
+        worst(timeline, (rgb) => rgb.map((c) => c * (1 - track) + 255 * track)),
+      )
+      result.volume = Math.min(
+        result.volume,
+        worst(
+          volumeTrack,
+          (rgb) => rgb.map((c) => c * (1 - volumeTrackAlpha) + 255 * volumeTrackAlpha),
+          popoverScrim,
+        ),
+      )
+    }
+
+    await expect(result.text).toBeGreaterThanOrEqual(4.5)
+    await expect(result.icons).toBeGreaterThanOrEqual(3)
+    await expect(result.progress).toBeGreaterThanOrEqual(3)
+    await expect(result.volume).toBeGreaterThanOrEqual(3)
+  },
+}