@remotion/player 4.0.423 → 4.0.425
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/BufferingIndicator.js +5 -3
- package/dist/cjs/DefaultPlayPauseButton.js +3 -3
- package/dist/cjs/EmitterProvider.js +1 -1
- package/dist/cjs/MediaVolumeSlider.js +2 -2
- package/dist/cjs/PlaybackrateControl.d.ts +1 -1
- package/dist/cjs/PlaybackrateControl.js +7 -5
- package/dist/cjs/Player.d.ts +1 -1
- package/dist/cjs/Player.js +1 -1
- package/dist/cjs/PlayerControls.js +11 -3
- package/dist/cjs/PlayerSeekBar.js +5 -1
- package/dist/cjs/PlayerTimeLabel.js +1 -1
- package/dist/cjs/PlayerUI.d.ts +3 -3
- package/dist/cjs/PlayerUI.js +9 -6
- package/dist/cjs/SharedPlayerContext.js +1 -1
- package/dist/cjs/Thumbnail.d.ts +1 -1
- package/dist/cjs/Thumbnail.js +1 -1
- package/dist/cjs/ThumbnailUI.d.ts +1 -1
- package/dist/cjs/ThumbnailUI.js +3 -3
- package/dist/cjs/calculate-scale.d.ts +6 -6
- package/dist/cjs/error-boundary.d.ts +1 -1
- package/dist/cjs/error-boundary.js +2 -5
- package/dist/cjs/event-emitter.js +84 -88
- package/dist/cjs/icons.js +13 -9
- package/dist/cjs/index.d.ts +8 -8
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/license-blacklist.js +1 -1
- package/dist/cjs/player-css-classname.d.ts +1 -1
- package/dist/cjs/render-volume-slider.js +5 -3
- package/dist/cjs/use-hover-state.d.ts +1 -1
- package/dist/cjs/use-remotion-license-acknowledge.d.ts +1 -2
- package/dist/cjs/utils/calculate-player-size.d.ts +3 -4
- package/dist/cjs/utils/use-element-size.d.ts +1 -1
- package/dist/cjs/volume-persistance.d.ts +1 -2
- package/package.json +7 -6
|
@@ -22,7 +22,8 @@ const studioStyle = {
|
|
|
22
22
|
};
|
|
23
23
|
const BufferingIndicator = ({ type }) => {
|
|
24
24
|
const style = type === 'player' ? playerStyle : studioStyle;
|
|
25
|
-
return (
|
|
25
|
+
return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
|
|
26
|
+
jsx_runtime_1.jsx("style", { type: "text/css", children: `
|
|
26
27
|
@keyframes ${remotionBufferingAnimation} {
|
|
27
28
|
0% {
|
|
28
29
|
rotate: 0deg;
|
|
@@ -35,8 +36,9 @@ const BufferingIndicator = ({ type }) => {
|
|
|
35
36
|
.${className} {
|
|
36
37
|
animation: ${remotionBufferingAnimation} 1s linear infinite;
|
|
37
38
|
}
|
|
38
|
-
` }),
|
|
39
|
+
` }), jsx_runtime_1.jsx("div", { style: style, children: jsx_runtime_1.jsx("svg", { viewBox: type === 'player' ? '0 0 22 22' : '0 0 18 18', style: style, className: className, children: jsx_runtime_1.jsx("path", { d: type === 'player'
|
|
39
40
|
? 'M 11 4 A 7 7 0 0 1 15.1145 16.66312'
|
|
40
|
-
: 'M 9 2 A 7 7 0 0 1 13.1145 14.66312', stroke: "white", strokeLinecap: "round", fill: "none", strokeWidth: 3 }) }) })
|
|
41
|
+
: 'M 9 2 A 7 7 0 0 1 13.1145 14.66312', stroke: "white", strokeLinecap: "round", fill: "none", strokeWidth: 3 }) }) })
|
|
42
|
+
] }));
|
|
41
43
|
};
|
|
42
44
|
exports.BufferingIndicator = BufferingIndicator;
|
|
@@ -6,11 +6,11 @@ const BufferingIndicator_js_1 = require("./BufferingIndicator.js");
|
|
|
6
6
|
const icons_js_1 = require("./icons.js");
|
|
7
7
|
const DefaultPlayPauseButton = ({ playing, buffering }) => {
|
|
8
8
|
if (playing && buffering) {
|
|
9
|
-
return
|
|
9
|
+
return jsx_runtime_1.jsx(BufferingIndicator_js_1.BufferingIndicator, { type: "player" });
|
|
10
10
|
}
|
|
11
11
|
if (playing) {
|
|
12
|
-
return
|
|
12
|
+
return jsx_runtime_1.jsx(icons_js_1.PauseIcon, {});
|
|
13
13
|
}
|
|
14
|
-
return
|
|
14
|
+
return jsx_runtime_1.jsx(icons_js_1.PlayIcon, {});
|
|
15
15
|
};
|
|
16
16
|
exports.DefaultPlayPauseButton = DefaultPlayPauseButton;
|
|
@@ -19,6 +19,6 @@ const PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
|
|
|
19
19
|
}
|
|
20
20
|
}, [emitter, currentPlaybackRate]);
|
|
21
21
|
(0, use_buffer_state_emitter_js_1.useBufferStateEmitter)(emitter);
|
|
22
|
-
return (
|
|
22
|
+
return (jsx_runtime_1.jsx(emitter_context_js_1.PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
|
|
23
23
|
};
|
|
24
24
|
exports.PlayerEmitterProvider = PlayerEmitterProvider;
|
|
@@ -58,7 +58,7 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, rend
|
|
|
58
58
|
}, []);
|
|
59
59
|
const renderDefaultMuteButton = (0, react_1.useCallback)(({ muted, volume }) => {
|
|
60
60
|
const isMutedOrZero = muted || volume === 0;
|
|
61
|
-
return (
|
|
61
|
+
return (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 ? jsx_runtime_1.jsx(icons_js_1.VolumeOffIcon, {}) : jsx_runtime_1.jsx(icons_js_1.VolumeOnIcon, {}) }));
|
|
62
62
|
}, [onBlur, onClick, volumeContainer]);
|
|
63
63
|
const muteButton = (0, react_1.useMemo)(() => {
|
|
64
64
|
return renderMuteButton
|
|
@@ -84,6 +84,6 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, rend
|
|
|
84
84
|
renderVolumeSlider,
|
|
85
85
|
setMediaVolume,
|
|
86
86
|
]);
|
|
87
|
-
return (
|
|
87
|
+
return (jsx_runtime_1.jsxs("div", { ref: parentDivRef, style: parentDivStyle, children: [muteButton, volumeSlider] }));
|
|
88
88
|
};
|
|
89
89
|
exports.MediaVolumeSlider = MediaVolumeSlider;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { Size } from './utils/use-element-size.js';
|
|
3
|
-
export declare const Checkmark: () => import("react/jsx-runtime
|
|
3
|
+
export declare const Checkmark: () => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export declare const playerButtonStyle: React.CSSProperties;
|
|
5
5
|
export declare const PlaybackrateControl: React.FC<{
|
|
6
6
|
readonly playbackRates: number[];
|
|
@@ -30,7 +30,7 @@ const checkmarkStyle = {
|
|
|
30
30
|
height: 14,
|
|
31
31
|
color: 'black',
|
|
32
32
|
};
|
|
33
|
-
const Checkmark = () => (
|
|
33
|
+
const Checkmark = () => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: checkmarkStyle, children: jsx_runtime_1.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" }) }));
|
|
34
34
|
exports.Checkmark = Checkmark;
|
|
35
35
|
const formatPlaybackRate = (rate) => {
|
|
36
36
|
const str = rate.toString();
|
|
@@ -57,7 +57,8 @@ const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate
|
|
|
57
57
|
backgroundColor: hovered || isFocused ? '#eee' : 'transparent',
|
|
58
58
|
};
|
|
59
59
|
}, [hovered, isFocused]);
|
|
60
|
-
return (
|
|
60
|
+
return (jsx_runtime_1.jsxs("div", { onPointerEnter: onMouseEnter, onPointerLeave: onMouseLeave, tabIndex: 0, style: actualStyle, onClick: onClick, children: [
|
|
61
|
+
jsx_runtime_1.jsx("div", { style: checkmarkContainer, children: rate === selectedRate ? jsx_runtime_1.jsx(exports.Checkmark, {}) : null }), formatPlaybackRate(rate), "x"] }, rate));
|
|
61
62
|
};
|
|
62
63
|
const PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
|
|
63
64
|
const { setPlaybackRate, playbackRate } = (0, react_1.useContext)(remotion_1.Internals.TimelineContext);
|
|
@@ -122,8 +123,8 @@ const PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) =>
|
|
|
122
123
|
textAlign: 'left',
|
|
123
124
|
};
|
|
124
125
|
}, [canvasSize.height]);
|
|
125
|
-
return (
|
|
126
|
-
return (
|
|
126
|
+
return (jsx_runtime_1.jsx("div", { style: playbackPopup, children: playbackRates.map((rate) => {
|
|
127
|
+
return (jsx_runtime_1.jsx(PlaybackrateOption, { selectedRate: playbackRate, onSelect: onSelect, rate: rate, keyboardSelectedRate: keyboardSelectedRate }, rate));
|
|
127
128
|
}) }));
|
|
128
129
|
};
|
|
129
130
|
const label = {
|
|
@@ -164,6 +165,7 @@ const PlaybackrateControl = ({ playbackRates, canvasSize }) => {
|
|
|
164
165
|
e.preventDefault();
|
|
165
166
|
setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
|
|
166
167
|
}, [setIsComponentVisible]);
|
|
167
|
-
return (
|
|
168
|
+
return (jsx_runtime_1.jsx("div", { ref: ref, children: jsx_runtime_1.jsxs("button", { type: "button", "aria-label": "Change playback rate", style: button, onClick: onClick, children: [
|
|
169
|
+
jsx_runtime_1.jsxs("div", { style: label, children: [playbackRate, "x"] }), isComponentVisible && (jsx_runtime_1.jsx(PlaybackPopup, { canvasSize: canvasSize, playbackRates: playbackRates, setIsComponentVisible: setIsComponentVisible }))] }) }));
|
|
168
170
|
};
|
|
169
171
|
exports.PlaybackrateControl = PlaybackrateControl;
|
package/dist/cjs/Player.d.ts
CHANGED
|
@@ -65,4 +65,4 @@ export type PlayerProps<Schema extends AnyZodObject, Props extends Record<string
|
|
|
65
65
|
} & CompProps<Props> & PropsIfHasProps<Schema, Props>;
|
|
66
66
|
export type PlayerPropsWithoutZod<Props extends Record<string, unknown>> = PlayerProps<AnyZodObject, Props>;
|
|
67
67
|
export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;
|
|
68
|
-
export declare const Player: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: PlayerProps<Schema, Props> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;
|
|
68
|
+
export declare const Player: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: PlayerProps<Schema, Props> & React.RefAttributes<PlayerRef>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
|
package/dist/cjs/Player.js
CHANGED
|
@@ -154,7 +154,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
|
|
|
154
154
|
mode: 'prevent-media-session',
|
|
155
155
|
});
|
|
156
156
|
}, [passedBrowserMediaControlsBehavior]);
|
|
157
|
-
return (
|
|
157
|
+
return (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, audioLatencyHint: audioLatencyHint, volumePersistenceKey: volumePersistenceKey, inputProps: actualInputProps, audioEnabled: true, children: jsx_runtime_1.jsx(remotion_1.Internals.SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx_runtime_1.jsx(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: jsx_runtime_1.jsx(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
|
|
158
158
|
? clickToPlay
|
|
159
159
|
: Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), showPosterWhenBufferingAndPaused: Boolean(showPosterWhenBufferingAndPaused), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, renderCustomControls: renderCustomControls !== null && renderCustomControls !== void 0 ? renderCustomControls : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior, overrideInternalClassName: overrideInternalClassName !== null && overrideInternalClassName !== void 0 ? overrideInternalClassName : undefined, noSuspense: Boolean(noSuspense) }) }) }) }) }));
|
|
160
160
|
};
|
|
@@ -165,11 +165,19 @@ const Controls = ({ durationInFrames, isFullscreen, fps, showVolumeControls, onF
|
|
|
165
165
|
onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
|
|
166
166
|
}
|
|
167
167
|
}, [onDoubleClick]);
|
|
168
|
-
return (
|
|
168
|
+
return (jsx_runtime_1.jsxs("div", { ref: ref, style: containerCss, onPointerDown: onPointerDownIfContainer, onDoubleClick: onDoubleClickIfContainer, children: [
|
|
169
|
+
jsx_runtime_1.jsxs("div", { ref: flexRef, style: controlsRow, children: [
|
|
170
|
+
jsx_runtime_1.jsxs("div", { style: leftPartStyle, children: [
|
|
171
|
+
jsx_runtime_1.jsx("button", { ref: playButtonRef, type: "button", style: PlaybackrateControl_js_1.playerButtonStyle, onClick: toggle, "aria-label": playing ? 'Pause video' : 'Play video', title: playing ? 'Pause video' : 'Play video', children: renderPlayPauseButton === null ? (jsx_runtime_1.jsx(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: playing })) : (((_b = renderPlayPauseButton({
|
|
169
172
|
playing,
|
|
170
173
|
isBuffering: buffering,
|
|
171
|
-
})) !== null && _b !== void 0 ? _b : (
|
|
174
|
+
})) !== null && _b !== void 0 ? _b : (jsx_runtime_1.jsx(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: playing })))) }), showVolumeControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
|
|
175
|
+
jsx_runtime_1.jsx("div", { style: xSpacer }), jsx_runtime_1.jsx(MediaVolumeSlider_js_1.MediaVolumeSlider, { renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider, displayVerticalVolumeSlider: displayVerticalVolumeSlider })
|
|
176
|
+
] })) : null, jsx_runtime_1.jsx("div", { style: xSpacer }), jsx_runtime_1.jsx(PlayerTimeLabel_js_1.PlayerTimeLabel, { durationInFrames: durationInFrames, fps: fps, maxTimeLabelWidth: maxTimeLabelWidth }), jsx_runtime_1.jsx("div", { style: xSpacer })
|
|
177
|
+
] }), jsx_runtime_1.jsx("div", { style: flex1 }), customControlsElement, customControlsElement && playbackRates && canvasSize ? (jsx_runtime_1.jsx("div", { style: xSpacer })) : null, playbackRates && canvasSize && (jsx_runtime_1.jsx(PlaybackrateControl_js_1.PlaybackrateControl, { canvasSize: canvasSize, playbackRates: playbackRates })), playbackRates && supportsFullscreen && allowFullscreen ? (jsx_runtime_1.jsx("div", { style: xSpacer })) : null, jsx_runtime_1.jsx("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? (jsx_runtime_1.jsx("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: PlaybackrateControl_js_1.playerButtonStyle, onClick: isFullscreen
|
|
172
178
|
? onExitFullscreenButtonClick
|
|
173
|
-
: onFullscreenButtonClick, children: renderFullscreenButton === null ? (
|
|
179
|
+
: onFullscreenButtonClick, children: renderFullscreenButton === null ? (jsx_runtime_1.jsx(icons_js_1.FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })
|
|
180
|
+
] }), jsx_runtime_1.jsx("div", { style: ySpacer }), jsx_runtime_1.jsx(PlayerSeekBar_js_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })
|
|
181
|
+
] }));
|
|
174
182
|
};
|
|
175
183
|
exports.Controls = Controls;
|
|
@@ -144,6 +144,10 @@ const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outF
|
|
|
144
144
|
position: 'absolute',
|
|
145
145
|
};
|
|
146
146
|
}, [durationInFrames, inFrame, outFrame]);
|
|
147
|
-
return (
|
|
147
|
+
return (jsx_runtime_1.jsxs("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [
|
|
148
|
+
jsx_runtime_1.jsxs("div", { style: barBackground, children: [
|
|
149
|
+
jsx_runtime_1.jsx("div", { style: active }), jsx_runtime_1.jsx("div", { style: fillStyle })
|
|
150
|
+
] }), jsx_runtime_1.jsx("div", { style: knobStyle })
|
|
151
|
+
] }));
|
|
148
152
|
};
|
|
149
153
|
exports.PlayerSeekBar = PlayerSeekBar;
|
|
@@ -20,6 +20,6 @@ const PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
|
|
|
20
20
|
// If the video ended and is not looping, it should show 0:04 / 0:04 instead of 0:03 / 0:04
|
|
21
21
|
const isLastFrame = frame === durationInFrames - 1;
|
|
22
22
|
const frameToDisplay = isLastFrame ? frame + 1 : frame;
|
|
23
|
-
return (
|
|
23
|
+
return (jsx_runtime_1.jsxs("div", { style: timeLabel, children: [(0, format_time_1.formatTime)(frameToDisplay / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }));
|
|
24
24
|
};
|
|
25
25
|
exports.PlayerTimeLabel = PlayerTimeLabel;
|
package/dist/cjs/PlayerUI.d.ts
CHANGED
|
@@ -21,14 +21,14 @@ declare const _default: React.ForwardRefExoticComponent<{
|
|
|
21
21
|
readonly allowFullscreen: boolean;
|
|
22
22
|
readonly inputProps: Record<string, unknown>;
|
|
23
23
|
readonly showVolumeControls: boolean;
|
|
24
|
-
readonly style?: React.CSSProperties;
|
|
24
|
+
readonly style?: React.CSSProperties | undefined;
|
|
25
25
|
readonly clickToPlay: boolean;
|
|
26
26
|
readonly doubleClickToFullscreen: boolean;
|
|
27
27
|
readonly spaceKeyToPlayOrPause: boolean;
|
|
28
28
|
readonly errorFallback: ErrorFallback;
|
|
29
29
|
readonly playbackRate: number;
|
|
30
30
|
readonly renderLoading: RenderLoading | undefined;
|
|
31
|
-
readonly renderPoster:
|
|
31
|
+
readonly renderPoster: RenderLoading | undefined;
|
|
32
32
|
readonly className: string | undefined;
|
|
33
33
|
readonly moveToBeginningWhenEnded: boolean;
|
|
34
34
|
readonly showPosterWhenPaused: boolean;
|
|
@@ -48,7 +48,7 @@ declare const _default: React.ForwardRefExoticComponent<{
|
|
|
48
48
|
readonly showPlaybackRateControl: boolean | number[];
|
|
49
49
|
readonly posterFillMode: PosterFillMode;
|
|
50
50
|
readonly bufferStateDelayInMilliseconds: number;
|
|
51
|
-
readonly hideControlsWhenPointerDoesntMove:
|
|
51
|
+
readonly hideControlsWhenPointerDoesntMove: number | boolean;
|
|
52
52
|
readonly overflowVisible: boolean;
|
|
53
53
|
readonly browserMediaControlsBehavior: BrowserMediaControlsBehavior;
|
|
54
54
|
readonly overrideInternalClassName: string | undefined;
|
package/dist/cjs/PlayerUI.js
CHANGED
|
@@ -146,9 +146,9 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
|
|
|
146
146
|
}
|
|
147
147
|
const fullscreenChange = () => {
|
|
148
148
|
var _a;
|
|
149
|
-
const element =
|
|
149
|
+
const element = (_a =
|
|
150
150
|
// @ts-expect-error Types not defined
|
|
151
|
-
|
|
151
|
+
document.webkitFullscreenElement) !== null && _a !== void 0 ? _a :
|
|
152
152
|
// defined
|
|
153
153
|
document.fullscreenElement;
|
|
154
154
|
if (element && element === container.current) {
|
|
@@ -430,16 +430,19 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
|
|
|
430
430
|
!player.isPlaying(),
|
|
431
431
|
].some(Boolean);
|
|
432
432
|
const { left, top, width, height, ...outerWithoutScale } = outer;
|
|
433
|
-
const content = (
|
|
433
|
+
const content = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
|
|
434
|
+
jsx_runtime_1.jsxs("div", { style: outer, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: [
|
|
435
|
+
jsx_runtime_1.jsxs("div", { style: containerStyle, className: (0, player_css_classname_js_1.playerCssClassname)(overrideInternalClassName), children: [VideoComponent ? (jsx_runtime_1.jsx(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: jsx_runtime_1.jsx(remotion_1.Internals.CurrentScaleContext.Provider, { value: currentScale, children: jsx_runtime_1.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_runtime_1.jsx("div", { style: {
|
|
434
436
|
...outerWithoutScale,
|
|
435
437
|
width: config.width,
|
|
436
438
|
height: config.height,
|
|
437
|
-
}, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }),
|
|
439
|
+
}, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }), jsx_runtime_1.jsx(license_blacklist_js_1.RenderWarningIfBlacklist, {})
|
|
440
|
+
] }), shouldShowPoster && posterFillMode === 'player-size' ? (jsx_runtime_1.jsx("div", { style: outer, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (jsx_runtime_1.jsx(PlayerControls_js_1.Controls, { fps: config.fps, playing: player.playing, toggle: player.toggle, durationInFrames: config.durationInFrames, 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, onPointerDown: clickToPlay
|
|
438
441
|
? handlePointerDown
|
|
439
442
|
: undefined, renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider, renderCustomControls: renderCustomControls })) : null] }));
|
|
440
443
|
if (noSuspense || (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense)) {
|
|
441
|
-
return (
|
|
444
|
+
return (jsx_runtime_1.jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
|
|
442
445
|
}
|
|
443
|
-
return (
|
|
446
|
+
return (jsx_runtime_1.jsx("div", { ref: container, style: outerStyle, className: className, children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: loadingMarkup, children: content }) }));
|
|
444
447
|
};
|
|
445
448
|
exports.default = (0, react_1.forwardRef)(PlayerUI);
|
|
@@ -81,6 +81,6 @@ const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeigh
|
|
|
81
81
|
isReadOnlyStudio: false,
|
|
82
82
|
};
|
|
83
83
|
}, []);
|
|
84
|
-
return (
|
|
84
|
+
return (jsx_runtime_1.jsx(remotion_1.Internals.RemotionEnvironmentContext.Provider, { value: env, children: jsx_runtime_1.jsx(remotion_1.Internals.LogLevelContext.Provider, { value: logLevelContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.TimelineContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: jsx_runtime_1.jsx(remotion_1.Internals.PrefetchProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.DurationsContextProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: jsx_runtime_1.jsx(remotion_1.Internals.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }) }));
|
|
85
85
|
};
|
|
86
86
|
exports.SharedPlayerContexts = SharedPlayerContexts;
|
package/dist/cjs/Thumbnail.d.ts
CHANGED
|
@@ -20,4 +20,4 @@ export type ThumbnailProps<Schema extends AnyZodObject, Props extends Record<str
|
|
|
20
20
|
readonly noSuspense?: boolean;
|
|
21
21
|
};
|
|
22
22
|
export type ThumbnailPropsWithoutZod<Props extends Record<string, unknown>> = ThumbnailProps<AnyZodObject, Props>;
|
|
23
|
-
export declare const Thumbnail: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) =>
|
|
23
|
+
export declare const Thumbnail: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
|
package/dist/cjs/Thumbnail.js
CHANGED
|
@@ -48,7 +48,7 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
|
|
|
48
48
|
const passedInputProps = (0, react_1.useMemo)(() => {
|
|
49
49
|
return inputProps !== null && inputProps !== void 0 ? inputProps : {};
|
|
50
50
|
}, [inputProps]);
|
|
51
|
-
return (
|
|
51
|
+
return (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: 0, initiallyMuted: true, logLevel: logLevel, audioLatencyHint: "playback", inputProps: passedInputProps, audioEnabled: false, children: jsx_runtime_1.jsx(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: jsx_runtime_1.jsx(ThumbnailUI_js_1.default, { ref: rootRef, className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style, overflowVisible: overflowVisible, overrideInternalClassName: overrideInternalClassName, noSuspense: Boolean(noSuspense) }) }) }) }));
|
|
52
52
|
};
|
|
53
53
|
const forward = react_1.forwardRef;
|
|
54
54
|
/*
|
|
@@ -3,7 +3,7 @@ import type { ThumbnailMethods } from './player-methods.js';
|
|
|
3
3
|
import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
|
|
4
4
|
declare const _default: React.ForwardRefExoticComponent<{
|
|
5
5
|
readonly inputProps: Record<string, unknown>;
|
|
6
|
-
readonly style?: React.CSSProperties;
|
|
6
|
+
readonly style?: React.CSSProperties | undefined;
|
|
7
7
|
readonly errorFallback: ErrorFallback;
|
|
8
8
|
readonly renderLoading: RenderLoading | undefined;
|
|
9
9
|
readonly className: string | undefined;
|
package/dist/cjs/ThumbnailUI.js
CHANGED
|
@@ -121,10 +121,10 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
|
|
|
121
121
|
if (!config) {
|
|
122
122
|
return null;
|
|
123
123
|
}
|
|
124
|
-
const content = (
|
|
124
|
+
const content = (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx("div", { style: containerStyle, className: (0, player_css_classname_js_1.playerCssClassname)(overrideInternalClassName), children: VideoComponent ? (jsx_runtime_1.jsx(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: jsx_runtime_1.jsx(remotion_1.Internals.CurrentScaleContext.Provider, { value: currentScaleContext, children: jsx_runtime_1.jsx(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.props) !== null && _b !== void 0 ? _b : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) }) })) : null }) }));
|
|
125
125
|
if (noSuspense || (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense)) {
|
|
126
|
-
return (
|
|
126
|
+
return (jsx_runtime_1.jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
|
|
127
127
|
}
|
|
128
|
-
return (
|
|
128
|
+
return (jsx_runtime_1.jsx("div", { ref: container, style: outerStyle, className: className, children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: loadingMarkup, children: content }) }));
|
|
129
129
|
};
|
|
130
130
|
exports.default = (0, react_1.forwardRef)(ThumbnailUI);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { VideoConfig } from 'remotion';
|
|
2
2
|
import type { Size } from './utils/use-element-size.js';
|
|
3
3
|
type Layout = {
|
|
4
4
|
centerX: number;
|
|
@@ -8,24 +8,24 @@ type Layout = {
|
|
|
8
8
|
scale: number;
|
|
9
9
|
};
|
|
10
10
|
export declare const calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
|
|
11
|
-
previewSize:
|
|
11
|
+
previewSize: number | "auto";
|
|
12
12
|
compositionWidth: number;
|
|
13
13
|
compositionHeight: number;
|
|
14
14
|
canvasSize: Size;
|
|
15
15
|
}) => Layout;
|
|
16
16
|
export declare const calculateOuterStyle: ({ config, style, canvasSize, overflowVisible, layout, }: {
|
|
17
17
|
config: VideoConfig | null;
|
|
18
|
-
style:
|
|
18
|
+
style: import("react").CSSProperties | undefined;
|
|
19
19
|
canvasSize: Size | null;
|
|
20
20
|
overflowVisible: boolean;
|
|
21
21
|
layout: Layout | null;
|
|
22
|
-
}) =>
|
|
22
|
+
}) => import("react").CSSProperties;
|
|
23
23
|
export declare const calculateContainerStyle: ({ config, layout, scale, overflowVisible, }: {
|
|
24
24
|
config: VideoConfig | null;
|
|
25
25
|
layout: Layout | null;
|
|
26
26
|
scale: number;
|
|
27
27
|
overflowVisible: boolean;
|
|
28
|
-
}) =>
|
|
28
|
+
}) => import("react").CSSProperties;
|
|
29
29
|
export declare const calculateOuter: ({ layout, scale, config, overflowVisible, }: {
|
|
30
30
|
layout: Layout | null;
|
|
31
31
|
scale: number;
|
|
@@ -37,9 +37,9 @@ export declare const calculateOuter: ({ layout, scale, config, overflowVisible,
|
|
|
37
37
|
readonly display?: undefined;
|
|
38
38
|
readonly flexDirection?: undefined;
|
|
39
39
|
readonly position?: undefined;
|
|
40
|
-
readonly overflow?: undefined;
|
|
41
40
|
readonly left?: undefined;
|
|
42
41
|
readonly top?: undefined;
|
|
42
|
+
readonly overflow?: undefined;
|
|
43
43
|
} | {
|
|
44
44
|
readonly width: number;
|
|
45
45
|
readonly height: number;
|
|
@@ -15,5 +15,5 @@ export declare class ErrorBoundary extends React.Component<{
|
|
|
15
15
|
hasError: Error;
|
|
16
16
|
};
|
|
17
17
|
componentDidCatch(error: Error): void;
|
|
18
|
-
render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.
|
|
18
|
+
render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | null | undefined;
|
|
19
19
|
}
|
|
@@ -15,10 +15,7 @@ const errorStyle = {
|
|
|
15
15
|
width: '100%',
|
|
16
16
|
};
|
|
17
17
|
class ErrorBoundary extends react_1.default.Component {
|
|
18
|
-
|
|
19
|
-
super(...arguments);
|
|
20
|
-
this.state = { hasError: null };
|
|
21
|
-
}
|
|
18
|
+
state = { hasError: null };
|
|
22
19
|
static getDerivedStateFromError(error) {
|
|
23
20
|
// Update state so the next render will show the fallback UI.
|
|
24
21
|
return { hasError: error };
|
|
@@ -29,7 +26,7 @@ class ErrorBoundary extends react_1.default.Component {
|
|
|
29
26
|
render() {
|
|
30
27
|
if (this.state.hasError) {
|
|
31
28
|
// You can render any custom fallback UI
|
|
32
|
-
return (
|
|
29
|
+
return (jsx_runtime_1.jsx("div", { style: errorStyle, children: this.props.errorFallback({
|
|
33
30
|
error: this.state.hasError,
|
|
34
31
|
}) }));
|
|
35
32
|
}
|
|
@@ -2,76 +2,22 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ThumbnailEmitter = exports.PlayerEmitter = void 0;
|
|
4
4
|
class PlayerEmitter {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
};
|
|
22
|
-
this.dispatchSeek = (frame) => {
|
|
23
|
-
this.dispatchEvent('seeked', {
|
|
24
|
-
frame,
|
|
25
|
-
});
|
|
26
|
-
};
|
|
27
|
-
this.dispatchVolumeChange = (volume) => {
|
|
28
|
-
this.dispatchEvent('volumechange', {
|
|
29
|
-
volume,
|
|
30
|
-
});
|
|
31
|
-
};
|
|
32
|
-
this.dispatchPause = () => {
|
|
33
|
-
this.dispatchEvent('pause', undefined);
|
|
34
|
-
};
|
|
35
|
-
this.dispatchPlay = () => {
|
|
36
|
-
this.dispatchEvent('play', undefined);
|
|
37
|
-
};
|
|
38
|
-
this.dispatchEnded = () => {
|
|
39
|
-
this.dispatchEvent('ended', undefined);
|
|
40
|
-
};
|
|
41
|
-
this.dispatchRateChange = (playbackRate) => {
|
|
42
|
-
this.dispatchEvent('ratechange', {
|
|
43
|
-
playbackRate,
|
|
44
|
-
});
|
|
45
|
-
};
|
|
46
|
-
this.dispatchScaleChange = (scale) => {
|
|
47
|
-
this.dispatchEvent('scalechange', {
|
|
48
|
-
scale,
|
|
49
|
-
});
|
|
50
|
-
};
|
|
51
|
-
this.dispatchError = (error) => {
|
|
52
|
-
this.dispatchEvent('error', {
|
|
53
|
-
error,
|
|
54
|
-
});
|
|
55
|
-
};
|
|
56
|
-
this.dispatchTimeUpdate = (event) => {
|
|
57
|
-
this.dispatchEvent('timeupdate', event);
|
|
58
|
-
};
|
|
59
|
-
this.dispatchFrameUpdate = (event) => {
|
|
60
|
-
this.dispatchEvent('frameupdate', event);
|
|
61
|
-
};
|
|
62
|
-
this.dispatchFullscreenChange = (event) => {
|
|
63
|
-
this.dispatchEvent('fullscreenchange', event);
|
|
64
|
-
};
|
|
65
|
-
this.dispatchMuteChange = (event) => {
|
|
66
|
-
this.dispatchEvent('mutechange', event);
|
|
67
|
-
};
|
|
68
|
-
this.dispatchWaiting = (event) => {
|
|
69
|
-
this.dispatchEvent('waiting', event);
|
|
70
|
-
};
|
|
71
|
-
this.dispatchResume = (event) => {
|
|
72
|
-
this.dispatchEvent('resume', event);
|
|
73
|
-
};
|
|
74
|
-
}
|
|
5
|
+
listeners = {
|
|
6
|
+
ended: [],
|
|
7
|
+
error: [],
|
|
8
|
+
pause: [],
|
|
9
|
+
play: [],
|
|
10
|
+
ratechange: [],
|
|
11
|
+
scalechange: [],
|
|
12
|
+
seeked: [],
|
|
13
|
+
timeupdate: [],
|
|
14
|
+
frameupdate: [],
|
|
15
|
+
fullscreenchange: [],
|
|
16
|
+
volumechange: [],
|
|
17
|
+
mutechange: [],
|
|
18
|
+
waiting: [],
|
|
19
|
+
resume: [],
|
|
20
|
+
};
|
|
75
21
|
addEventListener(name, callback) {
|
|
76
22
|
this.listeners[name].push(callback);
|
|
77
23
|
}
|
|
@@ -83,27 +29,66 @@ class PlayerEmitter {
|
|
|
83
29
|
callback({ detail: context });
|
|
84
30
|
});
|
|
85
31
|
}
|
|
32
|
+
dispatchSeek = (frame) => {
|
|
33
|
+
this.dispatchEvent('seeked', {
|
|
34
|
+
frame,
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
dispatchVolumeChange = (volume) => {
|
|
38
|
+
this.dispatchEvent('volumechange', {
|
|
39
|
+
volume,
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
dispatchPause = () => {
|
|
43
|
+
this.dispatchEvent('pause', undefined);
|
|
44
|
+
};
|
|
45
|
+
dispatchPlay = () => {
|
|
46
|
+
this.dispatchEvent('play', undefined);
|
|
47
|
+
};
|
|
48
|
+
dispatchEnded = () => {
|
|
49
|
+
this.dispatchEvent('ended', undefined);
|
|
50
|
+
};
|
|
51
|
+
dispatchRateChange = (playbackRate) => {
|
|
52
|
+
this.dispatchEvent('ratechange', {
|
|
53
|
+
playbackRate,
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
dispatchScaleChange = (scale) => {
|
|
57
|
+
this.dispatchEvent('scalechange', {
|
|
58
|
+
scale,
|
|
59
|
+
});
|
|
60
|
+
};
|
|
61
|
+
dispatchError = (error) => {
|
|
62
|
+
this.dispatchEvent('error', {
|
|
63
|
+
error,
|
|
64
|
+
});
|
|
65
|
+
};
|
|
66
|
+
dispatchTimeUpdate = (event) => {
|
|
67
|
+
this.dispatchEvent('timeupdate', event);
|
|
68
|
+
};
|
|
69
|
+
dispatchFrameUpdate = (event) => {
|
|
70
|
+
this.dispatchEvent('frameupdate', event);
|
|
71
|
+
};
|
|
72
|
+
dispatchFullscreenChange = (event) => {
|
|
73
|
+
this.dispatchEvent('fullscreenchange', event);
|
|
74
|
+
};
|
|
75
|
+
dispatchMuteChange = (event) => {
|
|
76
|
+
this.dispatchEvent('mutechange', event);
|
|
77
|
+
};
|
|
78
|
+
dispatchWaiting = (event) => {
|
|
79
|
+
this.dispatchEvent('waiting', event);
|
|
80
|
+
};
|
|
81
|
+
dispatchResume = (event) => {
|
|
82
|
+
this.dispatchEvent('resume', event);
|
|
83
|
+
};
|
|
86
84
|
}
|
|
87
85
|
exports.PlayerEmitter = PlayerEmitter;
|
|
88
86
|
class ThumbnailEmitter {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
};
|
|
95
|
-
this.dispatchError = (error) => {
|
|
96
|
-
this.dispatchEvent('error', {
|
|
97
|
-
error,
|
|
98
|
-
});
|
|
99
|
-
};
|
|
100
|
-
this.dispatchWaiting = (event) => {
|
|
101
|
-
this.dispatchEvent('waiting', event);
|
|
102
|
-
};
|
|
103
|
-
this.dispatchResume = (event) => {
|
|
104
|
-
this.dispatchEvent('resume', event);
|
|
105
|
-
};
|
|
106
|
-
}
|
|
87
|
+
listeners = {
|
|
88
|
+
error: [],
|
|
89
|
+
waiting: [],
|
|
90
|
+
resume: [],
|
|
91
|
+
};
|
|
107
92
|
addEventListener(name, callback) {
|
|
108
93
|
this.listeners[name].push(callback);
|
|
109
94
|
}
|
|
@@ -115,5 +100,16 @@ class ThumbnailEmitter {
|
|
|
115
100
|
callback({ detail: context });
|
|
116
101
|
});
|
|
117
102
|
}
|
|
103
|
+
dispatchError = (error) => {
|
|
104
|
+
this.dispatchEvent('error', {
|
|
105
|
+
error,
|
|
106
|
+
});
|
|
107
|
+
};
|
|
108
|
+
dispatchWaiting = (event) => {
|
|
109
|
+
this.dispatchEvent('waiting', event);
|
|
110
|
+
};
|
|
111
|
+
dispatchResume = (event) => {
|
|
112
|
+
this.dispatchEvent('resume', event);
|
|
113
|
+
};
|
|
118
114
|
}
|
|
119
115
|
exports.ThumbnailEmitter = ThumbnailEmitter;
|
package/dist/cjs/icons.js
CHANGED
|
@@ -5,11 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
exports.ICON_SIZE = 25;
|
|
6
6
|
exports.fullscreenIconSize = 16;
|
|
7
7
|
const PlayIcon = () => {
|
|
8
|
-
return (
|
|
8
|
+
return (jsx_runtime_1.jsx("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 25 25", fill: "none", children: 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" }) }));
|
|
9
9
|
};
|
|
10
10
|
exports.PlayIcon = PlayIcon;
|
|
11
11
|
const PauseIcon = () => {
|
|
12
|
-
return (
|
|
12
|
+
return (jsx_runtime_1.jsxs("svg", { viewBox: "0 0 100 100", width: exports.ICON_SIZE, height: exports.ICON_SIZE, children: [
|
|
13
|
+
jsx_runtime_1.jsx("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), jsx_runtime_1.jsx("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })
|
|
14
|
+
] }));
|
|
13
15
|
};
|
|
14
16
|
exports.PauseIcon = PauseIcon;
|
|
15
17
|
const FullscreenIcon = ({ isFullscreen, }) => {
|
|
@@ -18,30 +20,32 @@ const FullscreenIcon = ({ isFullscreen, }) => {
|
|
|
18
20
|
const out = isFullscreen ? 0 : strokeWidth / 2;
|
|
19
21
|
const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
|
|
20
22
|
const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
|
|
21
|
-
return (
|
|
23
|
+
return (jsx_runtime_1.jsxs("svg", { viewBox: `0 0 ${viewSize} ${viewSize}`, height: exports.fullscreenIconSize, width: exports.fullscreenIconSize, children: [
|
|
24
|
+
jsx_runtime_1.jsx("path", { d: `
|
|
22
25
|
M ${out} ${inset}
|
|
23
26
|
L ${middleInset} ${middleInset}
|
|
24
27
|
L ${inset} ${out}
|
|
25
|
-
`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }),
|
|
28
|
+
`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), jsx_runtime_1.jsx("path", { d: `
|
|
26
29
|
M ${viewSize - out} ${inset}
|
|
27
30
|
L ${viewSize - middleInset} ${middleInset}
|
|
28
31
|
L ${viewSize - inset} ${out}
|
|
29
|
-
`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }),
|
|
32
|
+
`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), jsx_runtime_1.jsx("path", { d: `
|
|
30
33
|
M ${out} ${viewSize - inset}
|
|
31
34
|
L ${middleInset} ${viewSize - middleInset}
|
|
32
35
|
L ${inset} ${viewSize - out}
|
|
33
|
-
`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }),
|
|
36
|
+
`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), jsx_runtime_1.jsx("path", { d: `
|
|
34
37
|
M ${viewSize - out} ${viewSize - inset}
|
|
35
38
|
L ${viewSize - middleInset} ${viewSize - middleInset}
|
|
36
39
|
L ${viewSize - inset} ${viewSize - out}
|
|
37
|
-
`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" })
|
|
40
|
+
`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" })
|
|
41
|
+
] }));
|
|
38
42
|
};
|
|
39
43
|
exports.FullscreenIcon = FullscreenIcon;
|
|
40
44
|
const VolumeOffIcon = () => {
|
|
41
|
-
return (
|
|
45
|
+
return (jsx_runtime_1.jsx("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: 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" }) }));
|
|
42
46
|
};
|
|
43
47
|
exports.VolumeOffIcon = VolumeOffIcon;
|
|
44
48
|
const VolumeOnIcon = () => {
|
|
45
|
-
return (
|
|
49
|
+
return (jsx_runtime_1.jsx("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: 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" }) }));
|
|
46
50
|
};
|
|
47
51
|
exports.VolumeOnIcon = VolumeOnIcon;
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ export declare const PlayerInternals: {
|
|
|
22
22
|
isFirstFrame: boolean;
|
|
23
23
|
emitter: PlayerEmitter;
|
|
24
24
|
playing: boolean;
|
|
25
|
-
play: (e?: import("react").SyntheticEvent |
|
|
25
|
+
play: (e?: PointerEvent | import("react").SyntheticEvent<Element, Event> | undefined) => void;
|
|
26
26
|
pause: () => void;
|
|
27
27
|
pauseAndReturnToPlayStart: () => void;
|
|
28
28
|
seek: (newFrame: number) => void;
|
|
@@ -30,7 +30,7 @@ export declare const PlayerInternals: {
|
|
|
30
30
|
isPlaying: () => boolean;
|
|
31
31
|
hasPlayed: boolean;
|
|
32
32
|
isBuffering: () => boolean;
|
|
33
|
-
toggle: (e?: import("react").SyntheticEvent |
|
|
33
|
+
toggle: (e?: PointerEvent | import("react").SyntheticEvent<Element, Event> | undefined) => void;
|
|
34
34
|
};
|
|
35
35
|
usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, }: {
|
|
36
36
|
loop: boolean;
|
|
@@ -41,15 +41,15 @@ export declare const PlayerInternals: {
|
|
|
41
41
|
browserMediaControlsBehavior: import("./browser-mediasession.js").BrowserMediaControlsBehavior;
|
|
42
42
|
getCurrentFrame: import("./use-frame-imperative.js").GetCurrentFrame;
|
|
43
43
|
}) => void;
|
|
44
|
-
useElementSize: (ref:
|
|
44
|
+
useElementSize: (ref: import("react").RefObject<HTMLElement | null>, options: {
|
|
45
45
|
triggerOnWindowResize: boolean;
|
|
46
46
|
shouldApplyCssTransforms: boolean;
|
|
47
|
-
}) => import("./
|
|
47
|
+
}) => import("./index.js").Size | null;
|
|
48
48
|
calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
|
|
49
|
-
previewSize:
|
|
49
|
+
previewSize: number | "auto";
|
|
50
50
|
compositionWidth: number;
|
|
51
51
|
compositionHeight: number;
|
|
52
|
-
canvasSize: import("./
|
|
52
|
+
canvasSize: import("./index.js").Size;
|
|
53
53
|
}) => {
|
|
54
54
|
centerX: number;
|
|
55
55
|
centerY: number;
|
|
@@ -57,10 +57,10 @@ export declare const PlayerInternals: {
|
|
|
57
57
|
yCorrection: number;
|
|
58
58
|
scale: number;
|
|
59
59
|
};
|
|
60
|
-
useHoverState: (ref:
|
|
60
|
+
useHoverState: (ref: import("react").RefObject<HTMLDivElement | null>, hideControlsWhenPointerDoesntMove: number | boolean) => boolean;
|
|
61
61
|
updateAllElementsSizes: () => void;
|
|
62
62
|
PlayerEmitterProvider: import("react").FC<{
|
|
63
|
-
readonly children:
|
|
63
|
+
readonly children: import("react").ReactNode;
|
|
64
64
|
readonly currentPlaybackRate: number | null;
|
|
65
65
|
}>;
|
|
66
66
|
BufferingIndicator: import("react").FC<{
|
package/dist/cjs/index.js
CHANGED
|
@@ -12,9 +12,9 @@ const use_hover_state_js_1 = require("./use-hover-state.js");
|
|
|
12
12
|
const use_playback_js_1 = require("./use-playback.js");
|
|
13
13
|
const use_player_js_1 = require("./use-player.js");
|
|
14
14
|
const use_element_size_js_1 = require("./utils/use-element-size.js");
|
|
15
|
-
|
|
15
|
+
const Player_js_1 = require("./Player.js");
|
|
16
16
|
Object.defineProperty(exports, "Player", { enumerable: true, get: function () { return Player_js_1.Player; } });
|
|
17
|
-
|
|
17
|
+
const Thumbnail_js_1 = require("./Thumbnail.js");
|
|
18
18
|
Object.defineProperty(exports, "Thumbnail", { enumerable: true, get: function () { return Thumbnail_js_1.Thumbnail; } });
|
|
19
19
|
exports.PlayerInternals = {
|
|
20
20
|
PlayerEventEmitterContext: emitter_context_js_1.PlayerEventEmitterContext,
|
|
@@ -123,6 +123,6 @@ const RenderWarningIfBlacklist = () => {
|
|
|
123
123
|
if (!unlicensed) {
|
|
124
124
|
return null;
|
|
125
125
|
}
|
|
126
|
-
return (
|
|
126
|
+
return (jsx_runtime_1.jsx("div", { style: style, className: "warning-banner", children: jsx_runtime_1.jsx("a", { style: { color: 'white' }, href: "https://github.com/remotion-dev/remotion/pull/4589", children: "Remotion Unlicensed \u2013 Contact hi@remotion.dev" }) }));
|
|
127
127
|
};
|
|
128
128
|
exports.RenderWarningIfBlacklist = RenderWarningIfBlacklist;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const playerCssClassname: (override?: string) => string;
|
|
1
|
+
export declare const playerCssClassname: (override?: string | undefined) => string;
|
|
@@ -110,13 +110,15 @@ const DefaultVolumeSlider = ({ volume, isVertical, onBlur, inputRef, setVolume,
|
|
|
110
110
|
width: ${KNOB_SIZE}px;
|
|
111
111
|
}
|
|
112
112
|
`;
|
|
113
|
-
return (
|
|
113
|
+
return (jsx_runtime_1.jsxs("div", { style: sliderContainer, children: [
|
|
114
|
+
jsx_runtime_1.jsx("style", {
|
|
114
115
|
// eslint-disable-next-line react/no-danger
|
|
115
116
|
dangerouslySetInnerHTML: {
|
|
116
117
|
__html: sliderStyle,
|
|
117
|
-
} }),
|
|
118
|
+
} }), jsx_runtime_1.jsx("input", { ref: inputRef, "aria-label": "Change volume", className: randomClass, max: 1, min: 0, onBlur: onBlur, onChange: onVolumeChange, step: 0.01, type: "range", value: volume, style: inputStyle })
|
|
119
|
+
] }));
|
|
118
120
|
};
|
|
119
121
|
const renderDefaultVolumeSlider = (props) => {
|
|
120
|
-
return
|
|
122
|
+
return jsx_runtime_1.jsx(DefaultVolumeSlider, { ...props });
|
|
121
123
|
};
|
|
122
124
|
exports.renderDefaultVolumeSlider = renderDefaultVolumeSlider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const useHoverState: (ref:
|
|
1
|
+
export declare const useHoverState: (ref: import("react").RefObject<HTMLDivElement | null>, hideControlsWhenPointerDoesntMove: number | boolean) => boolean;
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const acknowledgeRemotionLicenseMessage: (acknowledge: boolean, logLevel: LogLevel) => void;
|
|
1
|
+
export declare const acknowledgeRemotionLicenseMessage: (acknowledge: boolean, logLevel: "error" | "info" | "trace" | "verbose" | "warn") => void;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import type { StandardLonghandProperties } from 'csstype';
|
|
2
1
|
import type { Size } from './use-element-size.js';
|
|
3
2
|
export declare const calculatePlayerSize: ({ currentSize, width, height, compositionWidth, compositionHeight, }: {
|
|
4
3
|
currentSize: Size | null;
|
|
5
|
-
width:
|
|
6
|
-
height:
|
|
4
|
+
width: import("csstype").Property.Width<0 | (string & {})> | undefined;
|
|
5
|
+
height: import("csstype").Property.Height<0 | (string & {})> | undefined;
|
|
7
6
|
compositionWidth: number;
|
|
8
7
|
compositionHeight: number;
|
|
9
|
-
}) =>
|
|
8
|
+
}) => import("react").CSSProperties;
|
|
@@ -10,7 +10,7 @@ export type Size = {
|
|
|
10
10
|
refresh: () => void;
|
|
11
11
|
};
|
|
12
12
|
export declare const updateAllElementsSizes: () => void;
|
|
13
|
-
export declare const useElementSize: (ref:
|
|
13
|
+
export declare const useElementSize: (ref: import("react").RefObject<HTMLElement | null>, options: {
|
|
14
14
|
triggerOnWindowResize: boolean;
|
|
15
15
|
shouldApplyCssTransforms: boolean;
|
|
16
16
|
}) => Size | null;
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const persistVolume: (volume: number, logLevel: LogLevel, volumePersistenceKey: string | null) => void;
|
|
1
|
+
export declare const persistVolume: (volume: number, logLevel: "error" | "info" | "trace" | "verbose" | "warn", volumePersistenceKey: string | null) => void;
|
|
3
2
|
export declare const getPreferredVolume: (volumePersistenceKey: string | null) => number;
|
package/package.json
CHANGED
|
@@ -3,16 +3,16 @@
|
|
|
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.425",
|
|
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",
|
|
10
10
|
"module": "dist/esm/index.mjs",
|
|
11
11
|
"sideEffects": false,
|
|
12
12
|
"scripts": {
|
|
13
|
-
"formatting": "prettier
|
|
13
|
+
"formatting": "prettier src --check",
|
|
14
14
|
"lint": "eslint src",
|
|
15
|
-
"make": "
|
|
15
|
+
"make": "tsgo -d && bun ensure-correct-version.ts && bun --env-file=../.env.bundle bundle.ts",
|
|
16
16
|
"test": "bun test src",
|
|
17
17
|
"prerelease": "cp ../../README.md ."
|
|
18
18
|
},
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
],
|
|
36
36
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"remotion": "4.0.
|
|
38
|
+
"remotion": "4.0.425"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": ">=16.8.0",
|
|
@@ -49,8 +49,9 @@
|
|
|
49
49
|
"react-dom": "19.2.3",
|
|
50
50
|
"webpack": "5.105.0",
|
|
51
51
|
"zod": "3.22.3",
|
|
52
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
53
|
-
"eslint": "9.19.0"
|
|
52
|
+
"@remotion/eslint-config-internal": "4.0.425",
|
|
53
|
+
"eslint": "9.19.0",
|
|
54
|
+
"@typescript/native-preview": "7.0.0-dev.20260217.1"
|
|
54
55
|
},
|
|
55
56
|
"keywords": [
|
|
56
57
|
"remotion",
|