Skip to content

Commit 57c8d07

Browse files
mihar-22mihar-22
committed
fix(player): useMediaRemote throws on init
1 parent 93f27a2 commit 57c8d07

9 files changed

Lines changed: 48 additions & 28 deletions

File tree

‎packages/react/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@
2828
"types": "pnpm build:types && rollup -c --config-types",
2929
"clean": "rimraf dist player",
3030
"format": "prettier src --write --loglevel warn",
31-
"watch": "pnpm run build:types -w & rollup -c -w"
31+
"watch": "pnpm watch:core & pnpm run build:types -w & rollup -c -w",
32+
"watch:core": "pnpm -F vidstack dev:local"
3233
},
3334
"peerDependencies": {
3435
"@types/react": "^18.0.0",

‎packages/react/rollup.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,8 +170,8 @@ function define({ dev }) {
170170
MODE_WATCH &&
171171
dev && {
172172
name: 'sandbox',
173-
async closeBundle() {
174-
await launchSandbox();
173+
closeBundle() {
174+
launchSandbox();
175175
},
176176
},
177177
],

‎packages/react/src/hooks/use-media-remote.ts‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import * as React from 'react';
33
import { useReactContext } from 'maverick.js/react';
44
import { mediaContext, MediaRemoteControl } from 'vidstack/local';
55

6+
import { MediaPlayerInstance } from '../components/primitives/instances';
7+
68
/**
79
* A media remote provides a simple facade for dispatching media requests to the nearest media
810
* player.
@@ -15,12 +17,21 @@ import { mediaContext, MediaRemoteControl } from 'vidstack/local';
1517
export function useMediaRemote(
1618
target?: EventTarget | null | React.RefObject<EventTarget | null>,
1719
): MediaRemoteControl {
18-
const media = useReactContext(mediaContext)!;
19-
return React.useMemo<MediaRemoteControl>(() => {
20-
if (!target) return media.remote;
21-
const remote = new MediaRemoteControl(__DEV__ ? media.logger : void 0);
22-
remote.setPlayer(media.player);
23-
remote.setTarget(target && 'current' in target ? target.current : target);
24-
return remote;
25-
}, [media, target]);
20+
const media = useReactContext(mediaContext)!,
21+
remote = React.useRef<MediaRemoteControl>();
22+
23+
if (!remote.current) {
24+
remote.current = new MediaRemoteControl();
25+
}
26+
27+
React.useEffect(() => {
28+
const ref = target && 'current' in target ? target.current : target,
29+
isPlayerRef = ref instanceof MediaPlayerInstance,
30+
player = isPlayerRef ? ref : media?.player;
31+
32+
remote.current!.setPlayer(player ?? null);
33+
remote.current!.setTarget(ref ?? null);
34+
}, [media, target && 'current' in target ? target.current : target]);
35+
36+
return remote.current;
2637
}

‎packages/vidstack/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"scripts": {
2626
"analyze": "maverick analyze \"src/**/*.ts\"",
2727
"dev": "pnpm clean && pnpm build:types && pnpm watch",
28-
"dev:local": "pnpm clean && pnpm build:types && pnpm watch:local",
28+
"dev:local": "pnpm watch:local",
2929
"build": "rollup -c",
3030
"build:local": "pnpm clean && rollup -c --config-local",
3131
"build:types": "tsc -p tsconfig.build.json",

‎packages/vidstack/rollup.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,7 @@ function define({ target, type, minify }) {
244244
},
245245
},
246246
MODE_WATCH &&
247+
!MODE_LOCAL &&
247248
!isProd &&
248249
!isServer && {
249250
name: 'sandbox',

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,12 @@ export class MediaPlayer
120120
private _media: MediaContext;
121121
private _stateMgr: MediaStateManager;
122122
private _requestMgr: MediaRequestManager;
123-
private _canPlayQueue = new RequestQueue();
123+
124+
readonly canPlayQueue = new RequestQueue();
125+
126+
get logger() {
127+
return this._media.logger;
128+
}
124129

125130
private get _provider() {
126131
return this._media.$provider() as AnyMediaProvider | null;
@@ -237,6 +242,7 @@ export class MediaPlayer
237242
protected override onDestroy(): void {
238243
// @ts-expect-error
239244
this._media.player = null;
245+
this.canPlayQueue._reset();
240246
}
241247

242248
private _initState() {
@@ -286,8 +292,8 @@ export class MediaPlayer
286292
}
287293

288294
private _watchCanPlay() {
289-
if (this.$state.canPlay() && this._provider) this._canPlayQueue._start();
290-
else this._canPlayQueue._stop();
295+
if (this.$state.canPlay() && this._provider) this.canPlayQueue._start();
296+
else this.canPlayQueue._stop();
291297
}
292298

293299
private _onProvidedTypesChange() {
@@ -451,8 +457,8 @@ export class MediaPlayer
451457

452458
private _queuePausedUpdate(paused: boolean) {
453459
if (paused) {
454-
this._canPlayQueue._enqueue('paused', () => this._requestMgr._pause());
455-
} else this._canPlayQueue._enqueue('paused', () => this._requestMgr._play());
460+
this.canPlayQueue._enqueue('paused', () => this._requestMgr._pause());
461+
} else this.canPlayQueue._enqueue('paused', () => this._requestMgr._play());
456462
}
457463

458464
@prop
@@ -469,7 +475,7 @@ export class MediaPlayer
469475
}
470476

471477
private _queueMutedUpdate(muted: boolean) {
472-
this._canPlayQueue._enqueue('muted', () => (this._provider!.muted = muted));
478+
this.canPlayQueue._enqueue('muted', () => (this._provider!.muted = muted));
473479
}
474480

475481
@prop
@@ -486,7 +492,7 @@ export class MediaPlayer
486492
}
487493

488494
private _queueCurrentTimeUpdate(time: number) {
489-
this._canPlayQueue._enqueue('currentTime', () => {
495+
this.canPlayQueue._enqueue('currentTime', () => {
490496
const adapter = this._provider;
491497
if (time !== adapter!.currentTime) {
492498
peek(() => {
@@ -516,7 +522,7 @@ export class MediaPlayer
516522

517523
private _queueVolumeUpdate(volume: number) {
518524
const clampedVolume = clampNumber(0, volume, 1);
519-
this._canPlayQueue._enqueue('volume', () => (this._provider!.volume = clampedVolume));
525+
this.canPlayQueue._enqueue('volume', () => (this._provider!.volume = clampedVolume));
520526
}
521527

522528
@prop
@@ -533,7 +539,7 @@ export class MediaPlayer
533539
}
534540

535541
private _queuePlaysinlineUpdate(inline: boolean) {
536-
this._canPlayQueue._enqueue('playsinline', () => (this._provider!.playsinline = inline));
542+
this.canPlayQueue._enqueue('playsinline', () => (this._provider!.playsinline = inline));
537543
}
538544

539545
@prop
@@ -550,7 +556,7 @@ export class MediaPlayer
550556
}
551557

552558
private _queuePlaybackRateUpdate(rate: number) {
553-
this._canPlayQueue._enqueue('rate', () => (this._provider!.playbackRate = rate));
559+
this.canPlayQueue._enqueue('rate', () => (this._provider!.playbackRate = rate));
554560
}
555561

556562
/**

‎packages/vidstack/src/core/state/media-request-manager.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,6 @@ export class MediaRequestManager extends MediaPlayerController implements MediaR
6868
}
6969

7070
protected override onConnect() {
71-
effect(this._onControlsHideDelayChange.bind(this));
72-
effect(this._onFullscreenSupportChange.bind(this));
73-
effect(this._onPiPSupportChange.bind(this));
74-
7571
const names = Object.getOwnPropertyNames(Object.getPrototypeOf(this)),
7672
handle = this._handleRequest.bind(this);
7773

@@ -82,6 +78,10 @@ export class MediaRequestManager extends MediaPlayerController implements MediaR
8278
}
8379

8480
this.listen('fullscreen-change', this._onFullscreenChange.bind(this));
81+
82+
effect(this._onControlsHideDelayChange.bind(this));
83+
effect(this._onFullscreenSupportChange.bind(this));
84+
effect(this._onPiPSupportChange.bind(this));
8585
}
8686

8787
private _handleRequest(event: Event) {

‎packages/vidstack/src/core/state/remote-control.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component } from 'maverick.js';
22
import { DOMEvent } from 'maverick.js/std';
33

44
import type { MediaPlayer } from '../../components/player';
5-
import type { Logger } from '../../foundation/logger/controller';
5+
import { Logger } from '../../foundation/logger/controller';
66
import type { MediaFullscreenRequestTarget, MediaRequestEvents } from '../api/media-request-events';
77
import { isTrackCaptionKind } from '../tracks/text/text-track';
88

@@ -18,7 +18,7 @@ export class MediaRemoteControl {
1818
private _player: MediaPlayer | null = null;
1919
private _prevTrackIndex = -1;
2020

21-
constructor(private _logger?: Logger) {}
21+
constructor(private _logger = __DEV__ ? new Logger() : undefined) {}
2222

2323
/**
2424
* Set the target from which to dispatch media requests events from. The events should bubble

‎packages/vidstack/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ if (__DEV__) {
33
}
44

55
// Foundation
6+
export { Logger } from './foundation/logger/controller';
67
export * from './foundation/list/list';
78
export * from './foundation/fullscreen/controller';
89
export * from './foundation/fullscreen/events';

0 commit comments

Comments
 (0)