sdaia-ui 1.0.1

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -0,0 +1,470 @@
+'use client';
+
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '../../lib/cn';
+import { AspectRatio } from '../AspectRatio';
+import {
+  CENTER_PLAY_WRAP,
+  CONTROLS_OVERLAY,
+  CONTROLS_PILL,
+  CTRL_BTN,
+  HEADER_OVERLAY,
+  HEADER_TITLE,
+  PLAY_BUTTONS_GROUP,
+  PROGRESS_CONTAINER,
+  PROGRESS_FILL,
+  PROGRESS_TRACK,
+  RIGHT_ICONS_GROUP,
+  TIME_TEXT,
+} from './VideoPlayer.variants';
+import {
+  FullscreenExitIcon,
+  FullscreenIcon,
+  MoreVerticalIcon,
+  NextIcon,
+  PauseIcon,
+  PlayCenterIcon,
+  PreviousIcon,
+  SettingsIcon,
+  VolumeHighIcon,
+  VolumeMuteIcon,
+} from '../../icons/IconFactory';
+import type { VideoPlayerProps } from './VideoPlayer.types';
+
+/* ── Constants ────────────────────────────────────────────────── */
+const CONTROLS_HIDE_DELAY = 3000; // ms idle before controls fade out
+
+/* ── Component ────────────────────────────────────────────────── */
+export const VideoPlayer = forwardRef<HTMLDivElement, VideoPlayerProps>(
+  function VideoPlayer(
+    {
+      poster,
+      posterAlt = '',
+      title,
+      playing: playingProp,
+      defaultPlaying = false,
+      progress: progressProp,
+      defaultProgress = 0,
+      currentTime = '0:00',
+      duration = '0:00',
+      onPlay,
+      onPause,
+      onPrevious,
+      onNext,
+      onProgressChange,
+      onVolumeClick,
+      onSettingsClick,
+      onFullscreenClick,
+      onMoreClick,
+      rtl = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    /* ── Playing state (controlled / uncontrolled) ───────────────── */
+    const isPlayingControlled = playingProp !== undefined;
+    const [internalPlaying, setInternalPlaying] = useState(defaultPlaying);
+    const isPlaying = isPlayingControlled ? playingProp! : internalPlaying;
+
+    /* ── Progress state (controlled / uncontrolled) ──────────────── */
+    const isProgressControlled = progressProp !== undefined;
+    const [internalProgress, setInternalProgress] = useState(defaultProgress);
+    const currentProgress = isProgressControlled ? progressProp! : internalProgress;
+    const clampedProgress = Math.min(100, Math.max(0, currentProgress));
+
+    /* ── Internal UI state ───────────────────────────────────────── */
+    const [muted, setMuted] = useState(false);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [controlsVisible, setControlsVisible] = useState(true);
+    const [isHovered, setIsHovered] = useState(false);
+
+    /* ── Refs ────────────────────────────────────────────────────── */
+    const containerRef = useRef<HTMLDivElement>(null);
+    const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    // Stable refs so keyboard handler never captures stale values
+    const isPlayingRef = useRef(isPlaying);
+    const clampedProgressRef = useRef(clampedProgress);
+    useEffect(() => { isPlayingRef.current = isPlaying; }, [isPlaying]);
+    useEffect(() => { clampedProgressRef.current = clampedProgress; }, [clampedProgress]);
+
+    /* ── Merge forwarded ref with internal ref ───────────────────── */
+    const mergedRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        if (!ref) return;
+        if (typeof ref === 'function') ref(node);
+        else (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      },
+      [ref],
+    );
+
+    /* ── Auto-hide controls ──────────────────────────────────────── */
+    const clearHideTimer = useCallback(() => {
+      if (hideTimerRef.current) {
+        clearTimeout(hideTimerRef.current);
+        hideTimerRef.current = null;
+      }
+    }, []);
+
+    const scheduleHide = useCallback(() => {
+      clearHideTimer();
+      hideTimerRef.current = setTimeout(() => setControlsVisible(false), CONTROLS_HIDE_DELAY);
+    }, [clearHideTimer]);
+
+    const revealControls = useCallback(() => {
+      setControlsVisible(true);
+      clearHideTimer();
+    }, [clearHideTimer]);
+
+    const handleActivity = useCallback(() => {
+      setControlsVisible(true);
+      if (isPlayingRef.current) scheduleHide();
+    }, [scheduleHide]);
+
+    // Start / stop the auto-hide timer whenever play state changes
+    useEffect(() => {
+      if (isPlaying) {
+        scheduleHide();
+      } else {
+        clearHideTimer();
+        setControlsVisible(true);
+      }
+      return clearHideTimer;
+    }, [isPlaying, scheduleHide, clearHideTimer]);
+
+    /* ── Fullscreen change listener ──────────────────────────────── */
+    useEffect(() => {
+      const handleFsChange = () => setIsFullscreen(!!document.fullscreenElement);
+      document.addEventListener('fullscreenchange', handleFsChange);
+      return () => document.removeEventListener('fullscreenchange', handleFsChange);
+    }, []);
+
+    /* ── Handlers ────────────────────────────────────────────────── */
+    const handlePlay = useCallback(() => {
+      if (!isPlayingControlled) setInternalPlaying(true);
+      onPlay?.();
+    }, [isPlayingControlled, onPlay]);
+
+    const handlePause = useCallback(() => {
+      if (!isPlayingControlled) setInternalPlaying(false);
+      onPause?.();
+    }, [isPlayingControlled, onPause]);
+
+    const handleProgressChange = useCallback(
+      (value: number) => {
+        if (!isProgressControlled) setInternalProgress(value);
+        onProgressChange?.(value);
+      },
+      [isProgressControlled, onProgressChange],
+    );
+
+    const handleMuteToggle = useCallback(() => {
+      setMuted((m) => !m);
+      onVolumeClick?.();
+    }, [onVolumeClick]);
+
+    const handleFullscreen = useCallback(() => {
+      if (!containerRef.current) return;
+      if (!document.fullscreenElement) {
+        containerRef.current.requestFullscreen().catch(() => {});
+      } else {
+        document.exitFullscreen().catch(() => {});
+      }
+      onFullscreenClick?.();
+    }, [onFullscreenClick]);
+
+    /* ── Keyboard shortcuts (scoped to when player is hovered/focused) ── */
+    useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        const hasFocus = containerRef.current?.contains(document.activeElement);
+        if (!isHovered && !hasFocus) return;
+
+        switch (e.key) {
+          case ' ':
+          case 'k': {
+            e.preventDefault();
+            if (isPlayingRef.current) {
+              if (!isPlayingControlled) setInternalPlaying(false);
+              onPause?.();
+            } else {
+              if (!isPlayingControlled) setInternalPlaying(true);
+              onPlay?.();
+            }
+            break;
+          }
+          case 'm': {
+            e.preventDefault();
+            setMuted((m) => !m);
+            break;
+          }
+          case 'f': {
+            e.preventDefault();
+            if (!containerRef.current) break;
+            if (!document.fullscreenElement) {
+              containerRef.current.requestFullscreen().catch(() => {});
+            } else {
+              document.exitFullscreen().catch(() => {});
+            }
+            break;
+          }
+          case 'ArrowRight': {
+            e.preventDefault();
+            const next = Math.min(100, clampedProgressRef.current + 5);
+            if (!isProgressControlled) setInternalProgress(next);
+            onProgressChange?.(next);
+            handleActivity();
+            break;
+          }
+          case 'ArrowLeft': {
+            e.preventDefault();
+            const prev = Math.max(0, clampedProgressRef.current - 5);
+            if (!isProgressControlled) setInternalProgress(prev);
+            onProgressChange?.(prev);
+            handleActivity();
+            break;
+          }
+        }
+      };
+
+      window.addEventListener('keydown', handleKeyDown);
+      return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [
+      isHovered,
+      isPlayingControlled,
+      isProgressControlled,
+      onPlay,
+      onPause,
+      onProgressChange,
+      handleActivity,
+    ]);
+
+    /* ── Inner content — shared between normal and fullscreen ────── */
+    const innerContent = (
+      <>
+        {/* Poster / thumbnail */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={poster ?? '/images/aspect-ratio.webp'}
+          alt={posterAlt}
+          className={cn(
+            'absolute inset-0 w-full h-full',
+            isFullscreen ? 'object-contain' : 'object-cover',
+          )}
+          data-slot="poster"
+          draggable={false}
+        />
+
+        {/* ── Default (paused) state: center play button ───────────── */}
+        {!isPlaying && (
+          <button
+            type="button"
+            data-slot="play-center"
+            aria-label="Play video"
+            className={cn(CENTER_PLAY_WRAP, 'text-white')}
+            onClick={handlePlay}
+          >
+            <span className="size-[48px] inline-flex items-center justify-center drop-shadow-lg">
+              <PlayCenterIcon />
+            </span>
+          </button>
+        )}
+
+        {/* ── Playing state: header + controls overlays ────────────── */}
+        {isPlaying && (
+          <div
+            data-slot="overlay"
+            className="absolute inset-0 flex flex-col justify-between"
+            style={controlsVisible ? undefined : { cursor: 'none' }}
+          >
+            {/* Silent click-to-pause area (behind controls, z-0) */}
+            <button
+              type="button"
+              aria-label="Pause video"
+              tabIndex={-1}
+              className="absolute inset-0 w-full h-full z-0 cursor-pointer"
+              onClick={handlePause}
+            />
+
+            {/* Header ─────────────────────────────────────────────── */}
+            <div
+              data-slot="header"
+              className={cn(
+                HEADER_OVERLAY,
+                'relative z-10 transition-opacity duration-300',
+                controlsVisible ? 'opacity-100' : 'opacity-0 pointer-events-none',
+              )}
+            >
+              {/* dir="auto" lets Arabic text self-detect direction */}
+              <p data-slot="title" dir="auto" className={HEADER_TITLE}>
+                {title}
+              </p>
+
+              <button
+                type="button"
+                data-slot="more-button"
+                aria-label="More options"
+                className={cn(CTRL_BTN, 'size-icon-xl')}
+                onClick={onMoreClick}
+              >
+                <MoreVerticalIcon />
+              </button>
+            </div>
+
+            {/* Controls bar ───────────────────────────────────────── */}
+            {/*
+              dir="ltr" keeps controls in left-to-right order regardless of
+              outer dir="rtl". Standard video player convention — confirmed by
+              identical Figma RTL/LTR frames.
+            */}
+            <div
+              data-slot="controls"
+              className={cn(
+                CONTROLS_OVERLAY,
+                'relative z-10 transition-opacity duration-300',
+                controlsVisible ? 'opacity-100' : 'opacity-0 pointer-events-none',
+              )}
+            >
+              <div className={CONTROLS_PILL} dir="ltr">
+
+                {/* Left: Previous / Pause / Next ──────────────────── */}
+                <div data-slot="play-buttons" className={PLAY_BUTTONS_GROUP}>
+                  <button
+                    type="button"
+                    aria-label="Previous"
+                    className={cn(CTRL_BTN, 'size-icon-lg')}
+                    onClick={onPrevious}
+                  >
+                    <PreviousIcon />
+                  </button>
+
+                  <button
+                    type="button"
+                    aria-label="Pause"
+                    className={cn(CTRL_BTN, 'size-[40px]')}
+                    onClick={handlePause}
+                  >
+                    <PauseIcon />
+                  </button>
+
+                  <button
+                    type="button"
+                    aria-label="Next"
+                    className={cn(CTRL_BTN, 'size-icon-lg')}
+                    onClick={onNext}
+                  >
+                    <NextIcon />
+                  </button>
+                </div>
+
+                {/* Time display ───────────────────────────────────── */}
+                <p data-slot="time" className={TIME_TEXT} aria-live="off">
+                  {currentTime}&nbsp;/&nbsp;{duration}
+                </p>
+
+                {/* Progress bar ───────────────────────────────────── */}
+                <div
+                  data-slot="progress"
+                  className={PROGRESS_CONTAINER}
+                  role="group"
+                  aria-label="Playback progress"
+                >
+                  <div className={PROGRESS_TRACK} aria-hidden="true" />
+                  <div
+                    className={PROGRESS_FILL}
+                    style={{ width: `${clampedProgress}%` }}
+                    aria-hidden="true"
+                  />
+                  <input
+                    type="range"
+                    min={0}
+                    max={100}
+                    step={0.1}
+                    value={clampedProgress}
+                    onChange={(e) => handleProgressChange(Number(e.target.value))}
+                    onMouseDown={revealControls}
+                    aria-label="Playback progress"
+                    aria-valuetext={`${currentTime} of ${duration}`}
+                    className="absolute inset-0 w-full opacity-0 cursor-pointer"
+                  />
+                </div>
+
+                {/* Right: Volume / Settings / Fullscreen ──────────── */}
+                <div data-slot="right-buttons" className={RIGHT_ICONS_GROUP}>
+                  <button
+                    type="button"
+                    aria-label={muted ? 'Unmute' : 'Mute'}
+                    className={cn(CTRL_BTN, 'size-icon-lg')}
+                    onClick={handleMuteToggle}
+                  >
+                    {muted ? <VolumeMuteIcon /> : <VolumeHighIcon />}
+                  </button>
+
+                  <button
+                    type="button"
+                    aria-label="Settings"
+                    className={cn(CTRL_BTN, 'size-icon-lg')}
+                    onClick={onSettingsClick}
+                  >
+                    <SettingsIcon />
+                  </button>
+
+                  <button
+                    type="button"
+                    aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+                    className={cn(CTRL_BTN, 'size-icon-lg')}
+                    onClick={handleFullscreen}
+                  >
+                    {isFullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
+                  </button>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        )}
+      </>
+    );
+
+    /* ── Render ──────────────────────────────────────────────────── */
+    return (
+      <div
+        ref={mergedRef}
+        data-slot="video-player"
+        dir={rtl ? 'rtl' : undefined}
+        onMouseMove={handleActivity}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => {
+          setIsHovered(false);
+          if (isPlaying) revealControls();
+        }}
+        className={cn(
+          'relative select-none bg-black',
+          // In fullscreen the browser sets the element to 100vw × 100vh;
+          // we need both dimensions to fill so content centers correctly.
+          isFullscreen ? 'w-full h-full' : 'w-full',
+          className,
+        )}
+        {...rest}
+      >
+        {/*
+          Normal mode  → AspectRatio constrains to 16:9.
+          Fullscreen   → plain relative div fills the entire screen;
+                         AspectRatio would lock height to 16:9 of the
+                         viewport width, leaving the poster & controls
+                         pinned to the top instead of centered.
+        */}
+        {isFullscreen ? (
+          <div className="relative w-full h-full">
+            {innerContent}
+          </div>
+        ) : (
+          <AspectRatio ratio="16:9">
+            {innerContent}
+          </AspectRatio>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/VideoPlayer/VideoPlayer.types.ts

@@ -0,0 +1,59 @@
+import type { HTMLAttributes } from 'react';
+
+export interface VideoPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Poster / thumbnail image shown as the video background.
+   * Falls back to the design-system aspect-ratio placeholder when omitted.
+   */
+  poster?: string;
+  /** Accessible alt text for the poster image. */
+  posterAlt?: string;
+  /** Video title shown in the header while the player is in the playing state. */
+  title?: string;
+
+  /**
+   * Whether the player is playing (controlled).
+   * When omitted the component manages its own playing state.
+   */
+  playing?: boolean;
+  /** Initial playing state when uncontrolled. Default: false. */
+  defaultPlaying?: boolean;
+
+  /**
+   * Playback progress 0–100 (controlled).
+   * When omitted the component manages its own progress internally.
+   */
+  progress?: number;
+  /** Initial progress value when uncontrolled. Default: 0. */
+  defaultProgress?: number;
+
+  /** Current-time display string shown in the controls bar, e.g. "0:12". */
+  currentTime?: string;
+  /** Total-duration display string shown in the controls bar, e.g. "2:32". */
+  duration?: string;
+
+  /** Called when the user requests playback to start. */
+  onPlay?: () => void;
+  /** Called when the user requests playback to pause. */
+  onPause?: () => void;
+  /** Called when the previous-track button is clicked. */
+  onPrevious?: () => void;
+  /** Called when the next-track button is clicked. */
+  onNext?: () => void;
+  /**
+   * Called when the user scrubs the progress bar.
+   * Receives the new value in the range 0–100.
+   */
+  onProgressChange?: (value: number) => void;
+  /** Called when the volume button is clicked. */
+  onVolumeClick?: () => void;
+  /** Called when the settings button is clicked. */
+  onSettingsClick?: () => void;
+  /** Called when the fullscreen button is clicked. */
+  onFullscreenClick?: () => void;
+  /** Called when the more-options (⋮) button is clicked. */
+  onMoreClick?: () => void;
+
+  /** Enable right-to-left layout. */
+  rtl?: boolean;
+}

package/src/components/VideoPlayer/VideoPlayer.variants.ts

@@ -0,0 +1,134 @@
+/* ─────────────────────────────────────────────────────────────────
+   VideoPlayer.variants.ts
+   Class-name constants for the VideoPlayer component.
+   Derived from Figma node 6691:97028 (Video Player frame).
+   No JSX / React imports — pure strings.
+──────────────────────────────────────────────────────────────────── */
+
+/* ── Header overlay (On Play state — top of video) ───────────────── */
+
+/**
+ * Gradient overlay at the top.
+ * Fades from rgba(0,0,0,0.55) at the top to transparent at the bottom.
+ * Figma uses a baked image for this gradient; CSS linear-gradient matches visually.
+ * Height: 56px — Figma fixed value; no token exists for component heights.
+ * Padding: px=spacing-lg(12px), pt=spacing-md(8px), pb=spacing-3xl(24px) — Figma variables.
+ */
+export const HEADER_OVERLAY =
+  'absolute inset-x-0 top-0 flex items-center h-[56px] ' +
+  'gap-spacing-xl px-spacing-lg pt-spacing-md pb-spacing-3xl ' +
+  'bg-gradient-to-b from-[rgba(0,0,0,0.55)] to-transparent';
+
+/**
+ * Video title inside the header.
+ * text-text-md  → Size/Text/typo-size-text-md (16px)
+ * font-[500]    → Font Wieght/font-weight-medium
+ *→ Line Height/Text/line-heights-text-md
+ * text color    → Text/text-oncolor-secondary = rgba(255,255,255,0.8)
+ */
+export const HEADER_TITLE =
+  'flex-1 min-w-0 truncate text-text-md font-[500] ' +
+  'text-[rgba(255,255,255,0.8)]';
+
+/* ── Controls overlay (On Play state — bottom of video) ─────────── */
+
+/**
+ * Outer controls area — positioned at the bottom, full width.
+ * Height: 60px — Figma "Zoom Container" fixed height.
+ * Padding: px=spacing-lg(12px), py=spacing-md(8px).
+ * items-end aligns the pill to the bottom of the 60px container.
+ */
+export const CONTROLS_OVERLAY =
+  'absolute inset-x-0 bottom-0 flex items-end justify-center h-[60px] ' +
+  'px-spacing-lg py-spacing-md';
+
+/**
+ * Dark semi-transparent pill wrapping all controls.
+ * bg: Colors/Alpha/alpha-black-50 = rgba(22,22,22,0.5)
+ * radius: Radius/radius-8 = 8px
+ * gap: Global/spacing-lg = 12px
+ * px: Global/spacing-lg = 12px
+ * py: Global/spacing-sm = 6px
+ * Note: dir="ltr" is applied in JSX so controls stay LTR in RTL mode
+ * (standard video player convention — confirmed by identical Figma RTL frame).
+ */
+export const CONTROLS_PILL =
+  'flex flex-1 items-center min-w-0 ' +
+  'gap-spacing-lg px-spacing-lg py-spacing-sm ' +
+  'bg-[rgba(22,22,22,0.5)] rounded-[8px]';
+
+/* ── Center play button (Default state) ─────────────────────────── */
+
+/**
+ * Transparent clickable overlay that fills the entire video area.
+ * The white play icon is centered inside.
+ * hover: subtle dark scrim to give feedback that the whole area is clickable.
+ */
+export const CENTER_PLAY_WRAP =
+  'absolute inset-0 flex items-center justify-center ' +
+  'hover:bg-[rgba(0,0,0,0.1)] motion-feedback cursor-pointer';
+
+/* ── Control buttons (shared for all icon buttons in controls/header) ── */
+
+/**
+ * Base style for every interactive icon button inside the controls bar and header.
+ * White text → inherits color on white icons.
+ * Opacity-based hover/active: standard for controls on dark overlay.
+ * focus-visible: white outline ring for keyboard users.
+ */
+export const CTRL_BTN =
+  'inline-flex items-center justify-center flex-shrink-0 text-white cursor-pointer ' +
+  'hover:opacity-75 active:opacity-50 transition-opacity ' +
+  'focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 ' +
+  'rounded-[2px]';
+
+/* ── Play buttons group (left: prev / pause / next) ─────────────── */
+
+/**
+ * gap: Global/spacing-md = 8px
+ */
+export const PLAY_BUTTONS_GROUP = 'flex items-center shrink-0 gap-spacing-md';
+
+/* ── Right icons group (volume / settings / fullscreen) ─────────── */
+
+/**
+ * gap: Global/spacing-lg = 12px
+ */
+export const RIGHT_ICONS_GROUP = 'flex items-center shrink-0 gap-spacing-lg';
+
+/* ── Time display ────────────────────────────────────────────────── */
+
+/**
+ * text-text-sm  → Size/Text/typo-size-text-sm (14px)
+ * font-[400]    → Font Wieght/font-weight-regular
+ *→ Line Height/Text/line-heights-text-sm
+ * text-white    → Text/text-oncolor-primary = #ffffff
+ * whitespace-nowrap: prevents wrapping on narrow containers
+ * tabular-nums: keeps digits steady width for time display
+ */
+export const TIME_TEXT =
+  'shrink-0 text-text-sm font-[400] text-white whitespace-nowrap tabular-nums';
+
+/* ── Progress bar ────────────────────────────────────────────────── */
+
+/** Container — flex-1 fills remaining space; 18px matches Figma Slider height. */
+export const PROGRESS_CONTAINER = 'relative flex-1 min-w-0 h-[18px] flex items-center';
+
+/**
+ * Full-width background track.
+ * bg: Background/background-neutral-100 = rgba(243,244,246,1)
+ * height: 4px — Figma fixed value
+ * radius: 2px — Figma fixed value
+ */
+export const PROGRESS_TRACK =
+  'absolute inset-x-0 h-[4px] rounded-[2px] bg-[rgba(243,244,246,1)]';
+
+/**
+ * Filled portion of the track.
+ * bg: Background/background-primary = rgba(27,131,84,1)
+ * start-0 so it always fills from the logical start edge.
+ * Width is controlled via inline style: `{ width: \`${progress}%\` }`.
+ * Note: the controls pill uses dir="ltr", so start-0 = left-0 always.
+ */
+export const PROGRESS_FILL =
+  'absolute start-0 h-[4px] rounded-[2px] bg-[rgba(27,131,84,1)]';

package/src/components/VideoPlayer/index.ts

@@ -0,0 +1,2 @@
+export { VideoPlayer } from './VideoPlayer';
+export type { VideoPlayerProps } from './VideoPlayer.types';