@nexxtmove/ui 1.54.0 → 2.0.0

package/src/components/organisms/VideoPlayer/VideoPlayer.vue

@@ -1,316 +1,350 @@
-<script lang="ts" setup>
-import { useEventListener, useFullscreen, useMediaControls } from '@vueuse/core'
-import { computed, onMounted, ref, useTemplateRef, watch } from 'vue'
-import NexxtIcon from '../../atoms/Icon/Icon.vue'
+<script lang="ts">
+import type { NexxtVideoControlsMessages } from '../VideoControls/VideoControls.vue'
+
+/**
+ * `full`: the NexxtVideoControls bar; `toggle`: only its round play/pause button;
+ * `none`: nothing visible, and a click on the video is left to the parent.
+ */
+export type NexxtVideoPlayerControls = 'full' | 'toggle' | 'none'
+
+/**
+ * Overridable copy: the player's own keys plus every key of NexxtVideoControlsMessages, which
+ * are passed on to the controls. Every key is optional; the Dutch defaults are merged per key.
+ */
+export interface NexxtVideoPlayerMessages extends NexxtVideoControlsMessages {
+  /** Shown when the video cannot be loaded. Defaults to `'De video kan niet worden geladen'`. */
+  error?: string
+  /** Accessible name of the video when no `name` is given. Defaults to `'Video'`. */
+  video?: string
+}
 
-const props = defineProps<{
+export interface NexxtVideoPlayerProps {
+  /** URL of the video. */
   src: string
+  /**
+   * Image shown before the video plays. With a poster nothing is preloaded (`preload="none"`);
+   * without one only the metadata is, so the first frame and the duration are there.
+   */
+  poster?: string
+  /** The video's name: its accessible name and the name of the controls. */
+  name?: string
+  /** Start playing on mount. Browsers only allow that without sound, so pair it with `muted`. */
   autoplay?: boolean
+  /** Start without sound. Applied before an autoplay starts. */
   muted?: boolean
-  showControls?: boolean
+  /** Start again at the end. */
   loop?: boolean
-  labels?: {
-    error?: string
-    play?: string
-    pause?: string
-    mute?: string
-    unmute?: string
-    enterFullscreen?: string
-    exitFullscreen?: string
-    seek?: string
-    video?: string
-  }
-}>()
-
-const labels = computed(() => ({
-  error: 'Video could not be loaded',
-  play: 'Play',
-  pause: 'Pause',
-  mute: 'Mute',
-  unmute: 'Unmute',
-  enterFullscreen: 'Enter fullscreen',
-  exitFullscreen: 'Exit fullscreen',
-  seek: 'Seek',
-  video: 'Video player',
-  ...props.labels,
-}))
+  /** Which controls to show. Defaults to `full`. */
+  controls?: NexxtVideoPlayerControls
+  /** Copy of the player and its controls. Defaults are Dutch and are merged per key. */
+  messages?: NexxtVideoPlayerMessages
+}
+</script>
 
-const videoRef = useTemplateRef('videoRef')
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import { computed, nextTick, onMounted, ref, useAttrs, useTemplateRef, watch } from 'vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtVideoControls from '../VideoControls/VideoControls.vue'
+
+// The attrs go to the root by hand, so the removed props below never land on it as HTML
+defineOptions({ name: 'NexxtVideoPlayer', inheritAttrs: false })
+
+const {
+  src,
+  poster,
+  name = '',
+  autoplay = false,
+  muted: startMuted = false,
+  loop = false,
+  controls = 'full',
+  messages,
+} = defineProps<NexxtVideoPlayerProps>()
+
+const DEFAULT_MESSAGES = {
+  error: 'De video kan niet worden geladen',
+  video: 'Video',
+}
 
-const { playing, buffered, currentTime, duration, muted, seeking } = useMediaControls(videoRef, {
-  src: computed(() => props.src),
-})
-const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(videoRef)
+/** Props removed in the major that introduced `controls`, with what replaces them. */
+const REMOVED_PROPS: Record<string, string> = {
+  showControls:
+    '`showControls` is removed: use `controls="none"` (was false) or `controls="full"` (was true).',
+  'show-controls':
+    '`showControls` is removed: use `controls="none"` (was false) or `controls="full"` (was true).',
+  labels: '`labels` is removed: use `messages` (Dutch defaults, merged per key).',
+}
 
