@hanifhan1f/vidstack-react 1.12.22 → 1.12.25

package/dev/player/vidstack-remotion.js

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { createDisposalBin, animationFrameThrottle, noop } from '../chunks/vidstack-D_bWd66h.js';
 import { Internals, random } from 'remotion';
-import { IS_SERVER, useMediaState, isRemotionSrc, Primitive, useSliderState } from '../chunks/vidstack-CXrXBlpD.js';
-export { isRemotionProvider } from '../chunks/vidstack-CXrXBlpD.js';
+import { IS_SERVER, useMediaState, isRemotionSrc, Primitive, useSliderState } from '../chunks/vidstack-BXgKy_7V.js';
+export { isRemotionProvider } from '../chunks/vidstack-BXgKy_7V.js';
 import { RemotionThumbnail as RemotionThumbnail$1, RemotionSliderThumbnail as RemotionSliderThumbnail$1, RemotionPoster as RemotionPoster$1 } from '../chunks/vidstack-D-hQD1eE.js';
 import '@floating-ui/dom';
 
@@ -338,7 +338,7 @@ class RemotionProviderLoader {
     return "video";
   }
   async load(ctx) {
-    return new (await import('../chunks/vidstack-BSpAxhO6.js')).RemotionProvider(this.target, ctx);
+    return new (await import('../chunks/vidstack-BrqDQG-r.js')).RemotionProvider(this.target, ctx);
   }
 }
 

package/dev/vidstack.js

@@ -1,16 +1,16 @@
 "use client"
 
