@hanifhan1f/vidstack-react 1.12.17 → 1.12.19

package/server/chunks/{vidstack-CWR0J8Qz.js → vidstack-Ct1NFlBa.js}

@@ -1328,7 +1328,7 @@ function DefaultVideoLargeLayout() {
   React.useEffect(() => {
     if (!$fullscreen) setEpisodesOpen(false);
   }, [$fullscreen]);
-  const canOpenEpisodes = ($fullscreen || isSmallLayout) && list.length > 0;
+  const canOpenEpisodes = $fullscreen && list.length > 0;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DefaultAnnouncer, null), /* @__PURE__ */ React.createElement(DefaultVideoGestures, null), /* @__PURE__ */ React.createElement(DefaultVideoKeyboardDisplay, null), slot(slots, "bufferingIndicator", /* @__PURE__ */ React.createElement(DefaultBufferingIndicator, null)), slot(slots, "captions", /* @__PURE__ */ React.createElement(DefaultCaptions, null)), /* @__PURE__ */ React.createElement(Root$a, { className: "vds-controls" }, /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, slot(slots, "topControlsGroupStart", null), /* @__PURE__ */ React.createElement(DefaultControlsSpacer, null), slot(slots, "topControlsGroupCenter", null), /* @__PURE__ */ React.createElement(DefaultControlsSpacer, null), slot(slots, "topControlsGroupEnd", null), menuGroup === "top" && /* @__PURE__ */ React.createElement(DefaultVideoMenus, { slots })), /* @__PURE__ */ React.createElement(DefaultControlsSpacer, null), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, slot(slots, "centerControlsGroupStart", null), /* @__PURE__ */ React.createElement(DefaultControlsSpacer, null), slot(slots, "centerControlsGroupCenter", null), /* @__PURE__ */ React.createElement(DefaultControlsSpacer, null), slot(slots, "centerControlsGroupEnd", null)), /* @__PURE__ */ React.createElement(DefaultControlsSpacer, null), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, slot(slots, "timeSlider", /* @__PURE__ */ React.createElement(DefaultTimeSlider, null))), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, slot(slots, "playButton", /* @__PURE__ */ React.createElement(DefaultPlayButton, { tooltip: "top start" })), /* @__PURE__ */ React.createElement(DefaultSeekButton, { backward: true, tooltip: "top" }), /* @__PURE__ */ React.createElement(DefaultSeekButton, { tooltip: "top" }), /* @__PURE__ */ React.createElement(DefaultVolumePopup, { orientation: "horizontal", tooltip: "top", slots }), /* @__PURE__ */ React.createElement(DefaultTimeInfo, { slots }), slot(slots, "chapterTitle", /* @__PURE__ */ React.createElement(DefaultTitle, null)), canOpenEpisodes ? /* @__PURE__ */ React.createElement(DefaultEpisodeButton, { tooltip: "top", onPress: () => setEpisodesOpen((open) => !open) }) : null, slot(slots, "captionButton", /* @__PURE__ */ React.createElement(DefaultCaptionButton, { tooltip: "top" })), menuGroup === "bottom" && /* @__PURE__ */ React.createElement(DefaultVideoMenus, { slots }), slot(slots, "airPlayButton", /* @__PURE__ */ React.createElement(DefaultAirPlayButton, { tooltip: "top" })), slot(slots, "googleCastButton", /* @__PURE__ */ React.createElement(DefaultGoogleCastButton, { tooltip: "top" })), slot(slots, "downloadButton", /* @__PURE__ */ React.createElement(DefaultDownloadButton, null)), slot(slots, "pipButton", /* @__PURE__ */ React.createElement(DefaultPIPButton, { tooltip: "top" })), slot(slots, "fullscreenButton", /* @__PURE__ */ React.createElement(DefaultFullscreenButton, { tooltip: "top end" })))), /* @__PURE__ */ React.createElement(
     DefaultEpisodesSidebar,
     {
@@ -1345,7 +1345,7 @@ function DefaultVideoSmallLayout() {
   React.useEffect(() => {
     if (!$fullscreen) setEpisodesOpen(false);
   }, [$fullscreen]);
-  const canOpenEpisodes = ($fullscreen || isSmallLayout) && list.length > 0;
+  const canOpenEpisodes = $fullscreen && list.length > 0;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DefaultAnnouncer, null), /* @__PURE__ */ React.createElement(DefaultVideoGestures, null), /* @__PURE__ */ React.createElement(DefaultVideoKeyboardDisplay, null), slot(slots, "bufferingIndicator", /* @__PURE__ */ React.createElement(DefaultBufferingIndicator, null)), slot(slots, "captions", /* @__PURE__ */ React.createElement(DefaultCaptions, null)), /* @__PURE__ */ React.createElement(Root$a, { className: "vds-controls" }, /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, slot(slots, "topControlsGroupStart", null), slot(slots, "airPlayButton", /* @__PURE__ */ React.createElement(DefaultAirPlayButton, { tooltip: "top start" })), slot(slots, "googleCastButton", /* @__PURE__ */ React.createElement(DefaultGoogleCastButton, { tooltip: "top start" })), /* @__PURE__ */ React.createElement(DefaultControlsSpacer, null), slot(slots, "topControlsGroupCenter", null), /* @__PURE__ */ React.createElement(DefaultControlsSpacer, null), slot(slots, "captionButton", /* @__PURE__ */ React.createElement(DefaultCaptionButton, { tooltip: "bottom" })), slot(slots, "downloadButton", /* @__PURE__ */ React.createElement(DefaultDownloadButton, null)), /* @__PURE__ */ React.createElement(DefaultVideoMenus, { slots }), /* @__PURE__ */ React.createElement(DefaultVolumePopup, { orientation: "vertical", tooltip: "bottom end", slots }), slot(slots, "topControlsGroupEnd", null)), /* @__PURE__ */ React.createElement(DefaultControlsSpacer, null), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, slot(slots, "centerControlsGroupStart", null), /* @__PURE__ */ React.createElement(DefaultControlsSpacer, null), /* @__PURE__ */ React.createElement(DefaultSeekButton, { backward: true, tooltip: "top" }), slot(slots, "centerControlsGroupCenter", null), slot(slots, "playButton", /* @__PURE__ */ React.createElement(DefaultPlayButton, { tooltip: "top" })), /* @__PURE__ */ React.createElement(DefaultSeekButton, { tooltip: "top" }), canOpenEpisodes ? /* @__PURE__ */ React.createElement(DefaultEpisodeButton, { tooltip: "top", onPress: () => setEpisodesOpen((open) => !open) }) : null, /* @__PURE__ */ React.createElement(DefaultControlsSpacer, null), slot(slots, "centerControlsGroupEnd", null)), /* @__PURE__ */ React.createElement(DefaultControlsSpacer, null), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultTimeInfo, { slots }), slot(slots, "chapterTitle", /* @__PURE__ */ React.createElement(DefaultTitle, null)), slot(slots, "fullscreenButton", /* @__PURE__ */ React.createElement(DefaultFullscreenButton, { tooltip: "top end" }))), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, slot(slots, "timeSlider", /* @__PURE__ */ React.createElement(DefaultTimeSlider, null)))), slot(slots, "startDuration", /* @__PURE__ */ React.createElement(DefaultVideoStartDuration, null)), /* @__PURE__ */ React.createElement(
     DefaultEpisodesSidebar,
     {
@@ -1401,14 +1401,33 @@ function DefaultVideoMenus({ slots }) {
   ));
 }
 DefaultVideoMenus.displayName = "DefaultVideoMenus";
