fix(player): rename crossorigin prop to crossOrigin

vidstack · Dec 25, 2023 · 37513ea · 37513ea
1 parent ecbf277
commit 37513ea
Show file tree

Hide file tree

Showing 16 changed files with 53 additions and 37 deletions.
diff --git a/packages/react/src/components/ui/sliders/time-slider.tsx b/packages/react/src/components/ui/sliders/time-slider.tsx
@@ -379,11 +379,11 @@ export interface VideoProviderProps {
 
 const VideoProvider = React.forwardRef<HTMLVideoElement, VideoProviderProps>(
   ({ instance, children, ...props }, forwardRef) => {
-    const { crossorigin, canLoad } = useStateContext(mediaState),
+    const { crossOrigin, canLoad } = useStateContext(mediaState),
       { src, video } = instance.$state,
       $src = useSignal(src),
       $canLoad = useSignal(canLoad),
-      $crossorigin = useSignal(crossorigin);
+      $crossOrigin = useSignal(crossOrigin);
     return (
       <Primitive.video
         style={{ maxWidth: 'unset' }}
@@ -392,7 +392,7 @@ const VideoProvider = React.forwardRef<HTMLVideoElement, VideoProviderProps>(
         muted
         playsInline
         preload={$canLoad ? 'auto' : 'none'}
-        crossOrigin={($crossorigin as '') || undefined}
+        crossOrigin={($crossOrigin as '') || undefined}
         ref={composeRefs(video.set as any, forwardRef)}
       >
         {children}

diff --git a/packages/react/src/components/ui/thumbnail.tsx b/packages/react/src/components/ui/thumbnail.tsx
@@ -58,13 +58,13 @@ export interface ImgProps extends PrimitivePropsWithRef<'img'> {
 }
 
 const Img = React.forwardRef<HTMLImageElement, ImgProps>(({ children, ...props }, forwardRef) => {
-  const { crossorigin } = useStateContext(mediaState),
+  const { crossOrigin } = useStateContext(mediaState),
     { src, img } = useStateContext(ThumbnailInstance.state),
     $src = useSignal(src),
-    $crossorigin = useSignal(crossorigin);
+    $crossOrigin = useSignal(crossOrigin);
   return (
     <Primitive.img
-      crossOrigin={$crossorigin as '' | undefined}
+      crossOrigin={$crossOrigin as '' | undefined}
       {...props}
       src={$src}
       ref={composeRefs((img as any).set, forwardRef)}

diff --git a/packages/vidstack/src/components/player.ts b/packages/vidstack/src/components/player.ts
@@ -162,7 +162,7 @@ export class MediaPlayer
     context.remote.setPlayer(this);
     context.$iosControls = computed(this._isIOSControls.bind(this));
     context.textTracks = new TextTrackList(storage);
-    context.textTracks[TextTrackSymbol._crossorigin] = this.$state.crossorigin;
+    context.textTracks[TextTrackSymbol._crossOrigin] = this.$state.crossOrigin;
     context.textRenderers = new TextRenderers(context);
     context.ariaKeys = {};
 

diff --git a/packages/vidstack/src/components/provider/source-select.ts b/packages/vidstack/src/components/provider/source-select.ts
@@ -115,8 +115,8 @@ export class SourceSelection {
     }
 
     if (noMatch) {
-      const { crossorigin } = $state,
-        credentials = getRequestCredentials(crossorigin()),
+      const { crossOrigin } = $state,
+        credentials = getRequestCredentials(crossOrigin()),
         abort = new AbortController();
 
       Promise.all(
@@ -201,7 +201,7 @@ export class SourceSelection {
 
     const provider = this._media.$provider(),
       source = this._media.$state.source(),
-      crossorigin = peek(this._media.$state.crossorigin);
+      crossOrigin = peek(this._media.$state.crossOrigin);
 
     if (isSameSrc(provider?.currentSrc, source)) {
       return;
@@ -214,7 +214,7 @@ export class SourceSelection {
         // Determined using `HLSProvider` if `hls.js` supported.
         if (!isHLSSupported()) {
           resolveStreamTypeFromHLSManifest(source.src as string, {
-            credentials: getRequestCredentials(crossorigin),
+            credentials: getRequestCredentials(crossOrigin),
             signal: abort.signal,
           })
             .then((streamType) => {

diff --git a/packages/vidstack/src/components/ui/poster.ts b/packages/vidstack/src/components/ui/poster.ts
@@ -145,9 +145,11 @@ export class Poster extends Component<PosterProps, PosterState> {
   }
 
   private _watchCrossOrigin() {
-    const { src } = this.$props,
+    const { src, crossOrigin: crossOriginProp } = this.$props,
       { crossOrigin: crossOriginState } = this.$state,
-      crossOrigin = this.$props.crossOrigin();
+      { crossOrigin: mediaCrossOrigin } = this._media.$state,
+      crossOrigin = crossOriginProp() !== null ? crossOriginProp() : mediaCrossOrigin();
+
     crossOriginState.set(
       /ytimg\.com|vimeo/.test(src() || '')
         ? null

diff --git a/packages/vidstack/src/components/ui/thumbnails/thumbnail-loader.ts b/packages/vidstack/src/components/ui/thumbnails/thumbnail-loader.ts
@@ -33,7 +33,7 @@ export class ThumbnailsLoader {
     if (!canLoad()) return;
 
     const controller = new AbortController(),
-      { crossorigin } = this._media.$state;
+      { crossOrigin } = this._media.$state;
 
     const src = this.$src();
     if (!src) return;
@@ -56,7 +56,7 @@ export class ThumbnailsLoader {
         try {
           const response = await fetch(src, {
               signal: controller.signal,
-              credentials: getRequestCredentials(crossorigin()),
+              credentials: getRequestCredentials(crossOrigin()),
             }),
             isJSON = response.headers.get('content-type') === 'application/json';
 

diff --git a/packages/vidstack/src/core/api/player-props.ts b/packages/vidstack/src/core/api/player-props.ts
@@ -12,6 +12,7 @@ export const mediaPlayerProps: MediaPlayerProps = {
   controls: false,
   currentTime: 0,
   crossorigin: null,
+  crossOrigin: null,
   fullscreenOrientation: 'landscape',
   load: 'visible',
   posterLoad: 'visible',
@@ -71,13 +72,17 @@ export interface MediaPlayerProps
     | 'liveEdgeTolerance'
     | 'minLiveDVRWindow'
   > {
+  /**
+   * @deprecated - Use `crossOrigin`
+   */
+  crossorigin: string | true | null;
   /**
    * Defines how the media element handles cross-origin requests, thereby enabling the
    * configuration of the CORS requests for the element's fetched data.
    *
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin}
    */
-  crossorigin: string | true | null;
+  crossOrigin: true | MediaState['crossOrigin'];
   /**
    * The URL and optionally type of the current media resource/s to be considered for playback.
    *

diff --git a/packages/vidstack/src/core/api/player-state.ts b/packages/vidstack/src/core/api/player-state.ts
@@ -33,6 +33,7 @@ export const mediaState = new State<MediaState>({
   controls: false,
   controlsVisible: false,
   crossorigin: null,
+  crossOrigin: null,
   ended: false,
   error: null,
   fullscreen: false,
@@ -176,6 +177,7 @@ const DO_NOT_RESET_ON_SRC_CHANGE = new Set<keyof MediaState>([
   'canSetVolume',
   'controls',
   'crossorigin',
+  'crossOrigin',
   'fullscreen',
   'height',
   'inferredViewType',
@@ -347,13 +349,17 @@ export interface MediaState {
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controls}
    */
   controls: boolean;
+  /**
+   * @deprecated - Use `crossOrigin`
+   */
+  crossorigin: string | null;
   /**
    * Defines how the media element handles cross-origin requests, thereby enabling the
    * configuration of the CORS requests for the element's fetched data.
    *
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin}
    */
-  crossorigin: string | null;
+  crossOrigin: '' | 'anonymous' | 'use-credentials' | null;
   /**
    * The URL of the current poster. Defaults to `''` if no media/poster has been given or
    * loaded.

diff --git a/packages/vidstack/src/core/state/media-state-sync.ts b/packages/vidstack/src/core/state/media-state-sync.ts
@@ -93,8 +93,11 @@ export class MediaStateSync extends MediaPlayerController {
   }
 
   private _watchCrossOrigin() {
-    const crossorigin = this.$props.crossorigin();
-    this.$state.crossorigin.set(crossorigin === true ? '' : crossorigin);
+    // crossorigin is deprecated, we're syncing for backwards compatibility.
+    const _crossOrigin = this.$props.crossOrigin() ?? this.$props.crossorigin(),
+      value = _crossOrigin === true ? '' : (_crossOrigin as '');
+    this.$state.crossorigin.set(value);
+    this.$state.crossOrigin.set(value);
   }
 
   private _watchPlaysinline() {

diff --git a/packages/vidstack/src/core/tracks/text/symbols.ts b/packages/vidstack/src/core/tracks/text/symbols.ts
@@ -1,4 +1,4 @@
-const CROSSORIGIN = Symbol(__DEV__ ? 'TEXT_TRACK_CROSSORIGIN' : 0),
+const CROSS_ORIGIN = Symbol(__DEV__ ? 'TEXT_TRACK_CROSS_ORIGIN' : 0),
   READY_STATE = Symbol(__DEV__ ? 'TEXT_TRACK_READY_STATE' : 0),
   UPDATE_ACTIVE_CUES = Symbol(__DEV__ ? 'TEXT_TRACK_UPDATE_ACTIVE_CUES' : 0),
   CAN_LOAD = Symbol(__DEV__ ? 'TEXT_TRACK_CAN_LOAD' : 0),
@@ -7,7 +7,7 @@ const CROSSORIGIN = Symbol(__DEV__ ? 'TEXT_TRACK_CROSSORIGIN' : 0),
   NATIVE_HLS = Symbol(__DEV__ ? 'TEXT_TRACK_NATIVE_HLS' : 0);
 
 export const TextTrackSymbol = {
-  _crossorigin: CROSSORIGIN,
+  _crossOrigin: CROSS_ORIGIN,
   _readyState: READY_STATE,
   _updateActiveCues: UPDATE_ACTIVE_CUES,
   _canLoad: CAN_LOAD,

diff --git a/packages/vidstack/src/core/tracks/text/text-track.ts b/packages/vidstack/src/core/tracks/text/text-track.ts
@@ -58,7 +58,7 @@ export class TextTrack extends EventsTarget<TextTrackEvents> {
   [TextTrackSymbol._readyState]: TextTrackReadyState = 0;
 
   /* @internal */
-  [TextTrackSymbol._crossorigin]?: () => string | null;
+  [TextTrackSymbol._crossOrigin]?: () => string | null;
 
   /* @internal */
   [TextTrackSymbol._onModeChange]: (() => void) | null = null;
@@ -226,11 +226,11 @@ export class TextTrack extends EventsTarget<TextTrackEvents> {
 
     try {
       const { parseResponse, VTTCue, VTTRegion } = await import('media-captions'),
-        crossorigin = this[TextTrackSymbol._crossorigin]?.();
+        crossOrigin = this[TextTrackSymbol._crossOrigin]?.();
 
       const response = fetch(this.src, {
         headers: this.type === 'json' ? { 'Content-Type': 'application/json' } : undefined,
-        credentials: getRequestCredentials(crossorigin),
+        credentials: getRequestCredentials(crossOrigin),
       });
 
       if (this.type === 'json') {

diff --git a/packages/vidstack/src/core/tracks/text/text-tracks.ts b/packages/vidstack/src/core/tracks/text/text-tracks.ts
@@ -21,7 +21,7 @@ export class TextTrackList extends List<TextTrack, TextTrackListEvents> {
   private _preferredLang: string | null = null;
 
   /** @internal */
-  [TextTrackSymbol._crossorigin]?: () => string | null;
+  [TextTrackSymbol._crossOrigin]?: () => string | null;
 
   constructor(private readonly _storage?: MediaStorage) {
     super();
@@ -49,7 +49,7 @@ export class TextTrackList extends List<TextTrack, TextTrackListEvents> {
 
     track.addEventListener('mode-change', this._onTrackModeChangeBind);
     this[ListSymbol._add](track, trigger);
-    track[TextTrackSymbol._crossorigin] = this[TextTrackSymbol._crossorigin];
+    track[TextTrackSymbol._crossOrigin] = this[TextTrackSymbol._crossOrigin];
     if (this._canLoad) track[TextTrackSymbol._canLoad]();
 
     if (init.default) {

diff --git a/packages/vidstack/src/elements/define/provider-element.ts b/packages/vidstack/src/elements/define/provider-element.ts
@@ -95,10 +95,10 @@ export class MediaProviderElement extends Host(HTMLElement, MediaProvider) {
     setAttribute(audio, 'preload', 'none');
     setAttribute(audio, 'aria-hidden', 'true');
 
-    const { controls, crossorigin } = this._media.$state;
+    const { controls, crossOrigin } = this._media.$state;
     effect(() => {
       setAttribute(audio, 'controls', controls());
-      setAttribute(audio, 'crossorigin', crossorigin());
+      setAttribute(audio, 'crossorigin', crossOrigin());
     });
 
     return audio;
@@ -108,14 +108,14 @@ export class MediaProviderElement extends Host(HTMLElement, MediaProvider) {
     const video =
       this._target instanceof HTMLVideoElement ? this._target : document.createElement('video');
 
-    const { controls, crossorigin, poster } = this._media.$state,
+    const { controls, crossOrigin, poster } = this._media.$state,
       { $iosControls } = this._media,
       $nativeControls = computed(() => (controls() || $iosControls() ? '' : null)),
       $poster = computed(() => (poster() && (controls() || $iosControls()) ? poster() : null));
 
     effect(() => {
       setAttribute(video, 'controls', $nativeControls());
-      setAttribute(video, 'crossorigin', crossorigin());
+      setAttribute(video, 'crossorigin', crossOrigin());
       setAttribute(video, 'poster', $poster());
     });
 

diff --git a/packages/vidstack/src/elements/define/sliders/slider-video-element.ts b/packages/vidstack/src/elements/define/sliders/slider-video-element.ts
@@ -33,7 +33,7 @@ export class MediaSliderVideoElement extends Host(HTMLElement, SliderVideo) {
   }
 
   protected onConnect(): void {
-    const { crossorigin, canLoad } = this._media.$state,
+    const { canLoad, crossOrigin } = this._media.$state,
       { src } = this.$state;
 
     if (this._video.parentNode !== this) {
@@ -42,7 +42,7 @@ export class MediaSliderVideoElement extends Host(HTMLElement, SliderVideo) {
 
     effect(() => {
       setAttribute(this._video, 'src', src());
-      setAttribute(this._video, 'crossorigin', crossorigin());
+      setAttribute(this._video, 'crossorigin', crossOrigin());
       setAttribute(this._video, 'preload', canLoad() ? 'auto' : 'none');
     });
   }

diff --git a/packages/vidstack/src/elements/define/thumbnail-element.ts b/packages/vidstack/src/elements/define/thumbnail-element.ts
@@ -36,15 +36,15 @@ export class MediaThumbnailElement extends Host(HTMLElement, Thumbnail) {
 
   protected onConnect(): void {
     const { src } = this.$state,
-      { crossorigin } = this._media.$props;
+      { crossOrigin } = this._media.$props;
 
     if (this._img.parentNode !== this) {
       this.prepend(this._img);
     }
 
     effect(() => {
       setAttribute(this._img, 'src', src());
-      setAttribute(this._img, 'crossorigin', crossorigin());
+      setAttribute(this._img, 'crossorigin', crossOrigin());
     });
   }
 

diff --git a/packages/vidstack/src/utils/network.ts b/packages/vidstack/src/utils/network.ts
@@ -57,10 +57,10 @@ export function loadScript(src: string): Promise<void> {
   return promise.promise;
 }
 
-export function getRequestCredentials(crossorigin?: string | null): RequestCredentials | undefined {
-  return crossorigin === 'use-credentials'
+export function getRequestCredentials(crossOrigin?: string | null): RequestCredentials | undefined {
+  return crossOrigin === 'use-credentials'
     ? 'include'
-    : isString(crossorigin)
+    : isString(crossOrigin)
       ? 'same-origin'
       : undefined;
 }