-import { TextTrackSymbol, RadioGroupController, useMediaContext, menuContext, Primitive, MediaPlayerInstance, MediaProviderInstance, isRemotionProvider, mediaState, TextTrack, ToggleButtonInstance, PosterInstance, useMediaState, ThumbnailsLoader, updateSliderPreviewPlacement } from './chunks/vidstack-CXrXBlpD.js';
-export { ARIAKeyShortcuts, AUDIO_EXTENSIONS, AUDIO_TYPES, AirPlayButtonInstance, AudioGainSliderInstance, AudioProviderLoader, AudioTrackList, CaptionButtonInstance, CaptionsInstance, ControlsGroupInstance, ControlsInstance, DASHProviderLoader, DASH_VIDEO_EXTENSIONS, DASH_VIDEO_TYPES, FullscreenButtonInstance, FullscreenController, GestureInstance, GoogleCastButtonInstance, HLSProviderLoader, HLS_VIDEO_EXTENSIONS, HLS_VIDEO_TYPES, List, LiveButtonInstance, LocalMediaStorage, Logger, MEDIA_KEY_SHORTCUTS, MediaAnnouncerInstance, MediaControls, MediaRemoteControl, MenuButtonInstance, MenuInstance, MenuItemInstance, MenuItemsInstance, MenuPortalInstance, MuteButtonInstance, PIPButtonInstance, PlayButtonInstance, QualitySliderInstance, RadioGroupInstance, RadioInstance, ScreenOrientationController, SeekButtonInstance, SliderChaptersInstance, SliderInstance, SliderPreviewInstance, SliderThumbnailInstance, SliderValueInstance, SliderVideoInstance, SpeedSliderInstance, TextRenderers, TextTrackList, ThumbnailInstance, TimeInstance, TimeRange, TimeSliderInstance, TooltipContentInstance, TooltipInstance, TooltipTriggerInstance, VIDEO_EXTENSIONS, VIDEO_TYPES, VideoProviderLoader, VideoQualityList, VimeoProviderLoader, VolumeSliderInstance, YouTubeProviderLoader, boundTime, canChangeVolume, canFullscreen, canGoogleCastSrc, canOrientScreen, canPlayHLSNatively, canRotateScreen, canUsePictureInPicture, canUseVideoPresentation, findActiveCue, formatSpokenTime, formatTime, getDownloadFile, getTimeRangesEnd, getTimeRangesStart, isAudioProvider, isAudioSrc, isCueActive, isDASHProvider, isDASHSrc, isGoogleCastProvider, isHLSProvider, isHLSSrc, isHTMLAudioElement, isHTMLIFrameElement, isHTMLMediaElement, isHTMLVideoElement, isMediaStream, isTrackCaptionKind, isVideoProvider, isVideoQualitySrc, isVideoSrc, isVimeoProvider, isYouTubeProvider, mediaContext, normalizeTimeIntervals, parseJSONCaptionsFile, sliderState, softResetMediaState, sortVideoQualities, updateTimeIntervals, useMediaStore, useSliderState, useSliderStore, watchActiveTextTrack, watchCueTextChange } from './chunks/vidstack-CXrXBlpD.js';
+import { TextTrackSymbol, RadioGroupController, useMediaContext, menuContext, Primitive, MediaPlayerInstance, MediaProviderInstance, isRemotionProvider, mediaState, TextTrack, ToggleButtonInstance, PosterInstance, useMediaState, ThumbnailsLoader, updateSliderPreviewPlacement } from './chunks/vidstack-BXgKy_7V.js';
+export { ARIAKeyShortcuts, AUDIO_EXTENSIONS, AUDIO_TYPES, AirPlayButtonInstance, AudioGainSliderInstance, AudioProviderLoader, AudioTrackList, CaptionButtonInstance, CaptionsInstance, ControlsGroupInstance, ControlsInstance, DASHProviderLoader, DASH_VIDEO_EXTENSIONS, DASH_VIDEO_TYPES, FullscreenButtonInstance, FullscreenController, GestureInstance, GoogleCastButtonInstance, HLSProviderLoader, HLS_VIDEO_EXTENSIONS, HLS_VIDEO_TYPES, List, LiveButtonInstance, LocalMediaStorage, Logger, MEDIA_KEY_SHORTCUTS, MediaAnnouncerInstance, MediaControls, MediaRemoteControl, MenuButtonInstance, MenuInstance, MenuItemInstance, MenuItemsInstance, MenuPortalInstance, MuteButtonInstance, PIPButtonInstance, PlayButtonInstance, QualitySliderInstance, RadioGroupInstance, RadioInstance, ScreenOrientationController, SeekButtonInstance, SliderChaptersInstance, SliderInstance, SliderPreviewInstance, SliderThumbnailInstance, SliderValueInstance, SliderVideoInstance, SpeedSliderInstance, TextRenderers, TextTrackList, ThumbnailInstance, TimeInstance, TimeRange, TimeSliderInstance, TooltipContentInstance, TooltipInstance, TooltipTriggerInstance, VIDEO_EXTENSIONS, VIDEO_TYPES, VideoProviderLoader, VideoQualityList, VimeoProviderLoader, VolumeSliderInstance, YouTubeProviderLoader, boundTime, canChangeVolume, canFullscreen, canGoogleCastSrc, canOrientScreen, canPlayHLSNatively, canRotateScreen, canUsePictureInPicture, canUseVideoPresentation, findActiveCue, formatSpokenTime, formatTime, getDownloadFile, getTimeRangesEnd, getTimeRangesStart, isAudioProvider, isAudioSrc, isCueActive, isDASHProvider, isDASHSrc, isGoogleCastProvider, isHLSProvider, isHLSSrc, isHTMLAudioElement, isHTMLIFrameElement, isHTMLMediaElement, isHTMLVideoElement, isMediaStream, isTrackCaptionKind, isVideoProvider, isVideoQualitySrc, isVideoSrc, isVimeoProvider, isYouTubeProvider, mediaContext, normalizeTimeIntervals, parseJSONCaptionsFile, sliderState, softResetMediaState, sortVideoQualities, updateTimeIntervals, useMediaStore, useSliderState, useSliderStore, watchActiveTextTrack, watchCueTextChange } from './chunks/vidstack-BXgKy_7V.js';
 import * as React from 'react';
 import { isString, EventsController, DOMEvent, prop, method, Component, hasProvidedContext, useContext, effect, createReactComponent, useStateContext, useSignal, composeRefs, useSignalRecord, useReactScope, signal } from './chunks/vidstack-D_bWd66h.js';
 export { appendTriggerEvent, findTriggerEvent, hasTriggerEvent, isKeyboardClick, isKeyboardEvent, isPointerEvent, walkTriggerEventChain } from './chunks/vidstack-D_bWd66h.js';
