@remotion/player 4.0.154 → 4.0.157

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.
Files changed (6) hide show
  1. package/dist/cjs/MediaVolumeSlider.js +129 -205
  2. package/dist/cjs/PlayerUI.js +1 -0
  3. package/dist/cjs/SharedPlayerContext.js +1 -0
  4. package/dist/cjs/icons.js +19 -113
  5. package/dist/esm/index.mjs +4 -0
  6. package/package.json +2 -2
package/dist/cjs/MediaVolumeSlider.js CHANGED
@@ -1,172 +1,134 @@
1
- 'use strict';
2
- const __createBinding =
3
- (this && this.__createBinding) ||
4
- (Object.create
5
- ? function (o, m, k, k2) {
6
- if (k2 === undefined) k2 = k;
7
- let desc = Object.getOwnPropertyDescriptor(m, k);
8
- if (
9
- !desc ||
10
- ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)
11
- ) {
12
- desc = {
13
- enumerable: true,
14
- get() {
15
- return m[k];
16
- },
17
- };
18
- }
19
-
20
- Object.defineProperty(o, k2, desc);
21
- }
22
- : function (o, m, k, k2) {
23
- if (k2 === undefined) k2 = k;
24
- o[k2] = m[k];
25
- });
26
- const __setModuleDefault =
27
- (this && this.__setModuleDefault) ||
28
- (Object.create
29
- ? function (o, v) {
30
- Object.defineProperty(o, 'default', {enumerable: true, value: v});
31
- }
32
- : function (o, v) {
33
- o.default = v;
34
- });
35
- const __importStar =
36
- (this && this.__importStar) ||
37
- function (mod) {
38
- if (mod && mod.__esModule) return mod;
39
- const result = {};
40
- if (mod != null)
41
- for (const k in mod)
42
- if (k !== 'default' && Object.prototype.hasOwnProperty.call(mod, k))
43
- __createBinding(result, mod, k);
44
- __setModuleDefault(result, mod);
45
- return result;
46
- };
47
-
48
- Object.defineProperty(exports, '__esModule', {value: true});
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ Object.defineProperty(exports, "__esModule", { value: true });
49
26
  exports.MediaVolumeSlider = exports.VOLUME_SLIDER_WIDTH = void 0;
50
- const jsx_runtime_1 = require('react/jsx-runtime');
51
- const react_1 = __importStar(require('react'));
52
- const remotion_1 = require('remotion');
53
- const icons_js_1 = require('./icons.js');
54
- const use_hover_state_js_1 = require('./use-hover-state.js');
27
+ const jsx_runtime_1 = require("react/jsx-runtime");
28
+ const react_1 = __importStar(require("react"));
29
+ const remotion_1 = require("remotion");
30
+ const icons_js_1 = require("./icons.js");
31
+ const use_hover_state_js_1 = require("./use-hover-state.js");
55
32
  const BAR_HEIGHT = 5;
56
33
  const KNOB_SIZE = 12;
57
34
  exports.VOLUME_SLIDER_WIDTH = 100;
