@lightbird/ui 0.8.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}`,
@@ -1962,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);
@@ -2176,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();

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, exportVideoFrame, downloadDataUrl, frameExportFilename, 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}`,
@@ -1931,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);
@@ -2145,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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightbird/ui",
-  "version": "0.8.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.8.0"
+    "@lightbird/core": "0.9.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",