@remotion/player 4.0.0-oops.3 → 4.0.0-spawn.10

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 (12) hide show
  1. package/dist/MediaVolumeSlider.js +1 -1
  2. package/dist/Player.js +1 -1
  3. package/dist/PlayerControls.js +2 -2
  4. package/dist/PlayerSeekBar.js +1 -1
  5. package/dist/PlayerUI.js +3 -3
  6. package/dist/error-boundary.js +1 -1
  7. package/dist/icons.js +8 -8
  8. package/dist/test/test-utils.d.ts +1 -1
  9. package/dist/test/test-utils.js +7 -3
  10. package/dist/test/validate-prop.test.js +13 -13
  11. package/dist/use-player.d.ts +1 -1
  12. package/package.json +4 -4
package/dist/MediaVolumeSlider.js CHANGED
@@ -88,6 +88,6 @@ const MediaVolumeSlider = () => {
88
88
  }
89
89
  setMediaMuted((mute) => !mute);
90
90
  }, [mediaVolume, setMediaMuted, setMediaVolume]);
91
- return ((0, jsx_runtime_1.jsxs)("div", { ref: parentDivRef, style: parentDivStyle, children: [(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_1.VolumeOffIcon, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.VolumeOnIcon, {}, void 0) }, void 0), (focused || hover) && !mediaMuted ? ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, "aria-label": "Change volume", className: player_css_classname_1.VOLUME_SLIDER_INPUT_CSS_CLASSNAME, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume }, void 0)) : null] }, void 0));
91
+ return ((0, jsx_runtime_1.jsxs)("div", { ref: parentDivRef, style: parentDivStyle, children: [(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_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted ? ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, "aria-label": "Change volume", className: player_css_classname_1.VOLUME_SLIDER_INPUT_CSS_CLASSNAME, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume })) : null] }));
92
92
  };
93
93
  exports.MediaVolumeSlider = MediaVolumeSlider;
package/dist/Player.js CHANGED
@@ -181,7 +181,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
181
181
  }, [inputProps]);
182
182
  return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(PlayerUI_1.default, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), clickToPlay: typeof clickToPlay === 'boolean'
183
183
  ? clickToPlay
184
- : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0));
184
+ : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate }) }) }) }) }) }) }) }));
185
185
  };
186
186
  exports.PlayerFn = PlayerFn;
187
187
  exports.Player = (0, react_1.forwardRef)(exports.PlayerFn);
package/dist/PlayerControls.js CHANGED
@@ -80,8 +80,8 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
80
80
  playButtonRef.current.focus();
81
81
  }
82
82
  }, [player.playing, spaceKeyToPlayOrPause]);
83
- return ((0, jsx_runtime_1.jsxs)("div", { style: containerCss, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: player.playing ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, {}, void 0) }, void 0), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }, void 0), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_1.MediaVolumeSlider, {}, void 0)] }, void 0)) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }, void 0), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_1.formatTime)(frame / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }, void 0), (0, jsx_runtime_1.jsx)("div", { style: xSpacer }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)("div", { style: flex1 }, void 0), browser_supports_fullscreen_1.browserSupportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen
83
+ return ((0, jsx_runtime_1.jsxs)("div", { style: containerCss, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: player.playing ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, {}) }), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_1.MediaVolumeSlider, {})] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_1.formatTime)(frame / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), browser_supports_fullscreen_1.browserSupportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen
84
84
  ? onExitFullscreenButtonClick
85
- : onFullscreenButtonClick, children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { minimized: !isFullscreen }, void 0) }, void 0) }, void 0)) : null] }, void 0), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }, void 0), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { durationInFrames: durationInFrames }, void 0)] }, void 0));
85
+ : onFullscreenButtonClick, children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { minimized: !isFullscreen }) }) })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { durationInFrames: durationInFrames })] }));
86
86
  };
87
87
  exports.Controls = Controls;
package/dist/PlayerSeekBar.js CHANGED
@@ -117,6 +117,6 @@ const PlayerSeekBar = ({ durationInFrames }) => {
117
117
  borderRadius: BAR_HEIGHT / 2,
118
118
  };
119
119
  }, [durationInFrames, frame]);
