@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/hooks/index.d.ts

@@ -0,0 +1,150 @@
+export { C as CaptionCue, u as useCaptions } from '../use-captions-AkKlJhov.js';
+import * as React from 'react';
+
+/**
+ * Design system breakpoint values in pixels.
+ * These match the primitive breakpoint tokens from packages/tokens.
+ */
+declare const BREAKPOINTS: {
+    readonly sm: 320;
+    readonly md: 768;
+    readonly lg: 1440;
+};
+type Breakpoint = keyof typeof BREAKPOINTS;
+/**
+ * Hook to get the current responsive breakpoint.
+ * Returns the active breakpoint name based on viewport width.
+ *
+ * @returns The current breakpoint: 'sm' | 'md' | 'lg'
+ *
+ * @example
+ * ```tsx
+ * function Component() {
+ *   const breakpoint = useBreakpoint();
+ *
+ *   return (
+ *     <div>
+ *       {breakpoint === 'sm' && <MobileLayout />}
+ *       {breakpoint === 'md' && <TabletLayout />}
+ *       {breakpoint === 'lg' && <DesktopLayout />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useBreakpoint(): Breakpoint;
+/**
+ * Hook to check if viewport is at or above a specific breakpoint.
+ *
+ * @param breakpoint - The minimum breakpoint to check against
+ * @returns boolean indicating if viewport is at or above the breakpoint
+ *
+ * @example
+ * ```tsx
+ * function Component() {
+ *   const isDesktop = useMinBreakpoint('lg');
+ *   const isTabletUp = useMinBreakpoint('md');
+ *
+ *   return isDesktop ? <DesktopView /> : <MobileView />;
+ * }
+ * ```
+ */
+declare function useMinBreakpoint(breakpoint: Breakpoint): boolean;
+/**
+ * Hook to check if viewport is below a specific breakpoint.
+ *
+ * @param breakpoint - The breakpoint to check against
+ * @returns boolean indicating if viewport is below the breakpoint
+ *
+ * @example
+ * ```tsx
+ * function Component() {
+ *   const isMobile = useMaxBreakpoint('md'); // Below tablet
+ *
+ *   return isMobile ? <MobileNav /> : <DesktopNav />;
+ * }
+ * ```
+ */
+declare function useMaxBreakpoint(breakpoint: Breakpoint): boolean;
+
+type EventMap<T> = T extends Window ? WindowEventMap : T extends Document ? DocumentEventMap : T extends HTMLElement ? HTMLElementEventMap : never;
+/**
+ * Custom hook that attaches an event listener to a specified element.
+ * Automatically handles cleanup on unmount and when dependencies change.
+ *
+ * @param eventName - The name of the event to listen for
+ * @param handler - The callback function to execute when the event fires
+ * @param element - The element to attach the listener to (defaults to window)
+ * @param options - Optional event listener options
+ *
+ * @example
+ * ```tsx
+ * // Listen to window resize
+ * useEventListener('resize', handleResize);
+ *
+ * // Listen to element scroll
+ * useEventListener('scroll', handleScroll, containerRef.current);
+ *
+ * // With options
+ * useEventListener('scroll', handleScroll, window, { passive: true });
+ * ```
+ */
+declare function useEventListener<T extends Window | Document | HTMLElement, K extends keyof EventMap<T>>(eventName: K, handler: (event: EventMap<T>[K]) => void, element?: T | null, options?: boolean | AddEventListenerOptions): void;
+
+interface UseVideoKeyboardOptions {
+    /** Ref to the video element */
+    videoRef: React.RefObject<HTMLVideoElement | null>;
+    /** Whether keyboard handling is enabled (default: true) */
+    enabled?: boolean;
+    /** Seek amount in seconds for arrow keys (default: 5) */
+    seekAmount?: number;
+    /** Volume change amount for arrow keys (default: 0.1) */
+    volumeStep?: number;
+    /** Callback when play/pause is toggled */
+    onTogglePlay?: () => void;
+    /** Callback when fullscreen is toggled */
+    onToggleFullscreen?: () => void;
+    /** Callback when captions are toggled */
+    onToggleCaptions?: () => void;
+    /** Callback when controls should be shown */
+    onShowControls?: () => void;
+}
+interface UseVideoKeyboardReturn {
+    /** Key down handler to attach to container element */
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    /** Props to spread on the container element */
+    containerProps: {
+        onKeyDown: (e: React.KeyboardEvent) => void;
+        tabIndex: number;
+        role: string;
+        "aria-label": string;
+    };
+}
+/**
+ * Hook for handling keyboard shortcuts in a video player.
+ *
+ * Supported shortcuts:
+ * - Space: Play/pause
+ * - Left Arrow: Seek backward
+ * - Right Arrow: Seek forward
+ * - Up Arrow: Volume up
+ * - Down Arrow: Volume down
+ * - M: Toggle mute
+ * - F: Toggle fullscreen
+ * - C: Toggle captions
+ *
+ * @example
+ * ```tsx
+ * const { containerProps } = useVideoKeyboard({
+ *   videoRef,
+ *   onTogglePlay: () => video.paused ? video.play() : video.pause(),
+ *   onToggleFullscreen: () => toggleFullscreen(),
+ *   onShowControls: () => setControlsVisible(true),
+ * });
+ *
+ * return <div {...containerProps}>...</div>;
+ * ```
+ */
+declare function useVideoKeyboard({ videoRef, enabled, seekAmount, volumeStep, onTogglePlay, onToggleFullscreen, onToggleCaptions, onShowControls, }: UseVideoKeyboardOptions): UseVideoKeyboardReturn;
+
+export { BREAKPOINTS, type Breakpoint, type UseVideoKeyboardOptions, type UseVideoKeyboardReturn, useBreakpoint, useEventListener, useMaxBreakpoint, useMinBreakpoint, useVideoKeyboard };

