@hanifhan1f/vidstack 1.12.14 → 1.12.18

package/cdn/with-layouts/chunks/vidstack-BMhNagfl.js

@@ -0,0 +1 @@
+import{ao as m,e as c}from"./vidstack-DLVdcWrK.js";import{c as p,a as r}from"./vidstack-BGhRKayG.js";import"./vidstack-DWjB11vV.js";import"./vidstack-CS2aNc61.js";import"./vidstack-DPO7J4-v.js";import"./vidstack-DKqYI_HJ.js";import"./vidstack-C_AxqLKV.js";import"./vidstack-DRH_1tFW.js";import"./vidstack-BfBBPhXV.js";import"./vidstack-Bxv1Qnxe.js";import"https://cdn.vidstack.io/icons";const d=r('<svg viewBox="0 0 32 32" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"></svg>');function l(o,s){const n=p(d);n.innerHTML=m,o.append(n);const e=document.createElement("span");e.classList.add("vds-google-cast-info"),o.append(e);const t=document.createElement("span");t.classList.add("vds-google-cast-device-name"),c(()=>{const{remotePlaybackInfo:i}=s,a=i();return a?.deviceName&&(t.textContent=a.deviceName,e.append("Google Cast on ",t)),()=>{e.textContent=""}})}export{l as insertContent};

package/cdn/with-layouts/vidstack.js

@@ -1 +1 @@
-import"./chunks/vidstack-QW5tTAS4.js";import"https://cdn.vidstack.io/icons";import"./chunks/vidstack-DLVdcWrK.js";import"./chunks/vidstack-DWjB11vV.js";import"./chunks/vidstack-CS2aNc61.js";import"./chunks/vidstack-DPO7J4-v.js";import"./chunks/vidstack-DKqYI_HJ.js";import"./chunks/vidstack-C_AxqLKV.js";import"./chunks/vidstack-DRH_1tFW.js";import"./chunks/vidstack-BfBBPhXV.js";import"./chunks/vidstack-Bxv1Qnxe.js";
+import"./chunks/vidstack-BGhRKayG.js";import"https://cdn.vidstack.io/icons";import"./chunks/vidstack-DLVdcWrK.js";import"./chunks/vidstack-DWjB11vV.js";import"./chunks/vidstack-CS2aNc61.js";import"./chunks/vidstack-DPO7J4-v.js";import"./chunks/vidstack-DKqYI_HJ.js";import"./chunks/vidstack-C_AxqLKV.js";import"./chunks/vidstack-DRH_1tFW.js";import"./chunks/vidstack-BfBBPhXV.js";import"./chunks/vidstack-Bxv1Qnxe.js";

package/dev/define/templates/vidstack-video-layout.js

