@nexxtmove/ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,1056 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import VideoControls from './VideoControls.vue'
+import type { NexxtVideoControlsProps } from './VideoControls.vue'
+
+interface FakeVideoState {
+  duration?: number
+  currentTime?: number
+  paused?: boolean
+  volume?: number
+  muted?: boolean
+}
+
+/**
+ * A real <video> with its media state as plain, writable fields; play() and pause() flip
+ * `paused` and fire the media event, as a browser would. `seeks` records every currentTime
+ * write, so a test can count them.
+ */
+const fakeVideo = (state: FakeVideoState = {}) => {
+  const video = document.createElement('video')
+  const fields = {
+    duration: state.duration ?? 100,
+    currentTime: state.currentTime ?? 0,
+    paused: state.paused ?? true,
+    ended: false,
+    volume: state.volume ?? 1,
+    muted: state.muted ?? false,
+  }
+  const seeks: number[] = []
+
+  Object.defineProperties(video, {
+    duration: { get: () => fields.duration },
+    paused: { get: () => fields.paused },
+    ended: { get: () => fields.ended },
+    currentTime: {
+      get: () => fields.currentTime,
+      set: (value: number) => {
+        seeks.push(value)
+        fields.currentTime = value
+      },
+    },
+    volume: {
+      get: () => fields.volume,
+      set: (value: number) => {
+        fields.volume = value
+        video.dispatchEvent(new Event('volumechange'))
+      },
+    },
+    muted: {
+      get: () => fields.muted,
+      set: (value: boolean) => {
+        fields.muted = value
+        video.dispatchEvent(new Event('volumechange'))
+      },
+    },
+    buffered: { get: () => ({ length: 0, start: () => 0, end: () => 0 }) },
+  })
+
+  const play = vi.fn(() => {
+    fields.paused = false
+    video.dispatchEvent(new Event('play'))
+    return Promise.resolve()
+  })
+  const pause = vi.fn(() => {
+    fields.paused = true
+    video.dispatchEvent(new Event('pause'))
+  })
+  video.play = play
+  video.pause = pause
+
+  return { video, fields, seeks, play, pause }
+}
+
+let host: HTMLDivElement
+let wrapper: VueWrapper | undefined
+
+/** The video and the controls side by side in one host, as a player lays them out. */
+const mountControls = (
+  props: Partial<NexxtVideoControlsProps> = {},
+  state: FakeVideoState = {},
+  hostHeight?: number,
+) => {
+  const fake = fakeVideo(state)
+  host = document.createElement('div')
+  // jsdom lays nothing out; a height stands in for the player's measured size
+  if (hostHeight !== undefined) Object.defineProperty(host, 'offsetHeight', { value: hostHeight })
+  const outlet = document.createElement('div')
+  host.append(fake.video, outlet)
+  document.body.append(host)
+
+  wrapper = mount(VideoControls, {
+    props: { target: fake.video, ...props },
+    attachTo: outlet,
+  })
+
+  return { ...fake, wrapper }
+}
+
+/**
+ * Keyboard focus, as Tab gives it: the element takes the focus and a key goes down in it. jsdom's
+ * `:focus-visible` does not tell keyboard from mouse, so the key is what says it here.
+ */
+const tabTo = (element: Element) => {
+  ;(element as HTMLElement).focus()
+  element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
+}
+
+/** A mouse click: the press comes first, then the focus, then the click. */
+const mouseClick = (element: Element) => {
+  element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerType: 'mouse' }))
+  ;(element as HTMLElement).focus()
+  ;(element as HTMLElement).click()
+}
+
+const slider = (w: VueWrapper, name: string) => w.get(`[role="slider"][aria-label="${name}"]`)
+
+beforeEach(() => {
+  vi.useRealTimers()
+})
+
+afterEach(() => {
+  wrapper?.unmount()
+  wrapper = undefined
+  host?.remove()
+})
+
+describe('VideoControls', () => {
+  describe('messages', () => {
+    it('defaults to Dutch copy', async () => {
+      const { wrapper } = mountControls({ name: 'Rondleiding' })
+      await nextTick()
+
+      expect(wrapper.get('[role="group"]').attributes('aria-label')).toBe(
+        'Videobediening: Rondleiding',
+      )
+      expect(wrapper.find('button[aria-label="Afspelen"]').exists()).toBe(true)
+      expect(wrapper.find('button[aria-label="Geluid uit"]').exists()).toBe(true)
+      expect(slider(wrapper, 'Tijdlijn').attributes('aria-valuetext')).toBe('0:00 van 1:40')
+      expect(slider(wrapper, 'Volume').attributes('aria-valuetext')).toBe('100 procent')
+    })
+
+    it('merges overrides per key and keeps the defaults for the rest', async () => {
+      const { wrapper } = mountControls({
+        messages: {
+          play: 'Play',
+          group: (name) => `Controls ${name}`.trim(),
+          timeValue: (current, duration) => `${current} of ${duration}`,
+        },
+      })
+      await nextTick()
+
+      expect(wrapper.get('[role="group"]').attributes('aria-label')).toBe('Controls')
+      expect(wrapper.find('button[aria-label="Play"]').exists()).toBe(true)
+      expect(wrapper.find('button[aria-label="Geluid uit"]').exists()).toBe(true)
+      expect(slider(wrapper, 'Tijdlijn').attributes('aria-valuetext')).toBe('0:00 of 1:40')
+    })
+  })
+
+  describe('state from the video', () => {
+    it('follows the media events, without play or pause emits', async () => {
+      const { wrapper, video, fields } = mountControls()
+      await nextTick()
+
+      fields.paused = false
+      video.dispatchEvent(new Event('play'))
+      await nextTick()
+
+      expect(wrapper.find('button[aria-label="Pauzeren"]').exists()).toBe(true)
+      expect(Object.keys(wrapper.emitted())).not.toContain('play')
+    })
+
+    it('offers a replay after the end', async () => {
+      const { wrapper, video, fields } = mountControls()
+      fields.ended = true
+      video.dispatchEvent(new Event('ended'))
+      await nextTick()
+
+      expect(wrapper.find('button[aria-label="Opnieuw afspelen"]').exists()).toBe(true)
+    })
+  })
+
+  describe('timeline', () => {
+    it('steps 5 s with the arrows, 10% with Page Up/Down, and jumps with Home/End', async () => {
+      const { wrapper, fields } = mountControls({}, { currentTime: 40 })
+      await nextTick()
+      const timeline = slider(wrapper, 'Tijdlijn')
+
+      await timeline.trigger('keydown', { key: 'ArrowRight' })
+      expect(fields.currentTime).toBe(45)
+      await timeline.trigger('keydown', { key: 'ArrowDown' })
+      expect(fields.currentTime).toBe(40)
+      await timeline.trigger('keydown', { key: 'PageUp' })
+      expect(fields.currentTime).toBe(50)
+      await timeline.trigger('keydown', { key: 'PageDown' })
+      expect(fields.currentTime).toBe(40)
+      await timeline.trigger('keydown', { key: 'End' })
+      expect(fields.currentTime).toBe(100)
+      await timeline.trigger('keydown', { key: 'Home' })
+      expect(fields.currentTime).toBe(0)
+    })
+
+    it('says the time as "0:12 van 0:42" and reports whole seconds only', async () => {
+      const { wrapper, video, fields } = mountControls({}, { duration: 42, currentTime: 12.2 })
+      await nextTick()
+      const timeline = slider(wrapper, 'Tijdlijn')
+
+      expect(timeline.attributes('aria-valuetext')).toBe('0:12 van 0:42')
+      expect(timeline.attributes('aria-valuenow')).toBe('12')
+      expect(timeline.attributes('aria-valuemax')).toBe('42')
+
+      fields.currentTime = 12.9
+      video.dispatchEvent(new Event('timeupdate'))
+      await nextTick()
+      expect(timeline.attributes('aria-valuenow')).toBe('12')
+    })
+
+    it('stays focusable but disabled, with an explanation, while the duration is unknown', async () => {
+      const { wrapper, seeks } = mountControls({}, { duration: Number.NaN })
+      await nextTick()
+      const timeline = slider(wrapper, 'Tijdlijn')
+
+      expect(timeline.attributes('aria-disabled')).toBe('true')
+      expect(timeline.attributes('tabindex')).toBe('0')
+      expect(timeline.attributes('aria-valuetext')).toBe('Duur nog onbekend')
+
+      await timeline.trigger('keydown', { key: 'ArrowRight' })
+      expect(seeks).toEqual([])
+    })
+
+    it('seeks once, on letting go, however far it is dragged', async () => {
+      const { wrapper, seeks } = mountControls()
+      await nextTick()
+      const timeline = slider(wrapper, 'Tijdlijn')
+      vi.spyOn(timeline.element, 'getBoundingClientRect').mockReturnValue(
+        DOMRect.fromRect({ x: 0, y: 0, width: 200, height: 32 }),
+      )
+
+      const pointer = (type: string, clientX: number) =>
+        timeline.element.dispatchEvent(new PointerEvent(type, { clientX, pointerId: 1 }))
+
+      pointer('pointerdown', 20)
+      pointer('pointermove', 60)
+      pointer('pointermove', 140)
+      await nextTick()
+
+      expect(seeks).toEqual([])
+      expect(timeline.attributes('aria-valuetext')).toBe('1:10 van 1:40')
+
+      pointer('pointerup', 140)
+      expect(seeks).toEqual([70])
+    })
+
+    it('drops the scrub on a cancelled pointer: no seek, back to the real time', async () => {
+      const { wrapper, seeks } = mountControls({}, { currentTime: 10 })
+      await nextTick()
+      const timeline = slider(wrapper, 'Tijdlijn')
+      vi.spyOn(timeline.element, 'getBoundingClientRect').mockReturnValue(
+        DOMRect.fromRect({ x: 0, y: 0, width: 200, height: 32 }),
+      )
+      const pointer = (type: string, clientX: number) =>
+        timeline.element.dispatchEvent(new PointerEvent(type, { clientX, pointerId: 1 }))
+
+      pointer('pointerdown', 20)
+      pointer('pointermove', 140)
+      await nextTick()
+      expect(timeline.attributes('aria-valuetext')).toBe('1:10 van 1:40')
+
+      pointer('pointercancel', 140)
+      await nextTick()
+      expect(seeks).toEqual([])
+      expect(timeline.attributes('aria-valuetext')).toBe('0:10 van 1:40')
+    })
+  })
+
+  describe('volume', () => {
+    it('steps 10% with the arrows and goes to 0 or 100% with Home/End', async () => {
+      const { wrapper, fields } = mountControls({}, { volume: 0.5 })
+      await nextTick()
+      const volume = slider(wrapper, 'Volume')
+
+      await volume.trigger('keydown', { key: 'ArrowUp' })
+      expect(fields.volume).toBeCloseTo(0.6)
+      await volume.trigger('keydown', { key: 'ArrowLeft' })
+      expect(fields.volume).toBeCloseTo(0.5)
+      await volume.trigger('keydown', { key: 'Home' })
+      expect(fields.volume).toBe(0)
+      expect(fields.muted).toBe(true)
+      expect(volume.attributes('aria-valuetext')).toBe('Gedempt')
+      await volume.trigger('keydown', { key: 'End' })
+      expect(fields.volume).toBe(1)
+      expect(fields.muted).toBe(false)
+      expect(volume.attributes('aria-valuetext')).toBe('100 procent')
+    })
+  })
+
+  describe('volume popover', () => {
+    const popover = (w: VueWrapper) => w.find('[data-volume-popover]')
+    const isOpen = (w: VueWrapper) => popover(w).classes('opacity-100')
+    const soundWrapper = (w: VueWrapper) =>
+      w.get('button[aria-label="Geluid uit"]').element.parentElement!
+
+    it('is a vertical slider with the volume copy', async () => {
+      const { wrapper } = mountControls({}, { volume: 0.8 })
+      await nextTick()
+      const volume = slider(wrapper, 'Volume')
+
+      expect(volume.attributes('aria-orientation')).toBe('vertical')
+      expect(volume.attributes('aria-valuetext')).toBe('80 procent')
+    })
+
+    it('opens on hover, and closes 300 ms after the pointer leaves', async () => {
+      vi.useFakeTimers()
+      const { wrapper } = mountControls()
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(false)
+
+      soundWrapper(wrapper).dispatchEvent(new PointerEvent('pointerenter'))
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(true)
+
+      soundWrapper(wrapper).dispatchEvent(new PointerEvent('pointerleave'))
+      await nextTick()
+      vi.advanceTimersByTime(299)
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(true)
+      vi.advanceTimersByTime(1)
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(false)
+    })
+
+    it('opens with the focus on the sound button, and keeps the bar up while open', async () => {
+      vi.useFakeTimers()
+      const { wrapper } = mountControls({}, { paused: false })
+      await nextTick()
+
+      const sound = wrapper.get('button[aria-label="Geluid uit"]')
+      tabTo(sound.element)
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(true)
+
+      // Focus leaves the bar for the page: the bar would hide, but not while the popover is up
+      const group = wrapper.get('[role="group"]').element
+      group.dispatchEvent(new FocusEvent('focusout', { relatedTarget: null }))
+      vi.advanceTimersByTime(5000)
+      await nextTick()
+      expect(wrapper.get('[role="group"]').classes()).toContain('opacity-100')
+    })
+
+    it('Escape on the slider closes it and puts the focus on the sound button', async () => {
+      const { wrapper } = mountControls()
+      await nextTick()
+      const volume = slider(wrapper, 'Volume')
+
+      tabTo(volume.element)
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(true)
+
+      await volume.trigger('keydown', { key: 'Escape' })
+      expect(isOpen(wrapper)).toBe(false)
+      expect(document.activeElement?.getAttribute('aria-label')).toBe('Geluid uit')
+
+      // Back to the slider reopens it
+      tabTo(volume.element)
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(true)
+    })
+
+    it('is not there on a touch screen: the sound button is all', async () => {
+      vi.stubGlobal('matchMedia', (query: string) => ({
+        matches: query.includes('coarse'),
+        media: query,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+      }))
+      const { wrapper } = mountControls()
+      await nextTick()
+
+      expect(popover(wrapper).exists()).toBe(false)
+      expect(wrapper.find('button[aria-label="Geluid uit"]').exists()).toBe(true)
+      vi.unstubAllGlobals()
+    })
+
+    it('is not there when the player is too low to hold it', async () => {
+      const low = mountControls({}, {}, 120)
+      await nextTick()
+      expect(popover(low.wrapper).exists()).toBe(false)
+      low.wrapper.unmount()
+      host.remove()
+
+      const tall = mountControls({}, {}, 270)
+      await nextTick()
+      expect(popover(tall.wrapper).exists()).toBe(true)
+    })
+  })
+
+  describe('volume popover, dismissing and losing it', () => {
+    const isOpen = (w: VueWrapper) => w.find('[data-volume-popover]').classes('opacity-100')
+
+    it('Escape closes a popover opened by hover, without moving the focus, until a new hover', async () => {
+      const { wrapper } = mountControls()
+      await nextTick()
+      const wrapperEl = wrapper.get('button[aria-label="Geluid uit"]').element.parentElement!
+      const before = document.activeElement
+
+      wrapperEl.dispatchEvent(new PointerEvent('pointerenter'))
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(true)
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(false)
+      expect(document.activeElement).toBe(before)
+
+      wrapperEl.dispatchEvent(new PointerEvent('pointerleave'))
+      wrapperEl.dispatchEvent(new PointerEvent('pointerenter'))
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(true)
+    })
+
+    it('Escape with the focus on the sound button closes it and leaves the focus there', async () => {
+      const { wrapper } = mountControls()
+      await nextTick()
+      const sound = wrapper.get('button[aria-label="Geluid uit"]').element
+      tabTo(sound)
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(true)
+
+      sound.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(false)
+      expect(document.activeElement).toBe(sound)
+    })
+
+    it('forgets its focus when the slider goes away (a touch screen, a smaller player)', async () => {
+      let coarse = false
+      const listeners: ((event: { matches: boolean }) => void)[] = []
+      vi.stubGlobal('matchMedia', (query: string) => ({
+        get matches() {
+          return query.includes('coarse') && coarse
+        },
+        media: query,
+        addEventListener: (_: string, listener: (event: { matches: boolean }) => void) => {
+          if (query.includes('coarse')) listeners.push(listener)
+        },
+        removeEventListener: () => {},
+      }))
+      const { wrapper } = mountControls()
+      // Vue skips a bubbling event in a handler attached in the same millisecond (see Space)
+      await new Promise((resolve) => setTimeout(resolve, 5))
+      tabTo(slider(wrapper, 'Volume').element)
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(true)
+
+      coarse = true
+      listeners.forEach((listener) => listener({ matches: true }))
+      await nextTick()
+      expect(wrapper.find('[data-volume-popover]').exists()).toBe(false)
+
+      coarse = false
+      listeners.forEach((listener) => listener({ matches: false }))
+      await nextTick()
+      expect(isOpen(wrapper)).toBe(false)
+      vi.unstubAllGlobals()
+    })
+  })
+
+  describe('Escape with the popover open', () => {
+    /** The app around the player: Escape handlers on window and document, as a page has. */
+    const appListeners = () => {
+      const onWindow = vi.fn()
+      const onDocument = vi.fn()
+      window.addEventListener('keydown', onWindow)
+      document.addEventListener('keydown', onDocument)
+      return {
+        onWindow,
+        onDocument,
+        remove: () => {
+          window.removeEventListener('keydown', onWindow)
+          document.removeEventListener('keydown', onDocument)
+        },
+      }
+    }
+
+    /** The controls in a modal `<dialog>`, as in the Lightbox. */
+    const mountInDialog = () => {
+      const fake = fakeVideo()
+      const dialog = document.createElement('dialog')
+      host = document.createElement('div')
+      host.append(fake.video)
+      dialog.append(host)
+      document.body.append(dialog)
+      if (typeof dialog.showModal === 'function') dialog.showModal()
+      else dialog.setAttribute('open', '')
+      const onCancel = vi.fn()
+      dialog.addEventListener('cancel', onCancel)
+      wrapper = mount(VideoControls, {
+        props: { target: fake.video },
+        attachTo: host.appendChild(document.createElement('div')),
+      })
+      return { dialog, onCancel }
+    }
+
+    const escape = (target: EventTarget = document.body) => {
+      const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })
+      target.dispatchEvent(event)
+      return event
+    }
+
+    it('closes only the popover: the dialog stays open and the app never sees the key', async () => {
+      const { dialog, onCancel } = mountInDialog()
+      await nextTick()
+      const app = appListeners()
+      const sound = wrapper!.get('button[aria-label="Geluid uit"]').element
+      sound.parentElement!.dispatchEvent(new PointerEvent('pointerenter'))
+      await nextTick()
+      expect(wrapper!.get('[data-volume-popover]').classes()).toContain('opacity-100')
+
+      const event = escape(sound)
+      await nextTick()
+
+      expect(wrapper!.get('[data-volume-popover]').classes()).toContain('opacity-0')
+      // preventDefault stops a dialog's cancel, the key's default action
+      expect(event.defaultPrevented).toBe(true)
+      expect(dialog.open).toBe(true)
+      expect(onCancel).not.toHaveBeenCalled()
+      expect(app.onWindow).not.toHaveBeenCalled()
+      expect(app.onDocument).not.toHaveBeenCalled()
+      app.remove()
+      dialog.remove()
+    })
+
+    it('from the slider, also hands the focus back to the sound button', async () => {
+      const { wrapper } = mountControls()
+      // Vue skips a bubbling event in a handler attached in the same millisecond (see Space)
+      await new Promise((resolve) => setTimeout(resolve, 5))
+      const volume = slider(wrapper, 'Volume').element
+      tabTo(volume)
+      await nextTick()
+
+      escape(volume)
+      await nextTick()
+      expect(document.activeElement?.getAttribute('aria-label')).toBe('Geluid uit')
+    })
+
+    it('passes untouched while the popover is closed', async () => {
+      mountControls()
+      await nextTick()
+      const app = appListeners()
+
+      const event = escape()
+      expect(event.defaultPrevented).toBe(false)
+      expect(app.onWindow).toHaveBeenCalledOnce()
+      expect(app.onDocument).toHaveBeenCalledOnce()
+      app.remove()
+    })
+
+    it('lets go of window when unmounted', async () => {
+      const { wrapper } = mountControls()
+      await nextTick()
+      wrapper
+        .get('button[aria-label="Geluid uit"]')
+        .element.parentElement!.dispatchEvent(new PointerEvent('pointerenter'))
+      await nextTick()
+      wrapper.unmount()
+
+      const app = appListeners()
+      const event = escape()
+      expect(event.defaultPrevented).toBe(false)
+      expect(app.onDocument).toHaveBeenCalledOnce()
+      app.remove()
+    })
+  })
+
+  describe('focus({ focusVisible: true })', () => {
+    it('only keeps the bar up when the focus really lands', async () => {
+      vi.useFakeTimers()
+      const controls = ref<InstanceType<typeof VideoControls> | null>(null)
+      const fake = fakeVideo({ paused: false })
+      host = document.createElement('div')
+      host.append(fake.video)
+      document.body.append(host)
+      wrapper = mount(
+        defineComponent({
+          setup: () => () => h(VideoControls, { ref: controls, target: fake.video }),
+        }),
+        { attachTo: host.appendChild(document.createElement('div')) },
+      )
+      await nextTick()
+      // A button that takes no focus, as on an inert bar
+      const play = wrapper.get('button[aria-label="Pauzeren"]').element as HTMLButtonElement
+      vi.spyOn(play, 'focus').mockImplementation(() => {})
+
+      controls.value?.focus({ focusVisible: true })
+      vi.advanceTimersByTime(2500)
+      await nextTick()
+      expect(wrapper.get('[role="group"]').classes()).toContain('opacity-0')
+    })
+  })
+
+  describe('shortcuts', () => {
+    it('Space on a slider plays and pauses, without scrolling', async () => {
+      const { wrapper, play } = mountControls()
+      // Vue skips a bubbling event in a handler attached in the same millisecond the event was
+      // first handled (the slider's own keydown). A real key press never comes that soon.
+      await new Promise((resolve) => setTimeout(resolve, 5))
+      const event = new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true })
+
+      slider(wrapper, 'Tijdlijn').element.dispatchEvent(event)
+
+      expect(play).toHaveBeenCalledOnce()
+      expect(event.defaultPrevented).toBe(true)
+    })
+
+    it('leaves Space on a button to that button', async () => {
+      const { wrapper, play, fields } = mountControls()
+      await nextTick()
+      const event = new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true })
+
+      wrapper.get('button[aria-label="Geluid uit"]').element.dispatchEvent(event)
+
+      expect(play).not.toHaveBeenCalled()
+      expect(fields.muted).toBe(false)
+      expect(event.defaultPrevented).toBe(false)
+    })
+
+    it('M toggles the sound with the focus anywhere in the bar', async () => {
+      const { wrapper, fields } = mountControls()
+      await nextTick()
+
+      await wrapper.get('button[aria-label="Afspelen"]').trigger('keydown', { key: 'm' })
+      expect(fields.muted).toBe(true)
+      await slider(wrapper, 'Volume').trigger('keydown', { key: 'M' })
+      expect(fields.muted).toBe(false)
+    })
+
+    it('does nothing outside the bar', async () => {
+      const { play, fields, video } = mountControls()
+      await nextTick()
+
+      for (const key of [' ', 'm', 'f']) {
+        video.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }))
+        document.body.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }))
+      }
+
+      expect(play).not.toHaveBeenCalled()
+      expect(fields.muted).toBe(false)
+    })
+  })
+
+  describe('auto-hide', () => {
+    const capsuleShown = (w: VueWrapper) => w.get('[role="group"]').classes('opacity-100')
+
+    it('hides 2500 ms after the last movement while playing, and comes back on movement', async () => {
+      vi.useFakeTimers()
+      const { wrapper } = mountControls({}, { paused: false })
+      await nextTick()
+      expect(capsuleShown(wrapper)).toBe(true)
+
+      vi.advanceTimersByTime(2499)
+      await nextTick()
+      expect(capsuleShown(wrapper)).toBe(true)
+
+      vi.advanceTimersByTime(1)
+      await nextTick()
+      expect(capsuleShown(wrapper)).toBe(false)
+      expect(wrapper.emitted('visibility-change')?.at(-1)).toEqual([false])
+
+      host.dispatchEvent(new PointerEvent('pointermove', { pointerType: 'mouse' }))
+      await nextTick()
+      expect(capsuleShown(wrapper)).toBe(true)
+      expect(wrapper.emitted('visibility-change')?.at(-1)).toEqual([true])
+    })
+
+    it('hides 300 ms after the pointer leaves the video', async () => {
+      vi.useFakeTimers()
+      const { wrapper } = mountControls({}, { paused: false })
+      await nextTick()
+
+      host.dispatchEvent(new PointerEvent('pointerleave'))
+      vi.advanceTimersByTime(300)
+      await nextTick()
+      expect(capsuleShown(wrapper)).toBe(false)
+    })
+
+    it('stays while paused, with focus inside, or with autoHide off', async () => {
+      vi.useFakeTimers()
+      const paused = mountControls()
+      vi.advanceTimersByTime(5000)
+      await nextTick()
+      expect(capsuleShown(paused.wrapper)).toBe(true)
+      paused.wrapper.unmount()
+      host.remove()
+
+      const focused = mountControls({}, { paused: false })
+      tabTo(focused.wrapper.get('[data-video-controls] button').element)
+      vi.advanceTimersByTime(5000)
+      await nextTick()
+      expect(capsuleShown(focused.wrapper)).toBe(true)
+      focused.wrapper.unmount()
+      host.remove()
+
+      const pinned = mountControls({ autoHide: false }, { paused: false })
+      vi.advanceTimersByTime(5000)
+      await nextTick()
+      expect(capsuleShown(pinned.wrapper)).toBe(true)
+    })
+
+    it('stays hidden in the tab order: transparent, never removed', async () => {
+      vi.useFakeTimers()
+      const { wrapper } = mountControls({}, { paused: false })
+      vi.advanceTimersByTime(2500)
+      await nextTick()
+
+      expect(wrapper.find('button[aria-label="Pauzeren"]').isVisible()).toBe(true)
+      expect(wrapper.get('[role="group"]').classes()).not.toContain('invisible')
+    })
+  })
+
+  describe('focus after a click', () => {
+    it.each(['full', 'toggle'] as const)(
+      '%s: a mouse click keeps the focus but not the bar; a key brings it back',
+      async (variant) => {
+        vi.useFakeTimers()
+        const { wrapper } = mountControls({ variant }, { paused: false })
+        await nextTick()
+        const shownNow = () => wrapper.get('[data-video-controls]').classes('opacity-100')
+        // The sound button: a click on it leaves the video playing, so only the focus could hold the bar
+        const sound = wrapper.get('[data-video-controls] button[aria-label^="Geluid uit"]').element
+
+        mouseClick(sound)
+        await nextTick()
+        vi.advanceTimersByTime(2500)
+        await nextTick()
+        expect(document.activeElement).toBe(sound)
+        expect(shownNow()).toBe(false)
+
+        sound.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
+        await nextTick()
+        vi.advanceTimersByTime(5000)
+        await nextTick()
+        expect(shownNow()).toBe(true)
+      },
+    )
+
+    it('keyboard focus keeps the bar up', async () => {
+      vi.useFakeTimers()
+      const { wrapper } = mountControls({}, { paused: false })
+      await nextTick()
+      tabTo(wrapper.get('button[aria-label="Pauzeren"]').element)
+      vi.advanceTimersByTime(5000)
+      await nextTick()
+      expect(wrapper.get('[role="group"]').classes()).toContain('opacity-100')
+    })
+
+    it('focus({ focusVisible: false }) leaves the bar to hide', async () => {
+      vi.useFakeTimers()
+      const controls = ref<InstanceType<typeof VideoControls> | null>(null)
+      const fake = fakeVideo({ paused: false })
+      host = document.createElement('div')
+      host.append(fake.video)
+      document.body.append(host)
+      wrapper = mount(
+        defineComponent({
+          setup: () => () => h(VideoControls, { ref: controls, target: fake.video }),
+        }),
+        { attachTo: host.appendChild(document.createElement('div')) },
+      )
+      await nextTick()
+
+      controls.value?.focus({ focusVisible: false })
+      vi.advanceTimersByTime(2500)
+      await nextTick()
+      expect(document.activeElement?.getAttribute('aria-label')).toBe('Pauzeren')
+      expect(wrapper.get('[role="group"]').classes()).toContain('opacity-0')
+    })
+  })
+
+  describe('clicks on the video', () => {
+    it('with a mouse, a click plays and pauses', async () => {
+      const { video, play } = mountControls()
+      await nextTick()
+
+      video.dispatchEvent(new PointerEvent('pointerdown', { pointerType: 'mouse' }))
+      video.click()
+
+      expect(play).toHaveBeenCalledOnce()
+    })
+
+    it('on touch, a tap shows the bar and never pauses', async () => {
+      vi.useFakeTimers()
+      const { wrapper, video, pause } = mountControls({}, { paused: false })
+      vi.advanceTimersByTime(2500)
+      await nextTick()
+      expect(wrapper.get('[role="group"]').classes()).toContain('opacity-0')
+
+      video.dispatchEvent(new PointerEvent('pointerdown', { pointerType: 'touch' }))
+      video.click()
+      await nextTick()
+
+      expect(pause).not.toHaveBeenCalled()
+      expect(wrapper.get('[role="group"]').classes()).toContain('opacity-100')
+    })
+  })
+
+  describe('toggle variant', () => {
+    const corner = (w: VueWrapper) => w.get('[data-video-controls]')
+    const shownCorner = (w: VueWrapper) => corner(w).classes('opacity-100')
+    const muteButton = (w: VueWrapper) => w.get('button[aria-label="Geluid uit: Rondleiding"]')
+    const muteShown = (w: VueWrapper) => muteButton(w).classes('opacity-100')
+
+    it('is mute and play/pause, in that order (as seen), and leaves mouse clicks on the video alone', async () => {
+      const { wrapper, video, play, fields } = mountControls({
+        variant: 'toggle',
+        name: 'Rondleiding',
+      })
+      await nextTick()
+
+      expect(wrapper.findAll('button').map((b) => b.attributes('aria-label'))).toEqual([
+        'Geluid uit: Rondleiding',
+        'Afspelen: Rondleiding',
+      ])
+      expect(wrapper.find('[role="slider"]').exists()).toBe(false)
+
+      video.click()
+      expect(play).not.toHaveBeenCalled()
+
+      await wrapper.get('button[aria-label="Afspelen: Rondleiding"]').trigger('click')
+      expect(play).toHaveBeenCalledOnce()
+      await muteButton(wrapper).trigger('click')
+      expect(fields.muted).toBe(true)
+    })
+
+    it('hides while playing, like the bar, and comes back on movement and on pause', async () => {
+      vi.useFakeTimers()
+      const { wrapper, video, fields } = mountControls({ variant: 'toggle' }, { paused: false })
+      await nextTick()
+      expect(shownCorner(wrapper)).toBe(true)
+
+      vi.advanceTimersByTime(2500)
+      await nextTick()
+      expect(shownCorner(wrapper)).toBe(false)
+      expect(wrapper.emitted('visibility-change')?.at(-1)).toEqual([false])
+
+      host.dispatchEvent(new PointerEvent('pointermove', { pointerType: 'mouse' }))
+      await nextTick()
+      expect(shownCorner(wrapper)).toBe(true)
+
+      host.dispatchEvent(new PointerEvent('pointerleave'))
+      vi.advanceTimersByTime(300)
+      await nextTick()
+      expect(shownCorner(wrapper)).toBe(false)
+
+      fields.paused = true
+      video.dispatchEvent(new Event('pause'))
+      await nextTick()
+      expect(shownCorner(wrapper)).toBe(true)
+    })
+
+    it('stays with focus inside, and always with autoHide off', async () => {
+      vi.useFakeTimers()
+      const focused = mountControls({ variant: 'toggle' }, { paused: false })
+      tabTo(focused.wrapper.get('[data-video-controls] button').element)
+      vi.advanceTimersByTime(5000)
+      await nextTick()
+      expect(shownCorner(focused.wrapper)).toBe(true)
+      focused.wrapper.unmount()
+      host.remove()
+
+      const pinned = mountControls({ variant: 'toggle', autoHide: false }, { paused: false })
+      vi.advanceTimersByTime(5000)
+      await nextTick()
+      expect(shownCorner(pinned.wrapper)).toBe(true)
+    })
+
+    it('shows mute only with a pointer over the video, focus, or a tap', async () => {
+      const { wrapper, video } = mountControls({ variant: 'toggle', name: 'Rondleiding' })
+      await nextTick()
+      expect(muteShown(wrapper)).toBe(false)
+      // Transparent, never removed: still in the tab order
+      expect(muteButton(wrapper).attributes('tabindex')).toBeUndefined()
+
+      host.dispatchEvent(new PointerEvent('pointerenter', { pointerType: 'mouse' }))
+      await nextTick()
+      expect(muteShown(wrapper)).toBe(true)
+      host.dispatchEvent(new PointerEvent('pointerleave'))
+      await nextTick()
+      expect(muteShown(wrapper)).toBe(false)
+
+      tabTo(muteButton(wrapper).element)
+      await nextTick()
+      expect(muteShown(wrapper)).toBe(true)
+      ;(muteButton(wrapper).element as HTMLButtonElement).blur()
+      await nextTick()
+      expect(muteShown(wrapper)).toBe(false)
+
+      video.dispatchEvent(new PointerEvent('pointerdown', { pointerType: 'touch' }))
+      video.click()
+      await nextTick()
+      expect(muteShown(wrapper)).toBe(true)
+    })
+
+    it('without showMute is play/pause alone: hover, focus and taps work on it and nothing else', async () => {
+      vi.useFakeTimers()
+      const { wrapper, video, play, fields } = mountControls(
+        { variant: 'toggle', name: 'Rondleiding', showMute: false },
+        { paused: false },
+      )
+      await nextTick()
+      const toggle = wrapper.get('button[aria-label="Pauzeren: Rondleiding"]')
+      expect(wrapper.findAll('button')).toHaveLength(1)
+      expect(corner(wrapper).element.children).toHaveLength(1)
+
+      // Hover and focus bring no mute button and leave play/pause as it was
+      host.dispatchEvent(new PointerEvent('pointerenter', { pointerType: 'mouse' }))
+      tabTo(toggle.element)
+      await nextTick()
+      expect(toggle.element).toBe(document.activeElement)
+      expect(wrapper.findAll('button')).toHaveLength(1)
+      ;(toggle.element as HTMLButtonElement).blur()
+      host.dispatchEvent(new PointerEvent('pointerleave'))
+      vi.advanceTimersByTime(2500)
+      await nextTick()
+      expect(shownCorner(wrapper)).toBe(false)
+
+      // A tap brings the corner back while playing and a second one hides it: no dead state
+      const tap = () => {
+        video.dispatchEvent(new PointerEvent('pointerdown', { pointerType: 'touch' }))
+        video.click()
+      }
+      tap()
+      await nextTick()
+      expect(shownCorner(wrapper)).toBe(true)
+      expect(wrapper.findAll('button')).toHaveLength(1)
+      tap()
+      await nextTick()
+      expect(shownCorner(wrapper)).toBe(false)
+      tap()
+      vi.advanceTimersByTime(2500)
+      await nextTick()
+      expect(shownCorner(wrapper)).toBe(false)
+
+      expect(play).not.toHaveBeenCalled()
+      await toggle.trigger('click')
+      expect(fields.paused).toBe(true)
+      expect(fields.muted).toBe(false)
+    })
+
+    it('with showMute off leaves the full bar as it is', async () => {
+      const { wrapper } = mountControls({ name: 'Rondleiding', showMute: false })
+      await nextTick()
+      expect(wrapper.find('button[aria-label="Geluid uit"]').exists()).toBe(true)
+    })
+  })
+
+  describe('full screen', () => {
+    it('has no button without a full-screen target', async () => {
+      const { wrapper } = mountControls()
+      await nextTick()
+      expect(wrapper.find('button[aria-label="Volledig scherm"]').exists()).toBe(false)
+    })
+
+    it('falls back to the native player where the root cannot go full screen', async () => {
+      const fake = fakeVideo()
+      const webkitEnterFullscreen = vi.fn()
+      Object.assign(fake.video, { webkitEnterFullscreen })
+      const root = document.createElement('div')
+      root.append(fake.video)
+      document.body.append(root)
+      host = root
+
+      wrapper = mount(VideoControls, {
+        props: { target: fake.video, fullscreenTarget: root },
+        attachTo: root.appendChild(document.createElement('div')),
+      })
+      await nextTick()
+
+      await wrapper.get('button[aria-label="Volledig scherm"]').trigger('click')
+      expect(webkitEnterFullscreen).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('native full screen (iOS)', () => {
+    /** A video whose native player refuses until the metadata is in, as iOS does. */
+    const mountRefusing = (refuseAlways = false) => {
+      const fake = fakeVideo()
+      let readyState = 0
+      Object.defineProperty(fake.video, 'readyState', { get: () => readyState })
+      const webkitEnterFullscreen = vi.fn(() => {
+        if (refuseAlways || readyState < 1)
+          throw new DOMException('No metadata', 'InvalidStateError')
+      })
+      const load = vi.fn(() => {
+        readyState = 1
+        fake.video.dispatchEvent(new Event('loadedmetadata'))
+      })
+      Object.assign(fake.video, { webkitEnterFullscreen, load })
+      const root = document.createElement('div')
+      root.append(fake.video)
+      document.body.append(root)
+      host = root
+      wrapper = mount(VideoControls, {
+        props: { target: fake.video, fullscreenTarget: root },
+        attachTo: root.appendChild(document.createElement('div')),
+      })
+      return { webkitEnterFullscreen, load }
+    }
+
+    it('loads the metadata after a refusal and tries once more', async () => {
+      const { webkitEnterFullscreen, load } = mountRefusing()
+      await nextTick()
+
+      await wrapper!.get('button[aria-label="Volledig scherm"]').trigger('click')
+      await flushPromises()
+
+      expect(load).toHaveBeenCalledOnce()
+      expect(webkitEnterFullscreen).toHaveBeenCalledTimes(2)
+    })
+
+    it('swallows a second refusal', async () => {
+      const { webkitEnterFullscreen } = mountRefusing(true)
+      await nextTick()
+
+      await wrapper!.get('button[aria-label="Volledig scherm"]').trigger('click')
+      await flushPromises()
+
+      expect(webkitEnterFullscreen).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('expose', () => {
+    it('focus() moves the focus to the play button; show() brings the bar back', async () => {
+      vi.useFakeTimers()
+      const fake = fakeVideo({ paused: false })
+      host = document.createElement('div')
+      host.append(fake.video)
+      document.body.append(host)
+
+      const controls = ref<InstanceType<typeof VideoControls> | null>(null)
+      const Parent = defineComponent({
+        setup: () => () => h(VideoControls, { ref: controls, target: fake.video }),
+      })
+      wrapper = mount(Parent, { attachTo: host.appendChild(document.createElement('div')) })
+      vi.advanceTimersByTime(2500)
+      await nextTick()
+      expect(wrapper.get('[role="group"]').classes()).toContain('opacity-0')
+
+      controls.value?.show()
+      await nextTick()
+      expect(wrapper.get('[role="group"]').classes()).toContain('opacity-100')
+
+      controls.value?.focus()
+      expect(document.activeElement?.getAttribute('aria-label')).toBe('Pauzeren')
+    })
+  })
+})