@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/ui/media-player/media-player.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react";
+
+import {cn} from "../../../infrastructure/utilities/utils";
+import {AudioPlayer} from "./players/audio-player";
+import {VideoPlayer} from "./players/video-player";
+import {VoiceNotePlayer} from "./players/voice-note-player";
+import {MediaPlayerProvider, type MediaPlayerVariant} from "./media-player.context";
+import {useMediaPlayer, type UseMediaPlayerOptions} from "./use-media-player.hook";
+
+export interface MediaPlayerProps
+    extends Omit<UseMediaPlayerOptions, "src">,
+        Pick<React.ComponentProps<"div">, "className" | "id"> {
+    /** URL du média : fichier ou flux live (.m3u8 géré automatiquement). */
+    src: string;
+    /** Apparence : « voice-note » (bulle WhatsApp), « audio » (classique) ou « video » (YouTube). */
+    variant?: MediaPlayerVariant;
+    /** Titre annoncé aux lecteurs d'écran et affiché selon la variante. */
+    label?: string;
+    /** Pochette (audio) ou image d'aperçu (video). */
+    cover?: string;
+    /** Classe utilitaire pour personnaliser la couleur d'accent (progression, poignée…). */
+    accentClassName?: string;
+    /** Déclenché à la fin de la lecture (jamais en direct). */
+    onEnded?: () => void;
+}
+
+/**
+ Lecteur multimédia unifié du design system : une seule source de logique
+ (useMediaPlayer) et trois apparences partageant la même direction
+ artistique, les mêmes commandes clavier (inspirées de YouTube) et le même
+ support des flux live HLS.
+ */
+export function MediaPlayer({
+    src,
+    variant = "audio",
+    label,
+    cover,
+    autoPlay = false,
+    rates,
+    live,
+    accentClassName,
+    className,
+    id,
+    onEnded,
+}: MediaPlayerProps) {
+    const controller = useMediaPlayer({src, live, autoPlay, rates});
+    const {mediaRef, containerRef} = controller;
+
+    // Propagation optionnelle de l'événement « ended ».
+    React.useEffect(() => {
+        const element = mediaRef.current;
+        if (!element || !onEnded) return;
+        element.addEventListener("ended", onEnded);
+        return () => element.removeEventListener("ended", onEnded);
+    }, [mediaRef, onEnded]);
+
+    /**
+     Raccourcis inspirés de YouTube : Espace/K lecture, ←/→ ±5 s, J/L ±10 s,
+     ↑/↓ volume, M muet, F plein écran, I PiP (vidéo), 0-9 saut à x %,
+     Début/Fin. Les éléments interactifs internes gardent leurs touches
+     natives (Espace sur un bouton ne double-déclenche pas).
+     */
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        const target = event.target as HTMLElement;
+        const interactiveTarget = Boolean(target.closest("button, a, input, textarea, select, [role='slider']"));
+        const key = event.key;
+        const lowerKey = key.toLowerCase();
+
+        switch (true) {
+            case (key === " " || lowerKey === "k") && !interactiveTarget:
+                event.preventDefault();
+                controller.actions.togglePlay();
+                break;
+            case key === "ArrowLeft":
+                event.preventDefault();
+                event.stopPropagation();
+                controller.actions.seekBy(-5);
+                break;
+            case key === "ArrowRight":
+                event.preventDefault();
+                event.stopPropagation();
+                controller.actions.seekBy(5);
+                break;
+            case lowerKey === "j":
+                event.preventDefault();
+                controller.actions.seekBy(-10);
+                break;
+            case lowerKey === "l":
+                event.preventDefault();
+                controller.actions.seekBy(10);
+                break;
+            case key === "ArrowUp":
+                event.preventDefault();
+                controller.actions.setVolume(controller.state.volume + 0.05);
+                break;
+            case key === "ArrowDown":
+                event.preventDefault();
+                controller.actions.setVolume(controller.state.volume - 0.05);
+                break;
+            case lowerKey === "m":
+                event.preventDefault();
+                controller.actions.toggleMute();
+                break;
+            case lowerKey === "f":
+                event.preventDefault();
+                controller.actions.toggleFullscreen();
+                break;
+            case lowerKey === "i" && variant === "video":
+                event.preventDefault();
+                void controller.actions.togglePictureInPicture();
+                break;
+            case /^[0-9]$/.test(key) && !controller.state.isLive:
+                event.preventDefault();
+                controller.actions.jumpToFraction(Number(key) / 10);
+                break;
+            case key === "Home":
+                event.preventDefault();
+                controller.actions.seekTo(0);
+                break;
+            case key === "End" && !controller.state.isLive:
+                event.preventDefault();
+                controller.actions.seekTo(controller.state.duration);
+                break;
+            default:
+                break;
+        }
+    };
+
+    return (
+        <MediaPlayerProvider value={{controller, variant, accentClassName, label}}>
+            <div
+                ref={containerRef}
+                id={id}
+                role="group"
+                aria-label={label ?? "Lecteur multimédia"}
+                tabIndex={-1}
+                data-slot="media-player"
+                data-variant={variant}
+                className={cn(
+                    "outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    variant === "video" ? "group/player relative overflow-hidden bg-black" : "w-full",
+                    className,
+                )}
+                onKeyDown={handleKeyDown}
+            >
+                {variant === "voice-note" && <VoiceNotePlayer/>}
+                {variant === "audio" && <AudioPlayer cover={cover}/>}
+                {variant === "video" && (
+                    <VideoPlayer>
+                        <video
+                            ref={mediaRef as React.RefObject<HTMLVideoElement>}
+                            poster={cover}
+                            preload="metadata"
+                            playsInline
+                            className="size-full"
+                        />
+                    </VideoPlayer>
+                )}
+                {variant !== "video" && (
+                    <audio ref={mediaRef} preload="metadata" className="hidden"/>
+                )}
+            </div>
+        </MediaPlayerProvider>
+    );
+}