120
- return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: barBackground, children: (0, jsx_runtime_1.jsx)("div", { style: fillStyle }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: knobStyle }, void 0)] }, void 0));
120
+ return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: barBackground, children: (0, jsx_runtime_1.jsx)("div", { style: fillStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: knobStyle })] }));
121
121
  };
122
122
  exports.PlayerSeekBar = PlayerSeekBar;
package/dist/PlayerUI.js CHANGED
@@ -250,10 +250,10 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
250
250
  if (!config) {
251
251
  return null;
252
252
  }
253
- const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _b !== void 0 ? _b : {}), ...((_c = inputProps) !== null && _c !== void 0 ? _c : {}) }, void 0) }, void 0)) : null }, void 0) }, void 0), controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause }, void 0)) : null] }, void 0));
253
+ const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _b !== void 0 ? _b : {}), ...((_c = inputProps) !== null && _c !== void 0 ? _c : {}) }) })) : null }) }), controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause })) : null] }));
254
254
  // Don't render suspense on Node.js
255
255
  if (is_node_1.IS_NODE) {
256
- return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, children: content }, void 0));
256
+ return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, children: content }));
257
257
  }
258
258
  const loadingMarkup = renderLoading
259
259
  ? renderLoading({
@@ -261,6 +261,6 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
261
261
  width: outerStyle.width,
262
262
  })
263
263
  : null;
264
- return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: loadingMarkup, children: content }, void 0) }, void 0));
264
+ return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: loadingMarkup, children: content }) }));
265
265
  };
266
266
  exports.default = (0, react_1.forwardRef)(PlayerUI);
package/dist/error-boundary.js CHANGED
@@ -31,7 +31,7 @@ class ErrorBoundary extends react_1.default.Component {
31
31
  // You can render any custom fallback UI
32
32
  return ((0, jsx_runtime_1.jsx)("div", { style: errorStyle, children: this.props.errorFallback({
33
33
  error: this.state.hasError,
34
- }) }, void 0));
34
+ }) }));
35
35
  }
36
36
  return this.props.children;
37
37
  }
package/dist/icons.js CHANGED
@@ -8,11 +8,11 @@ const rotate = {
8
8
  transform: `rotate(90deg)`,
9
9
  };
10
10
  const PlayIcon = () => {
11
- return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }, void 0) }, void 0));
11
+ return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }));
12
12
  };
13
13
  exports.PlayIcon = PlayIcon;
14
14
  const PauseIcon = () => {
15
- 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" }, void 0), (0, jsx_runtime_1.jsx)("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }, void 0)] }, void 0));
15
+ 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" })] }));
16
16
  };
17
17
  exports.PauseIcon = PauseIcon;