+function formatMinutesLeftLabel(secondsLeft) {
+  if (secondsLeft <= 0) return null;
+  if (secondsLeft < 60) return "<1m left";
+  const m = Math.floor(secondsLeft / 60);
+  return `${m}m left`;
+}
 function DefaultEpisodesSidebar({
   open,
   onClose,
   episodes,
   episodesTitle
 }) {
-  const $fullscreen = useMediaState("fullscreen"), { isSmallLayout } = useDefaultLayoutContext();
-  if (!$fullscreen && !isSmallLayout || episodes.length === 0) return null;
+  const $fullscreen = useMediaState("fullscreen"), currentTime = useMediaState("currentTime"), duration = useMediaState("duration"), listRef = React.useRef(null), wasEpisodesOpenRef = React.useRef(false);
+  React.useLayoutEffect(() => {
+    const justOpened = open && !wasEpisodesOpenRef.current;
+    wasEpisodesOpenRef.current = open;
+    if (!justOpened || !$fullscreen) return;
+    const root = listRef.current;
+    if (!root) return;
+    requestAnimationFrame(() => {
+      root.querySelector('[data-active="true"]')?.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    });
+  }, [open, $fullscreen]);
+  if (!$fullscreen || episodes.length === 0) return null;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -1438,12 +1457,15 @@ function DefaultEpisodesSidebar({
             onClose();
           }
         },
-        /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true" }, "x")
+        /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true" }, "\u2715")
       )),
