@nexxtmove/ui 1.54.0 → 2.1.0

package/src/components/organisms/VideoControls/VideoControls.vue

@@ -0,0 +1,961 @@
+<script lang="ts">
+import type { NexxtIconName } from '../../atoms/Icon/Icon.vue'
+
+/**
+ * `full`: the bar; `toggle`: a round play/pause button in the corner, in the same style, with a
+ * mute button to its left on hover, focus or a tap.
+ */
+export type NexxtVideoControlsVariant = 'full' | 'toggle'
+
+/** Overridable copy. Every key is optional; the Dutch defaults are merged per key. */
+export interface NexxtVideoControlsMessages {
+  /** Name of the bar; gets the video's name. Defaults to `'Videobediening: {name}'`, or `'Videobediening'` without one. */
+  group?: (name: string) => string
+  /** Defaults to `'Afspelen'`. */
+  play?: string
+  /** Defaults to `'Pauzeren'`. */
+  pause?: string
+  /** The play button after the end. Defaults to `'Opnieuw afspelen'`. */
+  replay?: string
+  /** Name of the timeline slider. Defaults to `'Tijdlijn'`. */
+  timeline?: string
+  /** Spoken value of the timeline. Defaults to `'{current} van {duration}'`, e.g. `'0:12 van 0:42'`. */
+  timeValue?: (current: string, duration: string) => string
+  /** Spoken value of the timeline before the duration is known. Defaults to `'Duur nog onbekend'`. */
+  durationUnknown?: string
+  /** Defaults to `'Geluid uit'`. */
+  mute?: string
+  /** Defaults to `'Geluid aan'`. */
+  unmute?: string
+  /** Name of the volume slider. Defaults to `'Volume'`. */
+  volume?: string
+  /** Spoken value of the volume slider. Defaults to `'{percent} procent'`. */
+  volumeValue?: (percent: number) => string
+  /** Spoken value of the volume slider while muted. Defaults to `'Gedempt'`. */
+  muted?: string
+  /** Defaults to `'Volledig scherm'`. */
+  enterFullscreen?: string
+  /** Defaults to `'Volledig scherm sluiten'`. */
+  exitFullscreen?: string
+}
+
+export interface NexxtVideoControlsProps {
+  /**
+   * The video to control. Its state is read from its media events and written to it directly,
+   * so a parent listening to the same video always agrees. The controls position themselves
+   * absolutely: the video's parent needs `position: relative`.
+   */
+  target: HTMLVideoElement | null
+  /**
+   * What goes full screen: the video's root, so these controls come along. Without it there is
+   * no full-screen button. Where the root cannot go full screen (iPhone Safari) the video's own
+   * native player opens instead.
+   */
+  fullscreenTarget?: HTMLElement | null
+  /**
+   * `full`: the bar; `toggle`: a 32px play/pause button in the corner, with mute to its left on
+   * hover, focus or a tap. Both hide while playing by the same rules. Defaults to `full`.
+   */
+  variant?: NexxtVideoControlsVariant
+  /** The video's name, for the name of the bar (or of the toggle's buttons). */
+  name?: string
+  /** Hide the bar (or the toggle) after inactivity while the video plays. Off keeps it on show. Defaults to `true`. */
+  autoHide?: boolean
+  /** Inactivity before the bar hides, in milliseconds. Defaults to `2500`. */
+  hideDelay?: number
+  /** Copy of the buttons and sliders. Defaults are Dutch and are merged per key. */
+  messages?: NexxtVideoControlsMessages
+}
+
+type PlayIcon = Extract<NexxtIconName, 'play' | 'pause' | 'rotate-right'>
+</script>
+
+<script setup lang="ts">
+import { useElementSize, useEventListener, useMediaQuery } from '@vueuse/core'
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+
+defineOptions({ name: 'NexxtVideoControls' })
+
+const {
+  target,
+  fullscreenTarget = null,
+  variant = 'full',
+  name = '',
+  autoHide = true,
+  hideDelay = 2500,
+  messages,
+} = defineProps<NexxtVideoControlsProps>()
+
+const emit = defineEmits<{
+  /** The bar was shown or hidden; the parent can hide the cursor with it. */
+  'visibility-change': [visible: boolean]
+  /** The full-screen target entered or left full screen. */
+  'fullscreen-change': [fullscreen: boolean]
+}>()
+
+const DEFAULT_MESSAGES = {
+  group: (value: string) => (value ? `Videobediening: ${value}` : 'Videobediening'),
+  play: 'Afspelen',
+  pause: 'Pauzeren',
+  replay: 'Opnieuw afspelen',
+  timeline: 'Tijdlijn',
+  timeValue: (current: string, duration: string) => `${current} van ${duration}`,
+  durationUnknown: 'Duur nog onbekend',
+  mute: 'Geluid uit',
+  unmute: 'Geluid aan',
+  volume: 'Volume',
+  volumeValue: (percent: number) => `${percent} procent`,
+  muted: 'Gedempt',
+  enterFullscreen: 'Volledig scherm',
+  exitFullscreen: 'Volledig scherm sluiten',
+} satisfies Required<NexxtVideoControlsMessages>
+
+/** How long the bar stays after the pointer leaves the video. */
+const LEAVE_DELAY = 300
+/** Arrow keys on the timeline, in seconds. */
+const SEEK_STEP = 5
+/** Page Up / Page Down on the timeline, as a share of the duration. */
+const SEEK_PAGE = 0.1
+/** Arrow keys on the volume. */
+const VOLUME_STEP = 0.1
+/** How long the volume popover stays after the pointer or the focus leaves it. */
+const VOLUME_CLOSE_DELAY = 300
+/**
+ * Player height the volume popover needs: the bar (40px, 12px from the bottom), the 8px bridge,
+ * the 96px popover and 8px to spare above it, so the player's corners never clip it.
+ */
+const VOLUME_ROOM = 164
+
+type WebkitVideo = HTMLVideoElement & { webkitEnterFullscreen?: () => void }
+
+const playButton = useTemplateRef<HTMLButtonElement>('playButton')
+const capsule = useTemplateRef<HTMLElement>('capsule')
+const track = useTemplateRef<HTMLElement>('track')
+const volumeTrack = useTemplateRef<HTMLElement>('volumeTrack')
+const soundButton = useTemplateRef<HTMLButtonElement>('soundButton')
+
+const paused = ref(true)
+const ended = ref(false)
+const currentTime = ref(0)
+const duration = ref(0)
+const bufferedEnd = ref(0)
+const volume = ref(1)
+const muted = ref(false)
+/** The time the timeline is dragged to; the video only seeks when it is let go. */
+const scrubTime = ref<number | null>(null)
+const draggingVolume = ref(false)
+/** Pointer over the sound button or its popover (the bridge between them included). */
+const overSound = ref(false)
+/** Keyboard focus on the sound button or the volume slider (hover opens it too). */
+const focusInSound = ref(false)
+/** Escape closed the popover; focus back on the sound button must not reopen it. */
+const volumeDismissed = ref(false)
+/** The popover is on show; it closes `VOLUME_CLOSE_DELAY` after it stops being wanted. */
+const volumeOpen = ref(false)
+const pointerActive = ref(false)
+const overCapsule = ref(false)
+/**
+ * Keyboard focus in the bar. Only keyboard focus keeps it on show: a button clicked with the
+ * mouse keeps the focus, and the bar would otherwise never hide again.
+ */
+const focusInside = ref(false)
+const touchShown = ref(false)
+/** The pointer is over the video (toggle: brings the mute button). */
+const overVideo = ref(false)
+const fullscreen = ref(false)
+const mounted = ref(false)
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const durationKnown = computed(() => Number.isFinite(duration.value) && duration.value > 0)
+
+const shownTime = computed(() => scrubTime.value ?? currentTime.value)
+
+const progress = computed(() =>
+  durationKnown.value ? Math.min(1, shownTime.value / duration.value) : 0,
+)
+
+const buffer = computed(() =>
+  durationKnown.value ? Math.min(1, bufferedEnd.value / duration.value) : 0,
+)
+
+const effectiveVolume = computed(() => (muted.value ? 0 : volume.value))
+
+const playLabel = computed(() => {
+  if (!paused.value) return copy.value.pause
+  return ended.value ? copy.value.replay : copy.value.play
+})
+
+const playIcon = computed<PlayIcon>(() => {
+  if (!paused.value) return 'pause'
+  return ended.value ? 'rotate-right' : 'play'
+})
+
+// The toggle stands on its own, so it carries the name the group would otherwise give it
+const toggleLabel = computed(() => (name ? `${playLabel.value}: ${name}` : playLabel.value))
+
+const soundLabel = computed(() =>
+  effectiveVolume.value === 0 ? copy.value.unmute : copy.value.mute,
+)
+
+const soundIcon = computed<NexxtIconName>(() => {
+  if (effectiveVolume.value === 0) return 'volume-xmark'
+  return effectiveVolume.value < 0.5 ? 'volume-low' : 'volume-high'
+})
+
+// Asks the document, so client-only: the button appears after mount, never in server HTML
+const fullscreenSupported = computed(() => {
+  if (!mounted.value || !fullscreenTarget) return false
+  return (
+    document.fullscreenEnabled ||
+    typeof (target as WebkitVideo | null)?.webkitEnterFullscreen === 'function'
+  )
+})
+
+const visible = computed(
+  () =>
+    !autoHide ||
+    paused.value ||
+    focusInside.value ||
+    overCapsule.value ||
+    pointerActive.value ||
+    touchShown.value ||
+    scrubTime.value !== null ||
+    draggingVolume.value ||
+    volumeOpen.value,
+)
+
+/**
+ * Where a knob sits along its track: kept inside it, so at 0 and at the end the 12px knob does
+ * not stick out over the time or the next button. Its centre runs from 6px to the width - 6px.
+ */
+const knobLeft = (position: number) => `calc(${position * 100}% + ${6 - position * 12}px)`
+
+/** The same, from the bottom of a vertical track. */
+const knobBottom = (position: number) => `calc(${position * 100}% + ${6 - position * 12}px)`
+
+/** Fade classes of the bar and of the toggle: opacity only, in quick, out slow. */
+const fadeClasses = computed(() =>
+  visible.value
+    ? 'pointer-events-auto opacity-100 duration-150 ease-out'
+    : 'pointer-events-none opacity-0 duration-300 ease-in',
+)
+
+// Toggle: the mute button only comes with a pointer over the video, focus, or a tap
+const toggleMuteShown = computed(() => overVideo.value || focusInside.value || touchShown.value)
+
+const toggleMuteClasses = computed(() =>
+  toggleMuteShown.value
+    ? 'opacity-100 duration-150 ease-out'
+    : 'pointer-events-none opacity-0 duration-300 ease-in',
+)
+
+const toggleMuteLabel = computed(() => (name ? `${soundLabel.value}: ${name}` : soundLabel.value))
+
+const capsuleClasses = computed(() => [
+  fullscreen.value ? 'mx-6 mb-6' : 'mx-3 mb-3 @max-xs:mx-2 @max-xs:mb-2',
+  // Opacity only, no movement: in quick, out slow, and instant with reduced motion
+  visible.value
+    ? 'pointer-events-auto opacity-100 duration-150 ease-out'
+    : 'opacity-0 duration-300 ease-in',
+])
+
+/** `m:ss`, from an hour `h:mm:ss`. */
+const formatTime = (seconds: number) => {
+  const whole = Number.isFinite(seconds) ? Math.max(0, Math.floor(seconds)) : 0
+  const hours = Math.floor(whole / 3600)
+  const minutes = Math.floor((whole % 3600) / 60)
+  const rest = String(whole % 60).padStart(2, '0')
+
+  return hours ? `${hours}:${String(minutes).padStart(2, '0')}:${rest}` : `${minutes}:${rest}`
+}
+
+const timeText = computed(
+  () => `${formatTime(shownTime.value)} / ${formatTime(durationKnown.value ? duration.value : 0)}`,
+)
+
+// Whole seconds: Vue only patches the attribute when the second changes, so a screen reader
+// does not read every `timeupdate`
+const timelineNow = computed(() => Math.floor(shownTime.value))
+const timelineMax = computed(() => (durationKnown.value ? Math.floor(duration.value) : 0))
+
+const timelineValueText = computed(() =>
+  durationKnown.value
+    ? copy.value.timeValue(formatTime(shownTime.value), formatTime(duration.value))
+    : copy.value.durationUnknown,
+)
+
+const volumeNow = computed(() => Math.round(effectiveVolume.value * 100))
+
+const volumeValueText = computed(() =>
+  muted.value ? copy.value.muted : copy.value.volumeValue(Math.round(volume.value * 100)),
+)
+
+const readState = () => {
+  const video = target
+  if (!video) return
+
+  paused.value = video.paused
+  ended.value = video.ended
+  currentTime.value = video.currentTime
+  duration.value = video.duration
+  volume.value = video.volume
+  muted.value = video.muted
+
+  // The end of the buffered range the playhead is in
+  const ranges = video.buffered
+  let end = 0
+  for (let index = 0; index < ranges.length; index++) {
+    if (ranges.start(index) <= video.currentTime + 0.5) end = Math.max(end, ranges.end(index))
+  }
+  bufferedEnd.value = end
+}
+
+let hideTimer: ReturnType<typeof setTimeout> | undefined
+let touchTimer: ReturnType<typeof setTimeout> | undefined
+
+/** Show the bar until the pointer has been still for `hideDelay`. */
+const show = () => {
+  pointerActive.value = true
+  clearTimeout(hideTimer)
+  hideTimer = setTimeout(() => {
+    pointerActive.value = false
+  }, hideDelay)
+}
+
+const leave = () => {
+  clearTimeout(hideTimer)
+  hideTimer = setTimeout(() => {
+    pointerActive.value = false
+  }, LEAVE_DELAY)
+}
+
+const togglePlay = () => {
+  const video = target
+  if (!video) return
+
+  if (!video.paused) {
+    video.pause()
+    return
+  }
+
+  if (video.ended) video.currentTime = 0
+  video.play().catch(() => {
+    // Refused or interrupted: the video's own events say what it does
+  })
+}
+
+const toggleMute = () => {
+  const video = target
+  if (!video) return
+
+  video.muted = !video.muted
+  // Back on at nothing would still be silent
+  if (!video.muted && video.volume === 0) video.volume = 0.5
+}
+
+const setVolume = (value: number) => {
+  const video = target
+  if (!video) return
+
+  const next = Math.min(1, Math.max(0, value))
+  video.volume = next
+  video.muted = next === 0
+}
+
+const seek = (time: number) => {
+  const video = target
+  if (!video || !durationKnown.value) return
+
+  video.currentTime = Math.min(duration.value, Math.max(0, time))
+  currentTime.value = video.currentTime
+}
+
+/**
+ * iOS: the native player. It throws (InvalidStateError) before the metadata is in, as with a
+ * poster and `preload="none"`; then the metadata is loaded and it is tried once more. A refusal
+ * the second time (the user gesture may have expired by then) is swallowed: nothing happens.
+ */
+const enterNativeFullscreen = async (video: WebkitVideo) => {
+  try {
+    video.webkitEnterFullscreen?.()
+    return
+  } catch {
+    if (video.readyState >= HTMLMediaElement.HAVE_METADATA) return
+  }
+
+  await new Promise<void>((resolve) => {
+    video.addEventListener('loadedmetadata', () => resolve(), { once: true })
+    video.addEventListener('error', () => resolve(), { once: true })
+    video.load()
+  })
+
+  try {
+    video.webkitEnterFullscreen?.()
+  } catch {
+    // Still refused: the button simply does nothing
+  }
+}
+
+const toggleFullscreen = async () => {
+  if (document.fullscreenElement) {
+    await document.exitFullscreen().catch(() => {})
+    return
+  }
+
+  if (fullscreenTarget && document.fullscreenEnabled) {
+    await fullscreenTarget.requestFullscreen().catch(() => {})
+  } else if (target) {
+    await enterNativeFullscreen(target as WebkitVideo)
+  }
+}
+
+/** Where along a track the pointer is, 0 to 1. */
+const share = (element: HTMLElement | null, event: PointerEvent) => {
+  if (!element) return 0
+  const rect = element.getBoundingClientRect()
+  return rect.width ? Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width)) : 0
+}
+
+const onTrackDown = (event: PointerEvent) => {
+  if (!durationKnown.value) return
+  track.value?.setPointerCapture?.(event.pointerId)
+  scrubTime.value = share(track.value, event) * duration.value
+}
+
+const onTrackMove = (event: PointerEvent) => {
+  if (scrubTime.value === null) return
+  scrubTime.value = share(track.value, event) * duration.value
+}
+
+/** One seek, on letting go: a seek per pointer move would empty the buffer again and again. */
+const onTrackUp = (event: PointerEvent) => {
+  if (scrubTime.value === null) return
+  track.value?.releasePointerCapture?.(event.pointerId)
+  seek(scrubTime.value)
+  scrubTime.value = null
+  show()
+}
+
+/** A cancelled pointer (a scroll took over, the system stepped in) seeks nowhere. */
+const onTrackCancel = (event: PointerEvent) => {
+  if (scrubTime.value === null) return
+  track.value?.releasePointerCapture?.(event.pointerId)
+  scrubTime.value = null
+  show()
+}
+
+/** Where along a vertical track the pointer is, 0 at the bottom to 1 at the top. */
+const shareUp = (element: HTMLElement | null, event: PointerEvent) => {
+  if (!element) return 0
+  const rect = element.getBoundingClientRect()
+  return rect.height ? Math.min(1, Math.max(0, (rect.bottom - event.clientY) / rect.height)) : 0
+}
+
+const onVolumeDown = (event: PointerEvent) => {
+  volumeTrack.value?.setPointerCapture?.(event.pointerId)
+  draggingVolume.value = true
+  setVolume(shareUp(volumeTrack.value, event))
+}
+
+const onVolumeMove = (event: PointerEvent) => {
+  if (draggingVolume.value) setVolume(shareUp(volumeTrack.value, event))
+}
+
+const onVolumeUp = (event: PointerEvent) => {
+  if (!draggingVolume.value) return
+  volumeTrack.value?.releasePointerCapture?.(event.pointerId)
+  draggingVolume.value = false
+  show()
+}
+
+const onTrackKeydown = (event: KeyboardEvent) => {
+  if (!durationKnown.value) return
+
+  const steps: Record<string, number> = {
+    ArrowLeft: -SEEK_STEP,
+    ArrowDown: -SEEK_STEP,
+    ArrowRight: SEEK_STEP,
+    ArrowUp: SEEK_STEP,
+    PageDown: -duration.value * SEEK_PAGE,
+    PageUp: duration.value * SEEK_PAGE,
+  }
+
+  if (event.key === 'Home') seek(0)
+  else if (event.key === 'End') seek(duration.value)
+  else if (event.key in steps) seek(currentTime.value + (steps[event.key] ?? 0))
+  else return
+
+  event.preventDefault()
+}
+
+let volumeTimer: ReturnType<typeof setTimeout> | undefined
+
+const closeVolume = () => {
+  clearTimeout(volumeTimer)
+  volumeOpen.value = false
+}
+
+const onVolumeKeydown = (event: KeyboardEvent) => {
+  const steps: Record<string, number> = {
+    ArrowLeft: -VOLUME_STEP,
+    ArrowDown: -VOLUME_STEP,
+    ArrowRight: VOLUME_STEP,
+    ArrowUp: VOLUME_STEP,
+  }
+
+  if (event.key === 'Home') setVolume(0)
+  else if (event.key === 'End') setVolume(1)
+  else if (event.key in steps) setVolume(effectiveVolume.value + (steps[event.key] ?? 0))
+  else return
+
+  event.preventDefault()
+}
+
+/** Space, M and F, only with the focus in the bar: the page has keys of its own. */
+const onShortcut = (event: KeyboardEvent) => {
+  if (event.metaKey || event.ctrlKey || event.altKey || event.defaultPrevented) return
+
+  // On a button, Space is that button's own activation
+  const onButton = event.target instanceof HTMLButtonElement
+  const key = event.key.toLowerCase()
+
+  if (key === ' ' && !onButton) togglePlay()
+  else if (key === 'm') toggleMute()
+  else if (key === 'f' && fullscreenSupported.value) void toggleFullscreen()
+  else return
+
+  event.preventDefault()
+}
+
+/** A pointer press is under way: the focus it brings is not keyboard focus. */
+let pointerFocus = false
+let pointerFocusTimer: ReturnType<typeof setTimeout> | undefined
+
+/** Whether an element shows keyboard focus; where `:focus-visible` is unknown, assume it does. */
+const isFocusVisible = (element: EventTarget | null) => {
+  try {
+    return element instanceof Element && element.matches(':focus-visible')
+  } catch {
+    return true
+  }
+}
+
+const onFocusIn = (event: FocusEvent) => {
+  focusInside.value = !pointerFocus && isFocusVisible(event.target)
+}
+
+const onFocusOut = (event: FocusEvent) => {
+  focusInside.value =
+    focusInside.value && (capsule.value?.contains(event.relatedTarget as Node | null) ?? false)
+}
+
+/**
+ * A press inside the bar is the bar's: no drag or selection in whatever holds the video. It
+ * also marks the focus it brings as pointer focus, until that focus has landed.
+ */
+const onPressInside = (event: PointerEvent) => {
+  event.stopPropagation()
+  pointerFocus = true
+  focusInside.value = false
+  clearTimeout(pointerFocusTimer)
+  pointerFocusTimer = setTimeout(() => (pointerFocus = false))
+}
+
+/** A key in the bar: whoever uses the keyboard sees where they are, from now on. */
+const onKeyInside = (event: KeyboardEvent) => {
+  focusInside.value = true
+  if (variant === 'full') onShortcut(event)
+}
+
+/** Mouse: a click on the video plays and pauses it. Touch: a tap shows or hides the bar, never pauses. */
+let lastPointerType = 'mouse'
+
+const onVideoPointerDown = (event: PointerEvent) => {
+  lastPointerType = event.pointerType
+}
+
+const onVideoClick = () => {
+  // A mouse click plays and pauses with the bar only; the toggle leaves clicks to the parent
+  if (lastPointerType !== 'touch') {
+    if (variant === 'full') togglePlay()
+    return
+  }
+
+  // A tap toggles what touch cannot hover for: the bar, or the toggle's mute button
+  clearTimeout(touchTimer)
+  touchShown.value = !(variant === 'toggle' ? toggleMuteShown.value : visible.value)
+  if (touchShown.value) {
+    touchTimer = setTimeout(() => {
+      touchShown.value = false
+    }, hideDelay)
+  }
+}
+
+/**
+ * Focus the play/pause button, e.g. after a big play button that started the video. Pass
+ * `{ focusVisible: false }` after a mouse click (the bar then hides as usual), and
+ * `{ focusVisible: true }` after a key (the bar stays, as with any keyboard focus).
+ */
+const focus = (options?: FocusOptions & { focusVisible?: boolean }) => {
+  pointerFocus = options?.focusVisible === false
+  playButton.value?.focus(options)
+  pointerFocus = false
+  // Asked for as keyboard focus: the bar stays, whatever the browser's own heuristic says, but
+  // only if the focus really landed (an inert or missing button takes none)
+  if (options?.focusVisible === true) {
+    focusInside.value = capsule.value?.contains(document.activeElement) ?? false
+  }
+}
+
+defineExpose({ focus, show })
+
+const MEDIA_EVENTS = [
+  'play',
+  'pause',
+  'ended',
+  'timeupdate',
+  'durationchange',
+  'loadedmetadata',
+  'progress',
+  'volumechange',
+  'seeked',
+  'emptied',
+]
+useEventListener(() => target, MEDIA_EVENTS, readState)
+useEventListener(() => target, 'pointerdown', onVideoPointerDown)
+useEventListener(() => target, 'click', onVideoClick)
+
+const hoverArea = () => fullscreenTarget ?? target?.parentElement ?? null
+useEventListener(hoverArea, 'pointermove', (event: PointerEvent) => {
+  if (event.pointerType !== 'touch') show()
+})
+useEventListener(hoverArea, 'pointerleave', () => {
+  overVideo.value = false
+  leave()
+})
+useEventListener(hoverArea, 'pointerenter', (event: PointerEvent) => {
+  if (event.pointerType !== 'touch') overVideo.value = true
+})
+
+// iOS ignores `video.volume`, and a fingertip has no hover: on touch the sound button is all
+const coarsePointer = useMediaQuery('(pointer: coarse)')
+const { height: playerHeight } = useElementSize(hoverArea, undefined, { box: 'border-box' })
+
+// 0 means not measured (no ResizeObserver: on the server, in jsdom): keep the slider then
+const volumeAvailable = computed(
+  () => !coarsePointer.value && (playerHeight.value === 0 || playerHeight.value >= VOLUME_ROOM),
+)
+
+const volumeWanted = computed(
+  () => (overSound.value || focusInSound.value || draggingVolume.value) && !volumeDismissed.value,
+)
+
+watch(volumeWanted, (wanted) => {
+  clearTimeout(volumeTimer)
+  if (wanted) volumeOpen.value = true
+  else volumeTimer = setTimeout(() => (volumeOpen.value = false), VOLUME_CLOSE_DELAY)
+})
+
+const volumeClasses = computed(() =>
+  volumeOpen.value
+    ? 'pointer-events-auto opacity-100 duration-150 ease-out'
+    : 'pointer-events-none opacity-0 duration-300 ease-in',
+)
+
+/**
+ * Escape with the popover open closes the popover and nothing else: not a `<dialog>` around the
+ * player (its cancel is the key's default action, hence preventDefault) and not whatever the
+ * page does with Escape (hence the capture phase on window, before any other handler, and the
+ * stop). Hover or focus, wherever the focus is; from the slider the focus goes back to the
+ * sound button, elsewhere it stays. With the popover closed Escape passes untouched.
+ */
+const onEscapeCapture = (event: KeyboardEvent) => {
+  if (event.key !== 'Escape' || !volumeOpen.value) return
+
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  const fromSlider = document.activeElement === volumeTrack.value
+  volumeDismissed.value = true
+  closeVolume()
+  if (fromSlider) soundButton.value?.focus()
+}
+
+useEventListener(() => (volumeOpen.value ? window : null), 'keydown', onEscapeCapture, {
+  capture: true,
+})
+
+// The slider can go while it has the focus (the player shrank below VOLUME_ROOM)
+watch(volumeAvailable, (available) => {
+  if (available) return
+  focusInSound.value = false
+  draggingVolume.value = false
+  closeVolume()
+})
+
+const onSoundEnter = () => {
+  overSound.value = true
+  volumeDismissed.value = false
+}
+
+const onSoundFocusIn = (event: FocusEvent) => {
+  focusInSound.value = !pointerFocus && isFocusVisible(event.target)
+  // Coming back to the slider reopens what Escape closed
+  if (event.target === volumeTrack.value) volumeDismissed.value = false
+}
+
+const onSoundFocusOut = (event: FocusEvent) => {
+  const wrapper = event.currentTarget as HTMLElement
+  focusInSound.value = focusInSound.value && wrapper.contains(event.relatedTarget as Node | null)
+  if (!focusInSound.value) volumeDismissed.value = false
+}
+useEventListener(
+  () => (mounted.value ? document : null),
+  'fullscreenchange',
+  () => {
+    fullscreen.value = Boolean(fullscreenTarget) && document.fullscreenElement === fullscreenTarget
+    emit('fullscreen-change', fullscreen.value)
+  },
+)
+
+watch(() => target, readState)
+watch(visible, (value) => emit('visibility-change', value))
+
+onMounted(() => {
+  mounted.value = true
+  readState()
+  // It arrives with the start: on show for a moment, so whoever just started it sees where it went
+  show()
+  emit('visibility-change', visible.value)
+})
+
+onBeforeUnmount(() => {
+  clearTimeout(hideTimer)
+  clearTimeout(touchTimer)
+  clearTimeout(volumeTimer)
+  clearTimeout(pointerFocusTimer)
+})
+</script>
+
+<template>
+  <div
+    v-if="variant === 'toggle'"
+    class="@container pointer-events-none absolute inset-0 print:hidden"
+  >
+    <!--
+      The corner buttons: play/pause in the corner, and mute to its left on hover, focus or a tap
+      (DOM and tab order follow what is seen: mute, then play). Mute is transparent when hidden,
+      never removed, so play keeps its place and both stay in the tab order. Both fade with the
+      same rules as the bar.
+    -->
+    <div
+      ref="capsule"
+      data-video-controls
+      class="absolute right-3 bottom-3 flex gap-1 transition-opacity motion-reduce:transition-none @max-xs:right-2 @max-xs:bottom-2"
+      :class="fadeClasses"
+      @pointerdown="onPressInside"
+      @pointerenter="overCapsule = true"
+      @pointerleave="overCapsule = false"
+      @focusin="onFocusIn"
+      @focusout="onFocusOut"
+      @keydown="onKeyInside"
+    >
+      <button
+        type="button"
+        :aria-label="toggleMuteLabel"
+        class="group/mute flex cursor-pointer rounded-full bg-black/50 small-normal text-white ring-1 ring-white/30 backdrop-blur-xs transition-opacity focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 motion-reduce:transition-none"
+        :class="toggleMuteClasses"
+        @click="toggleMute"
+      >
+        <span
+          class="flex size-8 items-center justify-center rounded-full transition-colors duration-150 ease-out group-hover/mute:bg-white/15 motion-reduce:transition-none"
+        >
+          <!--
+            The volume glyphs differ in width (0.625–1.25em) and Font Awesome centres each in
+            its own box, so the speaker would jump as the waves change. Each glyph takes its own
+            width, left-aligned in a box as wide as the widest (volume-high): the speaker stays put,
+            and the full icon sits centred.
+          -->
+          <span data-sound-glyph class="flex w-[1.25em] justify-start">
+            <NexxtIcon :name="soundIcon" type="solid" class="[--fa-width:auto]" />
+          </span>
+        </span>
+      </button>
+      <button
+        ref="playButton"
+        type="button"
+        :aria-label="toggleLabel"
+        class="group/toggle flex cursor-pointer rounded-full bg-black/50 small-normal text-white ring-1 ring-white/30 backdrop-blur-xs focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+        @click="togglePlay"
+      >
+        <span
+          class="flex size-8 items-center justify-center rounded-full transition-colors duration-150 ease-out group-hover/toggle:bg-white/15 motion-reduce:transition-none"
+        >
+          <NexxtIcon :name="playIcon" type="solid" />
+        </span>
+      </button>
+    </div>
+  </div>
+
+  <div v-else class="@container pointer-events-none absolute inset-x-0 bottom-0 print:hidden">
+    <!--
+      The capsule is a scrim over whatever frame the video shows, so its colours are raw alphas:
+      it is no theme surface and there is no semantic token for it. black/50 is the lightest that
+      still holds. Worst pixel, measured on the white living room of demo-tour.webm (5.1–8.8 s)
+      with the xs blur on (the ScrimContrast story): white time 4.62:1, icons and knob 4.35:1,
+      progress against the white/25 track 3.33:1 in the bar and 3.62:1 in the volume popover
+      (white/30 would leave the bar's at about 3.0). The white/30 hairline outlines it on dark
+      frames. The volume popover and the toggle use the same scrim.
+    -->
+    <div
+      ref="capsule"
+      data-video-controls
+      role="group"
+      :aria-label="copy.group(name)"
+      class="relative isolate flex h-10 items-center gap-1 px-1 text-white transition-opacity motion-reduce:transition-none"
+      :class="capsuleClasses"
+      @pointerdown="onPressInside"
+      @pointerenter="overCapsule = true"
+      @pointerleave="overCapsule = false"
+      @focusin="onFocusIn"
+      @focusout="onFocusOut"
+      @keydown="onKeyInside"
+    >
+      <!--
+        The scrim is a layer behind the content, not the capsule itself: an element with a
+        backdrop-filter is the backdrop root of everything inside it, so the volume popover's own
+        blur would only see the capsule. This way it blurs the video.
+      -->
+      <span
+        data-scrim
+        aria-hidden="true"
+        class="absolute inset-0 -z-10 rounded-full bg-black/50 ring-1 ring-white/30 backdrop-blur-xs"
+      />
+      <button
+        ref="playButton"
+        type="button"
+        :aria-label="playLabel"
+        class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full small-normal transition-[background-color] duration-150 ease-out hover:bg-white/15 focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 motion-reduce:transition-none"
+        @click="togglePlay"
+      >
+        <NexxtIcon :name="playIcon" type="solid" />
+      </button>
+
+      <span class="shrink-0 @max-xs:hidden">
+        <span aria-hidden="true" class="px-1 extra-small-normal whitespace-nowrap tabular-nums">
+          {{ timeText }}
+        </span>
+      </span>
+
+      <div
+        ref="track"
+        role="slider"
+        tabindex="0"
+        :aria-label="copy.timeline"
+        aria-valuemin="0"
+        :aria-valuemax="timelineMax"
+        :aria-valuenow="timelineNow"
+        :aria-valuetext="timelineValueText"
+        :aria-disabled="durationKnown ? undefined : 'true'"
+        class="group/track relative flex h-8 min-w-12 flex-1 cursor-pointer touch-none items-center outline-hidden"
+        @pointerdown="onTrackDown"
+        @pointermove="onTrackMove"
+        @pointerup="onTrackUp"
+        @pointercancel="onTrackCancel"
+        @keydown="onTrackKeydown"
+      >
+        <span class="h-1 w-full rounded-full bg-white/25" />
+        <span
+          class="absolute h-1 rounded-full bg-white/50"
+          :style="{ width: `${buffer * 100}%` }"
+        />
+        <span class="absolute h-1 rounded-full bg-white" :style="{ width: `${progress * 100}%` }" />
+        <span
+          class="absolute size-3 -translate-x-1/2 rounded-full bg-white group-hover/track:opacity-100 group-focus-visible/track:opacity-100 group-focus-visible/track:ring-2 group-focus-visible/track:ring-white group-focus-visible/track:outline-2 group-focus-visible/track:outline-offset-2 group-focus-visible/track:outline-blue-600 pointer-coarse:opacity-100"
+          :class="scrubTime !== null ? 'opacity-100' : 'opacity-0'"
+          :style="{ left: knobLeft(progress) }"
+        />
+      </div>
+
+      <!--
+        Sound: a click mutes, and a vertical volume slider opens above it on hover or focus.
+        The popover's bottom padding bridges the gap to the button, so moving the pointer up
+        does not close it. Hidden is transparent, so the slider stays in the tab order and
+        opens on focus.
+      -->
+      <span
+        class="relative shrink-0 @max-[10rem]:hidden"
+        @pointerenter="onSoundEnter"
+        @pointerleave="overSound = false"
+        @focusin="onSoundFocusIn"
+        @keydown="focusInSound = true"
+        @focusout="onSoundFocusOut"
+      >
+        <button
+          ref="soundButton"
+          type="button"
+          :aria-label="soundLabel"
+          class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full small-normal transition-[background-color] duration-150 ease-out hover:bg-white/15 focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 motion-reduce:transition-none"
+          @click="toggleMute"
+        >
+          <!-- The same fixed glyph box as the other sound button: the speaker stays put -->
+          <span data-sound-glyph class="flex w-[1.25em] justify-start">
+            <NexxtIcon :name="soundIcon" type="solid" class="[--fa-width:auto]" />
+          </span>
+        </button>
+
+        <span
+          v-if="volumeAvailable"
+          data-volume-popover
+          class="absolute bottom-full left-1/2 -translate-x-1/2 pb-2 transition-opacity motion-reduce:transition-none"
+          :class="volumeClasses"
+        >
+          <!-- py-2: with the track's own 6px inset, 14px from its ends to the edge, as at its sides -->
+          <span
+            class="flex h-24 w-8 justify-center rounded-full bg-black/50 py-2 ring-1 ring-white/30 backdrop-blur-xs"
+          >
+            <span
+              ref="volumeTrack"
+              role="slider"
+              tabindex="0"
+              aria-orientation="vertical"
+              :aria-label="copy.volume"
+              aria-valuemin="0"
+              aria-valuemax="100"
+              :aria-valuenow="volumeNow"
+              :aria-valuetext="volumeValueText"
+              class="group/volume relative flex h-full w-8 cursor-pointer touch-none justify-center outline-hidden"
+              @pointerdown="onVolumeDown"
+              @pointermove="onVolumeMove"
+              @pointerup="onVolumeUp"
+              @pointercancel="onVolumeUp"
+              @keydown="onVolumeKeydown"
+            >
+              <span class="my-1.5 w-1 rounded-full bg-white/25" />
+              <span
+                class="absolute bottom-1.5 w-1 rounded-full bg-white"
+                :style="{ height: `calc((100% - 12px) * ${effectiveVolume})` }"
+              />
+              <span
+                class="absolute left-1/2 size-3 -translate-x-1/2 translate-y-1/2 rounded-full bg-white group-focus-visible/volume:ring-2 group-focus-visible/volume:ring-white group-focus-visible/volume:outline-2 group-focus-visible/volume:outline-offset-2 group-focus-visible/volume:outline-blue-600"
+                :style="{ bottom: knobBottom(effectiveVolume) }"
+              />
+            </span>
+          </span>
+        </span>
+      </span>
+
+      <span v-if="fullscreenSupported" class="shrink-0 @max-[10rem]:hidden">
+        <button
+          type="button"
+          :aria-label="fullscreen ? copy.exitFullscreen : copy.enterFullscreen"
+          class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full small-normal transition-[background-color] duration-150 ease-out hover:bg-white/15 focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 motion-reduce:transition-none"
+          @click="toggleFullscreen"
+        >
+          <NexxtIcon :name="fullscreen ? 'compress' : 'expand'" type="solid" />
+        </button>
+      </span>
+    </div>
+  </div>
+</template>