@@ -260,11 +260,17 @@ function DefaultBufferingIndicator() {
     </div>
   `;
 }
+function formatMinutesLeftLabel(secondsLeft) {
+  if (secondsLeft <= 0) return null;
+  if (secondsLeft < 60) return "<1m left";
+  return `${Math.floor(secondsLeft / 60)}m left`;
+}
 function DefaultEpisodesSidebar($open, onClose) {
-  const { episodes, episodesTitle, smallWhen: smWhen } = useDefaultLayoutContext(), { fullscreen } = useMediaState();
+  const { episodes, episodesTitle, smallWhen: smWhen } = useDefaultLayoutContext(), { fullscreen, currentTime, duration } = useMediaState();
   return $signal(() => {
     const list = episodes() ?? [];
     if (!fullscreen() && !smWhen() || !list.length) return null;
+    const ct = currentTime(), dur = duration();
     return html`
       <div
         class="vds-episodes-backdrop"
@@ -296,11 +302,28 @@ function DefaultEpisodesSidebar($open, onClose) {
           </header>
           <div class="vds-episodes-list" role="list">
             ${list.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(
+      const episodeName = episode.episodeTitle || `Episode ${episode.episodeNumber ?? index + 1}`, seasonEpLabel = episode.seasonNumber != null && episode.episodeNumber != null ? `S${String(episode.seasonNumber).padStart(2, "0")} \xB7 E${String(
         episode.episodeNumber
-      ).padStart(2, "0")}` : episodeName;
+      ).padStart(2, "0")}` : episodeName, isActive = episode.isActive === true;
+      let runtimeText = null;
+      if (isActive && dur > 0) {
+        const secsLeft = Math.max(0, dur - ct);
+        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 && dur > 0) {
+        progressPct = Math.min(100, ct / dur * 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;
       const onEpisodeSelect = (event) => {
         event.stopPropagation();
+        if (isActive) return;
         event.currentTarget?.dispatchEvent(
           new CustomEvent("vds-episode-select", {
             bubbles: true,
@@ -313,6 +336,8 @@ function DefaultEpisodesSidebar($open, onClose) {
       return html`
                 <article
                   class="vds-episode-item"
+                  data-active=${isActive ? "true" : "false"}
+                  aria-current=${isActive ? "true" : void 0}
                   role="button"
                   tabindex="0"
                   aria-label=${episode.title || episodeName}
@@ -331,6 +356,19 @@ function DefaultEpisodesSidebar($open, onClose) {
                             decoding="async"
                           />
                         ` : html`<div class="vds-episode-thumb vds-episode-thumb-placeholder"></div>`}
+                    ${isActive ? html`
+                          <div class="vds-episode-active-overlay" aria-hidden="true">
+                            <span class="vds-episode-playing-badge">Now playing</span>
+                          </div>
+                        ` : null}
+                    ${progressPct > 0 ? html`
+                          <div class="vds-episode-progress-track" aria-hidden="true">
+                            <div
+                              class="vds-episode-progress-fill"
+                              style=${`width: ${progressPct}%;`}
+                            ></div>
+                          </div>
+                        ` : null}
                   </div>
                   <div class="vds-episode-body">
                     <div class="vds-episode-meta-row">
@@ -340,7 +378,9 @@ function DefaultEpisodesSidebar($open, onClose) {
                     <h4 class="vds-episode-title" title=${episode.title || ""}>
                       ${episode.title || "-"}
                     </h4>
-                    <p class="vds-episode-subtitle" title=${episodeName}>${episodeName}</p>
+                    ${showSubtitle ? html`<p class="vds-episode-subtitle" title=${episode.episodeTitle}>
+                          ${episode.episodeTitle}
+                        </p>` : null}
                     ${episode.overview ? html`<p class="vds-episode-desc" title=${episode.overview}>
                           ${episode.overview}
                         </p>` : null}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hanifhan1f/vidstack",
   "description": "UI component library for building high-quality, accessible video and audio experiences on the web.",
-  "version": "1.12.14",
+  "version": "1.12.18",
   "license": "MIT",
   "type": "module",
   "types": "index.d.ts",

package/player/styles/default/layouts/video.css

@@ -956,6 +956,75 @@
   opacity: 0.98;
 }
 
+.vds-video-layout .vds-episode-item[data-active='true'] {
+  position: relative;
+  cursor: default;
+  background: linear-gradient(90deg, rgb(229 9 20 / 12%) 0%, rgb(255 255 255 / 4%) 42%);
+  border-radius: 12px;
+  padding-inline: 8px;
+  margin-inline: -6px;
+  outline: 1px solid rgb(229 9 20 / 35%);
+  box-shadow: inset 3px 0 0 #e50914;
+}
+
+.vds-video-layout .vds-episode-item:not([data-active='true']) {
+  cursor: pointer;
+}
+
+.vds-video-layout .vds-episode-item[data-active='true'] .vds-episode-thumb {
+  filter: brightness(0.78);
+}
+
+.vds-video-layout .vds-episode-item[data-active='true'] .vds-episode-label {
+  color: #ff6b6b;
+}
+
+.vds-video-layout .vds-episode-item:focus-visible {
+  outline: 2px solid rgb(255 255 255 / 55%);
+  outline-offset: 2px;
+}
+
+.vds-video-layout .vds-episode-item[data-active='true']:focus-visible {
+  outline-color: rgb(229 9 20 / 70%);
+}
+
+.vds-video-layout .vds-episode-active-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(180deg, rgb(0 0 0 / 15%) 0%, rgb(0 0 0 / 45%) 100%);
+  pointer-events: none;
+}
+
+.vds-video-layout .vds-episode-playing-badge {
+  background: #e50914;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 4px 8px;
+  border-radius: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  box-shadow: 0 4px 14px rgb(0 0 0 / 35%);
+}
+
+.vds-video-layout .vds-episode-progress-track {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background-color: rgb(255 255 255 / 22%);
+}
+
+.vds-video-layout .vds-episode-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #e50914 0%, #ff4d4d 100%);
+  transition: width 0.35s linear;
+}
+
 .vds-video-layout .vds-episode-thumb {
   display: block;
   width: 152px;

package/prod/define/templates/vidstack-video-layout.js

@@ -260,11 +260,17 @@ function DefaultBufferingIndicator() {
     </div>
   `;
 }
+function formatMinutesLeftLabel(secondsLeft) {
+  if (secondsLeft <= 0) return null;
+  if (secondsLeft < 60) return "<1m left";
+  return `${Math.floor(secondsLeft / 60)}m left`;
+}
 function DefaultEpisodesSidebar($open, onClose) {
-  const { episodes, episodesTitle, smallWhen: smWhen } = useDefaultLayoutContext(), { fullscreen } = useMediaState();
+  const { episodes, episodesTitle, smallWhen: smWhen } = useDefaultLayoutContext(), { fullscreen, currentTime, duration } = useMediaState();
   return $signal(() => {
     const list = episodes() ?? [];
     if (!fullscreen() && !smWhen() || !list.length) return null;
+    const ct = currentTime(), dur = duration();
     return html`
       <div
         class="vds-episodes-backdrop"
@@ -296,11 +302,28 @@ function DefaultEpisodesSidebar($open, onClose) {
           </header>
           <div class="vds-episodes-list" role="list">
             ${list.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(
+      const episodeName = episode.episodeTitle || `Episode ${episode.episodeNumber ?? index + 1}`, seasonEpLabel = episode.seasonNumber != null && episode.episodeNumber != null ? `S${String(episode.seasonNumber).padStart(2, "0")} \xB7 E${String(
         episode.episodeNumber
-      ).padStart(2, "0")}` : episodeName;
+      ).padStart(2, "0")}` : episodeName, isActive = episode.isActive === true;
+      let runtimeText = null;
+      if (isActive && dur > 0) {
+        const secsLeft = Math.max(0, dur - ct);
+        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 && dur > 0) {
+        progressPct = Math.min(100, ct / dur * 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;
       const onEpisodeSelect = (event) => {
         event.stopPropagation();
+        if (isActive) return;
         event.currentTarget?.dispatchEvent(
           new CustomEvent("vds-episode-select", {
             bubbles: true,
@@ -313,6 +336,8 @@ function DefaultEpisodesSidebar($open, onClose) {
       return html`
                 <article
                   class="vds-episode-item"
+                  data-active=${isActive ? "true" : "false"}
+                  aria-current=${isActive ? "true" : void 0}
                   role="button"
                   tabindex="0"
                   aria-label=${episode.title || episodeName}
@@ -331,6 +356,19 @@ function DefaultEpisodesSidebar($open, onClose) {
                             decoding="async"
                           />
                         ` : html`<div class="vds-episode-thumb vds-episode-thumb-placeholder"></div>`}
+                    ${isActive ? html`
+                          <div class="vds-episode-active-overlay" aria-hidden="true">
+                            <span class="vds-episode-playing-badge">Now playing</span>
+                          </div>
+                        ` : null}
+                    ${progressPct > 0 ? html`
+                          <div class="vds-episode-progress-track" aria-hidden="true">
+                            <div
+                              class="vds-episode-progress-fill"
+                              style=${`width: ${progressPct}%;`}
+                            ></div>
+                          </div>
+                        ` : null}
                   </div>
                   <div class="vds-episode-body">
                     <div class="vds-episode-meta-row">
@@ -340,7 +378,9 @@ function DefaultEpisodesSidebar($open, onClose) {
                     <h4 class="vds-episode-title" title=${episode.title || ""}>
                       ${episode.title || "-"}
                     </h4>
-                    <p class="vds-episode-subtitle" title=${episodeName}>${episodeName}</p>
+                    ${showSubtitle ? html`<p class="vds-episode-subtitle" title=${episode.episodeTitle}>
+                          ${episode.episodeTitle}
+                        </p>` : null}
                     ${episode.overview ? html`<p class="vds-episode-desc" title=${episode.overview}>
                           ${episode.overview}
                         </p>` : null}