58
- const MediaVolumeSlider = ({displayVerticalVolumeSlider}) => {
59
- const [mediaMuted, setMediaMuted] = remotion_1.Internals.useMediaMutedState();
60
- const [mediaVolume, setMediaVolume] =
61
- remotion_1.Internals.useMediaVolumeState();
62
- const [focused, setFocused] = (0, react_1.useState)(false);
63
- const parentDivRef = (0, react_1.useRef)(null);
64
- const inputRef = (0, react_1.useRef)(null);
65
- const hover = (0, use_hover_state_js_1.useHoverState)(parentDivRef, false);
66
- // Need to import it from React to fix React 17 ESM support.
67
- const randomId =
68
- // eslint-disable-next-line react-hooks/rules-of-hooks
69
- typeof react_1.default.useId === 'undefined'
70
- ? 'volume-slider'
71
- : react_1.default.useId();
72
- const [randomClass] = (0, react_1.useState)(() =>
73
- `__remotion-volume-slider-${(0, remotion_1.random)(randomId)}`.replace(
74
- '.',
75
- '',
76
- ),
77
- );
78
- const isMutedOrZero = mediaMuted || mediaVolume === 0;
79
- const onVolumeChange = (0, react_1.useCallback)(
80
- (e) => {
81
- setMediaVolume(parseFloat(e.target.value));
82
- },
83
- [setMediaVolume],
84
- );
85
- const onBlur = () => {
86
- setTimeout(() => {
87
- // We need a small delay to check which element was focused next,
88
- // and if it wasn't the volume slider, we hide it
89
- if (document.activeElement !== inputRef.current) {
90
- setFocused(false);
91
- }
92
- }, 10);
93
- };
94
-
95
- const isVolume0 = mediaVolume === 0;
96
- const onClick = (0, react_1.useCallback)(() => {
97
- if (isVolume0) {
98
- setMediaVolume(1);
99
- setMediaMuted(false);
100
- return;
101
- }
102
-
103
- setMediaMuted((mute) => !mute);
104
- }, [isVolume0, setMediaMuted, setMediaVolume]);
105
- const parentDivStyle = (0, react_1.useMemo)(() => {
106
- return {
107
- display: 'inline-flex',
108
- background: 'none',
109
- border: 'none',
110
- justifyContent: 'center',
111
- alignItems: 'center',
112
- touchAction: 'none',
113
- ...(displayVerticalVolumeSlider && {position: 'relative'}),
114
- };
115
- }, [displayVerticalVolumeSlider]);
116
- const volumeContainer = (0, react_1.useMemo)(() => {
117
- return {
118
- display: 'inline',
119
- width: icons_js_1.ICON_SIZE,
120
- height: icons_js_1.ICON_SIZE,
121
- cursor: 'pointer',
122
- appearance: 'none',
123
- background: 'none',
124
- border: 'none',
125
- padding: 0,
126
- };
127
- }, []);
128
- const sliderContainer = (0, react_1.useMemo)(() => {
129
- const paddingLeft = 5;
130
- const common = {
131
- paddingLeft,
132
- height: icons_js_1.ICON_SIZE,
133
- width: exports.VOLUME_SLIDER_WIDTH,
134
- };
135
- if (displayVerticalVolumeSlider) {
136
- return {
137
- ...common,
138
- position: 'absolute',
139
- transform: `rotate(-90deg) translateX(${exports.VOLUME_SLIDER_WIDTH / 2 + icons_js_1.ICON_SIZE / 2}px)`,
140
- };
141
- }
142
-
143
- return {
144
- ...common,
145
- };
146
- }, [displayVerticalVolumeSlider]);
147
- const inputStyle = (0, react_1.useMemo)(() => {
148
- const commonStyle = {
149
- WebkitAppearance: 'none',
150
- backgroundColor: 'rgba(255, 255, 255, 0.5)',
151
- borderRadius: BAR_HEIGHT / 2,
152
- cursor: 'pointer',
153
- height: BAR_HEIGHT,
154
- width: exports.VOLUME_SLIDER_WIDTH,
155
- backgroundImage: `linear-gradient(
35
+ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
36
+ const [mediaMuted, setMediaMuted] = remotion_1.Internals.useMediaMutedState();
37
+ const [mediaVolume, setMediaVolume] = remotion_1.Internals.useMediaVolumeState();
38
+ const [focused, setFocused] = (0, react_1.useState)(false);
39
+ const parentDivRef = (0, react_1.useRef)(null);
40
+ const inputRef = (0, react_1.useRef)(null);
41
+ const hover = (0, use_hover_state_js_1.useHoverState)(parentDivRef, false);
42
+ // Need to import it from React to fix React 17 ESM support.
43
+ const randomId =
44
+ // eslint-disable-next-line react-hooks/rules-of-hooks
45
+ typeof react_1.default.useId === 'undefined' ? 'volume-slider' : react_1.default.useId();
46
+ const [randomClass] = (0, react_1.useState)(() => `__remotion-volume-slider-${(0, remotion_1.random)(randomId)}`.replace('.', ''));
47
+ const isMutedOrZero = mediaMuted || mediaVolume === 0;
48
+ const onVolumeChange = (0, react_1.useCallback)((e) => {
49
+ setMediaVolume(parseFloat(e.target.value));
50
+ }, [setMediaVolume]);
51
+ const onBlur = () => {
52
+ setTimeout(() => {
53
+ // We need a small delay to check which element was focused next,
54
+ // and if it wasn't the volume slider, we hide it
55
+ if (document.activeElement !== inputRef.current) {
56
+ setFocused(false);
57
+ }
58
+ }, 10);
59
+ };
60
+ const isVolume0 = mediaVolume === 0;
61
+ const onClick = (0, react_1.useCallback)(() => {
62
+ if (isVolume0) {
63
+ setMediaVolume(1);
64
+ setMediaMuted(false);
65
+ return;
66
+ }
67
+ setMediaMuted((mute) => !mute);
68
+ }, [isVolume0, setMediaMuted, setMediaVolume]);
69
+ const parentDivStyle = (0, react_1.useMemo)(() => {
70
+ return {
71
+ display: 'inline-flex',
72
+ background: 'none',
73
+ border: 'none',
74
+ justifyContent: 'center',
75
+ alignItems: 'center',
76
+ touchAction: 'none',
77
+ ...(displayVerticalVolumeSlider && { position: 'relative' }),
78
+ };
79
+ }, [displayVerticalVolumeSlider]);
80
+ const volumeContainer = (0, react_1.useMemo)(() => {
81
+ return {
82
+ display: 'inline',
83
+ width: icons_js_1.ICON_SIZE,
84
+ height: icons_js_1.ICON_SIZE,
85
+ cursor: 'pointer',
86
+ appearance: 'none',
87
+ background: 'none',
88
+ border: 'none',
89
+ padding: 0,
90
+ };
91
+ }, []);
92
+ const sliderContainer = (0, react_1.useMemo)(() => {
93
+ const paddingLeft = 5;
94
+ const common = {
95
+ paddingLeft,
96
+ height: icons_js_1.ICON_SIZE,
97
+ width: exports.VOLUME_SLIDER_WIDTH,
98
+ };
99
+ if (displayVerticalVolumeSlider) {
100
+ return {
101
+ ...common,
102
+ position: 'absolute',
103
+ transform: `rotate(-90deg) translateX(${exports.VOLUME_SLIDER_WIDTH / 2 + icons_js_1.ICON_SIZE / 2}px)`,
104
+ };
105
+ }
106
+ return {
107
+ ...common,
108
+ };
109
+ }, [displayVerticalVolumeSlider]);
110
+ const inputStyle = (0, react_1.useMemo)(() => {
111
+ const commonStyle = {
112
+ WebkitAppearance: 'none',
113
+ backgroundColor: 'rgba(255, 255, 255, 0.5)',
114
+ borderRadius: BAR_HEIGHT / 2,
115
+ cursor: 'pointer',
116
+ height: BAR_HEIGHT,
117
+ width: exports.VOLUME_SLIDER_WIDTH,
118
+ backgroundImage: `linear-gradient(
156
119
  to right,
157
120
  white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
158
121
  )`,
159
- };
160
- if (displayVerticalVolumeSlider) {
161
- return {
162
- ...commonStyle,
163
- bottom: icons_js_1.ICON_SIZE + exports.VOLUME_SLIDER_WIDTH / 2,
164
- };
165
- }
166
-
167
- return commonStyle;
168
- }, [displayVerticalVolumeSlider, mediaVolume]);
169
- const sliderStyle = `
122
+ };
123
+ if (displayVerticalVolumeSlider) {
124
+ return {
125
+ ...commonStyle,
126
+ bottom: icons_js_1.ICON_SIZE + exports.VOLUME_SLIDER_WIDTH / 2,
127
+ };
128
+ }
129
+ return commonStyle;
130
+ }, [displayVerticalVolumeSlider, mediaVolume]);
131
+ const sliderStyle = `
170
132
  .${randomClass}::-webkit-slider-thumb {
171
133
  -webkit-appearance: none;
172
134
  background-color: white;
@@ -185,48 +147,10 @@ const MediaVolumeSlider = ({displayVerticalVolumeSlider}) => {
185
147
  width: ${KNOB_SIZE}px;
186
148
  }
187
149
  `;
188
- return (0, jsx_runtime_1.jsxs)('div', {
189
- ref: parentDivRef,
190
- style: parentDivStyle,
191
- children: [
192
- (0, jsx_runtime_1.jsx)('style', {
193
- // eslint-disable-next-line react/no-danger
194
- dangerouslySetInnerHTML: {
195
- __html: sliderStyle,
196
- },
197
- }),
198
- (0, jsx_runtime_1.jsx)('button', {
199
- 'aria-label': isMutedOrZero ? 'Unmute sound' : 'Mute sound',
200
- title: isMutedOrZero ? 'Unmute sound' : 'Mute sound',
201
- onClick,
202
- onBlur,
203
- onFocus: () => setFocused(true),
204
- style: volumeContainer,
205
- type: 'button',
206
- children: isMutedOrZero
207
- ? (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOffIcon, {})
208
- : (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOnIcon, {}),
209
- }),
210
- (focused || hover) && !mediaMuted && !remotion_1.Internals.isIosSafari()
211
- ? (0, jsx_runtime_1.jsx)('div', {
212
- style: sliderContainer,
213
- children: (0, jsx_runtime_1.jsx)('input', {
214
- ref: inputRef,
215
- 'aria-label': 'Change volume',
216
- className: randomClass,
217
- max: 1,
218
- min: 0,
219
- onBlur: () => setFocused(false),
220
- onChange: onVolumeChange,
221
- step: 0.01,
222
- type: 'range',
223
- value: mediaVolume,
224
- style: inputStyle,
225
- }),
226
- })
227
- : null,
228
- ],
229
- });
150
+ return ((0, jsx_runtime_1.jsxs)("div", { ref: parentDivRef, style: parentDivStyle, children: [(0, jsx_runtime_1.jsx)("style", {
151
+ // eslint-disable-next-line react/no-danger
152
+ dangerouslySetInnerHTML: {
153
+ __html: sliderStyle,
154
+ } }), (0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted && !remotion_1.Internals.isIosSafari() ? ((0, jsx_runtime_1.jsx)("div", { style: sliderContainer, children: (0, jsx_runtime_1.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] }));
230
155
  };
231
-
232
156
  exports.MediaVolumeSlider = MediaVolumeSlider;
package/dist/cjs/PlayerUI.js CHANGED
@@ -186,6 +186,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
186
186
  let timeout = null;
187
187
  let stopped = false;
188
188
  const onBuffer = () => {
189
+ stopped = false;
189
190
  requestAnimationFrame(() => {
190
191
  if (bufferStateDelayInMilliseconds === 0) {
191
192
  setShowBufferState(true);
package/dist/cjs/SharedPlayerContext.js CHANGED
@@ -33,6 +33,7 @@ const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeigh
33
33
  setCurrentCompositionMetadata: () => undefined,
34
34
  canvasContent: { type: 'composition', compositionId: 'player-comp' },
35
35
  setCanvasContent: () => undefined,
36
+ updateCompositionDefaultProps: () => undefined,
36
37
  };
37
38
  return context;
38
39
  }, [component, durationInFrames, compositionHeight, compositionWidth, fps]);
package/dist/cjs/icons.js CHANGED
@@ -1,141 +1,47 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', {value: true});
3
- exports.VolumeOnIcon =
4
- exports.VolumeOffIcon =
5
- exports.FullscreenIcon =
6
- exports.PauseIcon =
7
- exports.PlayIcon =
8
- exports.fullscreenIconSize =
9
- exports.ICON_SIZE =
10
- void 0;
11
- const jsx_runtime_1 = require('react/jsx-runtime');
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.fullscreenIconSize = exports.ICON_SIZE = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
12
5
  exports.ICON_SIZE = 25;
13
6
  exports.fullscreenIconSize = 16;
14
7
  const PlayIcon = () => {
15
- return (0, jsx_runtime_1.jsx)('svg', {
16
- width: exports.ICON_SIZE,
17
- height: exports.ICON_SIZE,
18
- viewBox: '0 0 25 25',
19
- fill: 'none',
20
- children: (0, jsx_runtime_1.jsx)('path', {
21
- d: 'M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z',
22
- fill: 'white',
23
- stroke: 'white',
24
- strokeWidth: '6.25',
25
- strokeLinejoin: 'round',
26
- }),
27
- });
8
+ return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 25 25", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z", fill: "white", stroke: "white", strokeWidth: "6.25", strokeLinejoin: "round" }) }));
28
9
  };
29
-
30
10
  exports.PlayIcon = PlayIcon;
31
11
  const PauseIcon = () => {
32
- return (0, jsx_runtime_1.jsxs)('svg', {
33
- viewBox: '0 0 100 100',
34
- width: exports.ICON_SIZE,
35
- height: exports.ICON_SIZE,
36
- children: [
37
- (0, jsx_runtime_1.jsx)('rect', {
38
- x: '25',
39
- y: '20',
40
- width: '20',
41
- height: '60',
42
- fill: '#fff',
43
- ry: '5',
44
- rx: '5',
45
- }),
46
- (0, jsx_runtime_1.jsx)('rect', {
47
- x: '55',
48
- y: '20',
49
- width: '20',
50
- height: '60',
51
- fill: '#fff',
52
- ry: '5',
53
- rx: '5',
54
- }),
55
- ],
56
- });
12
+ return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 100 100", width: exports.ICON_SIZE, height: exports.ICON_SIZE, children: [(0, jsx_runtime_1.jsx)("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), (0, jsx_runtime_1.jsx)("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })] }));
57
13
  };
58
-
59
14
  exports.PauseIcon = PauseIcon;
60
- const FullscreenIcon = ({isFullscreen}) => {
61
- const strokeWidth = 6;
62
- const viewSize = 32;
63
- const out = isFullscreen ? 0 : strokeWidth / 2;
64
- const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
65
- const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
66
- return (0, jsx_runtime_1.jsxs)('svg', {
67
- viewBox: `0 0 ${viewSize} ${viewSize}`,
68
- height: exports.fullscreenIconSize,
69
- width: exports.fullscreenIconSize,
70
- children: [
71
- (0, jsx_runtime_1.jsx)('path', {
72
- d: `
15
+ const FullscreenIcon = ({ isFullscreen, }) => {
16
+ const strokeWidth = 6;
17
+ const viewSize = 32;
18
+ const out = isFullscreen ? 0 : strokeWidth / 2;
19
+ const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
20
+ const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
21
+ return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: `0 0 ${viewSize} ${viewSize}`, height: exports.fullscreenIconSize, width: exports.fullscreenIconSize, children: [(0, jsx_runtime_1.jsx)("path", { d: `
73
22
  M ${out} ${inset}
74
23
  L ${middleInset} ${middleInset}
75
24
  L ${inset} ${out}
76
- `,
77
- stroke: '#fff',
78
- strokeWidth,
79
- fill: 'none',
80
- }),
81
- (0, jsx_runtime_1.jsx)('path', {
82
- d: `
25
+ `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
83
26
  M ${viewSize - out} ${inset}
84
27
  L ${viewSize - middleInset} ${middleInset}
85
28
  L ${viewSize - inset} ${out}
86
- `,
87
- stroke: '#fff',
88
- strokeWidth,
89
- fill: 'none',
90
- }),
91
- (0, jsx_runtime_1.jsx)('path', {
92
- d: `
29
+ `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
93
30
  M ${out} ${viewSize - inset}
94
31
  L ${middleInset} ${viewSize - middleInset}
95
32
  L ${inset} ${viewSize - out}
96
- `,
97
- stroke: '#fff',
98
- strokeWidth,
99
- fill: 'none',
100
- }),
101
- (0, jsx_runtime_1.jsx)('path', {
102
- d: `
33
+ `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
103
34
  M ${viewSize - out} ${viewSize - inset}
104
35
  L ${viewSize - middleInset} ${viewSize - middleInset}
105
36
  L ${viewSize - inset} ${viewSize - out}
106
- `,
107
- stroke: '#fff',
108
- strokeWidth,
109
- fill: 'none',
110
- }),
111
- ],
112
- });
37
+ `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" })] }));
113
38
  };
114
-
115
39
  exports.FullscreenIcon = FullscreenIcon;
116
40
  const VolumeOffIcon = () => {
117
- return (0, jsx_runtime_1.jsx)('svg', {
118
- width: exports.ICON_SIZE,
119
- height: exports.ICON_SIZE,
120
- viewBox: '0 0 24 24',
121
- children: (0, jsx_runtime_1.jsx)('path', {
122
- d: 'M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z',
123
- fill: '#fff',
124
- }),
125
- });
41
+ return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "#fff" }) }));
126
42
  };
127
-
128
43
  exports.VolumeOffIcon = VolumeOffIcon;
129
44
  const VolumeOnIcon = () => {
130
- return (0, jsx_runtime_1.jsx)('svg', {
131
- width: exports.ICON_SIZE,
132
- height: exports.ICON_SIZE,
133
- viewBox: '0 0 24 24',
134
- children: (0, jsx_runtime_1.jsx)('path', {
135
- d: 'M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z',
136
- fill: '#fff',
137
- }),
138
- });
45
+ return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }) }));
139
46
  };
140
-
141
47
  exports.VolumeOnIcon = VolumeOnIcon;
package/dist/esm/index.mjs CHANGED
@@ -2239,6 +2239,7 @@ var PlayerUI = ({
2239
2239
  let timeout = null;
2240
2240
  let stopped = false;
2241
2241
  const onBuffer = () => {
2242
+ stopped = false;
2242
2243
  requestAnimationFrame(() => {
2243
2244
  if (bufferStateDelayInMilliseconds === 0) {
2244
2245
  setShowBufferState(true);
@@ -2592,6 +2593,9 @@ var SharedPlayerContexts = ({
2592
2593
  canvasContent: { type: "composition", compositionId: "player-comp" },
2593
2594
  setCanvasContent: () => {
2594
2595
  return;
2596
+ },
2597
+ updateCompositionDefaultProps: () => {
2598
+ return;
2595
2599
  }
2596
2600
  };
2597
2601
  return context;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remotion/player",
3
- "version": "4.0.154",
3
+ "version": "4.0.157",
4
4
  "description": "Remotion Player",
5
5
  "main": "dist/cjs/index.js",
6
6
  "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.154"
31
+ "remotion": "4.0.157"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "react": ">=16.8.0",