@remotion/player 4.0.234 → 4.0.236
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/PlayerControls.d.ts +1 -1
- package/dist/cjs/error-boundary.d.ts +1 -1
- package/dist/cjs/event-emitter.d.ts +17 -17
- package/dist/cjs/event-emitter.js +63 -63
- package/dist/cjs/index.d.ts +2 -2
- package/dist/cjs/is-backgrounded.d.ts +1 -1
- package/dist/cjs/render-volume-slider.d.ts +1 -1
- package/dist/cjs/use-hover-state.d.ts +1 -1
- package/dist/cjs/utils/use-component-visible.d.ts +1 -1
- package/dist/cjs/utils/use-element-size.d.ts +1 -1
- package/dist/esm/index.mjs +34 -34
- package/package.json +5 -5
|
@@ -29,7 +29,7 @@ export declare const Controls: React.FC<{
|
|
|
29
29
|
readonly renderFullscreenButton: RenderFullscreenButton | null;
|
|
30
30
|
readonly alwaysShowControls: boolean;
|
|
31
31
|
readonly showPlaybackRateControl: boolean | number[];
|
|
32
|
-
readonly containerRef: React.RefObject<HTMLDivElement>;
|
|
32
|
+
readonly containerRef: React.RefObject<HTMLDivElement | null>;
|
|
33
33
|
readonly buffering: boolean;
|
|
34
34
|
readonly hideControlsWhenPointerDoesntMove: boolean | number;
|
|
35
35
|
readonly onPointerDown: ((ev: PointerEvent | SyntheticEvent) => void) | undefined;
|
|
@@ -15,5 +15,5 @@ export declare class ErrorBoundary extends React.Component<{
|
|
|
15
15
|
hasError: Error;
|
|
16
16
|
};
|
|
17
17
|
componentDidCatch(error: Error): void;
|
|
18
|
-
render(): string | number |
|
|
18
|
+
render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
|
|
19
19
|
}
|
|
@@ -64,28 +64,28 @@ export declare class PlayerEmitter {
|
|
|
64
64
|
addEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
|
|
65
65
|
removeEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
|
|
66
66
|
private dispatchEvent;
|
|
67
|
-
dispatchSeek(frame: number)
|
|
68
|
-
dispatchVolumeChange(volume: number)
|
|
69
|
-
dispatchPause()
|
|
70
|
-
dispatchPlay()
|
|
71
|
-
dispatchEnded()
|
|
72
|
-
dispatchRateChange(playbackRate: number)
|
|
73
|
-
dispatchScaleChange(scale: number)
|
|
74
|
-
dispatchError(error: Error)
|
|
75
|
-
dispatchTimeUpdate(event: TimeUpdateEventPayload)
|
|
76
|
-
dispatchFrameUpdate(event: FrameUpdateEventPayload)
|
|
77
|
-
dispatchFullscreenChange(event: FullscreenChangeEventPayload)
|
|
78
|
-
dispatchMuteChange(event: MuteChangeEventPayload)
|
|
79
|
-
dispatchWaiting(event: WaitingEventPayload)
|
|
80
|
-
dispatchResume(event: ResumeEventPayload)
|
|
67
|
+
dispatchSeek: (frame: number) => void;
|
|
68
|
+
dispatchVolumeChange: (volume: number) => void;
|
|
69
|
+
dispatchPause: () => void;
|
|
70
|
+
dispatchPlay: () => void;
|
|
71
|
+
dispatchEnded: () => void;
|
|
72
|
+
dispatchRateChange: (playbackRate: number) => void;
|
|
73
|
+
dispatchScaleChange: (scale: number) => void;
|
|
74
|
+
dispatchError: (error: Error) => void;
|
|
75
|
+
dispatchTimeUpdate: (event: TimeUpdateEventPayload) => void;
|
|
76
|
+
dispatchFrameUpdate: (event: FrameUpdateEventPayload) => void;
|
|
77
|
+
dispatchFullscreenChange: (event: FullscreenChangeEventPayload) => void;
|
|
78
|
+
dispatchMuteChange: (event: MuteChangeEventPayload) => void;
|
|
79
|
+
dispatchWaiting: (event: WaitingEventPayload) => void;
|
|
80
|
+
dispatchResume: (event: ResumeEventPayload) => void;
|
|
81
81
|
}
|
|
82
82
|
export declare class ThumbnailEmitter {
|
|
83
83
|
listeners: ThumbnailListeners;
|
|
84
84
|
addEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
|
|
85
85
|
removeEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
|
|
86
86
|
private dispatchEvent;
|
|
87
|
-
dispatchError(error: Error)
|
|
88
|
-
dispatchWaiting(event: WaitingEventPayload)
|
|
89
|
-
dispatchResume(event: ResumeEventPayload)
|
|
87
|
+
dispatchError: (error: Error) => void;
|
|
88
|
+
dispatchWaiting: (event: WaitingEventPayload) => void;
|
|
89
|
+
dispatchResume: (event: ResumeEventPayload) => void;
|
|
90
90
|
}
|
|
91
91
|
export {};
|
|
@@ -19,6 +19,58 @@ class PlayerEmitter {
|
|
|
19
19
|
waiting: [],
|
|
20
20
|
resume: [],
|
|
21
21
|
};
|
|
22
|
+
this.dispatchSeek = (frame) => {
|
|
23
|
+
this.dispatchEvent('seeked', {
|
|
24
|
+
frame,
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
this.dispatchVolumeChange = (volume) => {
|
|
28
|
+
this.dispatchEvent('volumechange', {
|
|
29
|
+
volume,
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
this.dispatchPause = () => {
|
|
33
|
+
this.dispatchEvent('pause', undefined);
|
|
34
|
+
};
|
|
35
|
+
this.dispatchPlay = () => {
|
|
36
|
+
this.dispatchEvent('play', undefined);
|
|
37
|
+
};
|
|
38
|
+
this.dispatchEnded = () => {
|
|
39
|
+
this.dispatchEvent('ended', undefined);
|
|
40
|
+
};
|
|
41
|
+
this.dispatchRateChange = (playbackRate) => {
|
|
42
|
+
this.dispatchEvent('ratechange', {
|
|
43
|
+
playbackRate,
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
this.dispatchScaleChange = (scale) => {
|
|
47
|
+
this.dispatchEvent('scalechange', {
|
|
48
|
+
scale,
|
|
49
|
+
});
|
|
50
|
+
};
|
|
51
|
+
this.dispatchError = (error) => {
|
|
52
|
+
this.dispatchEvent('error', {
|
|
53
|
+
error,
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
this.dispatchTimeUpdate = (event) => {
|
|
57
|
+
this.dispatchEvent('timeupdate', event);
|
|
58
|
+
};
|
|
59
|
+
this.dispatchFrameUpdate = (event) => {
|
|
60
|
+
this.dispatchEvent('frameupdate', event);
|
|
61
|
+
};
|
|
62
|
+
this.dispatchFullscreenChange = (event) => {
|
|
63
|
+
this.dispatchEvent('fullscreenchange', event);
|
|
64
|
+
};
|
|
65
|
+
this.dispatchMuteChange = (event) => {
|
|
66
|
+
this.dispatchEvent('mutechange', event);
|
|
67
|
+
};
|
|
68
|
+
this.dispatchWaiting = (event) => {
|
|
69
|
+
this.dispatchEvent('waiting', event);
|
|
70
|
+
};
|
|
71
|
+
this.dispatchResume = (event) => {
|
|
72
|
+
this.dispatchEvent('resume', event);
|
|
73
|
+
};
|
|
22
74
|
}
|
|
23
75
|
addEventListener(name, callback) {
|
|
24
76
|
this.listeners[name].push(callback);
|
|
@@ -31,58 +83,6 @@ class PlayerEmitter {
|
|
|
31
83
|
callback({ detail: context });
|
|
32
84
|
});
|
|
33
85
|
}
|
|
34
|
-
dispatchSeek(frame) {
|
|
35
|
-
this.dispatchEvent('seeked', {
|
|
36
|
-
frame,
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
dispatchVolumeChange(volume) {
|
|
40
|
-
this.dispatchEvent('volumechange', {
|
|
41
|
-
volume,
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
dispatchPause() {
|
|
45
|
-
this.dispatchEvent('pause', undefined);
|
|
46
|
-
}
|
|
47
|
-
dispatchPlay() {
|
|
48
|
-
this.dispatchEvent('play', undefined);
|
|
49
|
-
}
|
|
50
|
-
dispatchEnded() {
|
|
51
|
-
this.dispatchEvent('ended', undefined);
|
|
52
|
-
}
|
|
53
|
-
dispatchRateChange(playbackRate) {
|
|
54
|
-
this.dispatchEvent('ratechange', {
|
|
55
|
-
playbackRate,
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
dispatchScaleChange(scale) {
|
|
59
|
-
this.dispatchEvent('scalechange', {
|
|
60
|
-
scale,
|
|
61
|
-
});
|
|
62
|
-
}
|
|
63
|
-
dispatchError(error) {
|
|
64
|
-
this.dispatchEvent('error', {
|
|
65
|
-
error,
|
|
66
|
-
});
|
|
67
|
-
}
|
|
68
|
-
dispatchTimeUpdate(event) {
|
|
69
|
-
this.dispatchEvent('timeupdate', event);
|
|
70
|
-
}
|
|
71
|
-
dispatchFrameUpdate(event) {
|
|
72
|
-
this.dispatchEvent('frameupdate', event);
|
|
73
|
-
}
|
|
74
|
-
dispatchFullscreenChange(event) {
|
|
75
|
-
this.dispatchEvent('fullscreenchange', event);
|
|
76
|
-
}
|
|
77
|
-
dispatchMuteChange(event) {
|
|
78
|
-
this.dispatchEvent('mutechange', event);
|
|
79
|
-
}
|
|
80
|
-
dispatchWaiting(event) {
|
|
81
|
-
this.dispatchEvent('waiting', event);
|
|
82
|
-
}
|
|
83
|
-
dispatchResume(event) {
|
|
84
|
-
this.dispatchEvent('resume', event);
|
|
85
|
-
}
|
|
86
86
|
}
|
|
87
87
|
exports.PlayerEmitter = PlayerEmitter;
|
|
88
88
|
class ThumbnailEmitter {
|
|
@@ -92,6 +92,17 @@ class ThumbnailEmitter {
|
|
|
92
92
|
waiting: [],
|
|
93
93
|
resume: [],
|
|
94
94
|
};
|
|
95
|
+
this.dispatchError = (error) => {
|
|
96
|
+
this.dispatchEvent('error', {
|
|
97
|
+
error,
|
|
98
|
+
});
|
|
99
|
+
};
|
|
100
|
+
this.dispatchWaiting = (event) => {
|
|
101
|
+
this.dispatchEvent('waiting', event);
|
|
102
|
+
};
|
|
103
|
+
this.dispatchResume = (event) => {
|
|
104
|
+
this.dispatchEvent('resume', event);
|
|
105
|
+
};
|
|
95
106
|
}
|
|
96
107
|
addEventListener(name, callback) {
|
|
97
108
|
this.listeners[name].push(callback);
|
|
@@ -104,16 +115,5 @@ class ThumbnailEmitter {
|
|
|
104
115
|
callback({ detail: context });
|
|
105
116
|
});
|
|
106
117
|
}
|
|
107
|
-
dispatchError(error) {
|
|
108
|
-
this.dispatchEvent('error', {
|
|
109
|
-
error,
|
|
110
|
-
});
|
|
111
|
-
}
|
|
112
|
-
dispatchWaiting(event) {
|
|
113
|
-
this.dispatchEvent('waiting', event);
|
|
114
|
-
}
|
|
115
|
-
dispatchResume(event) {
|
|
116
|
-
this.dispatchEvent('resume', event);
|
|
117
|
-
}
|
|
118
118
|
}
|
|
119
119
|
exports.ThumbnailEmitter = ThumbnailEmitter;
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -41,7 +41,7 @@ export declare const PlayerInternals: {
|
|
|
41
41
|
browserMediaControlsBehavior: import("./browser-mediasession.js").BrowserMediaControlsBehavior;
|
|
42
42
|
getCurrentFrame: import("./use-frame-imperative.js").GetCurrentFrame;
|
|
43
43
|
}) => void;
|
|
44
|
-
useElementSize: (ref: React.RefObject<HTMLElement>, options: {
|
|
44
|
+
useElementSize: (ref: React.RefObject<HTMLElement | null>, options: {
|
|
45
45
|
triggerOnWindowResize: boolean;
|
|
46
46
|
shouldApplyCssTransforms: boolean;
|
|
47
47
|
}) => import("./utils/use-element-size.js").Size | null;
|
|
@@ -57,7 +57,7 @@ export declare const PlayerInternals: {
|
|
|
57
57
|
yCorrection: number;
|
|
58
58
|
scale: number;
|
|
59
59
|
};
|
|
60
|
-
useHoverState: (ref: React.RefObject<HTMLDivElement>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
|
|
60
|
+
useHoverState: (ref: React.RefObject<HTMLDivElement | null>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
|
|
61
61
|
updateAllElementsSizes: () => void;
|
|
62
62
|
PlayerEmitterProvider: import("react").FC<{
|
|
63
63
|
readonly children: import("react").ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const useIsBackgrounded: () => import("react").
|
|
1
|
+
export declare const useIsBackgrounded: () => import("react").RefObject<boolean>;
|
|
@@ -3,7 +3,7 @@ type RenderVolumeSliderProps = {
|
|
|
3
3
|
readonly volume: number;
|
|
4
4
|
readonly isVertical: boolean;
|
|
5
5
|
readonly onBlur: () => void;
|
|
6
|
-
readonly inputRef: React.RefObject<HTMLInputElement>;
|
|
6
|
+
readonly inputRef: React.RefObject<HTMLInputElement | null>;
|
|
7
7
|
readonly setVolume: (u: number) => void;
|
|
8
8
|
};
|
|
9
9
|
export type RenderVolumeSlider = (props: RenderVolumeSliderProps) => React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const useHoverState: (ref: React.RefObject<HTMLDivElement>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
|
|
1
|
+
export declare const useHoverState: (ref: React.RefObject<HTMLDivElement | null>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export default function useComponentVisible(initialIsVisible: boolean): {
|
|
2
|
-
ref: import("react").RefObject<HTMLDivElement>;
|
|
2
|
+
ref: import("react").RefObject<HTMLDivElement | null>;
|
|
3
3
|
isComponentVisible: boolean;
|
|
4
4
|
setIsComponentVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
5
5
|
};
|
|
@@ -10,7 +10,7 @@ export type Size = {
|
|
|
10
10
|
refresh: () => void;
|
|
11
11
|
};
|
|
12
12
|
export declare const updateAllElementsSizes: () => void;
|
|
13
|
-
export declare const useElementSize: (ref: React.RefObject<HTMLElement>, options: {
|
|
13
|
+
export declare const useElementSize: (ref: React.RefObject<HTMLElement | null>, options: {
|
|
14
14
|
triggerOnWindowResize: boolean;
|
|
15
15
|
shouldApplyCssTransforms: boolean;
|
|
16
16
|
}) => Size | null;
|
package/dist/esm/index.mjs
CHANGED
|
@@ -348,58 +348,58 @@ class PlayerEmitter {
|
|
|
348
348
|
callback({ detail: context });
|
|
349
349
|
});
|
|
350
350
|
}
|
|
351
|
-
dispatchSeek(frame) {
|
|
351
|
+
dispatchSeek = (frame) => {
|
|
352
352
|
this.dispatchEvent("seeked", {
|
|
353
353
|
frame
|
|
354
354
|
});
|
|
355
|
-
}
|
|
356
|
-
dispatchVolumeChange(volume) {
|
|
355
|
+
};
|
|
356
|
+
dispatchVolumeChange = (volume) => {
|
|
357
357
|
this.dispatchEvent("volumechange", {
|
|
358
358
|
volume
|
|
359
359
|
});
|
|
360
|
-
}
|
|
361
|
-
dispatchPause() {
|
|
360
|
+
};
|
|
361
|
+
dispatchPause = () => {
|
|
362
362
|
this.dispatchEvent("pause", undefined);
|
|
363
|
-
}
|
|
364
|
-
dispatchPlay() {
|
|
363
|
+
};
|
|
364
|
+
dispatchPlay = () => {
|
|
365
365
|
this.dispatchEvent("play", undefined);
|
|
366
|
-
}
|
|
367
|
-
dispatchEnded() {
|
|
366
|
+
};
|
|
367
|
+
dispatchEnded = () => {
|
|
368
368
|
this.dispatchEvent("ended", undefined);
|
|
369
|
-
}
|
|
370
|
-
dispatchRateChange(playbackRate) {
|
|
369
|
+
};
|
|
370
|
+
dispatchRateChange = (playbackRate) => {
|
|
371
371
|
this.dispatchEvent("ratechange", {
|
|
372
372
|
playbackRate
|
|
373
373
|
});
|
|
374
|
-
}
|
|
375
|
-
dispatchScaleChange(scale) {
|
|
374
|
+
};
|
|
375
|
+
dispatchScaleChange = (scale) => {
|
|
376
376
|
this.dispatchEvent("scalechange", {
|
|
377
377
|
scale
|
|
378
378
|
});
|
|
379
|
-
}
|
|
380
|
-
dispatchError(error) {
|
|
379
|
+
};
|
|
380
|
+
dispatchError = (error) => {
|
|
381
381
|
this.dispatchEvent("error", {
|
|
382
382
|
error
|
|
383
383
|
});
|
|
384
|
-
}
|
|
385
|
-
dispatchTimeUpdate(event) {
|
|
384
|
+
};
|
|
385
|
+
dispatchTimeUpdate = (event) => {
|
|
386
386
|
this.dispatchEvent("timeupdate", event);
|
|
387
|
-
}
|
|
388
|
-
dispatchFrameUpdate(event) {
|
|
387
|
+
};
|
|
388
|
+
dispatchFrameUpdate = (event) => {
|
|
389
389
|
this.dispatchEvent("frameupdate", event);
|
|
390
|
-
}
|
|
391
|
-
dispatchFullscreenChange(event) {
|
|
390
|
+
};
|
|
391
|
+
dispatchFullscreenChange = (event) => {
|
|
392
392
|
this.dispatchEvent("fullscreenchange", event);
|
|
393
|
-
}
|
|
394
|
-
dispatchMuteChange(event) {
|
|
393
|
+
};
|
|
394
|
+
dispatchMuteChange = (event) => {
|
|
395
395
|
this.dispatchEvent("mutechange", event);
|
|
396
|
-
}
|
|
397
|
-
dispatchWaiting(event) {
|
|
396
|
+
};
|
|
397
|
+
dispatchWaiting = (event) => {
|
|
398
398
|
this.dispatchEvent("waiting", event);
|
|
399
|
-
}
|
|
400
|
-
dispatchResume(event) {
|
|
399
|
+
};
|
|
400
|
+
dispatchResume = (event) => {
|
|
401
401
|
this.dispatchEvent("resume", event);
|
|
402
|
-
}
|
|
402
|
+
};
|
|
403
403
|
}
|
|
404
404
|
|
|
405
405
|
class ThumbnailEmitter {
|
|
@@ -419,17 +419,17 @@ class ThumbnailEmitter {
|
|
|
419
419
|
callback({ detail: context });
|
|
420
420
|
});
|
|
421
421
|
}
|
|
422
|
-
dispatchError(error) {
|
|
422
|
+
dispatchError = (error) => {
|
|
423
423
|
this.dispatchEvent("error", {
|
|
424
424
|
error
|
|
425
425
|
});
|
|
426
|
-
}
|
|
427
|
-
dispatchWaiting(event) {
|
|
426
|
+
};
|
|
427
|
+
dispatchWaiting = (event) => {
|
|
428
428
|
this.dispatchEvent("waiting", event);
|
|
429
|
-
}
|
|
430
|
-
dispatchResume(event) {
|
|
429
|
+
};
|
|
430
|
+
dispatchResume = (event) => {
|
|
431
431
|
this.dispatchEvent("resume", event);
|
|
432
|
-
}
|
|
432
|
+
};
|
|
433
433
|
}
|
|
434
434
|
|
|
435
435
|
// src/use-buffer-state-emitter.ts
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
|
|
4
4
|
},
|
|
5
5
|
"name": "@remotion/player",
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.236",
|
|
7
7
|
"description": "React component for embedding a Remotion preview into your app",
|
|
8
8
|
"main": "dist/cjs/index.js",
|
|
9
9
|
"types": "dist/cjs/index.d.ts",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
],
|
|
29
29
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"remotion": "4.0.
|
|
31
|
+
"remotion": "4.0.236"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": ">=16.8.0",
|
|
@@ -38,12 +38,12 @@
|
|
|
38
38
|
"@testing-library/react": "13.1.1",
|
|
39
39
|
"@happy-dom/global-registrator": "14.5.1",
|
|
40
40
|
"csstype": "^3.1.1",
|
|
41
|
-
"react": "
|
|
42
|
-
"react-dom": "
|
|
41
|
+
"react": "19.0.0",
|
|
42
|
+
"react-dom": "19.0.0",
|
|
43
43
|
"webpack": "5.96.1",
|
|
44
44
|
"zod": "3.22.3",
|
|
45
45
|
"eslint": "9.14.0",
|
|
46
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
46
|
+
"@remotion/eslint-config-internal": "4.0.236"
|
|
47
47
|
},
|
|
48
48
|
"keywords": [
|
|
49
49
|
"remotion",
|