@lightbird/ui 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -1933,7 +1933,6 @@ var MAX_RETRIES = 3;
 var LightBirdPlayer = () => {
   const videoRef = React11.useRef(null);
   const containerRef = React11.useRef(null);
-  const canvasRef = React11.useRef(null);
   const subtitleInputRef = React11.useRef(null);
   const playerRef = React11.useRef(null);
   const subtitleFilesMapRef = React11.useRef(/* @__PURE__ */ new Map());
@@ -2425,19 +2424,17 @@ var LightBirdPlayer = () => {
   }, [toast2]);
   const captureScreenshot = React11.useCallback(() => {
     const video = videoRef.current;
-    const canvas = canvasRef.current;
-    if (!video || !canvas) return;
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    ctx.filter = video.style.filter;
-    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-    const dataUrl = canvas.toDataURL("image/png");
-    const a = document.createElement("a");
-    a.href = dataUrl;
-    a.download = `lightbird-screenshot-${(/* @__PURE__ */ new Date()).toISOString()}.png`;
-    a.click();
+    if (!video) return;
+    const dataUrl = core.exportVideoFrame(video, { filter: video.style.filter });
+    if (!dataUrl) {
+      toast2({
+        title: "Screenshot failed",
+        description: "The frame could not be captured (the video may be cross-origin protected).",
+        variant: "destructive"
+      });
+      return;
+    }
+    core.downloadDataUrl(dataUrl, core.frameExportFilename("png"));
     toast2({ title: "Screenshot Saved" });
   }, [toast2]);
   const handleABLoopCycle = React11.useCallback(() => {
@@ -2516,7 +2513,6 @@ var LightBirdPlayer = () => {
               crossOrigin: "anonymous"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "hidden" }),
           /* @__PURE__ */ jsxRuntime.jsx(SubtitleOverlay, { videoRef, activeSubtitle: subtitles.activeSubtitle }),
           /* @__PURE__ */ jsxRuntime.jsx(
             VideoOverlay,

package/dist/index.js

@@ -18,7 +18,7 @@ import { SortableContext, verticalListSortingStrategy, arrayMove, useSortable }
 import { CSS } from '@dnd-kit/utilities';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { exportPlaylist, formatShortcutKey, FLAG_MAGNET_LINK, loadShortcuts, ProgressEstimator, createVideoPlayer, CancellationError, hasAcceptedDisclaimer, acceptDisclaimer, initFeatureFlags, parseMediaError, captureVideoThumbnail, validateFile, parseM3U8, matchesShortcut, saveShortcuts, DEFAULT_SHORTCUTS } from '@lightbird/core';
+import { exportPlaylist, formatShortcutKey, FLAG_MAGNET_LINK, loadShortcuts, ProgressEstimator, createVideoPlayer, CancellationError, hasAcceptedDisclaimer, acceptDisclaimer, exportVideoFrame, downloadDataUrl, frameExportFilename, initFeatureFlags, parseMediaError, captureVideoThumbnail, validateFile, parseM3U8, matchesShortcut, saveShortcuts, DEFAULT_SHORTCUTS } from '@lightbird/core';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useBooleanFlagValue, OpenFeatureProvider } from '@openfeature/react-sdk';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
@@ -1902,7 +1902,6 @@ var MAX_RETRIES = 3;
 var LightBirdPlayer = () => {
   const videoRef = useRef(null);
   const containerRef = useRef(null);
-  const canvasRef = useRef(null);
   const subtitleInputRef = useRef(null);
   const playerRef = useRef(null);
   const subtitleFilesMapRef = useRef(/* @__PURE__ */ new Map());
@@ -2394,19 +2393,17 @@ var LightBirdPlayer = () => {
   }, [toast2]);
   const captureScreenshot = useCallback(() => {
     const video = videoRef.current;
-    const canvas = canvasRef.current;
-    if (!video || !canvas) return;
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    ctx.filter = video.style.filter;
-    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-    const dataUrl = canvas.toDataURL("image/png");
-    const a = document.createElement("a");
-    a.href = dataUrl;
-    a.download = `lightbird-screenshot-${(/* @__PURE__ */ new Date()).toISOString()}.png`;
-    a.click();
+    if (!video) return;
+    const dataUrl = exportVideoFrame(video, { filter: video.style.filter });
+    if (!dataUrl) {
+      toast2({
+        title: "Screenshot failed",
+        description: "The frame could not be captured (the video may be cross-origin protected).",
+        variant: "destructive"
+      });
+      return;
+    }
+    downloadDataUrl(dataUrl, frameExportFilename("png"));
     toast2({ title: "Screenshot Saved" });
   }, [toast2]);
   const handleABLoopCycle = useCallback(() => {
@@ -2485,7 +2482,6 @@ var LightBirdPlayer = () => {
               crossOrigin: "anonymous"
             }
           ),
-          /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "hidden" }),
           /* @__PURE__ */ jsx(SubtitleOverlay, { videoRef, activeSubtitle: subtitles.activeSubtitle }),
           /* @__PURE__ */ jsx(
             VideoOverlay,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightbird/ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Drop-in React video player component powered by LightBird. Full controls, playlist, subtitles, chapters — one import.",
   "license": "MIT",
   "author": "Punyam Singh",
@@ -65,7 +65,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",
     "tailwind-merge": "^3.0.1",
-    "@lightbird/core": "0.7.0"
+    "@lightbird/core": "0.8.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",