@remotion/player 4.0.255 → 4.0.256
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/esm/index.mjs +41 -41
- package/package.json +3 -3
- 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 -56
- package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.js +0 -143
- 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 -369
- 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 -64
- 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/dist/esm/index.mjs
CHANGED
|
@@ -60,40 +60,40 @@ var FullscreenIcon = ({
|
|
|
60
60
|
children: [
|
|
61
61
|
/* @__PURE__ */ jsx("path", {
|
|
62
62
|
d: `
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
M ${out} ${inset}
|
|
64
|
+
L ${middleInset} ${middleInset}
|
|
65
|
+
L ${inset} ${out}
|
|
66
|
+
`,
|
|
67
67
|
stroke: "#fff",
|
|
68
68
|
strokeWidth,
|
|
69
69
|
fill: "none"
|
|
70
70
|
}),
|
|
71
71
|
/* @__PURE__ */ jsx("path", {
|
|
72
72
|
d: `
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
M ${viewSize - out} ${inset}
|
|
74
|
+
L ${viewSize - middleInset} ${middleInset}
|
|
75
|
+
L ${viewSize - inset} ${out}
|
|
76
|
+
`,
|
|
77
77
|
stroke: "#fff",
|
|
78
78
|
strokeWidth,
|
|
79
79
|
fill: "none"
|
|
80
80
|
}),
|
|
81
81
|
/* @__PURE__ */ jsx("path", {
|
|
82
82
|
d: `
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
M ${out} ${viewSize - inset}
|
|
84
|
+
L ${middleInset} ${viewSize - middleInset}
|
|
85
|
+
L ${inset} ${viewSize - out}
|
|
86
|
+
`,
|
|
87
87
|
stroke: "#fff",
|
|
88
88
|
strokeWidth,
|
|
89
89
|
fill: "none"
|
|
90
90
|
}),
|
|
91
91
|
/* @__PURE__ */ jsx("path", {
|
|
92
92
|
d: `
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
93
|
+
M ${viewSize - out} ${viewSize - inset}
|
|
94
|
+
L ${viewSize - middleInset} ${viewSize - middleInset}
|
|
95
|
+
L ${viewSize - inset} ${viewSize - out}
|
|
96
|
+
`,
|
|
97
97
|
stroke: "#fff",
|
|
98
98
|
strokeWidth,
|
|
99
99
|
fill: "none"
|
|
@@ -149,7 +149,7 @@ var BufferingIndicator = ({ type }) => {
|
|
|
149
149
|
/* @__PURE__ */ jsx2("style", {
|
|
150
150
|
type: "text/css",
|
|
151
151
|
children: `
|
|
152
|
-
|
|
152
|
+
@keyframes ${remotionBufferingAnimation} {
|
|
153
153
|
0% {
|
|
154
154
|
rotate: 0deg;
|
|
155
155
|
}
|
|
@@ -161,7 +161,7 @@ var BufferingIndicator = ({ type }) => {
|
|
|
161
161
|
.${className} {
|
|
162
162
|
animation: ${remotionBufferingAnimation} 1s linear infinite;
|
|
163
163
|
}
|
|
164
|
-
|
|
164
|
+
`
|
|
165
165
|
}),
|
|
166
166
|
/* @__PURE__ */ jsx2("div", {
|
|
167
167
|
style,
|
|
@@ -1227,9 +1227,9 @@ var DefaultVolumeSlider = ({
|
|
|
1227
1227
|
height: BAR_HEIGHT,
|
|
1228
1228
|
width: VOLUME_SLIDER_WIDTH,
|
|
1229
1229
|
backgroundImage: `linear-gradient(
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1230
|
+
to right,
|
|
1231
|
+
white ${volume * 100}%, rgba(255, 255, 255, 0) ${volume * 100}%
|
|
1232
|
+
)`
|
|
1233
1233
|
};
|
|
1234
1234
|
if (isVertical) {
|
|
1235
1235
|
return {
|
|
@@ -1240,23 +1240,23 @@ var DefaultVolumeSlider = ({
|
|
|
1240
1240
|
return commonStyle;
|
|
1241
1241
|
}, [isVertical, volume]);
|
|
1242
1242
|
const sliderStyle = `
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1243
|
+
.${randomClass}::-webkit-slider-thumb {
|
|
1244
|
+
-webkit-appearance: none;
|
|
1245
|
+
background-color: white;
|
|
1246
|
+
border-radius: ${KNOB_SIZE / 2}px;
|
|
1247
|
+
box-shadow: 0 0 2px black;
|
|
1248
|
+
height: ${KNOB_SIZE}px;
|
|
1249
|
+
width: ${KNOB_SIZE}px;
|
|
1250
|
+
}
|
|
1251
1251
|
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1252
|
+
.${randomClass}::-moz-range-thumb {
|
|
1253
|
+
-webkit-appearance: none;
|
|
1254
|
+
background-color: white;
|
|
1255
|
+
border-radius: ${KNOB_SIZE / 2}px;
|
|
1256
|
+
box-shadow: 0 0 2px black;
|
|
1257
|
+
height: ${KNOB_SIZE}px;
|
|
1258
|
+
width: ${KNOB_SIZE}px;
|
|
1259
|
+
}
|
|
1260
1260
|
`;
|
|
1261
1261
|
return /* @__PURE__ */ jsxs3("div", {
|
|
1262
1262
|
style: sliderContainer,
|
|
@@ -2214,10 +2214,10 @@ var RenderWarningIfBlacklist = () => {
|
|
|
2214
2214
|
cssText: `${style.cssText} !important;`
|
|
2215
2215
|
});
|
|
2216
2216
|
div.innerHTML = `
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2217
|
+
<a href="https://github.com/remotion-dev/remotion/pull/4589" style="color: white;">
|
|
2218
|
+
Remotion Unlicensed – Contact hi@remotion.dev
|
|
2219
|
+
</a>
|
|
2220
|
+
`;
|
|
2221
2221
|
document.body.appendChild(div);
|
|
2222
2222
|
}
|
|
2223
2223
|
};
|
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.256",
|
|
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.256"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": ">=16.8.0",
|
|
@@ -43,7 +43,7 @@
|
|
|
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.256"
|
|
47
47
|
},
|
|
48
48
|
"keywords": [
|
|
49
49
|
"remotion",
|
package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/BufferingIndicator.js
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ICON_SIZE } from './icons.js';
|
|
3
|
-
const className = '__remotion_buffering_indicator';
|
|
4
|
-
const remotionBufferingAnimation = '__remotion_buffering_animation';
|
|
5
|
-
export const bufferingIndicatorStrokeWidth = 3;
|
|
6
|
-
const playerStyle = {
|
|
7
|
-
width: ICON_SIZE,
|
|
8
|
-
height: ICON_SIZE,
|
|
9
|
-
overflow: 'hidden',
|
|
10
|
-
lineHeight: 'normal',
|
|
11
|
-
fontSize: 'inherit',
|
|
12
|
-
};
|
|
13
|
-
const studioStyle = {
|
|
14
|
-
width: 14,
|
|
15
|
-
height: 14,
|
|
16
|
-
overflow: 'hidden',
|
|
17
|
-
lineHeight: 'normal',
|
|
18
|
-
fontSize: 'inherit',
|
|
19
|
-
};
|
|
20
|
-
export const BufferingIndicator = ({ type }) => {
|
|
21
|
-
const style = type === 'player' ? playerStyle : studioStyle;
|
|
22
|
-
return (_jsxs(_Fragment, { children: [_jsx("style", { type: "text/css", children: `
|
|
23
|
-
@keyframes ${remotionBufferingAnimation} {
|
|
24
|
-
0% {
|
|
25
|
-
rotate: 0deg;
|
|
26
|
-
}
|
|
27
|
-
100% {
|
|
28
|
-
rotate: 360deg;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.${className} {
|
|
33
|
-
animation: ${remotionBufferingAnimation} 1s linear infinite;
|
|
34
|
-
}
|
|
35
|
-
` }), _jsx("div", { style: style, children: _jsx("svg", { viewBox: type === 'player' ? '0 0 22 22' : '0 0 18 18', style: style, className: className, children: _jsx("path", { d: type === 'player'
|
|
36
|
-
? 'M 11 4 A 7 7 0 0 1 15.1145 16.66312'
|
|
37
|
-
: 'M 9 2 A 7 7 0 0 1 13.1145 14.66312', stroke: "white", strokeLinecap: "round", fill: "none", strokeWidth: 3 }) }) })] }));
|
|
38
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { BufferingIndicator } from './BufferingIndicator.js';
|
|
3
|
-
import { PauseIcon, PlayIcon } from './icons.js';
|
|
4
|
-
export const DefaultPlayPauseButton = ({ playing, buffering }) => {
|
|
5
|
-
if (playing && buffering) {
|
|
6
|
-
return _jsx(BufferingIndicator, { type: "player" });
|
|
7
|
-
}
|
|
8
|
-
if (playing) {
|
|
9
|
-
return _jsx(PauseIcon, {});
|
|
10
|
-
}
|
|
11
|
-
return _jsx(PlayIcon, {});
|
|
12
|
-
};
|
package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/EmitterProvider.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useContext, useEffect, useState } from 'react';
|
|
3
|
-
import { Internals } from 'remotion';
|
|
4
|
-
import { PlayerEventEmitterContext } from './emitter-context.js';
|
|
5
|
-
import { PlayerEmitter } from './event-emitter.js';
|
|
6
|
-
import { useBufferStateEmitter } from './use-buffer-state-emitter.js';
|
|
7
|
-
export const PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
|
|
8
|
-
const [emitter] = useState(() => new PlayerEmitter());
|
|
9
|
-
const bufferManager = useContext(Internals.BufferingContextReact);
|
|
10
|
-
if (!bufferManager) {
|
|
11
|
-
throw new Error('BufferingContextReact not found');
|
|
12
|
-
}
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
if (currentPlaybackRate) {
|
|
15
|
-
emitter.dispatchRateChange(currentPlaybackRate);
|
|
16
|
-
}
|
|
17
|
-
}, [emitter, currentPlaybackRate]);
|
|
18
|
-
useBufferStateEmitter(emitter);
|
|
19
|
-
return (_jsx(PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
|
|
20
|
-
};
|
package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.js
DELETED
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import React, { useCallback, useMemo, useRef, useState } from 'react';
|
|
3
|
-
import { Internals, random } from 'remotion';
|
|
4
|
-
import { ICON_SIZE, VolumeOffIcon, VolumeOnIcon } from './icons.js';
|
|
5
|
-
import { useHoverState } from './use-hover-state.js';
|
|
6
|
-
const BAR_HEIGHT = 5;
|
|
7
|
-
const KNOB_SIZE = 12;
|
|
8
|
-
export const VOLUME_SLIDER_WIDTH = 100;
|
|
9
|
-
export const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
|
|
10
|
-
const [mediaMuted, setMediaMuted] = Internals.useMediaMutedState();
|
|
11
|
-
const [mediaVolume, setMediaVolume] = Internals.useMediaVolumeState();
|
|
12
|
-
const [focused, setFocused] = useState(false);
|
|
13
|
-
const parentDivRef = useRef(null);
|
|
14
|
-
const inputRef = useRef(null);
|
|
15
|
-
const hover = useHoverState(parentDivRef, false);
|
|
16
|
-
// Need to import it from React to fix React 17 ESM support.
|
|
17
|
-
const randomId =
|
|
18
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
19
|
-
typeof React.useId === 'undefined' ? 'volume-slider' : React.useId();
|
|
20
|
-
const [randomClass] = useState(() => `__remotion-volume-slider-${random(randomId)}`.replace('.', ''));
|
|
21
|
-
const isMutedOrZero = mediaMuted || mediaVolume === 0;
|
|
22
|
-
const onVolumeChange = useCallback((e) => {
|
|
23
|
-
setMediaVolume(parseFloat(e.target.value));
|
|
24
|
-
}, [setMediaVolume]);
|
|
25
|
-
const onBlur = () => {
|
|
26
|
-
setTimeout(() => {
|
|
27
|
-
// We need a small delay to check which element was focused next,
|
|
28
|
-
// and if it wasn't the volume slider, we hide it
|
|
29
|
-
if (document.activeElement !== inputRef.current) {
|
|
30
|
-
setFocused(false);
|
|
31
|
-
}
|
|
32
|
-
}, 10);
|
|
33
|
-
};
|
|
34
|
-
const isVolume0 = mediaVolume === 0;
|
|
35
|
-
const onClick = useCallback(() => {
|
|
36
|
-
if (isVolume0) {
|
|
37
|
-
setMediaVolume(1);
|
|
38
|
-
setMediaMuted(false);
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
setMediaMuted((mute) => !mute);
|
|
42
|
-
}, [isVolume0, setMediaMuted, setMediaVolume]);
|
|
43
|
-
const parentDivStyle = useMemo(() => {
|
|
44
|
-
return {
|
|
45
|
-
display: 'inline-flex',
|
|
46
|
-
background: 'none',
|
|
47
|
-
border: 'none',
|
|
48
|
-
justifyContent: 'center',
|
|
49
|
-
alignItems: 'center',
|
|
50
|
-
touchAction: 'none',
|
|
51
|
-
...(displayVerticalVolumeSlider && { position: 'relative' }),
|
|
52
|
-
};
|
|
53
|
-
}, [displayVerticalVolumeSlider]);
|
|
54
|
-
const volumeContainer = useMemo(() => {
|
|
55
|
-
return {
|
|
56
|
-
display: 'inline',
|
|
57
|
-
width: ICON_SIZE,
|
|
58
|
-
height: ICON_SIZE,
|
|
59
|
-
cursor: 'pointer',
|
|
60
|
-
appearance: 'none',
|
|
61
|
-
background: 'none',
|
|
62
|
-
border: 'none',
|
|
63
|
-
padding: 0,
|
|
64
|
-
};
|
|
65
|
-
}, []);
|
|
66
|
-
const sliderContainer = useMemo(() => {
|
|
67
|
-
const paddingLeft = 5;
|
|
68
|
-
const common = {
|
|
69
|
-
paddingLeft,
|
|
70
|
-
height: ICON_SIZE,
|
|
71
|
-
width: VOLUME_SLIDER_WIDTH,
|
|
72
|
-
};
|
|
73
|
-
if (displayVerticalVolumeSlider) {
|
|
74
|
-
return {
|
|
75
|
-
...common,
|
|
76
|
-
position: 'absolute',
|
|
77
|
-
transform: `rotate(-90deg) translateX(${VOLUME_SLIDER_WIDTH / 2 + ICON_SIZE / 2}px)`,
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
return {
|
|
81
|
-
...common,
|
|
82
|
-
};
|
|
83
|
-
}, [displayVerticalVolumeSlider]);
|
|
84
|
-
const inputStyle = useMemo(() => {
|
|
85
|
-
const commonStyle = {
|
|
86
|
-
WebkitAppearance: 'none',
|
|
87
|
-
backgroundColor: 'rgba(255, 255, 255, 0.5)',
|
|
88
|
-
borderRadius: BAR_HEIGHT / 2,
|
|
89
|
-
cursor: 'pointer',
|
|
90
|
-
height: BAR_HEIGHT,
|
|
91
|
-
width: VOLUME_SLIDER_WIDTH,
|
|
92
|
-
backgroundImage: `linear-gradient(
|
|
93
|
-
to right,
|
|
94
|
-
white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
|
|
95
|
-
)`,
|
|
96
|
-
};
|
|
97
|
-
if (displayVerticalVolumeSlider) {
|
|
98
|
-
return {
|
|
99
|
-
...commonStyle,
|
|
100
|
-
bottom: ICON_SIZE + VOLUME_SLIDER_WIDTH / 2,
|
|
101
|
-
};
|
|
102
|
-
}
|
|
103
|
-
return commonStyle;
|
|
104
|
-
}, [displayVerticalVolumeSlider, mediaVolume]);
|
|
105
|
-
const sliderStyle = `
|
|
106
|
-
.${randomClass}::-webkit-slider-thumb {
|
|
107
|
-
-webkit-appearance: none;
|
|
108
|
-
background-color: white;
|
|
109
|
-
border-radius: ${KNOB_SIZE / 2}px;
|
|
110
|
-
box-shadow: 0 0 2px black;
|
|
111
|
-
height: ${KNOB_SIZE}px;
|
|
112
|
-
width: ${KNOB_SIZE}px;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.${randomClass}::-moz-range-thumb {
|
|
116
|
-
-webkit-appearance: none;
|
|
117
|
-
background-color: white;
|
|
118
|
-
border-radius: ${KNOB_SIZE / 2}px;
|
|
119
|
-
box-shadow: 0 0 2px black;
|
|
120
|
-
height: ${KNOB_SIZE}px;
|
|
121
|
-
width: ${KNOB_SIZE}px;
|
|
122
|
-
}
|
|
123
|
-
`;
|
|
124
|
-
return (_jsxs("div", { ref: parentDivRef, style: parentDivStyle, children: [_jsx("style", {
|
|
125
|
-
// eslint-disable-next-line react/no-danger
|
|
126
|
-
dangerouslySetInnerHTML: {
|
|
127
|
-
__html: sliderStyle,
|
|
128
|
-
} }), _jsx("button", { "aria-label": isMutedOrZero ? 'Unmute sound' : 'Mute sound', title: isMutedOrZero ? 'Unmute sound' : 'Mute sound', onClick: onClick, onBlur: onBlur, onFocus: () => setFocused(true), style: volumeContainer, type: "button", children: isMutedOrZero ? _jsx(VolumeOffIcon, {}) : _jsx(VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted && !Internals.isIosSafari() ? (_jsx("div", { style: sliderContainer, children: _jsx("input", { ref: inputRef, "aria-label": "Change volume", className: randomClass, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume, style: inputStyle }) })) : null] }));
|
|
129
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { Size } from './utils/use-element-size.js';
|
|
3
|
-
export declare const Checkmark: () => import("react/jsx-runtime.js").JSX.Element;
|
|
4
|
-
export declare const playerButtonStyle: React.CSSProperties;
|
|
5
|
-
export declare const PlaybackrateControl: React.FC<{
|
|
6
|
-
playbackRates: number[];
|
|
7
|
-
canvasSize: Size;
|
|
8
|
-
}>;
|
package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.js
DELETED
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback, useContext, useEffect, useMemo, useState, } from 'react';
|
|
3
|
-
import { Internals } from 'remotion';
|
|
4
|
-
import useComponentVisible from './utils/use-component-visible.js';
|
|
5
|
-
// To align
|
|
6
|
-
const BOTTOM = 35;
|
|
7
|
-
// Arbitrary to clamp the height of the popup
|
|
8
|
-
const THRESHOLD = 70;
|
|
9
|
-
const rateDiv = {
|
|
10
|
-
height: 30,
|
|
11
|
-
paddingRight: 15,
|
|
12
|
-
paddingLeft: 12,
|
|
13
|
-
display: 'flex',
|
|
14
|
-
flexDirection: 'row',
|
|
15
|
-
alignItems: 'center',
|
|
16
|
-
};
|
|
17
|
-
const checkmarkContainer = {
|
|
18
|
-
width: 22,
|
|
19
|
-
display: 'flex',
|
|
20
|
-
alignItems: 'center',
|
|
21
|
-
};
|
|
22
|
-
const checkmarkStyle = {
|
|
23
|
-
width: 14,
|
|
24
|
-
height: 14,
|
|
25
|
-
color: 'black',
|
|
26
|
-
};
|
|
27
|
-
export const Checkmark = () => (_jsx("svg", { viewBox: "0 0 512 512", style: checkmarkStyle, children: _jsx("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
|
|
28
|
-
const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
|
|
29
|
-
const onClick = useCallback((e) => {
|
|
30
|
-
e.stopPropagation();
|
|
31
|
-
e.preventDefault();
|
|
32
|
-
onSelect(rate);
|
|
33
|
-
}, [onSelect, rate]);
|
|
34
|
-
const [hovered, setHovered] = useState(false);
|
|
35
|
-
const onMouseEnter = useCallback(() => {
|
|
36
|
-
setHovered(true);
|
|
37
|
-
}, []);
|
|
38
|
-
const onMouseLeave = useCallback(() => {
|
|
39
|
-
setHovered(false);
|
|
40
|
-
}, []);
|
|
41
|
-
const isFocused = keyboardSelectedRate === rate;
|
|
42
|
-
const actualStyle = useMemo(() => {
|
|
43
|
-
return {
|
|
44
|
-
...rateDiv,
|
|
45
|
-
backgroundColor: hovered || isFocused ? '#eee' : 'transparent',
|
|
46
|
-
};
|
|
47
|
-
}, [hovered, isFocused]);
|
|
48
|
-
return (_jsxs("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: 0, style: actualStyle, onClick: onClick, children: [_jsx("div", { style: checkmarkContainer, children: rate === selectedRate ? _jsx(Checkmark, {}) : null }), rate.toFixed(1), "x"] }, rate));
|
|
49
|
-
};
|
|
50
|
-
const PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
|
|
51
|
-
const { setPlaybackRate, playbackRate } = useContext(Internals.Timeline.TimelineContext);
|
|
52
|
-
const [keyboardSelectedRate, setKeyboardSelectedRate] = useState(playbackRate);
|
|
53
|
-
useEffect(() => {
|
|
54
|
-
const listener = (e) => {
|
|
55
|
-
e.preventDefault();
|
|
56
|
-
if (e.key === 'ArrowUp') {
|
|
57
|
-
const currentIndex = playbackRates.findIndex((rate) => rate === keyboardSelectedRate);
|
|
58
|
-
if (currentIndex === 0) {
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
|
-
if (currentIndex === -1) {
|
|
62
|
-
setKeyboardSelectedRate(playbackRates[0]);
|
|
63
|
-
}
|
|
64
|
-
else {
|
|
65
|
-
setKeyboardSelectedRate(playbackRates[currentIndex - 1]);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
else if (e.key === 'ArrowDown') {
|
|
69
|
-
const currentIndex = playbackRates.findIndex((rate) => rate === keyboardSelectedRate);
|
|
70
|
-
if (currentIndex === playbackRates.length - 1) {
|
|
71
|
-
return;
|
|
72
|
-
}
|
|
73
|
-
if (currentIndex === -1) {
|
|
74
|
-
setKeyboardSelectedRate(playbackRates[playbackRates.length - 1]);
|
|
75
|
-
}
|
|
76
|
-
else {
|
|
77
|
-
setKeyboardSelectedRate(playbackRates[currentIndex + 1]);
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
else if (e.key === 'Enter') {
|
|
81
|
-
setPlaybackRate(keyboardSelectedRate);
|
|
82
|
-
setIsComponentVisible(false);
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
window.addEventListener('keydown', listener);
|
|
86
|
-
return () => {
|
|
87
|
-
window.removeEventListener('keydown', listener);
|
|
88
|
-
};
|
|
89
|
-
}, [
|
|
90
|
-
playbackRates,
|
|
91
|
-
keyboardSelectedRate,
|
|
92
|
-
setPlaybackRate,
|
|
93
|
-
setIsComponentVisible,
|
|
94
|
-
]);
|
|
95
|
-
const onSelect = useCallback((rate) => {
|
|
96
|
-
setPlaybackRate(rate);
|
|
97
|
-
setIsComponentVisible(false);
|
|
98
|
-
}, [setIsComponentVisible, setPlaybackRate]);
|
|
99
|
-
const playbackPopup = useMemo(() => {
|
|
100
|
-
return {
|
|
101
|
-
position: 'absolute',
|
|
102
|
-
right: 0,
|
|
103
|
-
width: 125,
|
|
104
|
-
maxHeight: canvasSize.height - THRESHOLD - BOTTOM,
|
|
105
|
-
bottom: 35,
|
|
106
|
-
background: '#fff',
|
|
107
|
-
borderRadius: 4,
|
|
108
|
-
overflow: 'auto',
|
|
109
|
-
color: 'black',
|
|
110
|
-
textAlign: 'left',
|
|
111
|
-
};
|
|
112
|
-
}, [canvasSize.height]);
|
|
113
|
-
return (_jsx("div", { style: playbackPopup, children: playbackRates.map((rate) => {
|
|
114
|
-
return (_jsx(PlaybackrateOption, { selectedRate: playbackRate, onSelect: onSelect, rate: rate, keyboardSelectedRate: keyboardSelectedRate }, rate));
|
|
115
|
-
}) }));
|
|
116
|
-
};
|
|
117
|
-
const label = {
|
|
118
|
-
fontSize: 13,
|
|
119
|
-
fontWeight: 'bold',
|
|
120
|
-
color: 'white',
|
|
121
|
-
border: '2px solid white',
|
|
122
|
-
borderRadius: 20,
|
|
123
|
-
paddingLeft: 8,
|
|
124
|
-
paddingRight: 8,
|
|
125
|
-
paddingTop: 2,
|
|
126
|
-
paddingBottom: 2,
|
|
127
|
-
};
|
|
128
|
-
export const playerButtonStyle = {
|
|
129
|
-
appearance: 'none',
|
|
130
|
-
backgroundColor: 'transparent',
|
|
131
|
-
border: 'none',
|
|
132
|
-
cursor: 'pointer',
|
|
133
|
-
paddingLeft: 0,
|
|
134
|
-
paddingRight: 0,
|
|
135
|
-
paddingTop: 6,
|
|
136
|
-
paddingBottom: 6,
|
|
137
|
-
height: 37,
|
|
138
|
-
display: 'inline-flex',
|
|
139
|
-
marginBottom: 0,
|
|
140
|
-
marginTop: 0,
|
|
141
|
-
alignItems: 'center',
|
|
142
|
-
};
|
|
143
|
-
const button = {
|
|
144
|
-
...playerButtonStyle,
|
|
145
|
-
position: 'relative',
|
|
146
|
-
};
|
|
147
|
-
export const PlaybackrateControl = ({ playbackRates, canvasSize }) => {
|
|
148
|
-
const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
|
|
149
|
-
const { playbackRate } = useContext(Internals.Timeline.TimelineContext);
|
|
150
|
-
const onClick = useCallback((e) => {
|
|
151
|
-
e.stopPropagation();
|
|
152
|
-
e.preventDefault();
|
|
153
|
-
setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
|
|
154
|
-
}, [setIsComponentVisible]);
|
|
155
|
-
return (_jsx("div", { ref: ref, children: _jsxs("button", { type: "button", "aria-label": "Change playback rate", style: button, onClick: onClick, children: [_jsxs("div", { style: label, children: [playbackRate, "x"] }), isComponentVisible && (_jsx(PlaybackPopup, { canvasSize: canvasSize, playbackRates: playbackRates, setIsComponentVisible: setIsComponentVisible }))] }) }));
|
|
156
|
-
};
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import type { ComponentType } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import type { CompProps } from 'remotion';
|
|
4
|
-
import type { AnyZodObject } from 'zod';
|
|
5
|
-
import type { PlayerRef } from './player-methods.js';
|
|
6
|
-
import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
|
|
7
|
-
import type { PosterFillMode, RenderLoading, RenderPoster } from './PlayerUI.js';
|
|
8
|
-
import type { PropsIfHasProps } from './utils/props-if-has-props.js';
|
|
9
|
-
export type ErrorFallback = (info: {
|
|
10
|
-
error: Error;
|
|
11
|
-
}) => React.ReactNode;
|
|
12
|
-
export type PlayerProps<Schema extends AnyZodObject, Props> = {
|
|
13
|
-
durationInFrames: number;
|
|
14
|
-
compositionWidth: number;
|
|
15
|
-
compositionHeight: number;
|
|
16
|
-
fps: number;
|
|
17
|
-
showVolumeControls?: boolean;
|
|
18
|
-
controls?: boolean;
|
|
19
|
-
errorFallback?: ErrorFallback;
|
|
20
|
-
style?: React.CSSProperties;
|
|
21
|
-
loop?: boolean;
|
|
22
|
-
autoPlay?: boolean;
|
|
23
|
-
allowFullscreen?: boolean;
|
|
24
|
-
clickToPlay?: boolean;
|
|
25
|
-
doubleClickToFullscreen?: boolean;
|
|
26
|
-
spaceKeyToPlayOrPause?: boolean;
|
|
27
|
-
numberOfSharedAudioTags?: number;
|
|
28
|
-
playbackRate?: number;
|
|
29
|
-
renderLoading?: RenderLoading;
|
|
30
|
-
moveToBeginningWhenEnded?: boolean;
|
|
31
|
-
className?: string;
|
|
32
|
-
initialFrame?: number;
|
|
33
|
-
renderPoster?: RenderPoster;
|
|
34
|
-
showPosterWhenPaused?: boolean;
|
|
35
|
-
showPosterWhenEnded?: boolean;
|
|
36
|
-
showPosterWhenUnplayed?: boolean;
|
|
37
|
-
showPosterWhenBuffering?: boolean;
|
|
38
|
-
inFrame?: number | null;
|
|
39
|
-
outFrame?: number | null;
|
|
40
|
-
initiallyShowControls?: number | boolean;
|
|
41
|
-
renderPlayPauseButton?: RenderPlayPauseButton;
|
|
42
|
-
renderFullscreenButton?: RenderFullscreenButton;
|
|
43
|
-
alwaysShowControls?: boolean;
|
|
44
|
-
schema?: Schema;
|
|
45
|
-
initiallyMuted?: boolean;
|
|
46
|
-
showPlaybackRateControl?: boolean | number[];
|
|
47
|
-
posterFillMode?: PosterFillMode;
|
|
48
|
-
bufferStateDelayInMilliseconds?: number;
|
|
49
|
-
hideControlsWhenPointerDoesntMove?: boolean | number;
|
|
50
|
-
} & CompProps<Props> & PropsIfHasProps<Schema, Props>;
|
|
51
|
-
export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;
|
|
52
|
-
/**
|
|
53
|
-
* @description A component which can be rendered in a regular React App (for example: Vite, Next.js) to display a Remotion video.
|
|
54
|
-
* @see [Documentation](https://www.remotion.dev/docs/player/player)
|
|
55
|
-
*/
|
|
56
|
-
export declare const Player: <Schema extends AnyZodObject, Props>(props: PlayerProps<Schema, Props> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;
|