@lightbird/core 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -1630,7 +1630,11 @@ var DEFAULT_SHORTCUTS = [
   { action: "screenshot", label: "Screenshot", defaultKey: "s", key: "s", modifiers: { ctrl: true } },
   { action: "show-shortcuts", label: "Show Shortcuts Help", defaultKey: "?", key: "?" },
   { action: "next-chapter", label: "Next Chapter", defaultKey: "]", key: "]" },
-  { action: "prev-chapter", label: "Previous Chapter", defaultKey: "[", key: "[" }
+  { action: "prev-chapter", label: "Previous Chapter", defaultKey: "[", key: "[" },
+  { action: "frame-step-forward", label: "Step Forward One Frame", defaultKey: ".", key: "." },
+  { action: "frame-step-backward", label: "Step Backward One Frame", defaultKey: ",", key: "," },
+  { action: "loop-toggle", label: "Toggle Loop", defaultKey: "l", key: "l" },
+  { action: "ab-loop-cycle", label: "A-B Loop (Set/Cycle)", defaultKey: "r", key: "r" }
 ];
 var STORAGE_KEY = "lightbird-shortcuts";
 function loadShortcuts() {
@@ -1664,7 +1668,14 @@ function matchesShortcut(e, binding) {
 function isInteractiveElement(el) {
   if (!el || !(el instanceof HTMLElement)) return false;
   const tag = el.tagName.toLowerCase();
-  return ["input", "textarea", "select", "button", "a"].includes(tag) || el.contentEditable === "true" || el.getAttribute("contenteditable") !== null;
+  if (["input", "textarea", "select"].includes(tag)) return true;
+  if (el.contentEditable === "true" || el.getAttribute("contenteditable") !== null) return true;
+  if (typeof el.closest === "function" && el.closest(
+    '[role="dialog"], [role="alertdialog"], [role="menu"], [data-radix-popper-content-wrapper]'
+  )) {
+    return true;
+  }
+  return false;
 }
 function formatShortcutKey(binding) {
   const mods = [];

package/dist/index.d.cts

@@ -388,7 +388,7 @@ declare function captureVideoThumbnail(videoEl: HTMLVideoElement, atSeconds?: nu
  */
 declare function captureFrameAt(videoEl: HTMLVideoElement, timeSeconds: number, width?: number, height?: number): Promise<string | null>;
 
-type ShortcutAction = 'play-pause' | 'seek-forward-5' | 'seek-backward-5' | 'seek-forward-30' | 'seek-backward-30' | 'volume-up' | 'volume-down' | 'mute' | 'fullscreen' | 'next-item' | 'prev-item' | 'screenshot' | 'show-shortcuts' | 'next-chapter' | 'prev-chapter';
+type ShortcutAction = 'play-pause' | 'seek-forward-5' | 'seek-backward-5' | 'seek-forward-30' | 'seek-backward-30' | 'volume-up' | 'volume-down' | 'mute' | 'fullscreen' | 'next-item' | 'prev-item' | 'screenshot' | 'show-shortcuts' | 'next-chapter' | 'prev-chapter' | 'frame-step-forward' | 'frame-step-backward' | 'loop-toggle' | 'ab-loop-cycle';
 interface ShortcutBinding {
     action: ShortcutAction;
     label: string;

package/dist/index.d.ts

@@ -388,7 +388,7 @@ declare function captureVideoThumbnail(videoEl: HTMLVideoElement, atSeconds?: nu
  */
 declare function captureFrameAt(videoEl: HTMLVideoElement, timeSeconds: number, width?: number, height?: number): Promise<string | null>;
 
-type ShortcutAction = 'play-pause' | 'seek-forward-5' | 'seek-backward-5' | 'seek-forward-30' | 'seek-backward-30' | 'volume-up' | 'volume-down' | 'mute' | 'fullscreen' | 'next-item' | 'prev-item' | 'screenshot' | 'show-shortcuts' | 'next-chapter' | 'prev-chapter';
+type ShortcutAction = 'play-pause' | 'seek-forward-5' | 'seek-backward-5' | 'seek-forward-30' | 'seek-backward-30' | 'volume-up' | 'volume-down' | 'mute' | 'fullscreen' | 'next-item' | 'prev-item' | 'screenshot' | 'show-shortcuts' | 'next-chapter' | 'prev-chapter' | 'frame-step-forward' | 'frame-step-backward' | 'loop-toggle' | 'ab-loop-cycle';
 interface ShortcutBinding {
     action: ShortcutAction;
     label: string;

package/dist/index.js

@@ -1627,7 +1627,11 @@ var DEFAULT_SHORTCUTS = [
   { action: "screenshot", label: "Screenshot", defaultKey: "s", key: "s", modifiers: { ctrl: true } },
   { action: "show-shortcuts", label: "Show Shortcuts Help", defaultKey: "?", key: "?" },
   { action: "next-chapter", label: "Next Chapter", defaultKey: "]", key: "]" },
-  { action: "prev-chapter", label: "Previous Chapter", defaultKey: "[", key: "[" }
+  { action: "prev-chapter", label: "Previous Chapter", defaultKey: "[", key: "[" },
+  { action: "frame-step-forward", label: "Step Forward One Frame", defaultKey: ".", key: "." },
+  { action: "frame-step-backward", label: "Step Backward One Frame", defaultKey: ",", key: "," },
+  { action: "loop-toggle", label: "Toggle Loop", defaultKey: "l", key: "l" },
+  { action: "ab-loop-cycle", label: "A-B Loop (Set/Cycle)", defaultKey: "r", key: "r" }
 ];
 var STORAGE_KEY = "lightbird-shortcuts";
 function loadShortcuts() {
@@ -1661,7 +1665,14 @@ function matchesShortcut(e, binding) {
 function isInteractiveElement(el) {
   if (!el || !(el instanceof HTMLElement)) return false;
   const tag = el.tagName.toLowerCase();
-  return ["input", "textarea", "select", "button", "a"].includes(tag) || el.contentEditable === "true" || el.getAttribute("contenteditable") !== null;
+  if (["input", "textarea", "select"].includes(tag)) return true;
+  if (el.contentEditable === "true" || el.getAttribute("contenteditable") !== null) return true;
+  if (typeof el.closest === "function" && el.closest(
+    '[role="dialog"], [role="alertdialog"], [role="menu"], [data-radix-popper-content-wrapper]'
+  )) {
+    return true;
+  }
+  return false;
 }
 function formatShortcutKey(binding) {
   const mods = [];

package/dist/react/index.cjs

@@ -673,7 +673,14 @@ function matchesShortcut(e, binding) {
 function isInteractiveElement(el) {
   if (!el || !(el instanceof HTMLElement)) return false;
   const tag = el.tagName.toLowerCase();
-  return ["input", "textarea", "select", "button", "a"].includes(tag) || el.contentEditable === "true" || el.getAttribute("contenteditable") !== null;
+  if (["input", "textarea", "select"].includes(tag)) return true;
+  if (el.contentEditable === "true" || el.getAttribute("contenteditable") !== null) return true;
+  if (typeof el.closest === "function" && el.closest(
+    '[role="dialog"], [role="alertdialog"], [role="menu"], [data-radix-popper-content-wrapper]'
+  )) {
+    return true;
+  }
+  return false;
 }
 
 // src/react/use-keyboard-shortcuts.ts
@@ -1332,6 +1339,66 @@ function useABLoop(videoRef) {
     clear
   };
 }
+function useSmoothProgress(videoRef, { isPlaying, fallback = 0 }) {
+  const [progress, setProgress] = react.useState(() => {
+    const el = videoRef.current;
+    return el ? el.currentTime : fallback;
+  });
+  const rafRef = react.useRef(null);
+  react.useEffect(() => {
+    const el = videoRef.current;
+    if (!el) {
+      setProgress(fallback);
+      return;
+    }
+    if (!isPlaying) {
+      setProgress(el.currentTime);
+      return;
+    }
+    const isHidden = () => typeof document !== "undefined" && document.visibilityState === "hidden";
+    let cancelled = false;
+    const tick = () => {
+      if (cancelled) return;
+      const current = videoRef.current;
+      if (!current) {
+        setProgress(fallback);
+        stop();
+        return;
+      }
+      setProgress(current.currentTime);
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    const start = () => {
+      if (rafRef.current != null || isHidden()) return;
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    const stop = () => {
+      if (rafRef.current != null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+    const onVisibility = () => {
+      if (isHidden()) {
+        stop();
+      } else {
+        start();
+      }
+    };
+    start();
+    if (typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", onVisibility);
+    }
+    return () => {
+      cancelled = true;
+      stop();
+      if (typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", onVisibility);
+      }
+    };
+  }, [isPlaying, videoRef, fallback]);
+  return progress;
+}
 var SWIPE_THRESHOLD = 10;
 var DOUBLE_TAP_DISTANCE = 40;
 function useTouchGestures(targetRef, handlers, options = {}) {
@@ -1463,6 +1530,7 @@ exports.usePictureInPicture = usePictureInPicture;
 exports.usePlaylist = usePlaylist;
 exports.useProgressPersistence = useProgressPersistence;
 exports.useSeekPreview = useSeekPreview;
+exports.useSmoothProgress = useSmoothProgress;
 exports.useSubtitles = useSubtitles;
 exports.useTouchGestures = useTouchGestures;
 exports.useVideoFilters = useVideoFilters;

package/dist/react/index.d.cts

@@ -183,7 +183,7 @@ declare function usePlaylist(): {
     setCurrentIndex: react.Dispatch<react.SetStateAction<number | null>>;
 };
 
-type ShortcutAction = 'play-pause' | 'seek-forward-5' | 'seek-backward-5' | 'seek-forward-30' | 'seek-backward-30' | 'volume-up' | 'volume-down' | 'mute' | 'fullscreen' | 'next-item' | 'prev-item' | 'screenshot' | 'show-shortcuts' | 'next-chapter' | 'prev-chapter';
+type ShortcutAction = 'play-pause' | 'seek-forward-5' | 'seek-backward-5' | 'seek-forward-30' | 'seek-backward-30' | 'volume-up' | 'volume-down' | 'mute' | 'fullscreen' | 'next-item' | 'prev-item' | 'screenshot' | 'show-shortcuts' | 'next-chapter' | 'prev-chapter' | 'frame-step-forward' | 'frame-step-backward' | 'loop-toggle' | 'ab-loop-cycle';
 interface ShortcutBinding {
     action: ShortcutAction;
     label: string;
@@ -335,6 +335,20 @@ interface ABLoopState {
  */
 declare function useABLoop(videoRef: RefObject<HTMLVideoElement | null>): ABLoopState;
 
+interface UseSmoothProgressOptions {
+    isPlaying: boolean;
+    fallback?: number;
+}
+/**
+ * Drives a `progress` value at requestAnimationFrame rate by reading
+ * `videoRef.current.currentTime` each frame while playing. Decouples the
+ * visual seek-bar position from the video element's coarse `timeupdate`
+ * events (~4Hz) so the thumb glides instead of stepping.
+ *
+ * Pauses the rAF loop when not playing or when the tab is hidden.
+ */
+declare function useSmoothProgress(videoRef: RefObject<HTMLVideoElement | null>, { isPlaying, fallback }: UseSmoothProgressOptions): number;
+
 interface TouchGestureHandlers {
     /** Seek relative to the current time by a signed number of seconds. */
     seekBy?: (seconds: number) => void;
@@ -384,4 +398,4 @@ interface TouchGesturesState {
  */
 declare function useTouchGestures(targetRef: RefObject<HTMLElement | null>, handlers: TouchGestureHandlers, options?: UseTouchGesturesOptions): TouchGesturesState;
 
-export { type ABLoopState, type SeekPreviewState, type ShortcutHandlers, type TouchGestureFeedback, type TouchGestureHandlers, type TouchGesturesState, type UseMagnetReturn, type UseMediaSessionOptions, type UseSeekPreviewOptions, type UseSubtitlesOptions, type UseTouchGesturesOptions, useABLoop, useChapters, useFullscreen, useKeyboardShortcuts, useMagnet, useMediaSession, usePictureInPicture, usePlaylist, useProgressPersistence, useSeekPreview, useSubtitles, useTouchGestures, useVideoFilters, useVideoInfo, useVideoPlayback };
+export { type ABLoopState, type SeekPreviewState, type ShortcutHandlers, type TouchGestureFeedback, type TouchGestureHandlers, type TouchGesturesState, type UseMagnetReturn, type UseMediaSessionOptions, type UseSeekPreviewOptions, type UseSubtitlesOptions, type UseTouchGesturesOptions, useABLoop, useChapters, useFullscreen, useKeyboardShortcuts, useMagnet, useMediaSession, usePictureInPicture, usePlaylist, useProgressPersistence, useSeekPreview, useSmoothProgress, useSubtitles, useTouchGestures, useVideoFilters, useVideoInfo, useVideoPlayback };

package/dist/react/index.d.ts

@@ -183,7 +183,7 @@ declare function usePlaylist(): {
     setCurrentIndex: react.Dispatch<react.SetStateAction<number | null>>;
 };
 
-type ShortcutAction = 'play-pause' | 'seek-forward-5' | 'seek-backward-5' | 'seek-forward-30' | 'seek-backward-30' | 'volume-up' | 'volume-down' | 'mute' | 'fullscreen' | 'next-item' | 'prev-item' | 'screenshot' | 'show-shortcuts' | 'next-chapter' | 'prev-chapter';
+type ShortcutAction = 'play-pause' | 'seek-forward-5' | 'seek-backward-5' | 'seek-forward-30' | 'seek-backward-30' | 'volume-up' | 'volume-down' | 'mute' | 'fullscreen' | 'next-item' | 'prev-item' | 'screenshot' | 'show-shortcuts' | 'next-chapter' | 'prev-chapter' | 'frame-step-forward' | 'frame-step-backward' | 'loop-toggle' | 'ab-loop-cycle';
 interface ShortcutBinding {
     action: ShortcutAction;
     label: string;
@@ -335,6 +335,20 @@ interface ABLoopState {
  */
 declare function useABLoop(videoRef: RefObject<HTMLVideoElement | null>): ABLoopState;
 
+interface UseSmoothProgressOptions {
+    isPlaying: boolean;
+    fallback?: number;
+}
+/**
+ * Drives a `progress` value at requestAnimationFrame rate by reading
+ * `videoRef.current.currentTime` each frame while playing. Decouples the
+ * visual seek-bar position from the video element's coarse `timeupdate`
+ * events (~4Hz) so the thumb glides instead of stepping.
+ *
+ * Pauses the rAF loop when not playing or when the tab is hidden.
+ */
+declare function useSmoothProgress(videoRef: RefObject<HTMLVideoElement | null>, { isPlaying, fallback }: UseSmoothProgressOptions): number;
+
 interface TouchGestureHandlers {
     /** Seek relative to the current time by a signed number of seconds. */
     seekBy?: (seconds: number) => void;
@@ -384,4 +398,4 @@ interface TouchGesturesState {
  */
 declare function useTouchGestures(targetRef: RefObject<HTMLElement | null>, handlers: TouchGestureHandlers, options?: UseTouchGesturesOptions): TouchGesturesState;
 
-export { type ABLoopState, type SeekPreviewState, type ShortcutHandlers, type TouchGestureFeedback, type TouchGestureHandlers, type TouchGesturesState, type UseMagnetReturn, type UseMediaSessionOptions, type UseSeekPreviewOptions, type UseSubtitlesOptions, type UseTouchGesturesOptions, useABLoop, useChapters, useFullscreen, useKeyboardShortcuts, useMagnet, useMediaSession, usePictureInPicture, usePlaylist, useProgressPersistence, useSeekPreview, useSubtitles, useTouchGestures, useVideoFilters, useVideoInfo, useVideoPlayback };
+export { type ABLoopState, type SeekPreviewState, type ShortcutHandlers, type TouchGestureFeedback, type TouchGestureHandlers, type TouchGesturesState, type UseMagnetReturn, type UseMediaSessionOptions, type UseSeekPreviewOptions, type UseSubtitlesOptions, type UseTouchGesturesOptions, useABLoop, useChapters, useFullscreen, useKeyboardShortcuts, useMagnet, useMediaSession, usePictureInPicture, usePlaylist, useProgressPersistence, useSeekPreview, useSmoothProgress, useSubtitles, useTouchGestures, useVideoFilters, useVideoInfo, useVideoPlayback };

package/dist/react/index.js

@@ -671,7 +671,14 @@ function matchesShortcut(e, binding) {
 function isInteractiveElement(el) {
   if (!el || !(el instanceof HTMLElement)) return false;
   const tag = el.tagName.toLowerCase();
-  return ["input", "textarea", "select", "button", "a"].includes(tag) || el.contentEditable === "true" || el.getAttribute("contenteditable") !== null;
+  if (["input", "textarea", "select"].includes(tag)) return true;
+  if (el.contentEditable === "true" || el.getAttribute("contenteditable") !== null) return true;
+  if (typeof el.closest === "function" && el.closest(
+    '[role="dialog"], [role="alertdialog"], [role="menu"], [data-radix-popper-content-wrapper]'
+  )) {
+    return true;
+  }
+  return false;
 }
 
 // src/react/use-keyboard-shortcuts.ts
@@ -1330,6 +1337,66 @@ function useABLoop(videoRef) {
     clear
   };
 }
+function useSmoothProgress(videoRef, { isPlaying, fallback = 0 }) {
+  const [progress, setProgress] = useState(() => {
+    const el = videoRef.current;
+    return el ? el.currentTime : fallback;
+  });
+  const rafRef = useRef(null);
+  useEffect(() => {
+    const el = videoRef.current;
+    if (!el) {
+      setProgress(fallback);
+      return;
+    }
+    if (!isPlaying) {
+      setProgress(el.currentTime);
+      return;
+    }
+    const isHidden = () => typeof document !== "undefined" && document.visibilityState === "hidden";
+    let cancelled = false;
+    const tick = () => {
+      if (cancelled) return;
+      const current = videoRef.current;
+      if (!current) {
+        setProgress(fallback);
+        stop();
+        return;
+      }
+      setProgress(current.currentTime);
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    const start = () => {
+      if (rafRef.current != null || isHidden()) return;
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    const stop = () => {
+      if (rafRef.current != null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+    const onVisibility = () => {
+      if (isHidden()) {
+        stop();
+      } else {
+        start();
+      }
+    };
+    start();
+    if (typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", onVisibility);
+    }
+    return () => {
+      cancelled = true;
+      stop();
+      if (typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", onVisibility);
+      }
+    };
+  }, [isPlaying, videoRef, fallback]);
+  return progress;
+}
 var SWIPE_THRESHOLD = 10;
 var DOUBLE_TAP_DISTANCE = 40;
 function useTouchGestures(targetRef, handlers, options = {}) {
@@ -1451,4 +1518,4 @@ function useTouchGestures(targetRef, handlers, options = {}) {
   return { feedback };
 }
 
-export { useABLoop, useChapters, useFullscreen, useKeyboardShortcuts, useMagnet, useMediaSession, usePictureInPicture, usePlaylist, useProgressPersistence, useSeekPreview, useSubtitles, useTouchGestures, useVideoFilters, useVideoInfo, useVideoPlayback };
+export { useABLoop, useChapters, useFullscreen, useKeyboardShortcuts, useMagnet, useMediaSession, usePictureInPicture, usePlaylist, useProgressPersistence, useSeekPreview, useSmoothProgress, useSubtitles, useTouchGestures, useVideoFilters, useVideoInfo, useVideoPlayback };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightbird/core",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Client-side video player engine. Plays MKV, MP4, WebM with full subtitle, audio track, and chapter support. No server required.",
   "license": "MIT",
   "author": "Punyam Singh",