-import { createSignal, useScoped } from './chunks/vidstack-H9OdEKUQ.js';
-export { audioGainSlider as AudioGainSlider, Captions, ChapterTitle, controls as Controls, GoogleCastButton, MediaAnnouncer, qualitySlider as QualitySlider, speedSlider as SpeedSlider, spinner as Spinner, Title, tooltip as Tooltip, useActiveTextCues, useActiveTextTrack, useChapterOptions, useChapterTitle, useTextCues } from './chunks/vidstack-H9OdEKUQ.js';
-import { useMediaContext as useMediaContext$1 } from './chunks/vidstack-KntYDWMe.js';
-export { AirPlayButton, CaptionButton, FullscreenButton, Gesture, LiveButton, menu as Menu, MuteButton, PIPButton, PlayButton, radioGroup as RadioGroup, SeekButton, slider as Slider, thumbnail as Thumbnail, Time, timeSlider as TimeSlider, volumeSlider as VolumeSlider, useAudioOptions, useCaptionOptions, useMediaPlayer } from './chunks/vidstack-KntYDWMe.js';
+import { createSignal, useScoped } from './chunks/vidstack-L5mw2iPb.js';
+export { audioGainSlider as AudioGainSlider, Captions, ChapterTitle, controls as Controls, GoogleCastButton, MediaAnnouncer, qualitySlider as QualitySlider, speedSlider as SpeedSlider, spinner as Spinner, Title, tooltip as Tooltip, useActiveTextCues, useActiveTextTrack, useChapterOptions, useChapterTitle, useTextCues } from './chunks/vidstack-L5mw2iPb.js';
+import { useMediaContext as useMediaContext$1 } from './chunks/vidstack-BOPSNTgH.js';
+export { AirPlayButton, CaptionButton, FullscreenButton, Gesture, LiveButton, menu as Menu, MuteButton, PIPButton, PlayButton, radioGroup as RadioGroup, SeekButton, slider as Slider, thumbnail as Thumbnail, Time, timeSlider as TimeSlider, volumeSlider as VolumeSlider, useAudioOptions, useCaptionOptions, useMediaPlayer } from './chunks/vidstack-BOPSNTgH.js';
 import { Icon } from './chunks/vidstack-CBF7iUqu.js';