-// Overlay visibility: show when paused OR when mouse is over the player
-const isHovering = ref(false)
-const overlayVisible = computed(() => !playing.value || isHovering.value)
+const attrs = useAttrs()
 
-// Error state — reset whenever src changes
-const hasError = ref(false)
-watch(
-  () => props.src,
-  () => {
-    hasError.value = false
-  },
+const rootAttrs = computed(() =>
+  Object.fromEntries(Object.entries(attrs).filter(([key]) => !Object.hasOwn(REMOVED_PROPS, key))),
 )
 
-// Center play/pause flash icon (like YouTube)
-const flashIcon = ref<'play' | 'pause' | null>(null)
-let flashTimer: ReturnType<typeof setTimeout> | null = null
-
-const triggerFlash = (icon: 'play' | 'pause') => {
-  if (flashTimer) clearTimeout(flashTimer)
-  flashIcon.value = icon
-  flashTimer = setTimeout(() => {
-    flashIcon.value = null
-  }, 600)
+// An old prop would otherwise fall through silently and bring the full bar back (the media
+// library passed `show-controls="false"`). `process.env.NODE_ENV` stays in the library build,
+// so the consumer's bundler decides whether this runs (as in NexxtTabs)
+if (process.env.NODE_ENV !== 'production') {
+  const removed = [
+    ...new Set(
+      Object.keys(attrs)
+        .filter((key) => Object.hasOwn(REMOVED_PROPS, key))
+        .map((key) => REMOVED_PROPS[key]),
+    ),
+  ]
+  if (removed.length) console.warn(`[NexxtVideoPlayer] ${removed.join(' ')}`)
 }
 
-const endBuffer = computed(() =>
-  buffered.value.length > 0 ? (buffered.value[buffered.value.length - 1]?.[1] ?? 0) : 0,
-)
-
-const bufferedPercent = computed(() =>
-  duration.value ? (endBuffer.value / duration.value) * 100 : 0,
-)
+const root = useTemplateRef<HTMLElement>('root')
+const videoEl = useTemplateRef<HTMLVideoElement>('videoEl')
+const controlsRef = useTemplateRef<InstanceType<typeof NexxtVideoControls>>('controlsRef')
+const startButton = useTemplateRef<HTMLButtonElement>('startButton')
 
-const formatTime = (seconds: number): string => {
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  const s = Math.floor(seconds % 60)
-  if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
-  return `${m}:${String(s).padStart(2, '0')}`
-}
+const copy = computed(() => ({
+  error: messages?.error ?? DEFAULT_MESSAGES.error,
+  video: messages?.video ?? DEFAULT_MESSAGES.video,
+}))
 
-const togglePlay = () => {
-  playing.value = !playing.value
-  triggerFlash(playing.value ? 'play' : 'pause')
-}
-const toggleMute = () => {
-  muted.value = !muted.value
-}
+const videoLabel = computed(() => name || copy.value.video)
 
-// Scrubber — dragRatio drives UI while dragging AND while the browser seek is in flight.
-// We clear it only when the browser confirms the seek is done (VueUse's `seeking` goes false).
-const scrubberRef = useTemplateRef('scrubberRef')
-const dragRatio = ref<number | null>(null)
-let pendingSeek = false
-
-const progressPct = computed(() =>
-  dragRatio.value !== null
-    ? dragRatio.value * 100
-    : duration.value
-      ? (currentTime.value / duration.value) * 100
-      : 0,
-)
+// With a poster there is nothing to show from the file until it plays; without one the
+// metadata brings the first frame and the duration
+const preload = computed(() => (poster ? 'none' : 'metadata'))
 
-const displayTime = computed(() =>
-  dragRatio.value !== null ? dragRatio.value * (duration.value || 0) : currentTime.value,
+const hasError = ref(false)
+const isPlaying = ref(false)
+const isMuted = ref(startMuted)
+const controlsVisible = ref(true)
+/** The video has played at least once; the big play button is gone for good then. */
+const hasStarted = ref(false)
+
+/**
+ * Before the first play, with controls but no autoplay: a big play button over the poster. The
+ * controls wait behind it, hidden and inert, so it is the one tab stop. Never with `none`: the
+ * media library plays those on hover.
+ */
+const showStart = computed(
+  () => controls !== 'none' && !autoplay && !hasStarted.value && !hasError.value,
 )
 
-// Release dragRatio only once the browser has finished seeking
-watch(seeking, (isSeeking) => {
-  if (!isSeeking && pendingSeek) {
-    pendingSeek = false
-    dragRatio.value = null
-  }
+const startLabel = computed(() => {
+  const label = messages?.play ?? 'Afspelen'
+  return name ? `${label}: ${name}` : label
 })
 
-const getRatio = (e: MouseEvent | TouchEvent): number => {
-  if (!scrubberRef.value) return 0
-  const rect = scrubberRef.value.getBoundingClientRect()
-  const clientX =
-    'touches' in e ? ((e as TouchEvent).touches[0]?.clientX ?? 0) : (e as MouseEvent).clientX
-  return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
+/**
+ * The controls unmount with the error without saying they are visible again, so the bar's state
+ * is reset here: otherwise a bar hidden at that moment leaves the cursor hidden over the message.
+ */
+const onError = () => {
+  hasError.value = true
+  controlsVisible.value = true
 }
 
-const startSeeking = (e: MouseEvent | TouchEvent) => {
-  dragRatio.value = getRatio(e)
-}
+// The cursor goes with the bar while the video plays, and comes back on the first movement
+const rootClasses = computed(() => ({
+  'cursor-none': controls !== 'none' && !controlsVisible.value,
+}))
 
-const seekBySeconds = (secs: number) => {
-  if (!duration.value) return
-  const next = Math.max(0, Math.min(duration.value, currentTime.value + secs))
-  pendingSeek = true
-  currentTime.value = next
-}
+/** Play, and swallow a refusal (autoplay with sound, an interrupted load): the events tell the rest. */
+const play = () => {
+  const video = videoEl.value
+  if (!video) return
 
-const onScrubberKeydown = (e: KeyboardEvent) => {
-  if (e.key === 'ArrowLeft') {
-    e.preventDefault()
-    seekBySeconds(-5)
-  } else if (e.key === 'ArrowRight') {
-    e.preventDefault()
-    seekBySeconds(5)
-  } else if (e.key === 'Home') {
-    e.preventDefault()
-    seekBySeconds(-Infinity)
-  } else if (e.key === 'End') {
-    e.preventDefault()
-    seekBySeconds(Infinity)
-  }
+  isPlaying.value = true
+  // `hasStarted` waits for the play event: a refused play must leave the big button standing
+  video.play().catch(() => {
+    isPlaying.value = !video.paused
+  })
 }
 
-const commitSeek = () => {
-  if (dragRatio.value !== null && duration.value) {
-    pendingSeek = true
-    currentTime.value = dragRatio.value * duration.value
-    // dragRatio cleared by the seeking watcher once the browser fires `seeked`
-  } else {
-    dragRatio.value = null
-  }
-}
+/**
+ * Whether the video plays. Writable: `true` plays, `false` pauses. Reads the intent at once,
+ * then follows the video's own events.
+ */
+const playing = computed({
+  get: () => isPlaying.value,
+  set: (value: boolean) => {
+    if (value) {
+      play()
+      return
+    }
+    // Reads false at once, as `true` reads true at once; the pause event confirms it
+    isPlaying.value = false
+    videoEl.value?.pause()
+  },
+})
 
-useEventListener(document, 'mousemove', (e: MouseEvent) => {
-  if (dragRatio.value !== null) dragRatio.value = getRatio(e)
+/** Whether the sound is off. Writable. */
+const mutedState = computed({
+  get: () => isMuted.value,
+  set: (value: boolean) => {
+    isMuted.value = value
+    if (videoEl.value) videoEl.value.muted = value
+  },
 })
-useEventListener(document, 'mouseup', () => {
-  if (dragRatio.value !== null) commitSeek()
+
+useEventListener(videoEl, 'play', () => {
+  isPlaying.value = true
+  hasStarted.value = true
 })
-useEventListener(document, 'touchend', () => {
-  if (dragRatio.value !== null) commitSeek()
+useEventListener(videoEl, ['pause', 'ended', 'emptied'], () => {
+  isPlaying.value = Boolean(videoEl.value && !videoEl.value.paused)
 })
+useEventListener(videoEl, 'volumechange', () => {
+  isMuted.value = videoEl.value?.muted ?? isMuted.value
+})
+
+watch(
+  () => startMuted,
+  (value) => {
+    mutedState.value = value
+  },
+)
+
+/** Muted first, then play: a browser only allows an autoplay without sound. */
+const start = () => {
+  if (videoEl.value) videoEl.value.muted = isMuted.value
+  if (autoplay) play()
+}
 
-onMounted(() => {
-  if (props.autoplay) playing.value = true
-  if (props.muted) muted.value = true
+watch(
+  () => src,
+  async () => {
+    hasError.value = false
+    isPlaying.value = false
+    // A new video starts from its own begin state
+    hasStarted.value = false
+    await nextTick()
+    start()
+  },
+)
+
+onMounted(start)
+
+/** How the big play button was used, if it was: `true` keyboard, `false` pointer. */
+let startedByKeyboard: boolean | undefined
+
+/**
+ * The big play button: play. From the keyboard (a click without a pointer, `detail` 0) the
+ * focus that follows is keyboard focus and the bar stays; after a mouse click it is not, so the
+ * bar hides as usual.
+ */
+const onStart = (event: MouseEvent) => {
+  startedByKeyboard = event.detail === 0
+  play()
+}
+
+/**
+ * When the video starts while the big button has the focus (by the button, by the parent via
+ * `playing`, by a click on the video), the focus goes to the controls' play button rather than
+ * to the body when the button leaves.
+ */
+watch(hasStarted, async (started) => {
+  const button = startButton.value
+  const byKeyboard = startedByKeyboard
+  startedByKeyboard = undefined
+  if (!started || !button || document.activeElement !== button) return
+
+  const focusVisible = byKeyboard ?? button.matches(':focus-visible')
+  // The controls stop being inert with this render; only then can they take the focus
+  await nextTick()
+  controlsRef.value?.focus({ focusVisible })
 })
 
-defineExpose({ playing, muted })
+defineExpose({ playing, muted: mutedState })
 </script>
 
 <template>
   <div
-    class="group/player relative isolate overflow-hidden rounded-lg"
-    @mouseenter="isHovering = true"
-    @mouseleave="isHovering = false"
+    v-bind="rootAttrs"
+    ref="root"
+    data-video-player
+    class="relative isolate overflow-hidden"
+    :class="rootClasses"
   >
     <video
-      ref="videoRef"
+      ref="videoEl"
       :src="src"
+      :poster="poster"
+      :preload="preload"
       :loop="loop"
-      class="w-full"
+      playsinline
+      class="block w-full"
       :class="{ invisible: hasError }"
-      :aria-label="labels.video"
-      @error="hasError = true"
-      @click="showControls !== false ? togglePlay() : undefined"
+      :aria-label="videoLabel"
+      @error="onError"
     />
 
     <div
       v-if="hasError"
       role="alert"
-      class="absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-gray-900 text-white"
+      class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-gray-900 px-4 text-center text-white"
     >
       <NexxtIcon name="circle-exclamation" class="text-3xl text-red-400" aria-hidden="true" />
-      <p class="heading-4">{{ labels.error }}</p>
-      <p class="max-w-xs truncate extra-small-normal text-white/50">{{ src }}</p>
+      <p class="heading-4">{{ copy.error }}</p>
     </div>
 
+    <NexxtVideoControls
+      v-else-if="controls !== 'none'"
+      ref="controlsRef"
+      :inert="showStart || undefined"
+      :class="{ invisible: showStart }"
+      :target="videoEl"
+      :fullscreen-target="root"
+      :variant="controls"
+      :name="name"
+      :messages="messages"
+      @visibility-change="controlsVisible = $event"
+    />
+
     <Transition
-      enter-active-class="transition-opacity duration-100 ease-out"
-      leave-active-class="transition-opacity duration-500 ease-in"
-      enter-from-class="opacity-0"
+      leave-active-class="transition-opacity duration-300 ease-in motion-reduce:transition-none"
       leave-to-class="opacity-0"
     >
       <div
-        v-if="showControls !== false && flashIcon && !hasError"
-        class="pointer-events-none absolute inset-0 flex items-center justify-center"
+        v-if="showStart"
+        class="@container pointer-events-none absolute inset-0 flex items-center justify-center print:hidden"
       >
-        <div
-          class="flex size-16 items-center justify-center rounded-full bg-black/50 text-white"
-          aria-hidden="true"
-        >
-          <NexxtIcon :name="flashIcon" class="text-2xl" />
-        </div>
-      </div>
-    </Transition>
-
-    <div
-      v-if="showControls !== false && !hasError"
-      class="absolute inset-x-0 bottom-0 flex flex-col gap-2 bg-linear-to-t from-black/70 via-black/40 to-transparent mask-[linear-gradient(to_top,black_30%,transparent)] px-3 pt-16 pb-2 backdrop-blur-sm transition-transform duration-300 ease-in-out"
-      :style="{ transform: overlayVisible ? 'translateY(0)' : 'translateY(100%)' }"
-    >
-      <div
-        ref="scrubberRef"
-        role="slider"
-        :aria-label="labels.seek"
-        :aria-valuemin="0"
-        :aria-valuemax="duration || 0"
-        :aria-valuenow="Math.round(displayTime)"
-        :aria-valuetext="formatTime(displayTime)"
-        tabindex="0"
-        class="relative h-1.5 cursor-pointer rounded-full bg-white/20"
-        @mousedown="startSeeking"
-        @touchstart.prevent="startSeeking"
-        @keydown="onScrubberKeydown"
-        @touchmove.prevent="
-          (e) => {
-            if (dragRatio !== null) dragRatio = getRatio(e)
-          }
-        "
-        @touchend="
-          () => {
-            if (dragRatio !== null) commitSeek()
-          }
-        "
-      >
-        <div
-          class="absolute inset-y-0 left-0 rounded-full bg-white/20"
-          :style="{ width: `${bufferedPercent}%` }"
-        />
-        <div
-          class="absolute inset-y-0 left-0 rounded-full bg-cornflower-blue-500"
-          :style="{ width: `${progressPct}%` }"
-        />
-        <div
-          class="absolute top-1/2 size-3 -translate-1/2 rounded-full bg-sapphire-100 opacity-0 shadow-sm transition-opacity group-hover/player:opacity-100"
-          :style="{ left: `${progressPct}%` }"
-        />
-      </div>
-
-      <div class="flex items-center gap-2">
         <button
           type="button"
-          :aria-label="playing ? labels.pause : labels.play"
-          class="flex size-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400"
-          @click="togglePlay"
+          ref="startButton"
+          data-video-start
+          :aria-label="startLabel"
+          class="pointer-events-auto flex size-16 cursor-pointer items-center justify-center rounded-full bg-black/50 heading-2 text-white ring-1 ring-white/30 backdrop-blur-xs transition-transform duration-150 ease-out hover:scale-105 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 motion-reduce:hover:scale-100 @max-[15rem]:size-12 @max-[15rem]:heading-4"
+          @click="onStart"
         >
-          <NexxtIcon :name="playing ? 'pause' : 'play'" class="text-sm" aria-hidden="true" />
-        </button>
-
-        <span class="extra-small-normal text-white/70 tabular-nums">
-          {{ formatTime(displayTime) }} / {{ formatTime(duration) }}
-        </span>
-
-        <div class="flex-1" />
-
-        <button
-          type="button"
-          :aria-label="muted ? labels.unmute : labels.mute"
-          class="flex size-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400"
-          @click="toggleMute"
-        >
-          <NexxtIcon
-            :name="muted ? 'volume-xmark' : 'volume-high'"
-            class="text-sm"
-            aria-hidden="true"
-          />
-        </button>
-
-        <button
-          type="button"
-          :aria-label="isFullscreen ? labels.exitFullscreen : labels.enterFullscreen"
-          class="flex size-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400"
-          @click="toggleFullscreen"
-        >
-          <NexxtIcon
-            :name="isFullscreen ? 'compress' : 'expand'"
-            class="text-sm"
-            aria-hidden="true"
-          />
+          <!-- The triangle's weight sits left of its box: nudged right to look centred -->
+          <NexxtIcon name="play" type="solid" class="translate-x-[0.0625em]" />
         </button>
       </div>
-    </div>
+    </Transition>
   </div>
 </template>
+
+<style scoped>
+@reference '../../../index.css';
+
+/*
+ * The corner radius is a default, not a rule: it sits in the components layer, below Tailwind's
+ * utilities, so a `rounded-*` class on the player wins without `!`. The root is matched by its
+ * data attribute, as a class name trips the Tailwind lint.
+ */
+@layer components {
+  [data-video-player] {
+    @apply rounded-lg;
+  }
+}
+
+/*
+ * Full screen takes the root, so the controls come along: square corners, black bars and the
+ * whole picture. Unlayered on purpose, so it beats a consumer's sizing classes while it lasts.
+ */
+[data-video-player]:fullscreen {
+  @apply rounded-none bg-black;
+}
+
+[data-video-player]:fullscreen > video {
+  @apply h-full object-contain;
+}
+</style>

package/src/components.json

@@ -72,6 +72,7 @@
   "NexxtTimelinePhaseblock": "components/organisms/TimelinePhaseblock/TimelinePhaseblock.vue",
   "NexxtTimelineTrack": "components/organisms/TimelineTrack/TimelineTrack.vue",
   "NexxtToaster": "components/organisms/Toaster/Toaster.vue",
+  "NexxtVideoControls": "components/organisms/VideoControls/VideoControls.vue",
   "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue",
   "NexxtEditorDimensionField": "components/editor/atoms/EditorDimensionField/EditorDimensionField.vue",
   "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",

package/src/index.ts

@@ -14,6 +14,16 @@ export type { EnergyLabelLetter } from './components/atoms/EnergyLabel/EnergyLab
 export type { IconType, NexxtIconName } from './components/atoms/Icon/Icon.vue'
 export type { CustomIconName } from './components/atoms/Icon/customIcons'
 export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue'
+export type {
+  NexxtVideoControlsMessages,
+  NexxtVideoControlsProps,
+  NexxtVideoControlsVariant,
+} from './components/organisms/VideoControls/VideoControls.vue'
+export type {
+  NexxtVideoPlayerControls,
+  NexxtVideoPlayerMessages,
+  NexxtVideoPlayerProps,
+} from './components/organisms/VideoPlayer/VideoPlayer.vue'
 export type { NexxtComboboxGroup } from './components/organisms/ComboboxPanel/combobox-types'
 export type {
   NexxtPageCardProps,
@@ -301,4 +311,5 @@ export { default as NexxtToaster } from './components/organisms/Toaster/Toaster.
 export { default as NexxtToggleGroup } from './components/molecules/ToggleGroup/ToggleGroup.vue'
 export { default as NexxtTooltip } from './components/atoms/Tooltip/Tooltip.vue'
 export { default as NexxtTree } from './components/molecules/Tree/Tree.vue'
+export { default as NexxtVideoControls } from './components/organisms/VideoControls/VideoControls.vue'
 export { default as NexxtVideoPlayer } from './components/organisms/VideoPlayer/VideoPlayer.vue'