package/dist/hooks/index.js

@@ -0,0 +1,339 @@
+"use client";
+import * as React2 from 'react';
+
+// src/hooks/use-breakpoint.ts
+var BREAKPOINTS = {
+  sm: 320,
+  md: 768,
+  lg: 1440
+};
+function getCurrentBreakpoint(width) {
+  if (width >= BREAKPOINTS.lg) return "lg";
+  if (width >= BREAKPOINTS.md) return "md";
+  return "sm";
+}
+function useBreakpoint() {
+  const [breakpoint, setBreakpoint] = React2.useState(() => {
+    if (typeof window === "undefined") return "sm";
+    return getCurrentBreakpoint(window.innerWidth);
+  });
+  React2.useEffect(() => {
+    const handleResize = () => {
+      setBreakpoint(getCurrentBreakpoint(window.innerWidth));
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return breakpoint;
+}
+function useMinBreakpoint(breakpoint) {
+  const [matches, setMatches] = React2.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth >= BREAKPOINTS[breakpoint];
+  });
+  React2.useEffect(() => {
+    const mediaQuery = window.matchMedia(
+      `(min-width: ${BREAKPOINTS[breakpoint]}px)`
+    );
+    setMatches(mediaQuery.matches);
+    const handleChange = (event) => {
+      setMatches(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [breakpoint]);
+  return matches;
+}
+function useMaxBreakpoint(breakpoint) {
+  const [matches, setMatches] = React2.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < BREAKPOINTS[breakpoint];
+  });
+  React2.useEffect(() => {
+    const mediaQuery = window.matchMedia(
+      `(max-width: ${BREAKPOINTS[breakpoint] - 1}px)`
+    );
+    setMatches(mediaQuery.matches);
+    const handleChange = (event) => {
+      setMatches(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [breakpoint]);
+  return matches;
+}
+function parseVttTimestamp(timestamp) {
+  const parts = timestamp.trim().split(":");
+  let hours = 0;
+  let minutes = 0;
+  let seconds = 0;
+  if (parts.length === 3) {
+    hours = Number.parseInt(parts[0], 10);
+    minutes = Number.parseInt(parts[1], 10);
+    seconds = Number.parseFloat(parts[2]);
+  } else if (parts.length === 2) {
+    minutes = Number.parseInt(parts[0], 10);
+    seconds = Number.parseFloat(parts[1]);
+  }
+  return hours * 3600 + minutes * 60 + seconds;
+}
+function parseVtt(vttContent) {
+  const cues = [];
+  const lines = vttContent.trim().split("\n");
+  let i = 0;
+  while (i < lines.length && !lines[i].includes("-->")) {
+    i++;
+  }
+  while (i < lines.length) {
+    const line = lines[i].trim();
+    if (line.includes("-->")) {
+      const [startStr, endStr] = line.split("-->").map((s) => s.trim());
+      const endParts = endStr.split(" ");
+      const endTime = parseVttTimestamp(endParts[0]);
+      const startTime = parseVttTimestamp(startStr);
+      const textLines = [];
+      i++;
+      while (i < lines.length && lines[i].trim() !== "" && !lines[i].includes("-->")) {
+        if (!/^\d+$/.test(lines[i].trim())) {
+          textLines.push(lines[i].trim());
+        }
+        i++;
+      }
+      if (textLines.length > 0) {
+        cues.push({
+          id: `cue-${cues.length}`,
+          startTime,
+          endTime,
+          text: textLines.join("\n")
+        });
+      }
+    } else {
+      i++;
+    }
+  }
+  return cues;
+}
+function stripVttTags(text) {
+  return text.replace(/<\/?[^>]+(>|$)/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
+}
+function useCaptions(options = {}) {
+  const { src, content, stripTags = true, currentTime: externalTime } = options;
+  const [cues, setCues] = React2.useState([]);
+  const [internalTime, setInternalTime] = React2.useState(0);
+  const [isLoading, setIsLoading] = React2.useState(false);
+  const [error, setError] = React2.useState(null);
+  const currentTime = externalTime ?? internalTime;
+  React2.useEffect(() => {
+    if (content) {
+      const parsed = parseVtt(content);
+      setCues(
+        stripTags ? parsed.map((cue) => ({ ...cue, text: stripVttTags(cue.text) })) : parsed
+      );
+      return;
+    }
+    if (!src) {
+      setCues([]);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    fetch(src).then((response) => {
+      if (!response.ok) {
+        throw new Error(`Failed to fetch captions: ${response.status}`);
+      }
+      return response.text();
+    }).then((vttContent) => {
+      const parsed = parseVtt(vttContent);
+      setCues(
+        stripTags ? parsed.map((cue) => ({ ...cue, text: stripVttTags(cue.text) })) : parsed
+      );
+    }).catch((err) => {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  }, [src, content, stripTags]);
+  const activeCue = React2.useMemo(() => {
+    return cues.find(
+      (cue) => currentTime >= cue.startTime && currentTime <= cue.endTime
+    ) ?? null;
+  }, [cues, currentTime]);
+  const handleSetCurrentTime = React2.useCallback((time) => {
+    setInternalTime(time);
+  }, []);
+  return {
+    cues,
+    activeCue,
+    setCurrentTime: handleSetCurrentTime,
+    isLoading,
+    error
+  };
+}
+function useEventListener(eventName, handler, element, options) {
+  const savedHandler = React2.useRef(handler);
+  React2.useLayoutEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  React2.useEffect(() => {
+    const targetElement = element ?? window;
+    if (!targetElement?.addEventListener) {
+      return;
+    }
+    const eventListener = (event) => {
+      savedHandler.current(event);
+    };
+    targetElement.addEventListener(eventName, eventListener, options);
+    return () => {
+      targetElement.removeEventListener(
+        eventName,
+        eventListener,
+        options
+      );
+    };
+  }, [eventName, element, options]);
+}
+function useVideoKeyboard({
+  videoRef,
+  enabled = true,
+  seekAmount = 5,
+  volumeStep = 0.1,
+  onTogglePlay,
+  onToggleFullscreen,
+  onToggleCaptions,
+  onShowControls
+}) {
+  const handleKeyDown = React2.useCallback(
+    (e) => {
+      if (!enabled) return;
+      const video = videoRef.current;
+      if (!video) return;
+      const target = e.target;
+      if (target.tagName === "BUTTON" || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.closest("button") || target.closest("input") || target.closest("[role='slider']")) {
+        return;
+      }
+      let handled = false;
+      switch (e.key) {
+        // Play/Pause
+        case " ":
+        case "Spacebar":
+        case "k":
+          if (onTogglePlay) {
+            onTogglePlay();
+          } else {
+            if (video.paused) {
+              video.play().catch(() => {
+              });
+            } else {
+              video.pause();
+            }
+          }
+          handled = true;
+          break;
+        // Seek backward
+        case "ArrowLeft":
+        case "j":
+          video.currentTime = Math.max(0, video.currentTime - seekAmount);
+          handled = true;
+          break;
+        // Seek forward
+        case "ArrowRight":
+        case "l":
+          video.currentTime = Math.min(
+            video.duration || 0,
+            video.currentTime + seekAmount
+          );
+          handled = true;
+          break;
+        // Volume up
+        case "ArrowUp":
+          video.volume = Math.min(1, video.volume + volumeStep);
+          video.muted = false;
+          handled = true;
+          break;
+        // Volume down
+        case "ArrowDown":
+          video.volume = Math.max(0, video.volume - volumeStep);
+          handled = true;
+          break;
+        // Toggle mute
+        case "m":
+        case "M":
+          video.muted = !video.muted;
+          handled = true;
+          break;
+        // Toggle fullscreen
+        case "f":
+        case "F":
+          onToggleFullscreen?.();
+          handled = true;
+          break;
+        // Toggle captions
+        case "c":
+        case "C":
+          onToggleCaptions?.();
+          handled = true;
+          break;
+        // Jump to start
+        case "Home":
+          video.currentTime = 0;
+          handled = true;
+          break;
+        // Jump to end
+        case "End":
+          video.currentTime = video.duration || 0;
+          handled = true;
+          break;
+        // Number keys for percentage seeking (0-9)
+        case "0":
+        case "1":
+        case "2":
+        case "3":
+        case "4":
+        case "5":
+        case "6":
+        case "7":
+        case "8":
+        case "9":
+          if (video.duration) {
+            const percent = parseInt(e.key, 10) / 10;
+            video.currentTime = video.duration * percent;
+            handled = true;
+          }
+          break;
+      }
+      if (handled) {
+        e.preventDefault();
+        e.stopPropagation();
+        onShowControls?.();
+      }
+    },
+    [
+      enabled,
+      videoRef,
+      seekAmount,
+      volumeStep,
+      onTogglePlay,
+      onToggleFullscreen,
+      onToggleCaptions,
+      onShowControls
+    ]
+  );
+  const containerProps = React2.useMemo(
+    () => ({
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "application",
+      "aria-label": "Video player, press space to play or pause"
+    }),
+    [handleKeyDown]
+  );
+  return {
+    handleKeyDown,
+    containerProps
+  };
+}
+
+export { BREAKPOINTS, useBreakpoint, useCaptions, useEventListener, useMaxBreakpoint, useMinBreakpoint, useVideoKeyboard };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-breakpoint.ts","../../src/hooks/use-captions.ts","../../src/hooks/use-event-listener.ts","../../src/hooks/use-video-keyboard.ts"],"names":["React","React3","React4"],"mappings":"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","file":"index.js","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * Design system breakpoint values in pixels.\n * These match the primitive breakpoint tokens from packages/tokens.\n */\nexport const BREAKPOINTS = {\n\tsm: 320,\n\tmd: 768,\n\tlg: 1440,\n} as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\n/**\n * Get the current breakpoint based on viewport width.\n */\nfunction getCurrentBreakpoint(width: number): Breakpoint {\n\tif (width >= BREAKPOINTS.lg) return \"lg\";\n\tif (width >= BREAKPOINTS.md) return \"md\";\n\treturn \"sm\";\n}\n\n/**\n * Hook to get the current responsive breakpoint.\n * Returns the active breakpoint name based on viewport width.\n *\n * @returns The current breakpoint: 'sm' | 'md' | 'lg'\n *\n * @example\n * ```tsx\n * function Component() {\n *   const breakpoint = useBreakpoint();\n *\n *   return (\n *     <div>\n *       {breakpoint === 'sm' && <MobileLayout />}\n *       {breakpoint === 'md' && <TabletLayout />}\n *       {breakpoint === 'lg' && <DesktopLayout />}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useBreakpoint(): Breakpoint {\n\tconst [breakpoint, setBreakpoint] = React.useState<Breakpoint>(() => {\n\t\tif (typeof window === \"undefined\") return \"sm\";\n\t\treturn getCurrentBreakpoint(window.innerWidth);\n\t});\n\n\tReact.useEffect(() => {\n\t\tconst handleResize = () => {\n\t\t\tsetBreakpoint(getCurrentBreakpoint(window.innerWidth));\n\t\t};\n\n\t\t// Set initial value\n\t\thandleResize();\n\n\t\twindow.addEventListener(\"resize\", handleResize);\n\t\treturn () => window.removeEventListener(\"resize\", handleResize);\n\t}, []);\n\n\treturn breakpoint;\n}\n\n/**\n * Hook to check if viewport is at or above a specific breakpoint.\n *\n * @param breakpoint - The minimum breakpoint to check against\n * @returns boolean indicating if viewport is at or above the breakpoint\n *\n * @example\n * ```tsx\n * function Component() {\n *   const isDesktop = useMinBreakpoint('lg');\n *   const isTabletUp = useMinBreakpoint('md');\n *\n *   return isDesktop ? <DesktopView /> : <MobileView />;\n * }\n * ```\n */\nexport function useMinBreakpoint(breakpoint: Breakpoint): boolean {\n\tconst [matches, setMatches] = React.useState<boolean>(() => {\n\t\tif (typeof window === \"undefined\") return false;\n\t\treturn window.innerWidth >= BREAKPOINTS[breakpoint];\n\t});\n\n\tReact.useEffect(() => {\n\t\tconst mediaQuery = window.matchMedia(\n\t\t\t`(min-width: ${BREAKPOINTS[breakpoint]}px)`,\n\t\t);\n\n\t\tsetMatches(mediaQuery.matches);\n\n\t\tconst handleChange = (event: MediaQueryListEvent) => {\n\t\t\tsetMatches(event.matches);\n\t\t};\n\n\t\tmediaQuery.addEventListener(\"change\", handleChange);\n\t\treturn () => mediaQuery.removeEventListener(\"change\", handleChange);\n\t}, [breakpoint]);\n\n\treturn matches;\n}\n\n/**\n * Hook to check if viewport is below a specific breakpoint.\n *\n * @param breakpoint - The breakpoint to check against\n * @returns boolean indicating if viewport is below the breakpoint\n *\n * @example\n * ```tsx\n * function Component() {\n *   const isMobile = useMaxBreakpoint('md'); // Below tablet\n *\n *   return isMobile ? <MobileNav /> : <DesktopNav />;\n * }\n * ```\n */\nexport function useMaxBreakpoint(breakpoint: Breakpoint): boolean {\n\tconst [matches, setMatches] = React.useState<boolean>(() => {\n\t\tif (typeof window === \"undefined\") return false;\n\t\treturn window.innerWidth < BREAKPOINTS[breakpoint];\n\t});\n\n\tReact.useEffect(() => {\n\t\tconst mediaQuery = window.matchMedia(\n\t\t\t`(max-width: ${BREAKPOINTS[breakpoint] - 1}px)`,\n\t\t);\n\n\t\tsetMatches(mediaQuery.matches);\n\n\t\tconst handleChange = (event: MediaQueryListEvent) => {\n\t\t\tsetMatches(event.matches);\n\t\t};\n\n\t\tmediaQuery.addEventListener(\"change\", handleChange);\n\t\treturn () => mediaQuery.removeEventListener(\"change\", handleChange);\n\t}, [breakpoint]);\n\n\treturn matches;\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * Represents a single caption cue parsed from VTT.\n */\nexport interface CaptionCue {\n\t/** Unique identifier for the cue */\n\tid: string;\n\t/** Start time in seconds */\n\tstartTime: number;\n\t/** End time in seconds */\n\tendTime: number;\n\t/** Caption text content */\n\ttext: string;\n}\n\n/**\n * Parse VTT timestamp to seconds.\n * Handles formats: HH:MM:SS.mmm or MM:SS.mmm\n */\nfunction parseVttTimestamp(timestamp: string): number {\n\tconst parts = timestamp.trim().split(\":\");\n\tlet hours = 0;\n\tlet minutes = 0;\n\tlet seconds = 0;\n\n\tif (parts.length === 3) {\n\t\thours = Number.parseInt(parts[0], 10);\n\t\tminutes = Number.parseInt(parts[1], 10);\n\t\tseconds = Number.parseFloat(parts[2]);\n\t} else if (parts.length === 2) {\n\t\tminutes = Number.parseInt(parts[0], 10);\n\t\tseconds = Number.parseFloat(parts[1]);\n\t}\n\n\treturn hours * 3600 + minutes * 60 + seconds;\n}\n\n/**\n * Parse VTT content string into an array of caption cues.\n */\nfunction parseVtt(vttContent: string): CaptionCue[] {\n\tconst cues: CaptionCue[] = [];\n\tconst lines = vttContent.trim().split(\"\\n\");\n\n\tlet i = 0;\n\n\t// Skip WEBVTT header and any metadata\n\twhile (i < lines.length && !lines[i].includes(\"-->\")) {\n\t\ti++;\n\t}\n\n\twhile (i < lines.length) {\n\t\tconst line = lines[i].trim();\n\n\t\t// Look for timestamp line (contains -->)\n\t\tif (line.includes(\"-->\")) {\n\t\t\tconst [startStr, endStr] = line.split(\"-->\").map((s) => s.trim());\n\n\t\t\t// Handle optional cue settings after timestamp\n\t\t\tconst endParts = endStr.split(\" \");\n\t\t\tconst endTime = parseVttTimestamp(endParts[0]);\n\t\t\tconst startTime = parseVttTimestamp(startStr);\n\n\t\t\t// Collect text lines until empty line or next timestamp\n\t\t\tconst textLines: string[] = [];\n\t\t\ti++;\n\t\t\twhile (\n\t\t\t\ti < lines.length &&\n\t\t\t\tlines[i].trim() !== \"\" &&\n\t\t\t\t!lines[i].includes(\"-->\")\n\t\t\t) {\n\t\t\t\t// Skip cue identifier lines (numbers only)\n\t\t\t\tif (!/^\\d+$/.test(lines[i].trim())) {\n\t\t\t\t\ttextLines.push(lines[i].trim());\n\t\t\t\t}\n\t\t\t\ti++;\n\t\t\t}\n\n\t\t\tif (textLines.length > 0) {\n\t\t\t\tcues.push({\n\t\t\t\t\tid: `cue-${cues.length}`,\n\t\t\t\t\tstartTime,\n\t\t\t\t\tendTime,\n\t\t\t\t\ttext: textLines.join(\"\\n\"),\n\t\t\t\t});\n\t\t\t}\n\t\t} else {\n\t\t\ti++;\n\t\t}\n\t}\n\n\treturn cues;\n}\n\n/**\n * Strip VTT formatting tags from text.\n * Removes <v>, <c>, <i>, <b>, <u>, etc.\n */\nfunction stripVttTags(text: string): string {\n\treturn text\n\t\t.replace(/<\\/?[^>]+(>|$)/g, \"\") // Remove HTML-like tags\n\t\t.replace(/&nbsp;/g, \" \")\n\t\t.replace(/&amp;/g, \"&\")\n\t\t.replace(/&lt;/g, \"<\")\n\t\t.replace(/&gt;/g, \">\")\n\t\t.trim();\n}\n\ninterface UseCaptionsOptions {\n\t/** VTT file URL to fetch */\n\tsrc?: string;\n\t/** Pre-loaded VTT content string */\n\tcontent?: string;\n\t/** Strip VTT formatting tags from caption text */\n\tstripTags?: boolean;\n\t/** Current playback time in seconds (alternative to setCurrentTime) */\n\tcurrentTime?: number;\n}\n\ninterface UseCaptionsReturn {\n\t/** All parsed caption cues */\n\tcues: CaptionCue[];\n\t/** Currently active cue based on current time */\n\tactiveCue: CaptionCue | null;\n\t/** Update the current playback time to get active cue */\n\tsetCurrentTime: (time: number) => void;\n\t/** Loading state */\n\tisLoading: boolean;\n\t/** Error state */\n\terror: Error | null;\n}\n\n/**\n * Hook for parsing VTT captions and tracking the active cue.\n *\n * @param options - Caption source options\n * @returns Parsed cues, active cue, and state\n *\n * @example\n * ```tsx\n * function VideoPlayer() {\n *   const videoRef = React.useRef<HTMLVideoElement>(null);\n *   const { activeCue, setCurrentTime } = useCaptions({\n *     src: '/captions.vtt',\n *   });\n *\n *   // Sync with video time\n *   React.useEffect(() => {\n *     const video = videoRef.current;\n *     if (!video) return;\n *\n *     const handleTimeUpdate = () => setCurrentTime(video.currentTime);\n *     video.addEventListener('timeupdate', handleTimeUpdate);\n *     return () => video.removeEventListener('timeupdate', handleTimeUpdate);\n *   }, [setCurrentTime]);\n *\n *   return (\n *     <div>\n *       <video ref={videoRef} src=\"/video.mp4\" />\n *       {activeCue && <div className=\"caption\">{activeCue.text}</div>}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useCaptions(\n\toptions: UseCaptionsOptions = {},\n): UseCaptionsReturn {\n\tconst { src, content, stripTags = true, currentTime: externalTime } = options;\n\n\tconst [cues, setCues] = React.useState<CaptionCue[]>([]);\n\tconst [internalTime, setInternalTime] = React.useState(0);\n\tconst [isLoading, setIsLoading] = React.useState(false);\n\tconst [error, setError] = React.useState<Error | null>(null);\n\n\t// Use external time if provided, otherwise use internal state\n\tconst currentTime = externalTime ?? internalTime;\n\n\t// Parse content or fetch from URL\n\tReact.useEffect(() => {\n\t\tif (content) {\n\t\t\t// Use provided content directly\n\t\t\tconst parsed = parseVtt(content);\n\t\t\tsetCues(\n\t\t\t\tstripTags\n\t\t\t\t\t? parsed.map((cue) => ({ ...cue, text: stripVttTags(cue.text) }))\n\t\t\t\t\t: parsed,\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tif (!src) {\n\t\t\tsetCues([]);\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsLoading(true);\n\t\tsetError(null);\n\n\t\tfetch(src)\n\t\t\t.then((response) => {\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\tthrow new Error(`Failed to fetch captions: ${response.status}`);\n\t\t\t\t}\n\t\t\t\treturn response.text();\n\t\t\t})\n\t\t\t.then((vttContent) => {\n\t\t\t\tconst parsed = parseVtt(vttContent);\n\t\t\t\tsetCues(\n\t\t\t\t\tstripTags\n\t\t\t\t\t\t? parsed.map((cue) => ({ ...cue, text: stripVttTags(cue.text) }))\n\t\t\t\t\t\t: parsed,\n\t\t\t\t);\n\t\t\t})\n\t\t\t.catch((err) => {\n\t\t\t\tsetError(err instanceof Error ? err : new Error(String(err)));\n\t\t\t})\n\t\t\t.finally(() => {\n\t\t\t\tsetIsLoading(false);\n\t\t\t});\n\t}, [src, content, stripTags]);\n\n\t// Find active cue for current time\n\tconst activeCue = React.useMemo(() => {\n\t\treturn (\n\t\t\tcues.find(\n\t\t\t\t(cue) => currentTime >= cue.startTime && currentTime <= cue.endTime,\n\t\t\t) ?? null\n\t\t);\n\t}, [cues, currentTime]);\n\n\t// Memoize setCurrentTime to avoid unnecessary re-renders\n\tconst handleSetCurrentTime = React.useCallback((time: number) => {\n\t\tsetInternalTime(time);\n\t}, []);\n\n\treturn {\n\t\tcues,\n\t\tactiveCue,\n\t\tsetCurrentTime: handleSetCurrentTime,\n\t\tisLoading,\n\t\terror,\n\t};\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\ntype EventMap<T> = T extends Window\n\t? WindowEventMap\n\t: T extends Document\n\t\t? DocumentEventMap\n\t\t: T extends HTMLElement\n\t\t\t? HTMLElementEventMap\n\t\t\t: never;\n\n/**\n * Custom hook that attaches an event listener to a specified element.\n * Automatically handles cleanup on unmount and when dependencies change.\n *\n * @param eventName - The name of the event to listen for\n * @param handler - The callback function to execute when the event fires\n * @param element - The element to attach the listener to (defaults to window)\n * @param options - Optional event listener options\n *\n * @example\n * ```tsx\n * // Listen to window resize\n * useEventListener('resize', handleResize);\n *\n * // Listen to element scroll\n * useEventListener('scroll', handleScroll, containerRef.current);\n *\n * // With options\n * useEventListener('scroll', handleScroll, window, { passive: true });\n * ```\n */\nexport function useEventListener<\n\tT extends Window | Document | HTMLElement,\n\tK extends keyof EventMap<T>,\n>(\n\teventName: K,\n\thandler: (event: EventMap<T>[K]) => void,\n\telement?: T | null,\n\toptions?: boolean | AddEventListenerOptions,\n): void {\n\t// Store the handler in a ref to avoid re-subscribing on every render\n\tconst savedHandler = React.useRef(handler);\n\n\t// Update ref when handler changes\n\tReact.useLayoutEffect(() => {\n\t\tsavedHandler.current = handler;\n\t}, [handler]);\n\n\tReact.useEffect(() => {\n\t\t// Default to window if no element is provided\n\t\tconst targetElement = element ?? window;\n\n\t\tif (!targetElement?.addEventListener) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst eventListener = (event: Event) => {\n\t\t\tsavedHandler.current(event as EventMap<T>[K]);\n\t\t};\n\n\t\ttargetElement.addEventListener(eventName as string, eventListener, options);\n\n\t\treturn () => {\n\t\t\ttargetElement.removeEventListener(\n\t\t\t\teventName as string,\n\t\t\t\teventListener,\n\t\t\t\toptions,\n\t\t\t);\n\t\t};\n\t}, [eventName, element, options]);\n}\n","import * as React from \"react\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface UseVideoKeyboardOptions {\n\t/** Ref to the video element */\n\tvideoRef: React.RefObject<HTMLVideoElement | null>;\n\t/** Whether keyboard handling is enabled (default: true) */\n\tenabled?: boolean;\n\t/** Seek amount in seconds for arrow keys (default: 5) */\n\tseekAmount?: number;\n\t/** Volume change amount for arrow keys (default: 0.1) */\n\tvolumeStep?: number;\n\t/** Callback when play/pause is toggled */\n\tonTogglePlay?: () => void;\n\t/** Callback when fullscreen is toggled */\n\tonToggleFullscreen?: () => void;\n\t/** Callback when captions are toggled */\n\tonToggleCaptions?: () => void;\n\t/** Callback when controls should be shown */\n\tonShowControls?: () => void;\n}\n\nexport interface UseVideoKeyboardReturn {\n\t/** Key down handler to attach to container element */\n\thandleKeyDown: (e: React.KeyboardEvent) => void;\n\t/** Props to spread on the container element */\n\tcontainerProps: {\n\t\tonKeyDown: (e: React.KeyboardEvent) => void;\n\t\ttabIndex: number;\n\t\trole: string;\n\t\t\"aria-label\": string;\n\t};\n}\n\n// ============================================================================\n// Hook\n// ============================================================================\n\n/**\n * Hook for handling keyboard shortcuts in a video player.\n *\n * Supported shortcuts:\n * - Space: Play/pause\n * - Left Arrow: Seek backward\n * - Right Arrow: Seek forward\n * - Up Arrow: Volume up\n * - Down Arrow: Volume down\n * - M: Toggle mute\n * - F: Toggle fullscreen\n * - C: Toggle captions\n *\n * @example\n * ```tsx\n * const { containerProps } = useVideoKeyboard({\n *   videoRef,\n *   onTogglePlay: () => video.paused ? video.play() : video.pause(),\n *   onToggleFullscreen: () => toggleFullscreen(),\n *   onShowControls: () => setControlsVisible(true),\n * });\n *\n * return <div {...containerProps}>...</div>;\n * ```\n */\nexport function useVideoKeyboard({\n\tvideoRef,\n\tenabled = true,\n\tseekAmount = 5,\n\tvolumeStep = 0.1,\n\tonTogglePlay,\n\tonToggleFullscreen,\n\tonToggleCaptions,\n\tonShowControls,\n}: UseVideoKeyboardOptions): UseVideoKeyboardReturn {\n\tconst handleKeyDown = React.useCallback(\n\t\t(e: React.KeyboardEvent) => {\n\t\t\tif (!enabled) return;\n\n\t\t\tconst video = videoRef.current;\n\t\t\tif (!video) return;\n\n\t\t\t// Don't handle if focus is on interactive elements\n\t\t\tconst target = e.target as HTMLElement;\n\t\t\tif (\n\t\t\t\ttarget.tagName === \"BUTTON\" ||\n\t\t\t\ttarget.tagName === \"INPUT\" ||\n\t\t\t\ttarget.tagName === \"TEXTAREA\" ||\n\t\t\t\ttarget.closest(\"button\") ||\n\t\t\t\ttarget.closest(\"input\") ||\n\t\t\t\ttarget.closest(\"[role='slider']\")\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet handled = false;\n\n\t\t\tswitch (e.key) {\n\t\t\t\t// Play/Pause\n\t\t\t\tcase \" \":\n\t\t\t\tcase \"Spacebar\":\n\t\t\t\tcase \"k\": // YouTube-style shortcut\n\t\t\t\t\tif (onTogglePlay) {\n\t\t\t\t\t\tonTogglePlay();\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (video.paused) {\n\t\t\t\t\t\t\tvideo.play().catch(() => {});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tvideo.pause();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\thandled = true;\n\t\t\t\t\tbreak;\n\n\t\t\t\t// Seek backward\n\t\t\t\tcase \"ArrowLeft\":\n\t\t\t\tcase \"j\": // YouTube-style shortcut\n\t\t\t\t\tvideo.currentTime = Math.max(0, video.currentTime - seekAmount);\n\t\t\t\t\thandled = true;\n\t\t\t\t\tbreak;\n\n\t\t\t\t// Seek forward\n\t\t\t\tcase \"ArrowRight\":\n\t\t\t\tcase \"l\": // YouTube-style shortcut\n\t\t\t\t\tvideo.currentTime = Math.min(\n\t\t\t\t\t\tvideo.duration || 0,\n\t\t\t\t\t\tvideo.currentTime + seekAmount,\n\t\t\t\t\t);\n\t\t\t\t\thandled = true;\n\t\t\t\t\tbreak;\n\n\t\t\t\t// Volume up\n\t\t\t\tcase \"ArrowUp\":\n\t\t\t\t\tvideo.volume = Math.min(1, video.volume + volumeStep);\n\t\t\t\t\tvideo.muted = false;\n\t\t\t\t\thandled = true;\n\t\t\t\t\tbreak;\n\n\t\t\t\t// Volume down\n\t\t\t\tcase \"ArrowDown\":\n\t\t\t\t\tvideo.volume = Math.max(0, video.volume - volumeStep);\n\t\t\t\t\thandled = true;\n\t\t\t\t\tbreak;\n\n\t\t\t\t// Toggle mute\n\t\t\t\tcase \"m\":\n\t\t\t\tcase \"M\":\n\t\t\t\t\tvideo.muted = !video.muted;\n\t\t\t\t\thandled = true;\n\t\t\t\t\tbreak;\n\n\t\t\t\t// Toggle fullscreen\n\t\t\t\tcase \"f\":\n\t\t\t\tcase \"F\":\n\t\t\t\t\tonToggleFullscreen?.();\n\t\t\t\t\thandled = true;\n\t\t\t\t\tbreak;\n\n\t\t\t\t// Toggle captions\n\t\t\t\tcase \"c\":\n\t\t\t\tcase \"C\":\n\t\t\t\t\tonToggleCaptions?.();\n\t\t\t\t\thandled = true;\n\t\t\t\t\tbreak;\n\n\t\t\t\t// Jump to start\n\t\t\t\tcase \"Home\":\n\t\t\t\t\tvideo.currentTime = 0;\n\t\t\t\t\thandled = true;\n\t\t\t\t\tbreak;\n\n\t\t\t\t// Jump to end\n\t\t\t\tcase \"End\":\n\t\t\t\t\tvideo.currentTime = video.duration || 0;\n\t\t\t\t\thandled = true;\n\t\t\t\t\tbreak;\n\n\t\t\t\t// Number keys for percentage seeking (0-9)\n\t\t\t\tcase \"0\":\n\t\t\t\tcase \"1\":\n\t\t\t\tcase \"2\":\n\t\t\t\tcase \"3\":\n\t\t\t\tcase \"4\":\n\t\t\t\tcase \"5\":\n\t\t\t\tcase \"6\":\n\t\t\t\tcase \"7\":\n\t\t\t\tcase \"8\":\n\t\t\t\tcase \"9\":\n\t\t\t\t\tif (video.duration) {\n\t\t\t\t\t\tconst percent = parseInt(e.key, 10) / 10;\n\t\t\t\t\t\tvideo.currentTime = video.duration * percent;\n\t\t\t\t\t\thandled = true;\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tif (handled) {\n\t\t\t\te.preventDefault();\n\t\t\t\te.stopPropagation();\n\t\t\t\tonShowControls?.();\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\tenabled,\n\t\t\tvideoRef,\n\t\t\tseekAmount,\n\t\t\tvolumeStep,\n\t\t\tonTogglePlay,\n\t\t\tonToggleFullscreen,\n\t\t\tonToggleCaptions,\n\t\t\tonShowControls,\n\t\t],\n\t);\n\n\tconst containerProps = React.useMemo(\n\t\t() => ({\n\t\t\tonKeyDown: handleKeyDown,\n\t\t\ttabIndex: 0,\n\t\t\trole: \"application\" as const,\n\t\t\t\"aria-label\": \"Video player, press space to play or pause\",\n\t\t}),\n\t\t[handleKeyDown],\n\t);\n\n\treturn {\n\t\thandleKeyDown,\n\t\tcontainerProps,\n\t};\n}\n"]}