package/src/presentation/ui/media-player/player-controls.tsx

@@ -0,0 +1,207 @@
+"use client"
+
+import * as React from "react";
+import {Volume1Icon, Volume2Icon, VolumeXIcon} from "lucide-react";
+
+import {cn} from "../../../infrastructure/utilities/utils";
+import {Slider} from "../slider";
+import {usePlayer} from "./media-player.context";
+
+/** Formate une durée en secondes : « 3:05 » ou « 1:02:11 ». */
+export function formatMediaTime(totalSeconds: number): string {
+    if (!Number.isFinite(totalSeconds) || totalSeconds < 0) return "0:00";
+    const seconds = Math.floor(totalSeconds % 60);
+    const minutes = Math.floor((totalSeconds / 60) % 60);
+    const hours = Math.floor(totalSeconds / 3600);
+    const twoDigits = String(seconds).padStart(2, "0");
+    return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${twoDigits}` : `${minutes}:${twoDigits}`;
+}
+
+interface PlayerScrubberProps {
+    className?: string;
+    /** Épaisseur de la piste au repos ; grossit au survol/focus. */
+    thick?: boolean;
+}
+
+/**
+ Barre de progression accessible (role="slider", ARIA complet) avec affichage
+ du tampon et poignée visible au survol — inspirée de la barre YouTube.
+ Le clavier (←/→/Home/End/0-9) est géré par le conteneur racine du lecteur.
+ */
+export function PlayerScrubber({className, thick = false}: PlayerScrubberProps) {
+    const {controller} = usePlayer();
+    const {currentTime, bufferedEnd, seekMin, seekMax, isLive, duration} = controller.state;
+    const {seekTo} = controller.actions;
+    const trackRef = React.useRef<HTMLDivElement | null>(null);
+    const [dragging, setDragging] = React.useState(false);
+
+    const span = Math.max(seekMax - seekMin, 0.001);
+    const fraction = isLive && !seekWindowUsable(seekMin, seekMax)
+        ? 1
+        : Math.min(Math.max((currentTime - seekMin) / span, 0), 1);
+    const bufferedFraction = Number.isFinite(bufferedEnd) ? Math.min(Math.max((bufferedEnd - seekMin) / span, 0), 1) : 0;
+
+    const seekFromPointer = (clientX: number) => {
+        const track = trackRef.current;
+        if (!track) return;
+        const rect = track.getBoundingClientRect();
+        const ratio = rect.width > 0 ? Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1) : 0;
+        seekTo(seekMin + ratio * span);
+    };
+
+    // Direct sans fenêtre DVR : la barre est purement indicative.
+    const disabled = isLive && !seekWindowUsable(seekMin, seekMax);
+
+    return (
+        <div
+            ref={trackRef}
+            role="slider"
+            tabIndex={disabled ? -1 : 0}
+            aria-label={isLive ? "Position dans le direct" : "Barre de progression"}
+            aria-valuemin={seekMin}
+            aria-valuemax={Math.round(seekMax)}
+            aria-valuenow={Math.round(currentTime)}
+            aria-valuetext={`${formatMediaTime(currentTime)} sur ${formatMediaTime(isLive ? seekMax : duration || seekMax)}`}
+            aria-disabled={disabled}
+            data-slot="player-scrubber"
+            className={cn(
+                "group/scrubber relative flex touch-none items-center py-2 select-none",
+                disabled ? "cursor-default" : "cursor-pointer",
+                className,
+            )}
+            onPointerDown={(event) => {
+                if (disabled) return;
+                event.currentTarget.setPointerCapture(event.pointerId);
+                setDragging(true);
+                seekFromPointer(event.clientX);
+            }}
+            onPointerMove={(event) => {
+                if (dragging) seekFromPointer(event.clientX);
+            }}
+            onPointerUp={() => setDragging(false)}
+            onPointerCancel={() => setDragging(false)}
+        >
+            <div className={cn(
+                "relative w-full overflow-hidden rounded-full bg-muted transition-[height]",
+                thick ? "h-1.5" : "h-1 group-hover/scrubber:h-1.5 group-focus-within/scrubber:h-1.5",
+            )}>
+                <div
+                    data-slot="player-buffered"
+                    className="absolute inset-y-0 left-0 rounded-full bg-muted-foreground/30"
+                    style={{width: `${bufferedFraction * 100}%`}}
+                />
+                <div
+                    data-slot="player-played"
+                    className={cn("absolute inset-y-0 left-0 rounded-full bg-primary", dragging && "bg-primary")}
+                    style={{width: `${fraction * 100}%`}}
+                />
+            </div>
+            {!disabled && (
+                <span
+                    aria-hidden
+                    data-slot="player-thumb"
+                    className={cn(
+                        "absolute top-1/2 size-3.5 -translate-x-1/2 -translate-y-1/2 scale-0 rounded-full bg-primary shadow transition-transform",
+                        "group-hover/scrubber:scale-100 group-focus-within/scrubber:scale-100",
+                        dragging && "scale-125",
+                    )}
+                    style={{left: `${fraction * 100}%`}}
+                />
+            )}
+        </div>
+    );
+}
+
+function seekWindowUsable(start: number, end: number): boolean {
+    return Number.isFinite(start) && Number.isFinite(end) && end - start > 1;
+}
+
+/**
+ Volume façon YouTube : bouton muet + curseur horizontal qui se déplie au
+ survol. Accessible via le Slider radix (flèches natives) et ↑/↓ globaux.
+ */
+export function PlayerVolumeControl({className}: {className?: string}) {
+    const {controller} = usePlayer();
+    const {volume, muted} = controller.state;
+    const {setVolume, toggleMute} = controller.actions;
+
+    const effectiveVolume = muted ? 0 : volume;
+    const VolumeIcon = effectiveVolume === 0 ? VolumeXIcon : effectiveVolume < 0.5 ? Volume1Icon : Volume2Icon;
+
+    return (
+        <div data-slot="player-volume" className={cn("group/volume flex items-center gap-1", className)}>
+            <ButtonGhost
+                label={muted ? "Réactiver le son (M)" : "Couper le son (M)"}
+                onClick={toggleMute}
+            >
+                <VolumeIcon/>
+            </ButtonGhost>
+            <div className="w-0 overflow-hidden opacity-0 transition-all duration-200 group-hover/volume:w-20 group-hover/volume:opacity-100 group-focus-within/volume:w-20 group-focus-within/volume:opacity-100">
+                <Slider
+                    aria-label="Volume"
+                    value={[effectiveVolume * 100]}
+                    min={0}
+                    max={100}
+                    step={5}
+                    onValueChange={(values) => setVolume((values[0] ?? 0) / 100)}
+                    className="h-1 w-20"
+                />
+            </div>
+        </div>
+    );
+}
+
+/** Bouton rond générique des barres de contrôle (cohérence entre variantes). */
+export function ButtonGhost({
+    label,
+    className,
+    children,
+    ...props
+}: React.ComponentProps<"button"> & {label: string}) {
+    return (
+        <button
+            type="button"
+            title={label}
+            aria-label={label}
+            data-slot="player-button"
+            className={cn(
+                "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-current opacity-90 outline-hidden transition hover:bg-accent hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </button>
+    );
+}
+
+/** Badge « EN DIRECT » avec point rouge pulsant (style plateformes live). */
+export function LiveBadge({className}: {className?: string}) {
+    return (
+        <span
+            data-slot="player-live-badge"
+            className={cn("inline-flex shrink-0 items-center gap-1.5 text-xs font-semibold tracking-wide text-red-500 uppercase", className)}
+        >
+            <span className="relative flex size-2">
+                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75"/>
+                <span className="relative inline-flex size-2 rounded-full bg-red-500"/>
+            </span>
+            Direct
+        </span>
+    );
+}
+
+/** Affichage du temps « 1:23 / 5:00 », remplacé par le badge en direct. */
+export function TimeDisplay({className}: {className?: string}) {
+    const {controller} = usePlayer();
+    const {currentTime, duration, isLive} = controller.state;
+
+    if (isLive) return <LiveBadge className={className}/>;
+
+    return (
+        <span data-slot="player-time" className={cn("shrink-0 text-xs tabular-nums select-none", className)}>
+            {formatMediaTime(currentTime)}
+            <span className="opacity-60"> / {formatMediaTime(duration)}</span>
+        </span>
+    );
+}

package/src/presentation/ui/media-player/players/audio-player.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import {PauseIcon, PlayIcon} from "lucide-react";
+
+import {cn} from "../../../../infrastructure/utilities/utils";
+import {usePlayer} from "../media-player.context";
+import {ButtonGhost, PlayerScrubber, PlayerVolumeControl, TimeDisplay} from "../player-controls";
+
+interface AudioPlayerProps {
+    /** Pochette optionnelle affichée à gauche (sinon icône par défaut du consommateur). */
+    cover?: string;
+}
+
+/**
+ Apparence « lecteur audio traditionnel » : pochette, transport, barre de
+ progression avec tampon, temps, volume dépliable et vitesse — la même grammaire
+ visuelle que les variantes voice-note et video.
+ */
+export function AudioPlayer({cover}: AudioPlayerProps) {
+    const {controller, accentClassName, label} = usePlayer();
+    const {isPlaying, isLoading, duration} = controller.state;
+    const {togglePlay} = controller.actions;
+
+    return (
+        <div data-slot="audio-player" className="flex items-center gap-3 rounded-xl border bg-card p-3">
+            {/* Pochette */}
+            <div className="relative flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-muted-foreground">
+                {cover ? (
+                    <img src={cover} alt="" className="size-full object-cover"/>
+                ) : (
+                    <span className={cn(
+                        "flex items-center justify-center transition-colors",
+                        isPlaying && cn("text-primary", accentClassName),
+                    )}>
+                        <AudioGlyph/>
+                    </span>
+                )}
+                {isLoading && isPlaying && (
+                    <span aria-hidden className="absolute inset-0 flex items-center justify-center bg-background/60">
+                        <span className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent"/>
+                    </span>
+                )}
+            </div>
+
+            {/* Transport + progression */}
+            <div className="min-w-0 flex-1">
+                {label && (
+                    <p className="mb-0.5 truncate text-xs font-medium" title={label}>{label}</p>
+                )}
+                <div className="flex items-center gap-2">
+                    <ButtonGhost
+                        label={isPlaying ? "Pause (Espace)" : "Lire (Espace)"}
+                        onClick={togglePlay}
+                        className={cn("size-9 shrink-0 bg-primary/10 hover:bg-primary/20", accentClassName)}
+                    >
+                        {isPlaying ? <PauseIcon className="size-4 fill-current"/> : <PlayIcon className="size-4 fill-current"/>}
+                    </ButtonGhost>
+                    <div className="min-w-0 flex-1">
+                        <PlayerScrubber thick/>
+                    </div>
+                    <TimeDisplay className="shrink-0 text-xs tabular-nums text-muted-foreground"/>
+                </div>
+                <div className="mt-0.5 hidden items-center justify-end gap-2 sm:flex">
+                    <PlayerVolumeControl/>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/** Petit glyphe « onde sonore » pour la pochette par défaut. */
+function AudioGlyph() {
+    return (
+        <svg viewBox="0 0 24 24" className="size-5 fill-none stroke-current stroke-2" aria-hidden>
+            <path d="M4 10v4M8 7v10M12 4v16M16 7v10M20 10v4" strokeLinecap="round"/>
+        </svg>
+    );
+}

package/src/presentation/ui/media-player/players/index.tsx

@@ -0,0 +1,4 @@
+// @liorian/sdk/presentation/ui/media-player/players — concrete players used by the media player.
+export * from "./audio-player";
+export * from "./video-player";
+export * from "./voice-note-player";

package/src/presentation/ui/media-player/players/video-player.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import * as React from "react";
+import {MaximizeIcon, MinimizeIcon, PauseIcon, PictureInPicture2Icon, PlayIcon, SettingsIcon} from "lucide-react";
+
+import {cn} from "../../../../infrastructure/utilities/utils";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuTrigger,
+} from "../../dropdown-menu";
+import {usePlayer} from "../media-player.context";
+import {ButtonGhost, PlayerScrubber, PlayerVolumeControl, TimeDisplay} from "../player-controls";
+
+interface VideoPlayerProps {
+    children: React.ReactNode;
+}
+
+/** Délai avant masquage automatique des contrôles en lecture (YouTube ≈ 3 s). */
+const CONTROLS_HIDE_DELAY_MS = 2700;
+
+/**
+ Apparence « lecteur vidéo » inspirée de YouTube : vidéo plein cadre, grand
+ bouton central au repos, barre de progression fine au-dessus des contrôles,
+ contrôles sur dégradé qui se masquent automatiquement en lecture,
+ vitesse dans un menu, Picture-in-Picture et plein écran (double-clic).
+ */
+export function VideoPlayer({children}: VideoPlayerProps) {
+    const {controller} = usePlayer();
+    const {isPlaying, isLoading, isFullscreen, isLive, error, rate} = controller.state;
+    const {togglePlay, toggleFullscreen, togglePictureInPicture, setRate} = controller.actions;
+
+    const [controlsVisible, setControlsVisible] = React.useState(true);
+    const hideTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+    const clickTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    /** Reprogramme le masquage : contrôles toujours visibles en pause. */
+    const scheduleHide = React.useCallback(() => {
+        if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+        setControlsVisible(true);
+        hideTimerRef.current = setTimeout(() => {
+            if (controller.state.isPlaying) setControlsVisible(false);
+        }, CONTROLS_HIDE_DELAY_MS);
+    }, [controller.state.isPlaying]);
+
+    React.useEffect(() => {
+        if (!isPlaying) {
+            if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+            setControlsVisible(true);
+            return;
+        }
+        scheduleHide();
+        return () => {
+            if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+        };
+    }, [isPlaying, scheduleHide]);
+
+    // Clic simple = lecture/pause ; double-clic = plein écran (désambiguïsé).
+    const handleSurfaceClick = () => {
+        if (clickTimerRef.current) {
+            clearTimeout(clickTimerRef.current);
+            clickTimerRef.current = null;
+            toggleFullscreen();
+            return;
+        }
+        clickTimerRef.current = setTimeout(() => {
+            clickTimerRef.current = null;
+            togglePlay();
+        }, 220);
+    };
+
+    return (
+        <div
+            data-slot="video-surface"
+            className={cn(
+                "group/video relative size-full select-none",
+                !controlsVisible && isPlaying && "cursor-none",
+            )}
+            onPointerMove={scheduleHide}
+            onPointerLeave={() => {
+                if (isPlaying) setControlsVisible(false);
+            }}
+        >
+            {children}
+
+            {/* Clic / double-clic sur la surface */}
+            <div aria-hidden className="absolute inset-0" onClick={handleSurfaceClick}/>
+
+            {/* Grand bouton central au repos */}
+            {!isPlaying && (
+                <button
+                    type="button"
+                    title="Lire (Espace)"
+                    aria-label="Lire"
+                    onClick={() => {
+                        if (clickTimerRef.current) {
+                            clearTimeout(clickTimerRef.current);
+                            clickTimerRef.current = null;
+                        }
+                        togglePlay();
+                    }}
+                    className="absolute inset-0 z-10 flex cursor-pointer items-center justify-center outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+                >
+                    <span className="flex size-16 items-center justify-center rounded-full bg-black/60 text-white backdrop-blur transition hover:scale-105 hover:bg-black/70">
+                        <PlayIcon className="size-8 fill-current"/>
+                    </span>
+                </button>
+            )}
+
+            {/* Tampon de chargement */}
+            {isLoading && isPlaying && (
+                <div aria-hidden className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center">
+                    <span className="size-10 animate-spin rounded-full border-[3px] border-white/30 border-t-white"/>
+                </div>
+            )}
+
+            {error && (
+                <div className="absolute inset-x-0 top-3 z-20 flex justify-center">
+                    <span className="rounded-md bg-red-600/90 px-3 py-1 text-xs font-medium text-white">{error}</span>
+                </div>
+            )}
+
+            {/* Dégradé + barre de progression + contrôles */}
+            <div
+                data-slot="video-controls"
+                className={cn(
+                    "absolute inset-x-0 bottom-0 z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-3 pt-8 pb-1.5 text-white transition-all duration-200",
+                    controlsVisible ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-2 opacity-0",
+                )}
+            >
+                <PlayerScrubber className="text-white [&_[data-slot=player-buffered]]:bg-white/30"/>
+
+                <div className="flex items-center gap-1">
+                    <ButtonGhost
+                        label={isPlaying ? "Pause (Espace)" : "Lire (Espace)"}
+                        onClick={togglePlay}
+                        className="text-white hover:bg-white/15"
+                    >
+                        {isPlaying ? <PauseIcon className="size-5 fill-current"/> : <PlayIcon className="size-5 fill-current"/>}
+                    </ButtonGhost>
+
+                    <PlayerVolumeControl className="text-white [&_button]:hover:bg-white/15"/>
+
+                    <TimeDisplay className="text-white/90"/>
+
+                    <span className="flex-1"/>
+
+                    {/* Vitesse de lecture */}
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <ButtonGhost label="Paramètres de lecture" className="text-white hover:bg-white/15">
+                                <SettingsIcon className="size-4"/>
+                            </ButtonGhost>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" side="top" sideOffset={8}>
+                            <DropdownMenuLabel>Vitesse de lecture</DropdownMenuLabel>
+                            {[0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map((value) => (
+                                <DropdownMenuItem
+                                    key={value}
+                                    onSelect={() => setRate(value)}
+                                    className={cn("justify-between", value === rate && "font-semibold")}
+                                >
+                                    {String(value).replace(".", ",")}×
+                                    {value === rate && <span aria-hidden>✓</span>}
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+
+                    {!isLive && (
+                        <ButtonGhost
+                            label="Picture-in-Picture (I)"
+                            onClick={() => void togglePictureInPicture()}
+                            className="hidden text-white hover:bg-white/15 sm:inline-flex"
+                        >
+                            <PictureInPicture2Icon className="size-4"/>
+                        </ButtonGhost>
+                    )}
+
+                    <ButtonGhost
+                        label={isFullscreen ? "Quitter le plein écran (F)" : "Plein écran (F)"}
+                        onClick={toggleFullscreen}
+                        className="text-white hover:bg-white/15"
+                    >
+                        {isFullscreen ? <MinimizeIcon className="size-4"/> : <MaximizeIcon className="size-4"/>}
+                    </ButtonGhost>
+                </div>
+            </div>
+        </div>
+    );
+}