-      /* @__PURE__ */ React.createElement("div", { className: "vds-episodes-list", role: "list" }, episodes.map((episode, index) => {
-        const episodeName = episode.episodeTitle || `Episode ${episode.episodeNumber ?? index + 1}`, runtimeText = Number.isFinite(episode.runtime) ? `${episode.runtime}m` : null, seasonEpLabel = episode.seasonNumber != null && episode.episodeNumber != null ? `S${String(episode.seasonNumber).padStart(2, "0")} \xB7 E${String(episode.episodeNumber).padStart(2, "0")}` : episodeName;
+      /* @__PURE__ */ React.createElement("div", { ref: listRef, className: "vds-episodes-list", role: "list" }, episodes.map((episode, index) => {
+        const episodeName = episode.episodeTitle || `Episode ${episode.episodeNumber ?? index + 1}`;
+        const seasonEpLabel = episode.seasonNumber != null && episode.episodeNumber != null ? `S${String(episode.seasonNumber).padStart(2, "0")} \xB7 E${String(episode.episodeNumber).padStart(2, "0")}` : episodeName;
+        const isActive = !!episode.isActive;
         const onEpisodeSelect = (event) => {
           event.stopPropagation();
+          if (isActive) return;
           event.currentTarget.dispatchEvent(
             new CustomEvent("vds-episode-select", {
               bubbles: true,
@@ -1453,11 +1475,29 @@ function DefaultEpisodesSidebar({
           );
           onClose();
         };
+        let runtimeText = null;
+        if (isActive && duration > 0) {
+          const secsLeft = Math.max(0, duration - currentTime);
+          runtimeText = formatMinutesLeftLabel(secsLeft);
+        } else if (episode.timeLeft != null && episode.timeLeft > 0) {
+          runtimeText = `${episode.timeLeft}m left`;
+        } else if (Number.isFinite(episode.runtime) && (episode.runtime ?? 0) > 0) {
+          runtimeText = `${episode.runtime}m`;
+        }
+        let progressPct = 0;
+        if (isActive && duration > 0) {
+          progressPct = Math.min(100, currentTime / duration * 100);
+        } else if (episode.progressPercent != null && episode.progressPercent > 0) {
+          progressPct = Math.min(100, episode.progressPercent);
+        }
+        const showSubtitle = !!episode.episodeTitle && episode.episodeTitle.trim() !== "" && episode.episodeTitle !== episode.title;
         return /* @__PURE__ */ React.createElement(
           "article",
           {
             key: `${episode.episodeNumber ?? index}-${episode.title ?? ""}`,
             className: "vds-episode-item",
+            "data-active": isActive ? "true" : "false",
+            "aria-current": isActive ? "true" : void 0,
             role: "button",
             tabIndex: 0,
             "aria-label": episode.title || episodeName,
@@ -1475,8 +1515,8 @@ function DefaultEpisodesSidebar({
               loading: "lazy",
               decoding: "async"
             }
-          ) : /* @__PURE__ */ React.createElement("div", { className: "vds-episode-thumb vds-episode-thumb-placeholder" })),
-          /* @__PURE__ */ React.createElement("div", { className: "vds-episode-body" }, /* @__PURE__ */ React.createElement("div", { className: "vds-episode-meta-row" }, /* @__PURE__ */ React.createElement("span", { className: "vds-episode-label" }, seasonEpLabel), runtimeText ? /* @__PURE__ */ React.createElement("span", { className: "vds-episode-runtime" }, runtimeText) : null), /* @__PURE__ */ React.createElement("h4", { className: "vds-episode-title", title: episode.title || "" }, episode.title || "-"), /* @__PURE__ */ React.createElement("p", { className: "vds-episode-subtitle", title: episodeName }, episodeName), episode.overview ? /* @__PURE__ */ React.createElement("p", { className: "vds-episode-desc", title: episode.overview }, episode.overview) : null)
+          ) : /* @__PURE__ */ React.createElement("div", { className: "vds-episode-thumb vds-episode-thumb-placeholder" }), isActive ? /* @__PURE__ */ React.createElement("div", { className: "vds-episode-active-overlay", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("span", { className: "vds-episode-playing-badge" }, "Now playing")) : null, progressPct > 0 ? /* @__PURE__ */ React.createElement("div", { className: "vds-episode-progress-track", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("div", { className: "vds-episode-progress-fill", style: { width: `${progressPct}%` } })) : null),
+          /* @__PURE__ */ React.createElement("div", { className: "vds-episode-body" }, /* @__PURE__ */ React.createElement("div", { className: "vds-episode-meta-row" }, /* @__PURE__ */ React.createElement("span", { className: "vds-episode-label" }, seasonEpLabel), runtimeText ? /* @__PURE__ */ React.createElement("span", { className: "vds-episode-runtime" }, runtimeText) : null), /* @__PURE__ */ React.createElement("h4", { className: "vds-episode-title", title: episode.title || "" }, episode.title || "-"), showSubtitle ? /* @__PURE__ */ React.createElement("p", { className: "vds-episode-subtitle", title: episode.episodeTitle }, episode.episodeTitle) : null, episode.overview ? /* @__PURE__ */ React.createElement("p", { className: "vds-episode-desc", title: episode.overview }, episode.overview) : null)
         );
       }))
     )

package/server/chunks/{vidstack-C6mbdfF1.js → vidstack-DTn72IA8.js}

@@ -1441,7 +1441,8 @@ function DefaultEpisodesSidebar({
         /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true" }, "x")
       )),
       /* @__PURE__ */ React.createElement("div", { className: "vds-episodes-list", role: "list" }, episodes.map((episode, index) => {
-        const episodeName = episode.episodeTitle || `Episode ${episode.episodeNumber ?? index + 1}`, runtimeText = Number.isFinite(episode.runtime) && (episode.runtime ?? 0) > 0 ? `${episode.runtime} min left` : null, seasonEpLabel = episode.seasonNumber != null && episode.episodeNumber != null ? `S${String(episode.seasonNumber).padStart(2, "0")} \xB7 E${String(episode.episodeNumber).padStart(2, "0")}` : episodeName;
+        const episodeName = episode.episodeTitle || `Episode ${episode.episodeNumber ?? index + 1}`;
+        const seasonEpLabel = episode.seasonNumber != null && episode.episodeNumber != null ? `S${String(episode.seasonNumber).padStart(2, "0")} \xB7 E${String(episode.episodeNumber).padStart(2, "0")}` : episodeName;
         const onEpisodeSelect = (event) => {
           event.stopPropagation();
           event.currentTarget.dispatchEvent(
@@ -1453,30 +1454,36 @@ function DefaultEpisodesSidebar({
           );
           onClose();
         };
+        const runtimeText = episode.timeLeft && episode.timeLeft > 0 ? `${episode.timeLeft}m left` : Number.isFinite(episode.runtime) && (episode.runtime ?? 0) > 0 ? `${episode.runtime}m` : null;
         return /* @__PURE__ */ React.createElement(
           "article",
           {
             key: `${episode.episodeNumber ?? index}-${episode.title ?? ""}`,
             className: "vds-episode-item",
+            "data-active": episode.isActive ? "true" : "false",
             role: "button",
             tabIndex: 0,
             "aria-label": episode.title || episodeName,
             onPointerUp: onEpisodeSelect,
             onKeyDown: (event) => {
               if (event.key === "Enter" || event.key === " ") onEpisodeSelect(event);
+            },
+            style: {
+              ...episode.isActive ? { borderLeft: "3px solid #ef4444", backgroundColor: "rgba(255,255,255,0.05)" } : {}
             }
           },
-          /* @__PURE__ */ React.createElement("div", { className: "vds-episode-thumb-wrap" }, episode.thumbnail ? /* @__PURE__ */ React.createElement(
+          /* @__PURE__ */ React.createElement("div", { className: "vds-episode-thumb-wrap", style: { position: "relative", overflow: "hidden" } }, episode.thumbnail ? /* @__PURE__ */ React.createElement(
             "img",
             {
               className: "vds-episode-thumb",
               src: episode.thumbnail,
               alt: episode.title || episodeName,
               loading: "lazy",
-              decoding: "async"
+              decoding: "async",
+              style: episode.isActive ? { filter: "brightness(0.7)" } : {}
             }
-          ) : /* @__PURE__ */ React.createElement("div", { className: "vds-episode-thumb vds-episode-thumb-placeholder" })),
-          /* @__PURE__ */ React.createElement("div", { className: "vds-episode-body" }, /* @__PURE__ */ React.createElement("div", { className: "vds-episode-meta-row" }, /* @__PURE__ */ React.createElement("span", { className: "vds-episode-label" }, seasonEpLabel), runtimeText ? /* @__PURE__ */ React.createElement("span", { className: "vds-episode-runtime" }, runtimeText) : null), /* @__PURE__ */ React.createElement("h4", { className: "vds-episode-title", title: episode.title || "" }, episode.title || "-"), /* @__PURE__ */ React.createElement("p", { className: "vds-episode-subtitle", title: episodeName }, episodeName), episode.overview ? /* @__PURE__ */ React.createElement("p", { className: "vds-episode-desc", title: episode.overview }, episode.overview) : null)
+          ) : /* @__PURE__ */ React.createElement("div", { className: "vds-episode-thumb vds-episode-thumb-placeholder" }), episode.isActive && /* @__PURE__ */ React.createElement("div", { className: "vds-episode-active-overlay", style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "rgba(0,0,0,0.3)" } }, /* @__PURE__ */ React.createElement("span", { style: { backgroundColor: "#ef4444", color: "#fff", fontSize: "10px", fontWeight: "bold", padding: "2px 6px", borderRadius: "4px", textTransform: "uppercase", letterSpacing: "0.5px" } }, "Playing")), episode.progressPercent && episode.progressPercent > 0 ? /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: "4px", backgroundColor: "rgba(255,255,255,0.2)" } }, /* @__PURE__ */ React.createElement("div", { style: { height: "100%", backgroundColor: "#ef4444", width: `${Math.min(episode.progressPercent, 100)}%` } })) : null),
+          /* @__PURE__ */ React.createElement("div", { className: "vds-episode-body" }, /* @__PURE__ */ React.createElement("div", { className: "vds-episode-meta-row" }, /* @__PURE__ */ React.createElement("span", { className: "vds-episode-label", style: episode.isActive ? { color: "#ef4444" } : {} }, seasonEpLabel), runtimeText ? /* @__PURE__ */ React.createElement("span", { className: "vds-episode-runtime" }, runtimeText) : null), /* @__PURE__ */ React.createElement("h4", { className: "vds-episode-title", title: episode.title || "", style: episode.isActive ? { color: "#fff" } : {} }, episode.title || "-"), /* @__PURE__ */ React.createElement("p", { className: "vds-episode-subtitle", title: episodeName }, episodeName), episode.overview ? /* @__PURE__ */ React.createElement("p", { className: "vds-episode-desc", title: episode.overview }, episode.overview) : null)
         );
       }))
     )

package/server/player/vidstack-default-components.js

@@ -1,6 +1,6 @@
 "use client"
 
-export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions } from '../chunks/vidstack-C6mbdfF1.js';
+export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions } from '../chunks/vidstack-Ct1NFlBa.js';
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
 import 'react';
 import '../chunks/vidstack-D_bWd66h.js';

package/server/player/vidstack-default-layout.js

@@ -1,6 +1,6 @@
 "use client"
 
-export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultLayoutContext, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions, i18n, useDefaultLayoutContext, useDefaultLayoutWord } from '../chunks/vidstack-C6mbdfF1.js';
+export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultLayoutContext, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions, i18n, useDefaultLayoutContext, useDefaultLayoutWord } from '../chunks/vidstack-Ct1NFlBa.js';
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
 import 'react';
 import '../chunks/vidstack-D_bWd66h.js';