Skip to content

Commit 37513ea

Browse files
mihar-22mihar-22
committed
fix(player): rename crossorigin prop to crossOrigin 
1 parent ecbf277 commit 37513ea

16 files changed

Lines changed: 53 additions & 37 deletions

File tree

‎packages/react/src/components/ui/sliders/time-slider.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -379,11 +379,11 @@ export interface VideoProviderProps {
379379

380380
const VideoProvider = React.forwardRef<HTMLVideoElement, VideoProviderProps>(
381381
({ instance, children, ...props }, forwardRef) => {
382-
const { crossorigin, canLoad } = useStateContext(mediaState),
382+
const { crossOrigin, canLoad } = useStateContext(mediaState),
383383
{ src, video } = instance.$state,
384384
$src = useSignal(src),
385385
$canLoad = useSignal(canLoad),
386-
$crossorigin = useSignal(crossorigin);
386+
$crossOrigin = useSignal(crossOrigin);
387387
return (
388388
<Primitive.video
389389
style={{ maxWidth: 'unset' }}
@@ -392,7 +392,7 @@ const VideoProvider = React.forwardRef<HTMLVideoElement, VideoProviderProps>(
392392
muted
393393
playsInline
394394
preload={$canLoad ? 'auto' : 'none'}
395-
crossOrigin={($crossorigin as '') || undefined}
395+
crossOrigin={($crossOrigin as '') || undefined}
396396
ref={composeRefs(video.set as any, forwardRef)}
397397
>
398398
{children}

‎packages/react/src/components/ui/thumbnail.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,13 @@ export interface ImgProps extends PrimitivePropsWithRef<'img'> {
5858
}
5959

6060
const Img = React.forwardRef<HTMLImageElement, ImgProps>(({ children, ...props }, forwardRef) => {
61-
const { crossorigin } = useStateContext(mediaState),
61+
const { crossOrigin } = useStateContext(mediaState),
6262
{ src, img } = useStateContext(ThumbnailInstance.state),
6363
$src = useSignal(src),
64-
$crossorigin = useSignal(crossorigin);
64+
$crossOrigin = useSignal(crossOrigin);
6565
return (
6666
<Primitive.img
67-
crossOrigin={$crossorigin as '' | undefined}
67+
crossOrigin={$crossOrigin as '' | undefined}
6868
{...props}
6969
src={$src}
7070
ref={composeRefs((img as any).set, forwardRef)}

‎packages/vidstack/src/components/player.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ export class MediaPlayer
162162
context.remote.setPlayer(this);
163163
context.$iosControls = computed(this._isIOSControls.bind(this));
164164
context.textTracks = new TextTrackList(storage);
165-
context.textTracks[TextTrackSymbol._crossorigin] = this.$state.crossorigin;
165+
context.textTracks[TextTrackSymbol._crossOrigin] = this.$state.crossOrigin;
166166
context.textRenderers = new TextRenderers(context);
167167
context.ariaKeys = {};
168168

‎packages/vidstack/src/components/provider/source-select.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,8 @@ export class SourceSelection {
115115
}
116116

117117
if (noMatch) {
118-
const { crossorigin } = $state,
119-
credentials = getRequestCredentials(crossorigin()),
118+
const { crossOrigin } = $state,
119+
credentials = getRequestCredentials(crossOrigin()),
120120
abort = new AbortController();
121121

122122
Promise.all(
@@ -201,7 +201,7 @@ export class SourceSelection {
201201

202202
const provider = this._media.$provider(),
203203
source = this._media.$state.source(),
204-
crossorigin = peek(this._media.$state.crossorigin);
204+
crossOrigin = peek(this._media.$state.crossOrigin);
205205

206206
if (isSameSrc(provider?.currentSrc, source)) {
207207
return;
@@ -214,7 +214,7 @@ export class SourceSelection {
214214
// Determined using `HLSProvider` if `hls.js` supported.
215215
if (!isHLSSupported()) {
216216
resolveStreamTypeFromHLSManifest(source.src as string, {
217-
credentials: getRequestCredentials(crossorigin),
217+
credentials: getRequestCredentials(crossOrigin),
218218
signal: abort.signal,
219219
})
220220
.then((streamType) => {

‎packages/vidstack/src/components/ui/poster.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,9 +145,11 @@ export class Poster extends Component<PosterProps, PosterState> {
145145
}
146146

147147
private _watchCrossOrigin() {
148-
const { src } = this.$props,
148+
const { src, crossOrigin: crossOriginProp } = this.$props,
149149
{ crossOrigin: crossOriginState } = this.$state,
150-
crossOrigin = this.$props.crossOrigin();
150+
{ crossOrigin: mediaCrossOrigin } = this._media.$state,
151+
crossOrigin = crossOriginProp() !== null ? crossOriginProp() : mediaCrossOrigin();
152+
151153
crossOriginState.set(
152154
/ytimg\.com|vimeo/.test(src() || '')
153155
? null

‎packages/vidstack/src/components/ui/thumbnails/thumbnail-loader.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export class ThumbnailsLoader {
3333
if (!canLoad()) return;
3434

3535
const controller = new AbortController(),
36-
{ crossorigin } = this._media.$state;
36+
{ crossOrigin } = this._media.$state;
3737

3838
const src = this.$src();
3939
if (!src) return;
@@ -56,7 +56,7 @@ export class ThumbnailsLoader {
5656
try {
5757
const response = await fetch(src, {
5858
signal: controller.signal,
59-
credentials: getRequestCredentials(crossorigin()),
59+
credentials: getRequestCredentials(crossOrigin()),
6060
}),
6161
isJSON = response.headers.get('content-type') === 'application/json';
6262

‎packages/vidstack/src/core/api/player-props.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const mediaPlayerProps: MediaPlayerProps = {
1212
controls: false,
1313
currentTime: 0,
1414
crossorigin: null,
15+
crossOrigin: null,
1516
fullscreenOrientation: 'landscape',
1617
load: 'visible',
1718
posterLoad: 'visible',
@@ -71,13 +72,17 @@ export interface MediaPlayerProps
7172
| 'liveEdgeTolerance'
7273
| 'minLiveDVRWindow'
7374
> {
75+
/**
76+
* @deprecated - Use `crossOrigin`
77+
*/
78+
crossorigin: string | true | null;
7479
/**
7580
* Defines how the media element handles cross-origin requests, thereby enabling the
7681
* configuration of the CORS requests for the element's fetched data.
7782
*
7883
* @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin}
7984
*/
80-
crossorigin: string | true | null;
85+
crossOrigin: true | MediaState['crossOrigin'];
8186
/**
8287
* The URL and optionally type of the current media resource/s to be considered for playback.
8388
*

‎packages/vidstack/src/core/api/player-state.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export const mediaState = new State<MediaState>({
3333
controls: false,
3434
controlsVisible: false,
3535
crossorigin: null,
36+
crossOrigin: null,
3637
ended: false,
3738
error: null,
3839
fullscreen: false,
@@ -176,6 +177,7 @@ const DO_NOT_RESET_ON_SRC_CHANGE = new Set<keyof MediaState>([
176177
'canSetVolume',
177178
'controls',
178179
'crossorigin',
180+
'crossOrigin',
179181
'fullscreen',
180182
'height',
181183
'inferredViewType',
@@ -347,13 +349,17 @@ export interface MediaState {
347349
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controls}
348350
*/
349351
controls: boolean;
352+
/**
353+
* @deprecated - Use `crossOrigin`
354+
*/
355+
crossorigin: string | null;
350356
/**
351357
* Defines how the media element handles cross-origin requests, thereby enabling the
352358
* configuration of the CORS requests for the element's fetched data.
353359
*
354360
* @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin}
355361
*/
356-
crossorigin: string | null;
362+
crossOrigin: '' | 'anonymous' | 'use-credentials' | null;
357363
/**
358364
* The URL of the current poster. Defaults to `''` if no media/poster has been given or
359365
* loaded.

‎packages/vidstack/src/core/state/media-state-sync.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,11 @@ export class MediaStateSync extends MediaPlayerController {
9393
}
9494

9595
private _watchCrossOrigin() {
96-
const crossorigin = this.$props.crossorigin();
97-
this.$state.crossorigin.set(crossorigin === true ? '' : crossorigin);
96+
// crossorigin is deprecated, we're syncing for backwards compatibility.
97+
const _crossOrigin = this.$props.crossOrigin() ?? this.$props.crossorigin(),
98+
value = _crossOrigin === true ? '' : (_crossOrigin as '');
99+
this.$state.crossorigin.set(value);
100+
this.$state.crossOrigin.set(value);
98101
}
99102

100103
private _watchPlaysinline() {

‎packages/vidstack/src/core/tracks/text/symbols.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const CROSSORIGIN = Symbol(__DEV__ ? 'TEXT_TRACK_CROSSORIGIN' : 0),
1+
const CROSS_ORIGIN = Symbol(__DEV__ ? 'TEXT_TRACK_CROSS_ORIGIN' : 0),
22
READY_STATE = Symbol(__DEV__ ? 'TEXT_TRACK_READY_STATE' : 0),
33
UPDATE_ACTIVE_CUES = Symbol(__DEV__ ? 'TEXT_TRACK_UPDATE_ACTIVE_CUES' : 0),
44
CAN_LOAD = Symbol(__DEV__ ? 'TEXT_TRACK_CAN_LOAD' : 0),
@@ -7,7 +7,7 @@ const CROSSORIGIN = Symbol(__DEV__ ? 'TEXT_TRACK_CROSSORIGIN' : 0),
77
NATIVE_HLS = Symbol(__DEV__ ? 'TEXT_TRACK_NATIVE_HLS' : 0);
88

99
export const TextTrackSymbol = {
10-
_crossorigin: CROSSORIGIN,
10+
_crossOrigin: CROSS_ORIGIN,
1111
_readyState: READY_STATE,
1212
_updateActiveCues: UPDATE_ACTIVE_CUES,
1313
_canLoad: CAN_LOAD,

0 commit comments

Comments
 (0)