uifolio 0.3.0 → 0.5.1

package/src/components/ui/video-player.tsx

@@ -27,12 +27,14 @@ import {
 } from 'lucide-react'
 import type Hls from 'hls.js'
 import { cn } from '@/lib/utils'
+import type {
+  ResolvedSubtitleTrack,
+  SubtitleTrack,
+} from '@/lib/vtt'
 import {
   parseVtt,
   subtitleSignature,
   toSubtitleList,
-  type ResolvedSubtitleTrack,
-  type SubtitleTrack,
 } from '@/lib/vtt'
 import {
   buildEmbedUrl,
@@ -55,6 +57,9 @@ import {
   type ResolvedSource,
   type SourceKind,
 } from '@/lib/video'
+import {
+  useControllableValue,
+} from '@/lib/use-controllable'
 
 export type VideoControlsMode = 'none' | 'minimal' | 'full'
 export type VideoRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
@@ -163,44 +168,82 @@ const rangeThumb =
   '[&::-webkit-slider-thumb]:size-2.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-[var(--vp-accent)] [&::-moz-range-thumb]:size-2.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-sm [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-[var(--vp-accent)]'
 
 /** Transforme les sources (URL, File, Blob, qualités) en sources lisibles et gère les object URLs. */
-function useResolvedSources(input: PlayerSource | PlayerSource[]) {
-  const signature = useMemo(() => sourceSignature(input), [input])
-
-  const [sources, setSources] = useState<ResolvedSource[]>([])
+interface SourceResolver {
+  sources: ResolvedSource[]
+  signature: string
+  /** Révoque les object URLs créées pour cette résolution. */
+  dispose: () => void
+}
 
-  // La signature résume `input` : l'effet ne tourne que lorsqu'une source change réellement.
-  useEffect(() => {
-    const created: string[] = []
-    const next = toSourceList(input).map<ResolvedSource>((source) => {
-      if (typeof source === 'string') {
-        return { src: source, kind: detectKind(source) }
-      }
-      if (source instanceof Blob) {
-        const url = URL.createObjectURL(source)
-        created.push(url)
-        return {
-          src: url,
-          kind: 'native',
-          objectUrl: true,
-          type: source.type || undefined,
-        }
-      }
+function resolveSources(input: PlayerSource | PlayerSource[]): SourceResolver {
+  const signature = sourceSignature(input)
+  const created: string[] = []
+  const sources: ResolvedSource[] = toSourceList(input).map<ResolvedSource>((source) => {
+    if (typeof source === 'string') {
+      return { src: source, kind: detectKind(source) }
+    }
+    if (source instanceof Blob) {
+      const url = URL.createObjectURL(source)
+      created.push(url)
       return {
-        src: source.src,
-        kind: detectKind(source.src, source.type),
-        type: source.type,
-        quality: source.quality,
+        src: url,
+        kind: 'native',
+        objectUrl: true,
+        type: source.type || undefined,
       }
-    })
-
-    setSources(next)
+    }
+    return {
+      src: source.src,
+      kind: detectKind(source.src, source.type),
+      type: source.type,
+      quality: source.quality,
+    }
+  })
 
-    return () => {
+  return {
+    sources,
+    signature,
+    dispose: () => {
       for (const url of created) URL.revokeObjectURL(url)
+    },
+  }
+}
+
+/** Piste active par défaut : celle marquée `default`, sinon la première avec des cues. */
+function preferDefaultActiveSubtitle(
+  loaded: ResolvedSubtitleTrack[],
+  list: SubtitleTrack[],
+): number | null {
+  const defaultIndex = list.findIndex((track) => track.default)
+  if (defaultIndex >= 0 && loaded[defaultIndex]?.cues.length) return defaultIndex
+  const firstWithCues = loaded.findIndex((track) => track.cues.length > 0)
+  return firstWithCues >= 0 ? firstWithCues : null
+}
+
+function useResolvedSources(input: PlayerSource | PlayerSource[]) {
+  const signature = sourceSignature(input)
+  const [entry, setEntry] = useState<{ signature: string; resolver: SourceResolver }>(() => ({
+    signature,
+    resolver: resolveSources(input),
+  }))
+
+  // Ajustement au rendu quand la source change réellement (pas d'effet).
+  if (entry.signature !== signature) {
+    setEntry({ signature, resolver: resolveSources(input) })
+  }
+
+  const resolver = entry.resolver
+  // Libère les object URLs du résolveur remplacé (celui du montage n'est pas
+  // libéré au démontage : StrictMode simulerait un unmount/remount).
+  const previousResolver = useRef(resolver)
+  useEffect(() => {
+    if (previousResolver.current !== resolver) {
+      previousResolver.current.dispose()
+      previousResolver.current = resolver
     }
-  }, [signature])
+  }, [resolver])
 
-  return { sources, signature }
+  return { sources: resolver.sources, signature: resolver.signature }
 }
 
 export function VideoPlayer({
@@ -241,7 +284,7 @@ export function VideoPlayer({
   onTimeUpdate,
   onError,
   ref,
-}: VideoPlayerProps) {
+}: Readonly<VideoPlayerProps>) {
   const { sources, signature } = useResolvedSources(sourceInput)
 
   const containerRef = useRef<HTMLDivElement>(null)
@@ -254,12 +297,12 @@ export function VideoPlayer({
 
   const [index, setIndex] = useState(0)
   const [playing, setPlaying] = useState(false)
-  const [muted, setMuted] = useState(mutedProp)
-  const [volume, setVolumeState] = useState(clamp(volumeProp, 0, 1))
+  const [muted, setMuted] = useControllableValue<boolean>(mutedProp, mutedProp)
+  const [volume, setVolumeState] = useControllableValue<number>(volumeProp, clamp(volumeProp, 0, 1))
   const [currentTime, setCurrentTime] = useState(0)
   const [duration, setDuration] = useState(0)
   const [buffered, setBuffered] = useState(0)
-  const [rate, setRate] = useState(playbackRate)
+  const [rate, setRate] = useControllableValue<number>(playbackRate, playbackRate)
   const [fullscreen, setFullscreen] = useState(false)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -268,18 +311,43 @@ export function VideoPlayer({
   const [embedActive, setEmbedActive] = useState(false)
   const [embedPlaying, setEmbedPlaying] = useState(false)
   const [embedSrc, setEmbedSrc] = useState<string | null>(null)
-  const [subtitleTracks, setSubtitleTracks] = useState<ResolvedSubtitleTrack[]>([])
-  const [activeSubtitle, setActiveSubtitle] = useState(-1)
   const [openMenu, setOpenMenu] = useState<'speed' | 'quality' | 'subtitles' | null>(null)
-  const [controlsVisible, setControlsVisible] = useState(true)
+  const [controlsHidden, setControlsHidden] = useState(false)
   const [failedThumbKey, setFailedThumbKey] = useState<string | null>(null)
   const [retryKey, setRetryKey] = useState(0)
+  const [prevSignature, setPrevSignature] = useState(signature)
+
+  // Ajustement au rendu : la source change ⇒ on repart d'un état propre,
+  // sans effet ni render supplémentaire.
+  if (prevSignature !== signature) {
+    setPrevSignature(signature)
+    setIndex(0)
+    setError(null)
+    setLoading(true)
+    setEmbedActive(false)
+    setEmbedPlaying(false)
+    setEmbedSrc(null)
+    setPlaying(false)
+    setCurrentTime(0)
+    setDuration(0)
+    setBuffered(0)
+  }
 
   const subtitleSig = useMemo(
     () => (subtitles ? subtitleSignature(subtitles) : ''),
     [subtitles],
   )
 
+  // Les pistes déjà chargées ne correspondent plus à la signature courante :
+  // on les écarte pendant le rechargement plutôt que par un effet de reset.
+  const [loadedSubtitles, setLoadedSubtitles] = useState<{
+    sig: string
+    tracks: ResolvedSubtitleTrack[]
+  } | null>(null)
+  const [activeSubtitle, setActiveSubtitle] = useState(-1)
+  const subtitleTracks =
+    loadedSubtitles && loadedSubtitles.sig === subtitleSig ? loadedSubtitles.tracks : []
+
   const controlMode: VideoControlsMode =
     controls === true ? 'full' : controls === false ? 'none' : controls
 
@@ -295,12 +363,13 @@ export function VideoPlayer({
         : vimeoId(active.src)
       : null
 
-  const shouldLoad = inView || !lazy
+  const observerSupported = typeof IntersectionObserver !== 'undefined'
+  const shouldLoad = inView || !lazy || !observerSupported
   const playbackActive = isEmbed ? embedPlaying : playing
   // L'iframe ne transmet pas les mouvements du pointeur : pour un embed, la barre
   // reste affichée, sinon elle ne pourrait plus jamais être rappelée.
   const showControls =
-    isEmbed || controlsVisible || !playbackActive || openMenu !== null
+    isEmbed || !controlsHidden || !playbackActive || openMenu !== null
 
   const progress = duration > 0 ? clamp((currentTime / duration) * 100, 0, 100) : 0
   const bufferedPercent = duration > 0 ? clamp((buffered / duration) * 100, 0, 100) : 0
@@ -347,32 +416,25 @@ export function VideoPlayer({
     [embedKind, postEmbed],
   )
 
-  // Dernier état voulu, réappliqué à chaque tentative de handshake : le lecteur
-  // de la plateforme ignore les commandes envoyées avant d'être prêt.
-  const embedSettings = useRef({ muted, volume, rate })
-  useEffect(() => {
-    embedSettings.current = { muted, volume, rate }
-  })
-
   /** Abonne le lecteur aux événements de l'iframe (temps, durée, état, volume). */
   const sendEmbedHandshake = useCallback(() => {
     if (!embedKind) return
     for (const message of embedHandshake(embedKind)) postEmbed(message)
 
-    const settings = embedSettings.current
-    postEmbedCommand({ type: 'mute', muted: settings.muted })
-    postEmbedCommand({ type: 'volume', volume: settings.volume })
-    postEmbedCommand({ type: 'rate', rate: settings.rate })
-  }, [embedKind, postEmbed, postEmbedCommand])
+    postEmbedCommand({ type: 'mute', muted: muted })
+    postEmbedCommand({ type: 'volume', volume })
+    postEmbedCommand({ type: 'rate', rate })
+  }, [embedKind, postEmbed, postEmbedCommand, muted, volume, rate])
 
   /** Monte l'iframe (façade → lecteur) : la lecture démarre avec le geste de l'utilisateur. */
   const startEmbed = useCallback(() => {
     if (!embedId || !embedKind) return
+    const effectiveMuted = muted ?? mutedProp
     setEmbedSrc(
       buildEmbedUrl(embedKind, embedId, {
         startAt,
         loop,
-        muted,
+        muted: effectiveMuted,
         controls: false,
         origin: window.location.origin.startsWith('http') ? window.location.origin : undefined,
       }),
@@ -380,7 +442,7 @@ export function VideoPlayer({
     setEmbedActive(true)
     setEmbedPlaying(true)
     setCurrentTime(startAt)
-  }, [embedId, embedKind, loop, muted, startAt])
+  }, [embedId, embedKind, loop, muted, mutedProp, startAt])
 
   const toggleEmbedPlay = useCallback(() => {
     // L'iframe n'est pas encore montée : on la lance au lieu d'envoyer une commande dans le vide.
@@ -444,7 +506,7 @@ export function VideoPlayer({
       video.volume = next
       video.muted = next === 0
     }
-  }, [])
+  }, [setMuted, setVolumeState])
 
   const toggleMute = useCallback(() => {
     setMuted((previous) => {
@@ -453,7 +515,7 @@ export function VideoPlayer({
       if (video) video.muted = next
       return next
     })
-  }, [])
+  }, [setMuted])
 
   const changeRate = useCallback(
     (value: number) => {
@@ -463,7 +525,7 @@ export function VideoPlayer({
       if (isEmbed) postEmbedCommand({ type: 'rate', rate: value })
       setOpenMenu(null)
     },
-    [isEmbed, postEmbedCommand],
+    [isEmbed, postEmbedCommand, setRate],
   )
 
   const toggleFullscreen = useCallback(() => {
@@ -548,33 +610,21 @@ export function VideoPlayer({
       requestFullscreen: () => toggleFullscreen(),
       getVideo: () => videoRef.current,
     }),
-    [changeRate, changeVolume, isEmbed, postEmbedCommand, seekTo, toggleFullscreen],
+    [changeRate, changeVolume, isEmbed, postEmbedCommand, seekTo, setMuted, toggleFullscreen],
   )
 
   /* ------------------------------------------------------------------ */
   /* Synchronisation des props / de l'état                               */
   /* ------------------------------------------------------------------ */
 
+  // La réinitialisation d'état se fait au rendu (voir ci-dessus) ; on ne garde
+  // ici que les refs, qui ne doivent pas être écrites pendant le rendu.
   useEffect(() => {
-    setIndex(0)
     startApplied.current = null
-    setError(null)
-    setLoading(true)
-    setEmbedActive(false)
-    setEmbedPlaying(false)
-    setEmbedSrc(null)
-    setPlaying(false)
-    setCurrentTime(0)
-    setDuration(0)
-    setBuffered(0)
   }, [signature])
 
   useEffect(() => {
-    if (!subtitles) {
-      setSubtitleTracks([])
-      setActiveSubtitle(-1)
-      return
-    }
+    if (!subtitles) return
 
     const list = toSubtitleList(subtitles)
     const urls: string[] = []
@@ -600,10 +650,9 @@ export function VideoPlayer({
       )
 
       if (cancelled) return
-      setSubtitleTracks(loaded)
-      const preferred = list.findIndex((track) => track.default)
+      setLoadedSubtitles({ sig: subtitleSig, tracks: loaded })
       setActiveSubtitle(
-        preferred >= 0 && loaded[preferred] ? preferred : loaded.length > 0 ? 0 : -1,
+        preferDefaultActiveSubtitle(loaded, list) ?? -1,
       )
     }
 
@@ -613,15 +662,11 @@ export function VideoPlayer({
       cancelled = true
       for (const url of urls) URL.revokeObjectURL(url)
     }
-  }, [subtitleSig])
-
-  useEffect(() => {
-    setMuted(mutedProp)
-  }, [mutedProp])
+  }, [subtitles, subtitleSig])
 
   useEffect(() => {
     if (!isEmbed || !embedActive) return
-    postEmbedCommand({ type: 'mute', muted })
+    postEmbedCommand({ type: 'mute', muted: muted })
   }, [embedActive, isEmbed, muted, postEmbedCommand])
 
   useEffect(() => {
@@ -661,42 +706,28 @@ export function VideoPlayer({
     }
     window.addEventListener('message', onMessage)
     return () => window.removeEventListener('message', onMessage)
-  }, [embedActive, embedKind, isEmbed])
+  }, [embedActive, embedKind, isEmbed, setRate])
 
   useEffect(() => {
     if (embedKind !== 'vimeo' || !embedActive) return
     postEmbed({ method: 'setLoop', value: loop })
   }, [embedActive, embedKind, loop, postEmbed])
 
-  useEffect(() => {
-    setVolumeState(clamp(volumeProp, 0, 1))
-  }, [volumeProp])
-
-  useEffect(() => {
-    setRate(playbackRate)
-  }, [playbackRate])
-
   useEffect(() => {
     const video = videoRef.current
     if (!video) return
-    video.volume = volume
-    video.muted = muted || volume === 0
-  }, [muted, volume])
+    video.volume = volume ?? volumeProp
+    video.muted = (muted ?? mutedProp) || (volume ?? volumeProp) === 0
+  }, [muted, mutedProp, volume, volumeProp])
 
   useEffect(() => {
     if (videoRef.current) videoRef.current.playbackRate = rate
   }, [rate])
 
   useEffect(() => {
-    if (!lazy) {
-      setInView(true)
-      return
-    }
+    if (!lazy || !observerSupported) return
     const element = containerRef.current
-    if (!element || typeof IntersectionObserver === 'undefined') {
-      setInView(true)
-      return
-    }
+    if (!element) return
     const observer = new IntersectionObserver(
       (entries) => {
         const entry = entries[0]
@@ -714,11 +745,12 @@ export function VideoPlayer({
     )
     observer.observe(element)
     return () => observer.disconnect()
-  }, [isEmbed, lazy, postEmbedCommand])
+  }, [isEmbed, lazy, observerSupported, postEmbedCommand])
 
   useEffect(() => {
     if (!autoPlay || kind === 'hls' || isEmbed || !shouldLoad) return
-    void attemptPlay()
+    const timer = window.setTimeout(() => void attemptPlay(), 0)
+    return () => window.clearTimeout(timer)
   }, [attemptPlay, autoPlay, isEmbed, kind, shouldLoad, active?.src])
 
   useEffect(() => {
@@ -735,31 +767,39 @@ export function VideoPlayer({
   }, [playbackActive])
 
   const scheduleHide = useCallback(() => {
-    setControlsVisible(true)
+    setControlsHidden(false)
     if (hideTimer.current) window.clearTimeout(hideTimer.current)
     hideTimer.current = window.setTimeout(() => {
-      if (playbackActiveRef.current) setControlsVisible(false)
+      if (playbackActiveRef.current) setControlsHidden(true)
     }, 2600)
   }, [])
 
+  // À la reprise de lecture, les contrôles repartent visibles : ajustement au
+  // rendu plutôt qu'un setState synchrone dans l'effet.
+  const [prevPlaybackActive, setPrevPlaybackActive] = useState(playbackActive)
+  if (prevPlaybackActive !== playbackActive) {
+    setPrevPlaybackActive(playbackActive)
+    if (playbackActive) setControlsHidden(false)
+  }
+
+  // L'effet ne fait qu'armer le minuteur (système externe) ; le reveal est
+  // géré par les événements pointeur ou par l'ajustement au rendu ci-dessus.
   useEffect(() => {
     if (!playbackActive) {
-      setControlsVisible(true)
       if (hideTimer.current) {
         window.clearTimeout(hideTimer.current)
         hideTimer.current = null
       }
       return
     }
-    scheduleHide()
+    if (hideTimer.current) window.clearTimeout(hideTimer.current)
+    hideTimer.current = window.setTimeout(() => {
+      if (playbackActiveRef.current) setControlsHidden(true)
+    }, 2600)
     return () => {
       if (hideTimer.current) window.clearTimeout(hideTimer.current)
     }
-  }, [playbackActive, scheduleHide])
-
-  useEffect(() => {
-    if (openMenu) setControlsVisible(true)
-  }, [openMenu])
+  }, [playbackActive])
 
   useEffect(() => {
     if (!openMenu) return
@@ -885,7 +925,7 @@ export function VideoPlayer({
 
   const handleEnded = () => {
     setPlaying(false)
-    setControlsVisible(true)
+    setControlsHidden(false)
     onEnded?.()
   }
 
@@ -949,7 +989,7 @@ export function VideoPlayer({
 
   const handlePointerActivity = () => {
     if (!playbackActive) {
-      setControlsVisible(true)
+      setControlsHidden(false)
       return
     }
     scheduleHide()

package/src/lib/use-controllable.ts

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/**
+ * Retourne un état local piloté par une prop quand celle-ci est explicite.
+ *
+ * Quand le parent fournit explicitement la prop, l'état local se
+ * synchronise dessus. Quand la prop est `undefined`, le composant garde
+ * sa propre valeur locale.
+ *
+ * Cette version est compatible avec React Compiler : elle n'accède jamais
+ * aux refs pendant le rendu.
+ */
+export function useControllableValue<T>(
+  prop: T | undefined,
+  defaultState: T,
+  onChange?: (value: T) => void,
+) {
+  const [state, setState] = useState<T>(defaultState)
+  const controlledRef = useRef<boolean>(prop !== undefined)
+  const previousPropRef = useRef<T | undefined>(prop)
+
+  const isControlled = prop !== undefined
+
+  // Synchronise l'état local quand le contrôle parent change.
+  useEffect(() => {
+    controlledRef.current = isControlled
+    previousPropRef.current = prop
+  })
+
+  // Premier rendu contrôlé : la prop doit remplacer l'état local.
+  // Passages ultérieurs : synchronise seulement si la prop a changé.
+  useEffect(() => {
+    if (!isControlled) return
+    const next = prop as T
+    if (next !== previousPropRef.current) setState(next)
+  }, [isControlled, prop, state])
+
+  const value = isControlled ? (prop as T) : state
+
+  const setValue = useCallback(
+    (next: T | ((previous: T) => T)) => {
+      const resolved = typeof next === 'function' ? (next as (p: T) => T)(state) : next
+      if (isControlled) {
+        if (resolved !== prop) onChange?.(resolved)
+        return
+      }
+      setState(resolved)
+      onChange?.(resolved)
+    },
+    [isControlled, onChange, prop, state],
+  )
+
+  return [value, setValue] as const
+}

package/src/lib/video.ts

@@ -70,29 +70,29 @@ export function youtubeThumbnail(id: string): string {
 
 export function youtubeThumbnailFallback(id: string): string {
   return `https://i.ytimg.com/vi/${id}/hqdefault.jpg`
-}
-
-export interface EmbedOptions {
+}export interface EmbedOptions {
   startAt?: number
   loop?: boolean
   muted?: boolean
   controls?: boolean
   /** Origine de la page hôte : l'API iframe YouTube lui associe les commandes postMessage. */
   origin?: string
+  playsinline?: boolean
 }
 
+
 export function buildEmbedUrl(
   kind: 'youtube' | 'vimeo',
   id: string,
   options: EmbedOptions = {},
 ): string {
-  const { startAt = 0, loop = false, muted = false, controls = true, origin } = options
+  const { startAt = 0, loop = false, muted = false, controls = true, origin, playsinline = true } = options
 
   if (kind === 'youtube') {
     const params = new URLSearchParams({
       autoplay: '1',
       rel: '0',
-      playsinline: '1',
+      playsinline: playsinline ? '1' : '0',
       modestbranding: '1',
       enablejsapi: '1',
       controls: controls ? '1' : '0',
@@ -121,6 +121,7 @@ export function buildEmbedUrl(
   return `https://player.vimeo.com/video/${id}?${params.toString()}${hash}`
 }
 
+
 /* -------------------------------------------------------------------------- */
 /* Pilotage des embeds (YouTube / Vimeo) par postMessage                      */
 /* -------------------------------------------------------------------------- */