18
18
  const FullscreenIcon = ({ minimized }) => {
@@ -25,26 +25,26 @@ const FullscreenIcon = ({ minimized }) => {
25
25
  M ${out} ${inset}
26
26
  L ${middleInset} ${middleInset}
27
27
  L ${inset} ${out}
28
- `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: `
28
+ `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
29
29
  M ${viewSize - out} ${inset}
30
30
  L ${viewSize - middleInset} ${middleInset}
31
31
  L ${viewSize - inset} ${out}
32
- `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: `
32
+ `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
33
33
  M ${out} ${viewSize - inset}
34
34
  L ${middleInset} ${viewSize - middleInset}
35
35
  L ${inset} ${viewSize - out}
36
- `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: `
36
+ `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
37
37
  M ${viewSize - out} ${viewSize - inset}
38
38
  L ${viewSize - middleInset} ${viewSize - middleInset}
39
39
  L ${viewSize - inset} ${viewSize - out}
40
- `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0)] }, void 0));
40
+ `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" })] }));
41
41
  };
42
42
  exports.FullscreenIcon = FullscreenIcon;
43
43
  const VolumeOffIcon = () => {
44
- 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" }, void 0) }, void 0));
44
+ 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" }) }));
45
45
  };
46
46
  exports.VolumeOffIcon = VolumeOffIcon;
47
47
  const VolumeOnIcon = () => {
48
- 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" }, void 0) }, void 0));
48
+ 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" }) }));
49
49
  };
50
50
  exports.VolumeOnIcon = VolumeOnIcon;
package/dist/test/test-utils.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { queries, RenderOptions } from '@testing-library/react';
2
2
  import { FC, ReactElement } from 'react';
3
3
  declare const HelloWorld: FC;
4
- declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions<typeof queries, HTMLElement, HTMLElement>, "queries"> | undefined) => import("@testing-library/react").RenderResult<typeof queries, HTMLElement, HTMLElement>;
4
+ declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>) => import("@testing-library/react").RenderResult<typeof queries, HTMLElement, HTMLElement>;
5
5
  export * from '@testing-library/react';
6
6
  export { customRender as render, HelloWorld };
package/dist/test/test-utils.js CHANGED
@@ -1,7 +1,11 @@
1
1
  "use strict";
2
2
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
3
  if (k2 === undefined) k2 = k;
4
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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);
5
9
  }) : (function(o, m, k, k2) {
6
10
  if (k2 === undefined) k2 = k;
7
11
  o[k2] = m[k];
@@ -14,14 +18,14 @@ exports.HelloWorld = exports.render = void 0;
14
18
  const jsx_runtime_1 = require("react/jsx-runtime");
15
19
  const react_1 = require("@testing-library/react");
16
20
  const HelloWorld = () => {
17
- return (0, jsx_runtime_1.jsx)("div", { children: "Hello World" }, void 0);
21
+ return (0, jsx_runtime_1.jsx)("div", { children: "Hello World" });
18
22
  };
19
23
  exports.HelloWorld = HelloWorld;
20
24
  const AllTheProviders = ({ children }) => {
21
25
  // overwriting console.error console does not gets poluted with all the errors
22
26
  // eslint-disable-next-line @typescript-eslint/no-empty-function
23
27
  window.console.error = () => { };
24
- return (0, jsx_runtime_1.jsx)("div", { children: children }, void 0);
28
+ return (0, jsx_runtime_1.jsx)("div", { children: children });
25
29
  };
26
30
  const customRender = (ui, options) => (0, react_1.render)(ui, { wrapper: AllTheProviders, ...options });
27
31
  exports.render = customRender;
package/dist/test/validate-prop.test.js CHANGED
@@ -10,7 +10,7 @@ test('no compositionWidth should give errors', () => {
10
10
  // @ts-expect-error
11
11
  , {
12
12
  // @ts-expect-error
13
- compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
13
+ compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
14
14
  }
15
15
  catch (e) {
16
16
  expect(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
@@ -20,7 +20,7 @@ test('no compositionHeight should give errors', () => {
20
20
  try {
21
21
  (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 400, errorFallback: () => 'something went wrong',
22
22
  // @ts-expect-error
23
- compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
23
+ compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
24
24
  }
25
25
  catch (e) {
26
26
  expect(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
@@ -30,7 +30,7 @@ test('No fps should give errors', () => {
30
30
  try {
31
31
  (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong',
32
32
  // @ts-expect-error
33
- fps: null, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
33
+ fps: null, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
34
34
  }
35
35
  catch (e) {
36
36
  expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
@@ -38,7 +38,7 @@ test('No fps should give errors', () => {
38
38
  try {
39
39
  (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong',
40
40
  // @ts-expect-error
41
- fps: undefined, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
41
+ fps: undefined, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
42
42
  }
43
43
  catch (e) {
44
44
  expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
@@ -48,7 +48,7 @@ test('No durationInFrames should give errors', () => {
48
48
  try {
49
49
  (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30,
50
50
  // @ts-expect-error
51
- durationInFrames: undefined, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
51
+ durationInFrames: undefined, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
52
52
  }
53
53
  catch (e) {
54
54
  expect(e.message).toMatch(/The "durationInFrames" prop of the <Player\/> component must be a number, but you passed a value of type undefined/);
@@ -56,7 +56,7 @@ test('No durationInFrames should give errors', () => {
56
56
  });
57
57
  test('Invalid playbackRate should give error', () => {
58
58
  try {
59
- (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5 }, void 0));
59
+ (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5 }));
60
60
  }
61
61
  catch (e) {
62
62
  expect(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
@@ -64,7 +64,7 @@ test('Invalid playbackRate should give error', () => {
64
64
  });
65
65
  test('playbackRate of 0 should not be possible', () => {
66
66
  try {
67
- (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }, void 0));
67
+ (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }));
68
68
  }
69
69
  catch (e) {
70
70
  expect(e.message).toMatch(/A playback rate of 0 is not supported./);
@@ -74,14 +74,14 @@ test('playbackRate of wrong type should not be possible', () => {
74
74
  try {
75
75
  (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true,
76
76
  // @ts-expect-error
77
- playbackRate: 'hi' }, void 0));
77
+ playbackRate: 'hi' }));
78
78
  }
79
79
  catch (e) {
80
80
  expect(e.message).toMatch(/A playback rate of 0 is not supported./);
81
81
  }
82
82
  });
83
83
  test('playbackRate of undefined should be okay', () => {
84
- (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
84
+ (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
85
85
  expect(true).toBe(true);
86
86
  });
87
87
  test('passing in <Composition /> instance should not be possible', () => {
@@ -93,21 +93,21 @@ test('passing in <Composition /> instance should not be possible', () => {
93
93
  fps: 30,
94
94
  durationInFrames: 500,
95
95
  component: test_utils_1.HelloWorld,
96
- } }, void 0));
96
+ } }));
97
97
  }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
98
98
  });
99
99
  test('passing in <Composition /> instance should not be possible', () => {
100
100
  expect(() => {
101
101
  (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500,
102
102
  // @ts-expect-error
103
- component: (0, jsx_runtime_1.jsx)(remotion_1.Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: test_utils_1.HelloWorld }, void 0), controls: true, showVolumeControls: true, inputProps: {
103
+ component: (0, jsx_runtime_1.jsx)(remotion_1.Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: test_utils_1.HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
104
104
  id: 'HelloWorld',
105
105
  width: 500,
106
106
  height: 400,
107
107
  fps: 30,
108
108
  durationInFrames: 500,
109
109
  component: test_utils_1.HelloWorld,
110
- } }, void 0));
110
+ } }));
111
111
  }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
112
112
  });
113
113
  test.each([
@@ -122,7 +122,7 @@ test.each([
122
122
  const props = {};
123
123
  props[a] = 'hey';
124
124
  try {
125
- (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: test_utils_1.HelloWorld, ...props }, void 0));
125
+ (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: test_utils_1.HelloWorld, ...props }));
126
126
  }
127
127
  catch (e) {
128
128
  expect(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
package/dist/use-player.d.ts CHANGED
@@ -6,7 +6,7 @@ export declare const usePlayer: () => {
6
6
  isLastFrame: boolean;
7
7
  emitter: PlayerEmitter;
8
8
  playing: boolean;
9
- play: (e?: SyntheticEvent<Element, Event> | undefined) => void;
9
+ play: (e?: SyntheticEvent) => void;
10
10
  pause: () => void;
11
11
  seek: (newFrame: number) => void;
12
12
  getCurrentFrame: () => number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remotion/player",
3
- "version": "4.0.0-oops.3+31c506229",
3
+ "version": "4.0.0-spawn.10+911177607",
4
4
  "description": "Remotion Player",
5
5
  "main": "dist/index.js",
6
6
  "sideEffects": false,
@@ -28,7 +28,7 @@
28
28
  ],
29
29
  "license": "SEE LICENSE IN LICENSE.md",
30
30
  "dependencies": {
31
- "remotion": "4.0.0-oops.3+31c506229"
31
+ "remotion": "4.0.0-spawn.10+911177607"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "react": ">=16.8.0",
@@ -49,7 +49,7 @@
49
49
  "react": "^18.0.0",
50
50
  "react-dom": "^18.0.0",
51
51
  "ts-jest": "^27.0.5",
52
- "typescript": "^4.5.5",
52
+ "typescript": "^4.7.0",
53
53
  "webpack": "5.72.0"
54
54
  },
55
55
  "keywords": [
@@ -63,5 +63,5 @@
63
63
  "publishConfig": {
64
64
  "access": "public"
65
65
  },
66
- "gitHead": "31c506229ccf43f67dee263b0edce90ebbb2e22e"
66
+ "gitHead": "911177607ac127d9f4d1c014ad8ae32fd14947dd"
67
67
  }