@remotion/player 4.0.172 → 4.0.174
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/Player.d.ts +1 -0
- package/dist/cjs/Player.js +2 -2
- package/dist/cjs/PlayerControls.d.ts +2 -2
- package/dist/cjs/PlayerControls.js +7 -5
- package/dist/cjs/PlayerSeekBar.js +1 -0
- package/dist/cjs/PlayerUI.d.ts +1 -0
- package/dist/cjs/PlayerUI.js +16 -10
- package/dist/cjs/Thumbnail.d.ts +1 -0
- package/dist/cjs/Thumbnail.js +2 -2
- package/dist/cjs/ThumbnailUI.d.ts +1 -0
- package/dist/cjs/ThumbnailUI.js +7 -6
- package/dist/cjs/calculate-scale.d.ts +7 -4
- package/dist/cjs/calculate-scale.js +6 -6
- package/dist/cjs/index.d.ts +1 -1
- package/dist/cjs/use-player.d.ts +1 -1
- package/dist/cjs/utils/use-click-prevention-on-double-click.d.ts +5 -1
- package/dist/cjs/utils/use-click-prevention-on-double-click.js +13 -4
- package/dist/esm/index.mjs +63 -38
- package/package.json +2 -2
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/BufferingIndicator.d.ts +0 -5
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/BufferingIndicator.js +0 -38
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/DefaultPlayPauseButton.d.ts +0 -5
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/DefaultPlayPauseButton.js +0 -12
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/EmitterProvider.d.ts +0 -5
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/EmitterProvider.js +0 -20
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.d.ts +0 -5
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.js +0 -129
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.d.ts +0 -8
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.js +0 -156
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.d.ts +0 -59
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.js +0 -146
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.d.ts +0 -47
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.js +0 -176
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.d.ts +0 -8
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.js +0 -145
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerUI.d.ts +0 -46
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerUI.js +0 -370
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/SharedPlayerContext.d.ts +0 -15
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/SharedPlayerContext.js +0 -55
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Thumbnail.d.ts +0 -23
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Thumbnail.js +0 -48
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/ThumbnailUI.d.ts +0 -11
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/ThumbnailUI.js +0 -89
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-next-frame.d.ts +0 -14
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-next-frame.js +0 -24
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-scale.d.ts +0 -50
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-scale.js +0 -72
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/emitter-context.d.ts +0 -4
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/emitter-context.js +0 -3
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/error-boundary.d.ts +0 -19
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/error-boundary.js +0 -32
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/event-emitter.d.ts +0 -91
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/event-emitter.js +0 -114
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/format-time.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/format-time.js +0 -5
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/icons.d.ts +0 -10
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/icons.js +0 -39
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/index.d.ts +0 -65
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/index.js +0 -23
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/is-backgrounded.d.ts +0 -2
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/is-backgrounded.js +0 -20
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-css-classname.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-css-classname.js +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-methods.d.ts +0 -25
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-methods.js +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/index.test.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/index.test.js +0 -7
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/test-utils.d.ts +0 -6
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/test-utils.js +0 -14
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-in-out-frames.test.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-in-out-frames.test.js +0 -54
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-prop.test.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-prop.test.js +0 -129
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-buffer-state-emitter.d.ts +0 -2
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-buffer-state-emitter.js +0 -22
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-hover-state.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-hover-state.js +0 -43
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-playback.d.ts +0 -8
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-playback.js +0 -157
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-player.d.ts +0 -24
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-player.js +0 -157
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-thumbnail.d.ts +0 -6
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-thumbnail.js +0 -14
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-video-controls-resize.d.ts +0 -11
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-video-controls-resize.js +0 -35
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/calculate-player-size.d.ts +0 -9
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/calculate-player-size.js +0 -24
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/cancellable-promise.d.ts +0 -5
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/cancellable-promise.js +0 -22
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/delay.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/delay.js +0 -2
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/is-node.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/is-node.js +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/props-if-has-props.d.ts +0 -10
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/props-if-has-props.js +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-cancellable-promises.d.ts +0 -7
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-cancellable-promises.js +0 -18
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-click-prevention-on-double-click.d.ts +0 -3
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-click-prevention-on-double-click.js +0 -41
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-component-visible.d.ts +0 -6
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-component-visible.js +0 -18
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-element-size.d.ts +0 -16
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-element-size.js +0 -127
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-in-out-frame.d.ts +0 -6
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-in-out-frame.js +0 -49
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-initial-frame.d.ts +0 -4
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-initial-frame.js +0 -23
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-playbackrate.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-playbackrate.js +0 -14
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/validate.d.ts +0 -5
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/validate.js +0 -6
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/volume-persistance.d.ts +0 -2
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/volume-persistance.js +0 -29
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/tsconfig-esm.tsbuildinfo +0 -1
package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.js
DELETED
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
-
import { Internals, interpolate } from 'remotion';
|
|
4
|
-
import { useHoverState } from './use-hover-state.js';
|
|
5
|
-
import { usePlayer } from './use-player.js';
|
|
6
|
-
import { useElementSize } from './utils/use-element-size.js';
|
|
7
|
-
const getFrameFromX = (clientX, durationInFrames, width) => {
|
|
8
|
-
var _a;
|
|
9
|
-
const pos = clientX;
|
|
10
|
-
const frame = Math.round(interpolate(pos, [0, width], [0, (_a = durationInFrames - 1) !== null && _a !== void 0 ? _a : 0], {
|
|
11
|
-
extrapolateLeft: 'clamp',
|
|
12
|
-
extrapolateRight: 'clamp',
|
|
13
|
-
}));
|
|
14
|
-
return frame;
|
|
15
|
-
};
|
|
16
|
-
const BAR_HEIGHT = 5;
|
|
17
|
-
const KNOB_SIZE = 12;
|
|
18
|
-
const VERTICAL_PADDING = 4;
|
|
19
|
-
const containerStyle = {
|
|
20
|
-
userSelect: 'none',
|
|
21
|
-
paddingTop: VERTICAL_PADDING,
|
|
22
|
-
paddingBottom: VERTICAL_PADDING,
|
|
23
|
-
boxSizing: 'border-box',
|
|
24
|
-
cursor: 'pointer',
|
|
25
|
-
position: 'relative',
|
|
26
|
-
touchAction: 'none',
|
|
27
|
-
};
|
|
28
|
-
const barBackground = {
|
|
29
|
-
height: BAR_HEIGHT,
|
|
30
|
-
backgroundColor: 'rgba(255, 255, 255, 0.25)',
|
|
31
|
-
width: '100%',
|
|
32
|
-
borderRadius: BAR_HEIGHT / 2,
|
|
33
|
-
};
|
|
34
|
-
const findBodyInWhichDivIsLocated = (div) => {
|
|
35
|
-
let current = div;
|
|
36
|
-
while (current.parentElement) {
|
|
37
|
-
current = current.parentElement;
|
|
38
|
-
}
|
|
39
|
-
return current;
|
|
40
|
-
};
|
|
41
|
-
export const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
|
|
42
|
-
var _a;
|
|
43
|
-
const containerRef = useRef(null);
|
|
44
|
-
const barHovered = useHoverState(containerRef, false);
|
|
45
|
-
const size = useElementSize(containerRef, {
|
|
46
|
-
triggerOnWindowResize: true,
|
|
47
|
-
shouldApplyCssTransforms: true,
|
|
48
|
-
});
|
|
49
|
-
const { seek, play, pause, playing } = usePlayer();
|
|
50
|
-
const frame = Internals.Timeline.useTimelinePosition();
|
|
51
|
-
const [dragging, setDragging] = useState({
|
|
52
|
-
dragging: false,
|
|
53
|
-
});
|
|
54
|
-
const width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
|
|
55
|
-
const onPointerDown = useCallback((e) => {
|
|
56
|
-
var _a;
|
|
57
|
-
if (e.button !== 0) {
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
|
|
61
|
-
const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, width);
|
|
62
|
-
pause();
|
|
63
|
-
seek(_frame);
|
|
64
|
-
setDragging({
|
|
65
|
-
dragging: true,
|
|
66
|
-
wasPlaying: playing,
|
|
67
|
-
});
|
|
68
|
-
onSeekStart();
|
|
69
|
-
}, [durationInFrames, width, pause, seek, playing, onSeekStart]);
|
|
70
|
-
const onPointerMove = useCallback((e) => {
|
|
71
|
-
var _a;
|
|
72
|
-
if (!size) {
|
|
73
|
-
throw new Error('Player has no size');
|
|
74
|
-
}
|
|
75
|
-
if (!dragging.dragging) {
|
|
76
|
-
return;
|
|
77
|
-
}
|
|
78
|
-
const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
|
|
79
|
-
const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
|
|
80
|
-
seek(_frame);
|
|
81
|
-
}, [dragging.dragging, durationInFrames, seek, size]);
|
|
82
|
-
const onPointerUp = useCallback(() => {
|
|
83
|
-
setDragging({
|
|
84
|
-
dragging: false,
|
|
85
|
-
});
|
|
86
|
-
if (!dragging.dragging) {
|
|
87
|
-
return;
|
|
88
|
-
}
|
|
89
|
-
if (dragging.wasPlaying) {
|
|
90
|
-
play();
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
pause();
|
|
94
|
-
}
|
|
95
|
-
onSeekEnd();
|
|
96
|
-
}, [dragging, onSeekEnd, pause, play]);
|
|
97
|
-
useEffect(() => {
|
|
98
|
-
if (!dragging.dragging) {
|
|
99
|
-
return;
|
|
100
|
-
}
|
|
101
|
-
const body = findBodyInWhichDivIsLocated(containerRef.current);
|
|
102
|
-
body.addEventListener('pointermove', onPointerMove);
|
|
103
|
-
body.addEventListener('pointerup', onPointerUp);
|
|
104
|
-
return () => {
|
|
105
|
-
body.removeEventListener('pointermove', onPointerMove);
|
|
106
|
-
body.removeEventListener('pointerup', onPointerUp);
|
|
107
|
-
};
|
|
108
|
-
}, [dragging.dragging, onPointerMove, onPointerUp]);
|
|
109
|
-
const knobStyle = useMemo(() => {
|
|
110
|
-
return {
|
|
111
|
-
height: KNOB_SIZE,
|
|
112
|
-
width: KNOB_SIZE,
|
|
113
|
-
borderRadius: KNOB_SIZE / 2,
|
|
114
|
-
position: 'absolute',
|
|
115
|
-
top: VERTICAL_PADDING - KNOB_SIZE / 2 + 5 / 2,
|
|
116
|
-
backgroundColor: 'white',
|
|
117
|
-
left: Math.max(0, (frame / Math.max(1, durationInFrames - 1)) * width - KNOB_SIZE / 2),
|
|
118
|
-
boxShadow: '0 0 2px black',
|
|
119
|
-
opacity: Number(barHovered),
|
|
120
|
-
};
|
|
121
|
-
}, [barHovered, durationInFrames, frame, width]);
|
|
122
|
-
const fillStyle = useMemo(() => {
|
|
123
|
-
return {
|
|
124
|
-
height: BAR_HEIGHT,
|
|
125
|
-
backgroundColor: 'rgba(255, 255, 255, 1)',
|
|
126
|
-
width: ((frame - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) / (durationInFrames - 1)) * 100 + '%',
|
|
127
|
-
marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
|
|
128
|
-
borderRadius: BAR_HEIGHT / 2,
|
|
129
|
-
};
|
|
130
|
-
}, [durationInFrames, frame, inFrame]);
|
|
131
|
-
const active = useMemo(() => {
|
|
132
|
-
return {
|
|
133
|
-
height: BAR_HEIGHT,
|
|
134
|
-
backgroundColor: 'rgba(255, 255, 255, 0.25)',
|
|
135
|
-
width: (((outFrame !== null && outFrame !== void 0 ? outFrame : durationInFrames - 1) - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) /
|
|
136
|
-
(durationInFrames - 1)) *
|
|
137
|
-
100 +
|
|
138
|
-
'%',
|
|
139
|
-
marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
|
|
140
|
-
borderRadius: BAR_HEIGHT / 2,
|
|
141
|
-
position: 'absolute',
|
|
142
|
-
};
|
|
143
|
-
}, [durationInFrames, inFrame, outFrame]);
|
|
144
|
-
return (_jsxs("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [_jsxs("div", { style: barBackground, children: [_jsx("div", { style: active }), _jsx("div", { style: fillStyle })] }), _jsx("div", { style: knobStyle })] }));
|
|
145
|
-
};
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
|
|
3
|
-
import type { PlayerRef } from './player-methods.js';
|
|
4
|
-
export type ErrorFallback = (info: {
|
|
5
|
-
error: Error;
|
|
6
|
-
}) => React.ReactNode;
|
|
7
|
-
export type RenderLoading = (canvas: {
|
|
8
|
-
height: number;
|
|
9
|
-
width: number;
|
|
10
|
-
isBuffering: boolean;
|
|
11
|
-
}) => React.ReactNode;
|
|
12
|
-
export type RenderPoster = RenderLoading;
|
|
13
|
-
export type PosterFillMode = 'player-size' | 'composition-size';
|
|
14
|
-
declare const _default: React.ForwardRefExoticComponent<{
|
|
15
|
-
readonly controls: boolean;
|
|
16
|
-
readonly loop: boolean;
|
|
17
|
-
readonly autoPlay: boolean;
|
|
18
|
-
readonly allowFullscreen: boolean;
|
|
19
|
-
readonly inputProps: Record<string, unknown>;
|
|
20
|
-
readonly showVolumeControls: boolean;
|
|
21
|
-
readonly style?: React.CSSProperties | undefined;
|
|
22
|
-
readonly clickToPlay: boolean;
|
|
23
|
-
readonly doubleClickToFullscreen: boolean;
|
|
24
|
-
readonly spaceKeyToPlayOrPause: boolean;
|
|
25
|
-
readonly errorFallback: ErrorFallback;
|
|
26
|
-
readonly playbackRate: number;
|
|
27
|
-
readonly renderLoading: RenderLoading | undefined;
|
|
28
|
-
readonly renderPoster: RenderLoading | undefined;
|
|
29
|
-
readonly className: string | undefined;
|
|
30
|
-
readonly moveToBeginningWhenEnded: boolean;
|
|
31
|
-
readonly showPosterWhenPaused: boolean;
|
|
32
|
-
readonly showPosterWhenEnded: boolean;
|
|
33
|
-
readonly showPosterWhenUnplayed: boolean;
|
|
34
|
-
readonly showPosterWhenBuffering: boolean;
|
|
35
|
-
readonly inFrame: number | null;
|
|
36
|
-
readonly outFrame: number | null;
|
|
37
|
-
readonly initiallyShowControls: number | boolean;
|
|
38
|
-
readonly renderPlayPauseButton: RenderPlayPauseButton | null;
|
|
39
|
-
readonly renderFullscreen: RenderFullscreenButton | null;
|
|
40
|
-
readonly alwaysShowControls: boolean;
|
|
41
|
-
readonly showPlaybackRateControl: boolean | number[];
|
|
42
|
-
readonly posterFillMode: PosterFillMode;
|
|
43
|
-
readonly bufferStateDelayInMilliseconds: number;
|
|
44
|
-
readonly hideControlsWhenPointerDoesntMove: number | boolean;
|
|
45
|
-
} & React.RefAttributes<PlayerRef>>;
|
|
46
|
-
export default _default;
|
|
@@ -1,370 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import React, { Suspense, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
|
|
3
|
-
import { Internals } from 'remotion';
|
|
4
|
-
import { Controls } from './PlayerControls.js';
|
|
5
|
-
import { calculateCanvasTransformation, calculateContainerStyle, calculateOuter, calculateOuterStyle, } from './calculate-scale.js';
|
|
6
|
-
import { ErrorBoundary } from './error-boundary.js';
|
|
7
|
-
import { PLAYER_CSS_CLASSNAME } from './player-css-classname.js';
|
|
8
|
-
import { usePlayback } from './use-playback.js';
|
|
9
|
-
import { usePlayer } from './use-player.js';
|
|
10
|
-
import { IS_NODE } from './utils/is-node.js';
|
|
11
|
-
import { useClickPreventionOnDoubleClick } from './utils/use-click-prevention-on-double-click.js';
|
|
12
|
-
import { useElementSize } from './utils/use-element-size.js';
|
|
13
|
-
const reactVersion = React.version.split('.')[0];
|
|
14
|
-
if (reactVersion === '0') {
|
|
15
|
-
throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
|
|
16
|
-
}
|
|
17
|
-
const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
|
|
18
|
-
const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, }, ref) => {
|
|
19
|
-
var _a, _b, _c;
|
|
20
|
-
const config = Internals.useUnsafeVideoConfig();
|
|
21
|
-
const video = Internals.useVideo();
|
|
22
|
-
const container = useRef(null);
|
|
23
|
-
const canvasSize = useElementSize(container, {
|
|
24
|
-
triggerOnWindowResize: false,
|
|
25
|
-
shouldApplyCssTransforms: false,
|
|
26
|
-
});
|
|
27
|
-
const [hasPausedToResume, setHasPausedToResume] = useState(false);
|
|
28
|
-
const [shouldAutoplay, setShouldAutoPlay] = useState(autoPlay);
|
|
29
|
-
const [isFullscreen, setIsFullscreen] = useState(() => false);
|
|
30
|
-
const [seeking, setSeeking] = useState(false);
|
|
31
|
-
const supportsFullScreen = useMemo(() => {
|
|
32
|
-
if (typeof document === 'undefined') {
|
|
33
|
-
return false;
|
|
34
|
-
}
|
|
35
|
-
return Boolean(document.fullscreenEnabled || document.webkitFullscreenEnabled);
|
|
36
|
-
}, []);
|
|
37
|
-
const player = usePlayer();
|
|
38
|
-
usePlayback({
|
|
39
|
-
loop,
|
|
40
|
-
playbackRate,
|
|
41
|
-
moveToBeginningWhenEnded,
|
|
42
|
-
inFrame,
|
|
43
|
-
outFrame,
|
|
44
|
-
frameRef: player.remotionInternal_currentFrameRef,
|
|
45
|
-
});
|
|
46
|
-
useEffect(() => {
|
|
47
|
-
if (hasPausedToResume && !player.playing) {
|
|
48
|
-
setHasPausedToResume(false);
|
|
49
|
-
player.play();
|
|
50
|
-
}
|
|
51
|
-
}, [hasPausedToResume, player]);
|
|
52
|
-
useEffect(() => {
|
|
53
|
-
const { current } = container;
|
|
54
|
-
if (!current) {
|
|
55
|
-
return;
|
|
56
|
-
}
|
|
57
|
-
const onFullscreenChange = () => {
|
|
58
|
-
setIsFullscreen(document.fullscreenElement === current ||
|
|
59
|
-
document.webkitFullscreenElement === current);
|
|
60
|
-
};
|
|
61
|
-
document.addEventListener('fullscreenchange', onFullscreenChange);
|
|
62
|
-
document.addEventListener('webkitfullscreenchange', onFullscreenChange);
|
|
63
|
-
return () => {
|
|
64
|
-
document.removeEventListener('fullscreenchange', onFullscreenChange);
|
|
65
|
-
document.removeEventListener('webkitfullscreenchange', onFullscreenChange);
|
|
66
|
-
};
|
|
67
|
-
}, []);
|
|
68
|
-
const toggle = useCallback((e) => {
|
|
69
|
-
if (player.isPlaying()) {
|
|
70
|
-
player.pause();
|
|
71
|
-
}
|
|
72
|
-
else {
|
|
73
|
-
player.play(e);
|
|
74
|
-
}
|
|
75
|
-
}, [player]);
|
|
76
|
-
const requestFullscreen = useCallback(() => {
|
|
77
|
-
if (!allowFullscreen) {
|
|
78
|
-
throw new Error('allowFullscreen is false');
|
|
79
|
-
}
|
|
80
|
-
if (!supportsFullScreen) {
|
|
81
|
-
throw new Error('Browser doesnt support fullscreen');
|
|
82
|
-
}
|
|
83
|
-
if (!container.current) {
|
|
84
|
-
throw new Error('No player ref found');
|
|
85
|
-
}
|
|
86
|
-
if (container.current.webkitRequestFullScreen) {
|
|
87
|
-
container.current.webkitRequestFullScreen();
|
|
88
|
-
}
|
|
89
|
-
else {
|
|
90
|
-
container.current.requestFullscreen();
|
|
91
|
-
}
|
|
92
|
-
}, [allowFullscreen, supportsFullScreen]);
|
|
93
|
-
const exitFullscreen = useCallback(() => {
|
|
94
|
-
if (document.webkitExitFullscreen) {
|
|
95
|
-
document.webkitExitFullscreen();
|
|
96
|
-
}
|
|
97
|
-
else {
|
|
98
|
-
document.exitFullscreen();
|
|
99
|
-
}
|
|
100
|
-
}, []);
|
|
101
|
-
useEffect(() => {
|
|
102
|
-
const { current } = container;
|
|
103
|
-
if (!current) {
|
|
104
|
-
return;
|
|
105
|
-
}
|
|
106
|
-
const fullscreenChange = () => {
|
|
107
|
-
var _a;
|
|
108
|
-
const element = (_a = document.webkitFullscreenElement) !== null && _a !== void 0 ? _a : document.fullscreenElement;
|
|
109
|
-
if (element && element === container.current) {
|
|
110
|
-
player.emitter.dispatchFullscreenChange({
|
|
111
|
-
isFullscreen: true,
|
|
112
|
-
});
|
|
113
|
-
}
|
|
114
|
-
else {
|
|
115
|
-
player.emitter.dispatchFullscreenChange({
|
|
116
|
-
isFullscreen: false,
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
};
|
|
120
|
-
current.addEventListener('webkitfullscreenchange', fullscreenChange);
|
|
121
|
-
current.addEventListener('fullscreenchange', fullscreenChange);
|
|
122
|
-
return () => {
|
|
123
|
-
current.removeEventListener('webkitfullscreenchange', fullscreenChange);
|
|
124
|
-
current.removeEventListener('fullscreenchange', fullscreenChange);
|
|
125
|
-
};
|
|
126
|
-
}, [player.emitter]);
|
|
127
|
-
const durationInFrames = (_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1;
|
|
128
|
-
const layout = useMemo(() => {
|
|
129
|
-
if (!config || !canvasSize) {
|
|
130
|
-
return null;
|
|
131
|
-
}
|
|
132
|
-
return calculateCanvasTransformation({
|
|
133
|
-
canvasSize,
|
|
134
|
-
compositionHeight: config.height,
|
|
135
|
-
compositionWidth: config.width,
|
|
136
|
-
previewSize: 'auto',
|
|
137
|
-
});
|
|
138
|
-
}, [canvasSize, config]);
|
|
139
|
-
const scale = (_b = layout === null || layout === void 0 ? void 0 : layout.scale) !== null && _b !== void 0 ? _b : 1;
|
|
140
|
-
const initialScaleIgnored = useRef(false);
|
|
141
|
-
useEffect(() => {
|
|
142
|
-
if (!initialScaleIgnored.current) {
|
|
143
|
-
initialScaleIgnored.current = true;
|
|
144
|
-
return;
|
|
145
|
-
}
|
|
146
|
-
player.emitter.dispatchScaleChange(scale);
|
|
147
|
-
}, [player.emitter, scale]);
|
|
148
|
-
const { setMediaVolume, setMediaMuted } = useContext(Internals.SetMediaVolumeContext);
|
|
149
|
-
const { mediaMuted, mediaVolume } = useContext(Internals.MediaVolumeContext);
|
|
150
|
-
useEffect(() => {
|
|
151
|
-
player.emitter.dispatchVolumeChange(mediaVolume);
|
|
152
|
-
}, [player.emitter, mediaVolume]);
|
|
153
|
-
const isMuted = mediaMuted || mediaVolume === 0;
|
|
154
|
-
useEffect(() => {
|
|
155
|
-
player.emitter.dispatchMuteChange({
|
|
156
|
-
isMuted,
|
|
157
|
-
});
|
|
158
|
-
}, [player.emitter, isMuted]);
|
|
159
|
-
const [showBufferIndicator, setShowBufferState] = useState(false);
|
|
160
|
-
useEffect(() => {
|
|
161
|
-
let timeout = null;
|
|
162
|
-
let stopped = false;
|
|
163
|
-
const onBuffer = () => {
|
|
164
|
-
requestAnimationFrame(() => {
|
|
165
|
-
if (bufferStateDelayInMilliseconds === 0) {
|
|
166
|
-
setShowBufferState(true);
|
|
167
|
-
}
|
|
168
|
-
else {
|
|
169
|
-
timeout = setTimeout(() => {
|
|
170
|
-
if (!stopped) {
|
|
171
|
-
setShowBufferState(true);
|
|
172
|
-
}
|
|
173
|
-
}, bufferStateDelayInMilliseconds);
|
|
174
|
-
}
|
|
175
|
-
});
|
|
176
|
-
};
|
|
177
|
-
const onResume = () => {
|
|
178
|
-
requestAnimationFrame(() => {
|
|
179
|
-
stopped = true;
|
|
180
|
-
setShowBufferState(false);
|
|
181
|
-
if (timeout) {
|
|
182
|
-
clearTimeout(timeout);
|
|
183
|
-
}
|
|
184
|
-
});
|
|
185
|
-
};
|
|
186
|
-
player.emitter.addEventListener('waiting', onBuffer);
|
|
187
|
-
player.emitter.addEventListener('resume', onResume);
|
|
188
|
-
return () => {
|
|
189
|
-
player.emitter.removeEventListener('waiting', onBuffer);
|
|
190
|
-
player.emitter.removeEventListener('resume', onResume);
|
|
191
|
-
setShowBufferState(false);
|
|
192
|
-
if (timeout) {
|
|
193
|
-
clearTimeout(timeout);
|
|
194
|
-
}
|
|
195
|
-
stopped = true;
|
|
196
|
-
};
|
|
197
|
-
}, [bufferStateDelayInMilliseconds, player.emitter]);
|
|
198
|
-
useImperativeHandle(ref, () => {
|
|
199
|
-
const methods = {
|
|
200
|
-
play: player.play,
|
|
201
|
-
pause: () => {
|
|
202
|
-
// If, after .seek()-ing, the player was explicitly paused, we don't resume
|
|
203
|
-
setHasPausedToResume(false);
|
|
204
|
-
player.pause();
|
|
205
|
-
},
|
|
206
|
-
toggle,
|
|
207
|
-
getContainerNode: () => container.current,
|
|
208
|
-
getCurrentFrame: player.getCurrentFrame,
|
|
209
|
-
isPlaying: () => player.playing,
|
|
210
|
-
seekTo: (f) => {
|
|
211
|
-
const lastFrame = durationInFrames - 1;
|
|
212
|
-
const frameToSeekTo = Math.max(0, Math.min(lastFrame, f));
|
|
213
|
-
// continue playing after seeking if the player was playing before
|
|
214
|
-
if (player.isPlaying()) {
|
|
215
|
-
const pauseToResume = frameToSeekTo !== lastFrame || loop;
|
|
216
|
-
setHasPausedToResume(pauseToResume);
|
|
217
|
-
player.pause();
|
|
218
|
-
}
|
|
219
|
-
if (frameToSeekTo === lastFrame && !loop) {
|
|
220
|
-
player.emitter.dispatchEnded();
|
|
221
|
-
}
|
|
222
|
-
player.seek(frameToSeekTo);
|
|
223
|
-
},
|
|
224
|
-
isFullscreen: () => isFullscreen,
|
|
225
|
-
requestFullscreen,
|
|
226
|
-
exitFullscreen,
|
|
227
|
-
getVolume: () => {
|
|
228
|
-
if (mediaMuted) {
|
|
229
|
-
return 0;
|
|
230
|
-
}
|
|
231
|
-
return mediaVolume;
|
|
232
|
-
},
|
|
233
|
-
setVolume: (vol) => {
|
|
234
|
-
if (typeof vol !== 'number') {
|
|
235
|
-
throw new TypeError(`setVolume() takes a number, got value of type ${typeof vol}`);
|
|
236
|
-
}
|
|
237
|
-
if (isNaN(vol)) {
|
|
238
|
-
throw new TypeError(`setVolume() got a number that is NaN. Volume must be between 0 and 1.`);
|
|
239
|
-
}
|
|
240
|
-
if (vol < 0 || vol > 1) {
|
|
241
|
-
throw new TypeError(`setVolume() got a number that is out of range. Must be between 0 and 1, got ${typeof vol}`);
|
|
242
|
-
}
|
|
243
|
-
setMediaVolume(vol);
|
|
244
|
-
},
|
|
245
|
-
isMuted: () => isMuted,
|
|
246
|
-
mute: () => {
|
|
247
|
-
setMediaMuted(true);
|
|
248
|
-
},
|
|
249
|
-
unmute: () => {
|
|
250
|
-
setMediaMuted(false);
|
|
251
|
-
},
|
|
252
|
-
getScale: () => scale,
|
|
253
|
-
pauseAndReturnToPlayStart: () => {
|
|
254
|
-
player.pauseAndReturnToPlayStart();
|
|
255
|
-
},
|
|
256
|
-
};
|
|
257
|
-
return Object.assign(player.emitter, methods);
|
|
258
|
-
}, [
|
|
259
|
-
durationInFrames,
|
|
260
|
-
exitFullscreen,
|
|
261
|
-
isFullscreen,
|
|
262
|
-
loop,
|
|
263
|
-
mediaMuted,
|
|
264
|
-
isMuted,
|
|
265
|
-
mediaVolume,
|
|
266
|
-
player,
|
|
267
|
-
requestFullscreen,
|
|
268
|
-
setMediaMuted,
|
|
269
|
-
setMediaVolume,
|
|
270
|
-
toggle,
|
|
271
|
-
scale,
|
|
272
|
-
]);
|
|
273
|
-
const VideoComponent = video ? video.component : null;
|
|
274
|
-
const outerStyle = useMemo(() => {
|
|
275
|
-
return calculateOuterStyle({ canvasSize, config, style });
|
|
276
|
-
}, [canvasSize, config, style]);
|
|
277
|
-
const outer = useMemo(() => {
|
|
278
|
-
return calculateOuter({ config, layout, scale });
|
|
279
|
-
}, [config, layout, scale]);
|
|
280
|
-
const containerStyle = useMemo(() => {
|
|
281
|
-
return calculateContainerStyle({ canvasSize, config, layout, scale });
|
|
282
|
-
}, [canvasSize, config, layout, scale]);
|
|
283
|
-
const onError = useCallback((error) => {
|
|
284
|
-
player.pause();
|
|
285
|
-
// Pay attention to `this context`
|
|
286
|
-
player.emitter.dispatchError(error);
|
|
287
|
-
}, [player]);
|
|
288
|
-
const onFullscreenButtonClick = useCallback((e) => {
|
|
289
|
-
e.stopPropagation();
|
|
290
|
-
requestFullscreen();
|
|
291
|
-
}, [requestFullscreen]);
|
|
292
|
-
const onExitFullscreenButtonClick = useCallback((e) => {
|
|
293
|
-
e.stopPropagation();
|
|
294
|
-
exitFullscreen();
|
|
295
|
-
}, [exitFullscreen]);
|
|
296
|
-
const onSingleClick = useCallback((e) => {
|
|
297
|
-
toggle(e);
|
|
298
|
-
}, [toggle]);
|
|
299
|
-
const onSeekStart = useCallback(() => {
|
|
300
|
-
setSeeking(true);
|
|
301
|
-
}, []);
|
|
302
|
-
const onSeekEnd = useCallback(() => {
|
|
303
|
-
setSeeking(false);
|
|
304
|
-
}, []);
|
|
305
|
-
const onDoubleClick = useCallback(() => {
|
|
306
|
-
if (isFullscreen) {
|
|
307
|
-
exitFullscreen();
|
|
308
|
-
}
|
|
309
|
-
else {
|
|
310
|
-
requestFullscreen();
|
|
311
|
-
}
|
|
312
|
-
}, [exitFullscreen, isFullscreen, requestFullscreen]);
|
|
313
|
-
const [handleClick, handleDoubleClick] = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
|
|
314
|
-
useEffect(() => {
|
|
315
|
-
if (shouldAutoplay) {
|
|
316
|
-
player.play();
|
|
317
|
-
setShouldAutoPlay(false);
|
|
318
|
-
}
|
|
319
|
-
}, [shouldAutoplay, player]);
|
|
320
|
-
const loadingMarkup = useMemo(() => {
|
|
321
|
-
return renderLoading
|
|
322
|
-
? renderLoading({
|
|
323
|
-
height: outerStyle.height,
|
|
324
|
-
width: outerStyle.width,
|
|
325
|
-
isBuffering: showBufferIndicator,
|
|
326
|
-
})
|
|
327
|
-
: null;
|
|
328
|
-
}, [outerStyle.height, outerStyle.width, renderLoading, showBufferIndicator]);
|
|
329
|
-
const currentScale = useMemo(() => {
|
|
330
|
-
return {
|
|
331
|
-
type: 'scale',
|
|
332
|
-
scale,
|
|
333
|
-
};
|
|
334
|
-
}, [scale]);
|
|
335
|
-
if (!config) {
|
|
336
|
-
return null;
|
|
337
|
-
}
|
|
338
|
-
const poster = renderPoster
|
|
339
|
-
? renderPoster({
|
|
340
|
-
height: posterFillMode === 'player-size'
|
|
341
|
-
? outerStyle.height
|
|
342
|
-
: config.height,
|
|
343
|
-
width: posterFillMode === 'player-size'
|
|
344
|
-
? outerStyle.width
|
|
345
|
-
: config.width,
|
|
346
|
-
isBuffering: showBufferIndicator,
|
|
347
|
-
})
|
|
348
|
-
: null;
|
|
349
|
-
if (poster === undefined) {
|
|
350
|
-
throw new TypeError('renderPoster() must return a React element, but undefined was returned');
|
|
351
|
-
}
|
|
352
|
-
const shouldShowPoster = poster &&
|
|
353
|
-
[
|
|
354
|
-
showPosterWhenPaused && !player.isPlaying() && !seeking,
|
|
355
|
-
showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
|
|
356
|
-
showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
|
|
357
|
-
showPosterWhenBuffering && showBufferIndicator && player.isPlaying(),
|
|
358
|
-
].some(Boolean);
|
|
359
|
-
const { left, top, width, height, ...outerWithoutScale } = outer;
|
|
360
|
-
const content = (_jsxs(_Fragment, { children: [_jsx("div", { style: outer, onPointerUp: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: _jsxs("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: [VideoComponent ? (_jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: _jsx(Internals.ClipComposition, { children: _jsx(Internals.CurrentScaleContext.Provider, { value: currentScale, children: _jsx(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.props) !== null && _c !== void 0 ? _c : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) }) }) })) : null, shouldShowPoster && posterFillMode === 'composition-size' ? (_jsx("div", { style: {
|
|
361
|
-
...outerWithoutScale,
|
|
362
|
-
width: config.width,
|
|
363
|
-
height: config.height,
|
|
364
|
-
}, onPointerUp: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }) }), shouldShowPoster && posterFillMode === 'player-size' ? (_jsx("div", { style: outer, onPointerUp: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (_jsx(Controls, { fps: config.fps, durationInFrames: config.durationInFrames, player: player, containerRef: container, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, canvasSize: canvasSize, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, buffering: showBufferIndicator, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, onPointerUp: clickToPlay ? handleClick : undefined })) : null] }));
|
|
365
|
-
if (IS_NODE && !doesReactVersionSupportSuspense) {
|
|
366
|
-
return (_jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
|
|
367
|
-
}
|
|
368
|
-
return (_jsx("div", { ref: container, style: outerStyle, className: className, children: _jsx(Suspense, { fallback: loadingMarkup, children: content }) }));
|
|
369
|
-
};
|
|
370
|
-
export default forwardRef(PlayerUI);
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { ComponentType, LazyExoticComponent } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import type { TimelineContextValue } from 'remotion';
|
|
4
|
-
export declare const PLAYER_COMP_ID = "player-comp";
|
|
5
|
-
export declare const SharedPlayerContexts: React.FC<{
|
|
6
|
-
readonly children: React.ReactNode;
|
|
7
|
-
readonly timelineContext: TimelineContextValue;
|
|
8
|
-
readonly fps: number;
|
|
9
|
-
readonly compositionWidth: number;
|
|
10
|
-
readonly compositionHeight: number;
|
|
11
|
-
readonly durationInFrames: number;
|
|
12
|
-
readonly component: LazyExoticComponent<ComponentType<unknown>>;
|
|
13
|
-
readonly numberOfSharedAudioTags: number;
|
|
14
|
-
readonly initiallyMuted: boolean;
|
|
15
|
-
}>;
|
package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/SharedPlayerContext.js
DELETED
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback, useMemo, useState } from 'react';
|
|
3
|
-
import { Internals } from 'remotion';
|
|
4
|
-
import { getPreferredVolume, persistVolume } from './volume-persistance.js';
|
|
5
|
-
export const PLAYER_COMP_ID = 'player-comp';
|
|
6
|
-
export const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, }) => {
|
|
7
|
-
const compositionManagerContext = useMemo(() => {
|
|
8
|
-
const context = {
|
|
9
|
-
compositions: [
|
|
10
|
-
{
|
|
11
|
-
component: component,
|
|
12
|
-
durationInFrames,
|
|
13
|
-
height: compositionHeight,
|
|
14
|
-
width: compositionWidth,
|
|
15
|
-
fps,
|
|
16
|
-
id: PLAYER_COMP_ID,
|
|
17
|
-
nonce: 777,
|
|
18
|
-
folderName: null,
|
|
19
|
-
parentFolderName: null,
|
|
20
|
-
schema: null,
|
|
21
|
-
calculateMetadata: null,
|
|
22
|
-
},
|
|
23
|
-
],
|
|
24
|
-
folders: [],
|
|
25
|
-
registerFolder: () => undefined,
|
|
26
|
-
unregisterFolder: () => undefined,
|
|
27
|
-
registerComposition: () => undefined,
|
|
28
|
-
unregisterComposition: () => undefined,
|
|
29
|
-
currentCompositionMetadata: null,
|
|
30
|
-
setCurrentCompositionMetadata: () => undefined,
|
|
31
|
-
canvasContent: { type: 'composition', compositionId: 'player-comp' },
|
|
32
|
-
setCanvasContent: () => undefined,
|
|
33
|
-
};
|
|
34
|
-
return context;
|
|
35
|
-
}, [component, durationInFrames, compositionHeight, compositionWidth, fps]);
|
|
36
|
-
const [mediaMuted, setMediaMuted] = useState(() => initiallyMuted);
|
|
37
|
-
const [mediaVolume, setMediaVolume] = useState(() => getPreferredVolume());
|
|
38
|
-
const mediaVolumeContextValue = useMemo(() => {
|
|
39
|
-
return {
|
|
40
|
-
mediaMuted,
|
|
41
|
-
mediaVolume,
|
|
42
|
-
};
|
|
43
|
-
}, [mediaMuted, mediaVolume]);
|
|
44
|
-
const setMediaVolumeAndPersist = useCallback((vol) => {
|
|
45
|
-
setMediaVolume(vol);
|
|
46
|
-
persistVolume(vol);
|
|
47
|
-
}, []);
|
|
48
|
-
const setMediaVolumeContextValue = useMemo(() => {
|
|
49
|
-
return {
|
|
50
|
-
setMediaMuted,
|
|
51
|
-
setMediaVolume: setMediaVolumeAndPersist,
|
|
52
|
-
};
|
|
53
|
-
}, [setMediaVolumeAndPersist]);
|
|
54
|
-
return (_jsx(Internals.CanUseRemotionHooksProvider, { children: _jsx(Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: _jsx(Internals.CompositionManager.Provider, { value: compositionManagerContext, children: _jsx(Internals.ResolveCompositionConfig, { children: _jsx(Internals.PrefetchProvider, { children: _jsx(Internals.DurationsContextProvider, { children: _jsx(Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: _jsx(Internals.NativeLayersProvider, { children: _jsx(Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: _jsx(Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, component: component, children: _jsx(Internals.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }) }));
|
|
55
|
-
};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import type { CSSProperties } from 'react';
|
|
2
|
-
import type { CompProps } from 'remotion';
|
|
3
|
-
import type { AnyZodObject } from 'zod';
|
|
4
|
-
import type { ThumbnailMethods } from './player-methods.js';
|
|
5
|
-
import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
|
|
6
|
-
import type { PropsIfHasProps } from './utils/props-if-has-props.js';
|
|
7
|
-
type ThumbnailProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = PropsIfHasProps<Schema, Props> & CompProps<Props> & {
|
|
8
|
-
frameToDisplay: number;
|
|
9
|
-
style?: CSSProperties;
|
|
10
|
-
durationInFrames: number;
|
|
11
|
-
compositionWidth: number;
|
|
12
|
-
compositionHeight: number;
|
|
13
|
-
fps: number;
|
|
14
|
-
errorFallback?: ErrorFallback;
|
|
15
|
-
renderLoading?: RenderLoading;
|
|
16
|
-
className?: string;
|
|
17
|
-
};
|
|
18
|
-
/**
|
|
19
|
-
* @description A component which can be rendered in a regular React App (for example: Next.js, Vite) to display a single frame of a video.
|
|
20
|
-
* @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
|
|
21
|
-
*/
|
|
22
|
-
export declare const Thumbnail: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
|
|
23
|
-
export {};
|