@lightbird/ui 0.7.0 → 0.9.0

package/dist/index.cjs

@@ -1436,6 +1436,7 @@ function VideoInfoPanel({ metadata, onClose }) {
     ["Frame Rate", metadata.frameRate ? `${metadata.frameRate} fps` : "\u2014"],
     ["Video Codec", metadata.videoCodec ?? "\u2014"],
     ["Video Bitrate", formatBitrate(metadata.videoBitrate)],
+    ...metadata.streamRenditions ? [["Stream Renditions", `${metadata.streamRenditions} levels`]] : [],
     ...metadata.audioTracks.map(
       (t, i) => [
         `Audio ${i + 1}`,
@@ -1933,7 +1934,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());
@@ -1963,7 +1963,7 @@ var LightBirdPlayer = () => {
     getBrightness: () => filters.filters.brightness / 200,
     setBrightness: (v) => filters.setFilters({ ...filters.filters, brightness: Math.round(v * 200) })
   });
-  const { metadata: videoMetadata } = react.useVideoInfo(videoRef, playlist.currentItem?.file ?? null);
+  const { metadata: videoMetadata, enrichMetadata } = react.useVideoInfo(videoRef, playlist.currentItem?.file ?? null);
   react.useProgressPersistence(videoRef, playlist.currentItem?.name ?? null);
   const { chapters, currentChapter, goToChapter } = react.useChapters(videoRef, playerRef);
   const magnetLinkEnabled = reactSdk.useBooleanFlagValue(core.FLAG_MAGNET_LINK, true);
@@ -2177,19 +2177,37 @@ var LightBirdPlayer = () => {
     if (item.type === "stream") {
       playerRef.current?.destroy();
       playerRef.current = null;
-      if (videoRef.current) videoRef.current.src = item.url;
       subtitles.reset();
       setAudioTracks([]);
       setActiveAudioTrack("0");
       isStreamRef.current = true;
       startStallDetection();
+      if (core.isHlsUrl(item.url) && videoRef.current) {
+        const player = core.createVideoPlayer(item.url);
+        playerRef.current = player;
+        player.initialize(videoRef.current).then(() => {
+          const refresh = () => {
+            if (playerRef.current !== player) return;
+            enrichMetadata(player.getMetadata?.() ?? {});
+            const tracks = player.getAudioTracks();
+            setAudioTracks(tracks);
+            setActiveAudioTrack((prev) => prev || tracks[0]?.id || "0");
+          };
+          player.onMetadataChange?.(refresh);
+          refresh();
+        }).catch((error) => {
+          console.error(error);
+        });
+      } else if (videoRef.current) {
+        videoRef.current.src = item.url;
+      }
     } else if (item.file) {
       isStreamRef.current = false;
       stopStallDetection();
       const subs = subtitleFilesMapRef.current.get(item.name) ?? [];
       processFile(item.file, subs);
     }
-  }, [playlist.playlist, playlist.selectItem, subtitles, processFile]);
+  }, [playlist.playlist, playlist.selectItem, subtitles, processFile, enrichMetadata]);
   const handleSkipToNext = React11.useCallback(() => {
     setPlayerError(null);
     clearRetryTimer();
@@ -2425,19 +2443,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 +2532,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, isHlsUrl, 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';
@@ -1405,6 +1405,7 @@ function VideoInfoPanel({ metadata, onClose }) {
     ["Frame Rate", metadata.frameRate ? `${metadata.frameRate} fps` : "\u2014"],
     ["Video Codec", metadata.videoCodec ?? "\u2014"],
     ["Video Bitrate", formatBitrate(metadata.videoBitrate)],
+    ...metadata.streamRenditions ? [["Stream Renditions", `${metadata.streamRenditions} levels`]] : [],
     ...metadata.audioTracks.map(
       (t, i) => [
         `Audio ${i + 1}`,
@@ -1902,7 +1903,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());
@@ -1932,7 +1932,7 @@ var LightBirdPlayer = () => {
     getBrightness: () => filters.filters.brightness / 200,
     setBrightness: (v) => filters.setFilters({ ...filters.filters, brightness: Math.round(v * 200) })
   });
-  const { metadata: videoMetadata } = useVideoInfo(videoRef, playlist.currentItem?.file ?? null);
+  const { metadata: videoMetadata, enrichMetadata } = useVideoInfo(videoRef, playlist.currentItem?.file ?? null);
   useProgressPersistence(videoRef, playlist.currentItem?.name ?? null);
   const { chapters, currentChapter, goToChapter } = useChapters(videoRef, playerRef);
   const magnetLinkEnabled = useBooleanFlagValue(FLAG_MAGNET_LINK, true);
@@ -2146,19 +2146,37 @@ var LightBirdPlayer = () => {
     if (item.type === "stream") {
       playerRef.current?.destroy();
       playerRef.current = null;
-      if (videoRef.current) videoRef.current.src = item.url;
       subtitles.reset();
       setAudioTracks([]);
       setActiveAudioTrack("0");
       isStreamRef.current = true;
       startStallDetection();
+      if (isHlsUrl(item.url) && videoRef.current) {
+        const player = createVideoPlayer(item.url);
+        playerRef.current = player;
+        player.initialize(videoRef.current).then(() => {
+          const refresh = () => {
+            if (playerRef.current !== player) return;
+            enrichMetadata(player.getMetadata?.() ?? {});
+            const tracks = player.getAudioTracks();
+            setAudioTracks(tracks);
+            setActiveAudioTrack((prev) => prev || tracks[0]?.id || "0");
+          };
+          player.onMetadataChange?.(refresh);
+          refresh();
+        }).catch((error) => {
+          console.error(error);
+        });
+      } else if (videoRef.current) {
+        videoRef.current.src = item.url;
+      }
     } else if (item.file) {
       isStreamRef.current = false;
       stopStallDetection();
       const subs = subtitleFilesMapRef.current.get(item.name) ?? [];
       processFile(item.file, subs);
     }
-  }, [playlist.playlist, playlist.selectItem, subtitles, processFile]);
+  }, [playlist.playlist, playlist.selectItem, subtitles, processFile, enrichMetadata]);
   const handleSkipToNext = useCallback(() => {
     setPlayerError(null);
     clearRetryTimer();
@@ -2394,19 +2412,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 +2501,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.9.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.9.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",