feat(player): new crossOrigin prop on slider video component

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

Hide file tree

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

diff --git a/packages/vidstack/src/components/ui/sliders/slider-video.ts b/packages/vidstack/src/components/ui/sliders/slider-video.ts
@@ -18,11 +18,13 @@ import { Slider } from './slider/slider';
 export class SliderVideo extends Component<SliderVideoProps, SliderVideoState, SliderVideoEvents> {
   static props: SliderVideoProps = {
     src: null,
+    crossOrigin: null,
   };
 
   static state = new State<SliderVideoState>({
     video: null,
     src: null,
+    crossOrigin: null,
     canPlay: false,
     error: null,
     hidden: false,
@@ -39,6 +41,9 @@ export class SliderVideo extends Component<SliderVideoProps, SliderVideoState, S
   protected override onSetup(): void {
     this._media = useMediaContext();
     this._slider = useState(Slider.state);
+
+    this._watchCrossOrigin();
+
     this.setAttributes({
       'data-loading': this._isLoading.bind(this),
       'data-hidden': this.$state.hidden,
@@ -50,6 +55,7 @@ export class SliderVideo extends Component<SliderVideoProps, SliderVideoState, S
   protected override onAttach(el: HTMLElement) {
     effect(this._watchVideo.bind(this));
     effect(this._watchSrc.bind(this));
+    effect(this._watchCrossOrigin.bind(this));
     effect(this._watchHidden.bind(this));
 
     effect(this._onSrcChange.bind(this));
@@ -72,6 +78,14 @@ export class SliderVideo extends Component<SliderVideoProps, SliderVideoState, S
     src.set(canLoad() ? this.$props.src() : null);
   }
 
+  private _watchCrossOrigin() {
+    const { crossOrigin: crossOriginProp } = this.$props,
+      { crossOrigin: crossOriginState } = this.$state,
+      { crossOrigin: mediaCrossOrigin } = this._media.$state,
+      crossOrigin = crossOriginProp() !== null ? crossOriginProp() : mediaCrossOrigin();
+    crossOriginState.set(crossOrigin === true ? 'anonymous' : crossOrigin);
+  }
+
   private _isLoading() {
     const { canPlay, hidden } = this.$state;
     return !canPlay() && !hidden();
@@ -130,11 +144,20 @@ export interface SliderVideoProps {
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/src}
    */
   src: string | null;
+
+  /**
+   * Defines how the media 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: true | '' | 'anonymous' | 'use-credentials' | null;
 }
 
 export interface SliderVideoState {
   video: HTMLVideoElement | null;
   src: string | null;
+  crossOrigin: '' | 'anonymous' | 'use-credentials' | null;
   canPlay: boolean;
   error: ErrorEvent | null;
   hidden: boolean;

diff --git a/packages/vidstack/src/elements/define/poster-element.ts b/packages/vidstack/src/elements/define/poster-element.ts
@@ -34,9 +34,9 @@ export class MediaPosterElement extends Host(HTMLElement, Poster) {
     }
 
     effect(() => {
-      setAttribute(this._img, 'src', src());
       setAttribute(this._img, 'alt', alt());
       setAttribute(this._img, 'crossorigin', crossOrigin());
+      setAttribute(this._img, 'src', src());
     });
   }
 }

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,17 +33,17 @@ export class MediaSliderVideoElement extends Host(HTMLElement, SliderVideo) {
   }
 
   protected onConnect(): void {
-    const { canLoad, crossOrigin } = this._media.$state,
-      { src } = this.$state;
+    const { canLoad } = this._media.$state,
+      { src, crossOrigin } = this.$state;
 
     if (this._video.parentNode !== this) {
       this.prepend(this._video);
     }
 
     effect(() => {
-      setAttribute(this._video, 'src', src());
       setAttribute(this._video, 'crossorigin', crossOrigin());
       setAttribute(this._video, 'preload', canLoad() ? 'auto' : 'none');
+      setAttribute(this._video, 'src', src());
     });
   }