@djangocfg/ui-tools 2.1.404 → 2.1.408

package/src/tools/VideoPlayer/styles/video-player.css

@@ -0,0 +1,141 @@
+/*
+ * media-chrome theme.
+ *
+ * The video canvas is ALWAYS a black surface, so the control chrome is
+ * themed against on-black contrast — icons/text stay light in both the
+ * light and dark app themes. Only the accent (progress bar / thumb) and
+ * the scrub-time popover follow semantic tokens, since the popover is a
+ * detached surface that should match the rest of the platform.
+ *
+ * media-chrome ships its own focus-ring + tooltip styles; we only override
+ * what's needed to match the rest of the platform.
+ */
+
+media-controller {
+  /* On-black control chrome — fixed regardless of app theme. */
+  --video-on-canvas: rgb(245 245 245);
+
+  /* Surfaces */
+  --media-control-background: transparent;
+  --media-control-hover-background: rgb(255 255 255 / 0.14);
+  --media-control-padding: 0;
+
+  /* Foreground / accent */
+  --media-primary-color: var(--primary);
+  --media-secondary-color: rgb(255 255 255 / 0.6);
+  --media-text-color: var(--video-on-canvas);
+  --media-icon-color: var(--video-on-canvas);
+  --media-loading-icon-color: var(--video-on-canvas);
+
+  /* Range / progress bar — thin translucent rail, small accent thumb.
+     The range element keeps a tall hit-area; only the painted track is
+     4px so it reads as a slim progress line over the video. */
+  --media-range-track-background: color-mix(in oklab, white 28%, transparent);
+  --media-range-track-border-radius: 9999px;
+  --media-range-track-height: 4px;
+  --media-range-track-pointer-background: color-mix(in oklab, white 40%, transparent);
+  --media-range-bar-color: var(--primary);
+  --media-range-thumb-background: var(--primary);
+  --media-range-thumb-border-radius: 9999px;
+  --media-range-thumb-width: 12px;
+  --media-range-thumb-height: 12px;
+  --media-range-thumb-opacity: 0;
+  --media-range-thumb-transition: opacity 0.15s ease;
+
+  /* Tooltip */
+  --media-tooltip-background: var(--popover);
+  --media-tooltip-color: var(--popover-foreground);
+  --media-tooltip-border-radius: 6px;
+
+  /* Font */
+  --media-font-family: inherit;
+  --media-font-size: 12px;
+
+  /* Layout */
+  display: block;
+  position: relative;
+  width: 100%;
+}
+
+/* Square icon buttons should size to the wrapper. */
+media-controller .media-control-square::part(button) {
+  width: 100%;
+  height: 100%;
+}
+
+/*
+ * Control buttons / text — fixed on-black colours. The video canvas is
+ * always dark, so these never follow the app's light/dark theme.
+ */
+.video-player__control {
+  color: var(--video-on-canvas, rgb(245 245 245));
+  border-radius: 0.375rem;
+  transition: background-color 0.15s ease;
+}
+
+.video-player__control:hover {
+  background-color: rgb(255 255 255 / 0.14);
+}
+
+.video-player__time {
+  color: rgb(255 255 255 / 0.72);
+}
+
+/* Hide the default control bar background — we paint our own gradient
+   scrim via the <ControlsBar> wrapper. */
+media-control-bar {
+  background: transparent;
+}
+
+/*
+ * Auto-hide. media-chrome flags inactivity by setting `userinactive` on
+ * the <media-controller>; it only does so while playback is running, and
+ * removes it on mousemove / pause / focus. We fade the whole control bar
+ * (controls + gradient scrim) together with a smooth opacity transition.
+ */
+.video-player__control-bar {
+  opacity: 1;
+  transition: opacity 0.3s ease-out;
+}
+
+media-controller[userinactive]:not([mediapaused]) .video-player__control-bar {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/*
+ * Seek-bar hover preview. `<media-time-range>` exposes two slotted
+ * boxes: `preview-box` (a 120×109 thumbnail panel) and `current-box`
+ * (the scrub time label). With no `thumbnails` track wired up the
+ * preview-box has zero slotted content but still paints its default
+ * dark `rgb(31,31,31)` background — it shows as a stray empty
+ * rectangle floating over the video.
+ *
+ * Hide the empty preview-box entirely; keep `current-box` and style
+ * its time label as a compact popover chip.
+ */
+media-time-range {
+  /* media-chrome's own preview/box vars — point them at our popover
+     surface so the scrub time chip matches the rest of the controls. */
+  --media-preview-background: var(--popover);
+  --media-preview-border-radius: 6px;
+  --media-text-color: var(--popover-foreground);
+}
+
+/* Reveal the accent thumb only while hovering / scrubbing the rail. */
+media-time-range:hover {
+  --media-range-thumb-opacity: 1;
+}
+
+media-time-range::part(preview-box) {
+  display: none;
+}
+
+media-time-range::part(current-box) {
+  padding: 2px 6px;
+  border-radius: 6px;
+  background: var(--popover) !important;
+  color: var(--popover-foreground);
+  font-size: 11px;
+  box-shadow: 0 4px 12px color-mix(in oklab, var(--foreground) 18%, transparent);
+}

package/src/tools/VideoPlayer/types.ts

@@ -0,0 +1,82 @@
+/**
+ * VideoPlayer types — discriminated `VideoSource` union + props.
+ *
+ * The component is engine-agnostic at the API surface: callers either
+ * pass a structured `VideoSource` or a raw URL string (auto-parsed via
+ * `parseEmbedUrl`).
+ */
+
+import type { ReactNode } from 'react';
+
+export interface UrlSource {
+  readonly type: 'url';
+  readonly url: string;
+  readonly mimeType?: string;
+  readonly title?: string;
+  readonly poster?: string;
+}
+
+export interface YouTubeSource {
+  readonly type: 'youtube';
+  readonly videoId: string;
+  readonly startTime?: number;
+  readonly playlistId?: string;
+  readonly title?: string;
+  readonly poster?: string;
+}
+
+export interface VimeoSource {
+  readonly type: 'vimeo';
+  readonly videoId: string;
+  readonly startTime?: number;
+  readonly title?: string;
+  readonly poster?: string;
+}
+
+export interface HlsSource {
+  readonly type: 'hls';
+  readonly url: string;
+  readonly title?: string;
+  readonly poster?: string;
+}
+
+export interface IframeSource {
+  readonly type: 'iframe';
+  readonly url: string;
+  readonly title?: string;
+  readonly poster?: string;
+  readonly allow?: string;
+}
+
+export type VideoSource =
+  | UrlSource
+  | YouTubeSource
+  | VimeoSource
+  | HlsSource
+  | IframeSource;
+
+export type AspectRatioValue = number | 'auto' | 'fill';
+
+export interface VideoPlayerSettings {
+  readonly autoPlay?: boolean;
+  readonly muted?: boolean;
+  readonly loop?: boolean;
+  readonly playsInline?: boolean;
+  readonly crossOrigin?: '' | 'anonymous' | 'use-credentials';
+  readonly preload?: 'none' | 'metadata' | 'auto';
+}
+
+export interface VideoPlayerProps extends VideoPlayerSettings {
+  /**
+   * Structured source object — or a raw URL string that will be
+   * auto-classified via `parseEmbedUrl` (YouTube / Vimeo / HLS / MP4 / iframe).
+   */
+  readonly source: VideoSource | string;
+  /** Default `true`. When `false`, no built-in `<MediaControlBar>` is rendered. */
+  readonly controls?: boolean;
+  /** Default `16/9`. `'fill'` stretches to parent height; `'auto'` keeps intrinsic. */
+  readonly aspectRatio?: AspectRatioValue;
+  readonly className?: string;
+  /** Custom children replace the default control bar entirely. */
+  readonly children?: ReactNode;
+}

package/src/tools/VideoPlayer/utils/parse-embed-url.ts

@@ -0,0 +1,70 @@
+/**
+ * Smart URL classifier — maps an arbitrary string into a structured
+ * `VideoSource`.
+ *
+ * Order:
+ *   1. YouTube  (youtube.com, youtu.be, shorts, embed)
+ *   2. Vimeo    (vimeo.com, player.vimeo.com)
+ *   3. HLS      (`.m3u8`)
+ *   4. Native   (`.mp4`, `.webm`, `.mov`, `.mkv`, `.ogv`, `.m4v`)
+ *   5. Fallback — treat as iframe embed.
+ *
+ * Pure; no React, no DOM.
+ */
+
+import type { VideoSource } from '../types';
+import { extractYouTubeId, parseYouTubeStartTime } from './youtube-id';
+import { extractVimeoId } from './vimeo-id';
+
+const NATIVE_VIDEO_EXT = /\.(mp4|webm|mov|mkv|ogv|m4v)(\?.*)?$/i;
+const HLS_EXT = /\.m3u8(\?.*)?$/i;
+
+export function parseEmbedUrl(input: string): VideoSource {
+  const trimmed = input.trim();
+
+  // 1. YouTube.
+  const ytId = extractYouTubeId(trimmed);
+  if (ytId) {
+    let startTime: number | undefined;
+    let playlistId: string | undefined;
+    try {
+      const url = new URL(trimmed);
+      startTime = parseYouTubeStartTime(url.searchParams.get('t'));
+      const list = url.searchParams.get('list');
+      if (list && /^[\w-]+$/.test(list)) playlistId = list;
+    } catch {
+      /* ignore */
+    }
+    return {
+      type: 'youtube',
+      videoId: ytId,
+      ...(startTime !== undefined && { startTime }),
+      ...(playlistId && { playlistId }),
+    };
+  }
+
+  // 2. Vimeo.
+  const vimeoId = extractVimeoId(trimmed);
+  if (vimeoId) {
+    return { type: 'vimeo', videoId: vimeoId };
+  }
+
+  // 3. HLS.
+  if (HLS_EXT.test(trimmed)) {
+    return { type: 'hls', url: trimmed };
+  }
+
+  // 4. Native video file.
+  if (NATIVE_VIDEO_EXT.test(trimmed)) {
+    return { type: 'url', url: trimmed };
+  }
+
+  // 5. Fallback: blob: / data: / unknown http(s) URL — assume native <video>
+  //    can handle blob/data, iframe for everything else.
+  if (/^(blob:|data:)/i.test(trimmed)) {
+    return { type: 'url', url: trimmed };
+  }
+
+  // Unknown URL — fall back to iframe so embeds still surface.
+  return { type: 'iframe', url: trimmed };
+}

package/src/tools/VideoPlayer/utils/vimeo-id.ts

@@ -0,0 +1,24 @@
+/**
+ * Extract a Vimeo numeric `videoId` from a URL.
+ *
+ * Supports:
+ *   - vimeo.com/123456789
+ *   - vimeo.com/123456789/HASH
+ *   - player.vimeo.com/video/123456789
+ *
+ * Returns `null` if the URL does not match.
+ */
+export function extractVimeoId(input: string): string | null {
+  let url: URL;
+  try {
+    url = new URL(input);
+  } catch {
+    return null;
+  }
+  const host = url.hostname.replace(/^www\./, '');
+  if (host !== 'vimeo.com' && host !== 'player.vimeo.com') return null;
+
+  // /video/<id> on player.vimeo.com, /<id> on vimeo.com.
+  const match = url.pathname.match(/(?:^\/video\/|^\/)(\d+)/);
+  return match ? match[1] : null;
+}

package/src/tools/VideoPlayer/utils/youtube-id.ts

@@ -0,0 +1,64 @@
+/**
+ * Extract a YouTube `videoId` from a URL.
+ *
+ * Supports:
+ *   - youtube.com/watch?v=ID
+ *   - youtu.be/ID
+ *   - youtube.com/shorts/ID
+ *   - youtube.com/embed/ID
+ *   - youtube.com/v/ID
+ *   - m.youtube.com/* mirrors
+ *
+ * Returns `null` if the URL does not match.
+ */
+export function extractYouTubeId(input: string): string | null {
+  let url: URL;
+  try {
+    url = new URL(input);
+  } catch {
+    return null;
+  }
+
+  const host = url.hostname.replace(/^www\.|^m\./, '');
+
+  if (host === 'youtu.be') {
+    const id = url.pathname.replace(/^\//, '').split('/')[0];
+    return isValidId(id) ? id : null;
+  }
+
+  if (host === 'youtube.com' || host === 'youtube-nocookie.com') {
+    if (url.pathname === '/watch') {
+      const v = url.searchParams.get('v');
+      return v && isValidId(v) ? v : null;
+    }
+    const m = url.pathname.match(/^\/(?:shorts|embed|v|live)\/([^/?#]+)/);
+    if (m) {
+      return isValidId(m[1]) ? m[1] : null;
+    }
+  }
+
+  return null;
+}
+
+/** Parse the YouTube `?t=` / `&t=` start-time param (`90`, `90s`, `1m30s`). */
+export function parseYouTubeStartTime(input: string | null): number | undefined {
+  if (!input) return undefined;
+  // Pure seconds.
+  if (/^\d+s?$/.test(input)) {
+    const n = parseInt(input, 10);
+    return Number.isFinite(n) && n > 0 ? n : undefined;
+  }
+  // `1h2m3s` / `2m30s` / `45s`.
+  const match = input.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s?)?$/);
+  if (!match) return undefined;
+  const [, h, m, s] = match;
+  const total =
+    (h ? parseInt(h, 10) * 3600 : 0) +
+    (m ? parseInt(m, 10) * 60 : 0) +
+    (s ? parseInt(s, 10) : 0);
+  return total > 0 ? total : undefined;
+}
+
+function isValidId(id: string | undefined): id is string {
+  return !!id && /^[\w-]{6,}$/.test(id);
+}

package/src/tools/index.ts

@@ -22,12 +22,13 @@ export type { JsonTreeConfig } from './JsonTree';
 export { default as Mermaid } from './Mermaid';
 export { default as PrettyCode } from './PrettyCode';
 export type { Language } from './PrettyCode';
-export { LottiePlayer, useLottie } from './LottiePlayer';
+export { LottiePlayer, useLottie, usePrefersReducedMotion } from './LottiePlayer';
 export type {
   LottiePlayerProps,
   LottieSize,
   LottieSpeed,
   LottieDirection,
+  LottieSegment,
   UseLottieOptions,
   UseLottieReturn,
 } from './LottiePlayer';
@@ -43,43 +44,50 @@ export * from './JsonForm/utils';
 export { default as OpenapiViewer } from './OpenapiViewer';
 export type { PlaygroundConfig, SchemaSource, PlaygroundProps } from './OpenapiViewer';
 
-// Export VideoPlayer
+// Export VideoPlayer (media-chrome shell with provider-aware canvases)
 export {
   VideoPlayer,
-  VideoControls,
-  VidstackProvider,
-  NativeProvider,
-  StreamProvider,
-  VideoPlayerProvider,
-  useVideoPlayerContext,
-  VideoErrorFallback,
-  createVideoErrorFallback,
-  resolvePlayerMode,
-  resolveFileSource,
-  isSimpleStreamSource,
-  resolveStreamSource,
+  CanvasDispatcher,
+  NativeCanvas,
+  YouTubeCanvas,
+  VimeoCanvas,
+  HlsCanvas,
+  IframeCanvas,
+  PlayButton,
+  SeekBar,
+  Volume,
+  Fullscreen,
+  Pip,
+  PlaybackRate,
+  ControlsBar,
+  Poster,
+  parseEmbedUrl,
+  extractYouTubeId,
+  extractVimeoId,
 } from './VideoPlayer';
 export type {
-  VideoSourceUnion,
+  VideoSource,
   UrlSource,
   YouTubeSource,
   VimeoSource,
-  HLSSource,
-  DASHSource,
-  StreamSource,
-  BlobSource,
-  DataUrlSource,
-  PlayerMode,
+  HlsSource,
+  IframeSource,
   AspectRatioValue,
   VideoPlayerProps,
-  VideoPlayerRef,
-  ErrorFallbackProps,
-  ResolveFileSourceOptions,
-  VideoPlayerContextValue,
-  VideoPlayerProviderProps,
-  SimpleStreamSource,
-  VideoErrorFallbackProps,
-  CreateVideoErrorFallbackOptions,
+  VideoPlayerSettings,
+  PlayButtonProps,
+  SeekBarProps,
+  VolumeProps,
+  FullscreenProps,
+  PipProps,
+  PlaybackRateProps,
+  ControlsBarProps,
+  CanvasDispatcherProps,
+  NativeCanvasProps,
+  YouTubeCanvasProps,
+  VimeoCanvasProps,
+  HlsCanvasProps,
+  IframeCanvasProps,
 } from './VideoPlayer';
 
 // AudioPlayer v6 — under construction (see @dev/@refactoring6-audioplayer/).

package/src/tools/Chat/components/AudioToggle.tsx

@@ -1,78 +0,0 @@
-'use client';
-
-/**
- * Mute / unmute toggle for chat audio events.
- *
- * Reads the current ``muted`` state from the active chat context and
- * persists changes through ``useChatAudioPrefs`` (cross-tab safe). The
- * button auto-hides when no ``audio.sounds`` config is provided —
- * showing a mute toggle for a chat with no sounds is just clutter.
- *
- * Drop into a ChatRoot ``header`` slot or anywhere inside a chat
- * provider:
- *
- * ```tsx
- * <ChatRoot
- *   header={<AudioToggle />}
- *   audio={{ sounds: { messageReceived: '/ping.mp3' } }}
- *   ...
- * />
- * ```
- */
-
-import { Volume2, VolumeX } from 'lucide-react';
-
-import { Button } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-
-import { useChatContextOptional } from '../context';
-import { useChatAudioPrefs } from '../core/audio/preferences';
-
-export interface AudioToggleProps {
-  /** Visual size — matches Button sizes. Default: ``icon``. */
-  size?: 'sm' | 'icon';
-  /** Variant passed to the underlying Button. Default: ``ghost``. */
-  variant?: 'ghost' | 'outline' | 'secondary';
-  /** Force-show even when no audio config is wired (e.g. for stories). */
-  alwaysShow?: boolean;
-  className?: string;
-}
-
-export function AudioToggle({
-  size = 'icon',
-  variant = 'ghost',
-  alwaysShow = false,
-  className,
-}: AudioToggleProps) {
-  // Read straight from the persist store so the toggle works even
-  // when rendered OUTSIDE the ChatRoot (e.g. in a parent header). The
-  // chat audio bus reads the same store, so a click here flips the
-  // "muted" state for any sibling ChatRoot in the same tab and
-  // mirrors across tabs via the storage event.
-  const muted = useChatAudioPrefs((s) => s.muted);
-  const setMuted = useChatAudioPrefs((s) => s.setMuted);
-
-  // If a ChatRoot is in scope, hide unless it actually wired sounds —
-  // otherwise the button is a no-op for that surface. When rendered
-  // standalone (no context), default to visible.
-  const ctx = useChatContextOptional();
-  if (ctx && !ctx.hasAudio && !alwaysShow) return null;
-
-  const Icon = muted ? VolumeX : Volume2;
-  const label = muted ? 'Unmute chat sounds' : 'Mute chat sounds';
-
-  return (
-    <Button
-      type="button"
-      variant={variant}
-      size={size}
-      onClick={() => setMuted(!muted)}
-      aria-label={label}
-      aria-pressed={muted}
-      title={label}
-      className={cn(size === 'icon' ? 'h-9 w-9' : '', className)}
-    >
-      <Icon aria-hidden className="size-4" />
-    </Button>
-  );
-}