-export { DEFAULT_PLAYBACK_RATES, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-DwdhbP5c.js';
+export { DEFAULT_PLAYBACK_RATES, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-DTow20pt.js';
 import '@floating-ui/dom';
 import 'react-dom';
 

package/package.json

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

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

@@ -854,7 +854,7 @@
 }
 
 .vds-video-layout .vds-episodes-list {
-  flex: 1;
+  flex: 1 1 auto;
   min-height: 0;
   margin: 0;
   padding: 10px 10px 14px;
@@ -862,11 +862,17 @@
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
+  align-items: stretch;
   gap: 8px;
   scrollbar-width: thin;
   scrollbar-color: rgb(255 255 255 / 28%) transparent;
 }
 
+/* Each row must keep its full height — min-height:0 on items was collapsing rows and stacking text. */
+.vds-video-layout .vds-episodes-list > .vds-episode-item {
+  flex: 0 0 auto;
+}
+
 .vds-video-layout .vds-episodes-empty {
   padding: 12px;
   font-size: 12px;
@@ -948,9 +954,12 @@
 .vds-video-layout .vds-episode-item {
   display: grid !important;
   grid-template-columns: 148px minmax(0, 1fr) !important;
+  grid-template-rows: auto;
   align-items: start;
+  align-content: start;
   width: 100%;
-  min-height: 0;
+  min-height: min-content;
+  box-sizing: border-box;
   gap: 12px;
   padding: 10px 10px 10px 8px;
   border-radius: 10px;
@@ -1000,6 +1009,7 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 6px;
+  flex: 1;
   min-width: 0;
 }
 
@@ -1044,11 +1054,13 @@
 }
 
 .vds-video-layout .vds-episode-thumb-wrap {
+  position: relative;
   width: 148px;
   height: 84px;
   border-radius: 8px;
   overflow: hidden;
   flex-shrink: 0;
+  align-self: start;
 }
 
 .vds-video-layout .vds-episode-thumb-placeholder {
@@ -1057,8 +1069,12 @@
 
 .vds-video-layout .vds-episode-body {
   min-width: 0;
-  display: grid;
-  align-content: start;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  align-self: start;
   gap: 5px;
   padding-top: 1px;
 }
@@ -1115,11 +1131,12 @@
   font-size: 11px;
   line-height: 1.45;
   color: rgb(255 255 255 / 68%);
-  line-clamp: 3;
   display: -webkit-box;
-  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
   overflow: hidden;
+  word-break: break-word;
+  min-height: 0;
 }
 
 @media (max-width: 640px) {

package/prod/chunks/vidstack-58ZavMvv.js

@@ -0,0 +1,159 @@
+"use client"
+
+import { IS_CHROME, IS_IOS, canGoogleCastSrc, IS_SERVER, loadScript } from './vidstack-D_ijTIbV.js';
+import { listenEvent, peek } from './vidstack-CZgUA94N.js';
+
+function getCastFrameworkURL() {
+  return "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
+}
+function hasLoadedCastFramework() {
+  return !!window.cast?.framework;
+}
+function isCastAvailable() {
+  return !!window.chrome?.cast?.isAvailable;
+}
+function isCastConnected() {
+  return getCastContext().getCastState() === cast.framework.CastState.CONNECTED;
+}
+function getCastContext() {
+  return window.cast.framework.CastContext.getInstance();
+}
+function getCastSession() {
+  return getCastContext().getCurrentSession();
+}
+function getCastSessionMedia() {
+  return getCastSession()?.getSessionObj().media[0];
+}
+function hasActiveCastSession(src) {
+  const contentId = getCastSessionMedia()?.media.contentId;
+  return contentId === src?.src;
+}
+function getDefaultCastOptions() {
+  return {
+    language: "en-US",
+    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED,
+    receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
+    resumeSavedSession: true,
+    androidReceiverCompatible: true
+  };
+}
+function getCastErrorMessage(code) {
+  const defaultMessage = `Google Cast Error Code: ${code}`;
+  return defaultMessage;
+}
+function listenCastContextEvent(type, handler) {
+  return listenEvent(getCastContext(), type, handler);
+}
+
+class GoogleCastLoader {
+  name = "google-cast";
+  target;
+  #player;
+  /**
+   * @see {@link https://developers.google.com/cast/docs/reference/web_sender/cast.framework.CastContext}
+   */
+  get cast() {
+    return getCastContext();
+  }
+  mediaType() {
+    return "video";
+  }
+  canPlay(src) {
+    return IS_CHROME && !IS_IOS && canGoogleCastSrc(src);
+  }
+  async prompt(ctx) {
+    let loadEvent, openEvent, errorEvent;
+    try {
+      loadEvent = await this.#loadCastFramework(ctx);
+      if (!this.#player) {
+        this.#player = new cast.framework.RemotePlayer();
+        new cast.framework.RemotePlayerController(this.#player);
+      }
+      openEvent = ctx.player.createEvent("google-cast-prompt-open", {
+        trigger: loadEvent
+      });
+      ctx.player.dispatchEvent(openEvent);
+      this.#notifyRemoteStateChange(ctx, "connecting", openEvent);
+      await this.#showPrompt(peek(ctx.$props.googleCast));
+      ctx.$state.remotePlaybackInfo.set({
+        deviceName: getCastSession()?.getCastDevice().friendlyName
+      });
+      if (isCastConnected()) this.#notifyRemoteStateChange(ctx, "connected", openEvent);
+    } catch (code) {
+      const error = code instanceof Error ? code : this.#createError(
+        (code + "").toUpperCase(),
+        "Prompt failed."
+      );
+      errorEvent = ctx.player.createEvent("google-cast-prompt-error", {
+        detail: error,
+        trigger: openEvent ?? loadEvent,
+        cancelable: true
+      });
+      ctx.player.dispatch(errorEvent);
+      this.#notifyRemoteStateChange(
+        ctx,
+        isCastConnected() ? "connected" : "disconnected",
+        errorEvent
+      );
+      throw error;
+    } finally {
+      ctx.player.dispatch("google-cast-prompt-close", {
+        trigger: errorEvent ?? openEvent ?? loadEvent
+      });
+    }
+  }
+  async load(ctx) {
+    if (IS_SERVER) {
+      throw Error("[vidstack] can not load google cast provider server-side");
+    }
+    if (!this.#player) {
+      throw Error("[vidstack] google cast player was not initialized");
+    }
+    return new (await import('./vidstack-Bm2UemPE.js')).GoogleCastProvider(this.#player, ctx);
+  }
+  async #loadCastFramework(ctx) {
+    if (hasLoadedCastFramework()) return;
+    const loadStartEvent = ctx.player.createEvent("google-cast-load-start");
+    ctx.player.dispatch(loadStartEvent);
+    await loadScript(getCastFrameworkURL());
+    await customElements.whenDefined("google-cast-launcher");
+    const loadedEvent = ctx.player.createEvent("google-cast-loaded", { trigger: loadStartEvent });
+    ctx.player.dispatch(loadedEvent);
+    if (!isCastAvailable()) {
+      throw this.#createError("CAST_NOT_AVAILABLE", "Google Cast not available on this platform.");
+    }
+    return loadedEvent;
+  }
+  async #showPrompt(options) {
+    this.#setOptions(options);
+    const errorCode = await this.cast.requestSession();
+    if (errorCode) {
+      throw this.#createError(
+        errorCode.toUpperCase(),
+        getCastErrorMessage(errorCode)
+      );
+    }
+  }
+  #setOptions(options) {
+    this.cast?.setOptions({
+      ...getDefaultCastOptions(),
+      ...options
+    });
+  }
+  #notifyRemoteStateChange(ctx, state, trigger) {
+    const detail = { type: "google-cast", state };
+    ctx.notify("remote-playback-change", detail, trigger);
+  }
+  #createError(code, message) {
+    const error = Error(message);
+    error.code = code;
+    return error;
+  }
+}
+
+var loader = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  GoogleCastLoader: GoogleCastLoader
+});
+
+export { getCastContext, getCastErrorMessage, getCastSession, getCastSessionMedia, hasActiveCastSession, listenCastContextEvent, loader };

package/prod/chunks/vidstack-BS445j5D.js

@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from 'react';
+import { listenEvent, EventsController, animationFrameThrottle, effect } from './vidstack-CZgUA94N.js';
+import { useMediaPlayer } from './vidstack-D3cSYtez.js';
+
+function useClassName(el, className) {
+  React.useEffect(() => {
+    if (!el || !className) return;
+    const tokens = className.split(" ");
+    for (const token of tokens) el.classList.add(token);
+    return () => {
+      for (const token of tokens) el.classList.remove(token);
+    };
+  }, [el, className]);
+}
+function useResizeObserver(el, callback) {
+  React.useEffect(() => {
+    if (!el) return;
+    callback();
+    const observer = new ResizeObserver(animationFrameThrottle(callback));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [el, callback]);
+}
+function useTransitionActive(el) {
+  const [isActive, setIsActive] = React.useState(false);
+  React.useEffect(() => {
+    if (!el) return;
+    const events = new EventsController(el).add("transitionstart", () => setIsActive(true)).add("transitionend", () => setIsActive(false));
+    return () => events.abort();
+  }, [el]);
+  return isActive;
+}
+function useMouseEnter(el) {
+  const [isMouseEnter, setIsMouseEnter] = React.useState(false);
+  React.useEffect(() => {
+    if (!el) return;
+    const events = new EventsController(el).add("mouseenter", () => setIsMouseEnter(true)).add("mouseleave", () => setIsMouseEnter(false));
+    return () => events.abort();
+  }, [el]);
+  return isMouseEnter;
+}
+function useFocusIn(el) {
+  const [isFocusIn, setIsFocusIn] = React.useState(false);
+  React.useEffect(() => {
+    if (!el) return;
+    const events = new EventsController(el).add("focusin", () => setIsFocusIn(true)).add("focusout", () => setIsFocusIn(false));
+    return () => events.abort();
+  }, [el]);
+  return isFocusIn;
+}
+function useActive(el) {
+  const isMouseEnter = useMouseEnter(el), isFocusIn = useFocusIn(el), prevMouseEnter = React.useRef(false);
+  if (prevMouseEnter.current && !isMouseEnter) return false;
+  prevMouseEnter.current = isMouseEnter;
+  return isMouseEnter || isFocusIn;
+}
+function useColorSchemePreference() {
+  const [colorScheme, setColorScheme] = React.useState("dark");
+  React.useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: light)");
+    function onChange() {
+      setColorScheme(media.matches ? "light" : "dark");
+    }
+    onChange();
+    return listenEvent(media, "change", onChange);
+  }, []);
+  return colorScheme;
+}
+
+function useLayoutName(name) {
+  const player = useMediaPlayer();
+  React.useEffect(() => {
+    if (!player) return;
+    return effect(() => {
+      const el = player.$el;
+      el?.setAttribute("data-layout", name);
+      return () => el?.removeAttribute("data-layout");
+    });
+  }, [player]);
+}
+
+export { useActive, useClassName, useColorSchemePreference, useLayoutName, useResizeObserver, useTransitionActive };