@remotion/player 4.0.0-umungobongo.5 → 4.0.0-webhook.26

package/dist/MediaVolumeSlider.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
-export declare const MediaVolumeSlider: React.FC;
+export declare const VOLUME_SLIDER_WIDTH = 100;
+export declare const MediaVolumeSlider: React.FC<{
+    displayVerticalVolumeSlider: Boolean;
+}>;

package/dist/MediaVolumeSlider.js

@@ -1,72 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaVolumeSlider = void 0;
+exports.MediaVolumeSlider = exports.VOLUME_SLIDER_WIDTH = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const icons_1 = require("./icons");
-const player_css_classname_1 = require("./player-css-classname");
 const use_hover_state_1 = require("./use-hover-state");
 const BAR_HEIGHT = 5;
 const KNOB_SIZE = 12;
-const VOLUME_SLIDER_WIDTH = 100;
-const scope = `.${player_css_classname_1.VOLUME_SLIDER_INPUT_CSS_CLASSNAME}`;
-const sliderStyle = `
-	${scope} {
-		-webkit-appearance: none;
-		background-color: rgba(255, 255, 255, 0.5);	
-		border-radius: ${BAR_HEIGHT / 2}px;
-		cursor: pointer;
-		height: ${BAR_HEIGHT}px;
-		margin-left: 5px;
-		width: ${VOLUME_SLIDER_WIDTH}px;
-	}
-
-	${scope}::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		background-color: white;
-		border-radius: ${KNOB_SIZE / 2}px;
-		box-shadow: 0 0 2px black;
-		height: ${KNOB_SIZE}px;
-		width: ${KNOB_SIZE}px;
-	}
-
-	${scope}::-moz-range-thumb {
-		-webkit-appearance: none;
-		background-color: white;
-		border-radius: ${KNOB_SIZE / 2}px;
-		box-shadow: 0 0 2px black;
-		height: ${KNOB_SIZE}px;
-		width: ${KNOB_SIZE}px;
-	}
-`;
-remotion_1.Internals.CSSUtils.injectCSS(sliderStyle);
-const parentDivStyle = {
-    display: 'inline-flex',
-    background: 'none',
-    border: 'none',
-    padding: '6px',
-    justifyContent: 'center',
-    alignItems: 'center',
-    touchAction: 'none',
-};
-const volumeContainer = {
-    display: 'inline',
-    width: icons_1.ICON_SIZE,
-    height: icons_1.ICON_SIZE,
-    cursor: 'pointer',
-    appearance: 'none',
-    background: 'none',
-    border: 'none',
-    padding: 0,
-};
-const MediaVolumeSlider = () => {
+exports.VOLUME_SLIDER_WIDTH = 100;
+const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
     const [mediaMuted, setMediaMuted] = remotion_1.Internals.useMediaMutedState();
     const [mediaVolume, setMediaVolume] = remotion_1.Internals.useMediaVolumeState();
     const [focused, setFocused] = (0, react_1.useState)(false);
     const parentDivRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
     const hover = (0, use_hover_state_1.useHoverState)(parentDivRef);
+    const [randomClass] = (0, react_1.useState)(() => `slider-${(0, remotion_1.random)(null)}`.replace('.', ''));
     const isMutedOrZero = mediaMuted || mediaVolume === 0;
     const onVolumeChange = (e) => {
         setMediaVolume(parseFloat(e.target.value));
@@ -88,6 +38,81 @@ const MediaVolumeSlider = () => {
         }
         setMediaMuted((mute) => !mute);
     }, [mediaVolume, setMediaMuted, setMediaVolume]);
-    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] }));
+    const parentDivStyle = (0, react_1.useMemo)(() => {
+        return {
+            display: 'inline-flex',
+            background: 'none',
+            border: 'none',
+            padding: '6px',
+            justifyContent: 'center',
+            alignItems: 'center',
+            touchAction: 'none',
+            ...(displayVerticalVolumeSlider && { position: 'relative' }),
+        };
+    }, [displayVerticalVolumeSlider]);
+    const volumeContainer = (0, react_1.useMemo)(() => {
+        return {
+            display: 'inline',
+            width: icons_1.ICON_SIZE,
+            height: icons_1.ICON_SIZE,
+            cursor: 'pointer',
+            appearance: 'none',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+        };
+    }, []);
+    const inputStyle = (0, react_1.useMemo)(() => {
+        const commonStyle = {
+            WebkitAppearance: 'none',
+            backgroundColor: 'rgba(255, 255, 255, 0.5)',
+            borderRadius: BAR_HEIGHT / 2,
+            cursor: 'pointer',
+            height: BAR_HEIGHT,
+            width: exports.VOLUME_SLIDER_WIDTH,
+        };
+        if (displayVerticalVolumeSlider) {
+            return {
+                ...commonStyle,
+                transform: `rotate(-90deg)`,
+                position: 'absolute',
+                bottom: icons_1.ICON_SIZE + exports.VOLUME_SLIDER_WIDTH / 2 + 5,
+            };
+        }
+        return {
+            ...commonStyle,
+            marginLeft: 5,
+        };
+    }, [displayVerticalVolumeSlider]);
+    const sliderStyle = `
+	.${randomClass}::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		background-color: white;
+		border-radius: ${KNOB_SIZE / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE}px;
+		width: ${KNOB_SIZE}px;
+	}
+	.${randomClass} {
+		background-image: linear-gradient(
+			to right,
+			white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
+		);
+	}
+
+	.${randomClass}::-moz-range-thumb {
+		-webkit-appearance: none;
+		background-color: white;
+		border-radius: ${KNOB_SIZE / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE}px;
+		width: ${KNOB_SIZE}px;
+	}
+`;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: parentDivRef, style: parentDivStyle, children: [(0, jsx_runtime_1.jsx)("style", { 
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: {
+                    __html: sliderStyle,
+                } }), (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: randomClass, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume, style: inputStyle })) : null] }));
 };
 exports.MediaVolumeSlider = MediaVolumeSlider;

package/dist/Player.d.ts

@@ -2,7 +2,7 @@ import type { ComponentType, MutableRefObject } from 'react';
 import React from 'react';
 import type { CompProps } from 'remotion';
 import type { PlayerRef } from './player-methods';
-import type { RenderLoading } from './PlayerUI';
+import type { RenderLoading, RenderPoster } from './PlayerUI';
 declare type PropsIfHasProps<Props> = {} extends Props ? {
     inputProps?: Props;
 } : {
@@ -31,9 +31,17 @@ export declare type PlayerProps<T> = {
     renderLoading?: RenderLoading;
     moveToBeginningWhenEnded?: boolean;
     className?: string;
+    initialFrame?: number;
+    renderPoster?: RenderPoster;
+    showPosterWhenPaused?: boolean;
+    showPosterWhenEnded?: boolean;
+    showPosterWhenUnplayed?: boolean;
+    inFrame?: number | null;
+    outFrame?: number | null;
+    initiallyShowControls?: number | boolean;
 } & PropsIfHasProps<T> & CompProps<T>;
 export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
-export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, moveToBeginningWhenEnded, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, className, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
+export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, moveToBeginningWhenEnded, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
 declare module 'react' {
     function forwardRef<T, P = {}>(render: (props: P, ref: React.MutableRefObject<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 }

package/dist/Player.js

@@ -11,9 +11,10 @@ const emitter_context_1 = require("./emitter-context");
 const event_emitter_1 = require("./event-emitter");
 const player_css_classname_1 = require("./player-css-classname");
 const PlayerUI_1 = __importDefault(require("./PlayerUI"));
+const validate_in_out_frame_1 = require("./utils/validate-in-out-frame");
+const validate_initial_frame_1 = require("./utils/validate-initial-frame");
 const validate_playbackrate_1 = require("./utils/validate-playbackrate");
 const volume_persistance_1 = require("./volume-persistance");
-remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`, '#fff'));
 const componentOrNullIfLazy = (props) => {
     if ('component' in props) {
         return props.component;
@@ -21,7 +22,7 @@ const componentOrNullIfLazy = (props) => {
     return null;
 };
 exports.componentOrNullIfLazy = componentOrNullIfLazy;
-const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, ...componentProps }, ref) => {
+const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -41,7 +42,8 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         throw new TypeError(`'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
     }
     const component = remotion_1.Internals.useLazyComponent(componentProps);
-    const [frame, setFrame] = (0, react_1.useState)(0);
+    (0, validate_initial_frame_1.validateInitialFrame)({ initialFrame, durationInFrames });
+    const [frame, setFrame] = (0, react_1.useState)(() => initialFrame !== null && initialFrame !== void 0 ? initialFrame : 0);
     const [playing, setPlaying] = (0, react_1.useState)(false);
     const [rootId] = (0, react_1.useState)('player-comp');
     const [emitter] = (0, react_1.useState)(() => new event_emitter_1.PlayerEmitter());
@@ -60,6 +62,11 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     remotion_1.Internals.validateDimension(compositionWidth, 'compositionWidth', 'of the <Player /> component');
     remotion_1.Internals.validateDurationInFrames(durationInFrames, 'of the <Player/> component');
     remotion_1.Internals.validateFps(fps, 'as a prop of the <Player/> component', false);
+    (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames,
+        inFrame,
+        outFrame,
+    });
     if (typeof controls !== 'boolean' && typeof controls !== 'undefined') {
         throw new TypeError(`'controls' must be a boolean or undefined but got '${typeof controls}' instead`);
     }
@@ -103,7 +110,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         setMediaVolume(vol);
         (0, volume_persistance_1.persistVolume)(vol);
     }, []);
-    (0, react_1.useImperativeHandle)(ref, () => rootRef.current);
+    (0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
     const timelineContextValue = (0, react_1.useMemo)(() => {
         return {
             frame,
@@ -166,6 +173,8 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
             unregisterSequence: () => undefined,
             registerAsset: () => undefined,
             unregisterAsset: () => undefined,
+            currentCompositionMetadata: null,
+            setCurrentCompositionMetadata: () => undefined,
             assets: [],
         };
     }, [
@@ -179,9 +188,16 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const passedInputProps = (0, react_1.useMemo)(() => {
         return inputProps !== null && inputProps !== void 0 ? inputProps : {};
     }, [inputProps]);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (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), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
-                                            ? clickToPlay
-                                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined }) }) }) }) }) }) }) }) }));
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useLayoutEffect)(() => {
+            // Inject CSS only on client, and also only after the Player has hydrated
+            remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`, '#fff'));
+        }, []);
+    }
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (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)(remotion_1.Internals.PrefetchProvider, { 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), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
+                                                ? clickToPlay
+                                                : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), 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 }) }) }) }) }) }) }) }) }) }));
 };
 exports.PlayerFn = PlayerFn;
 exports.Player = (0, react_1.forwardRef)(exports.PlayerFn);

package/dist/PlayerControls.d.ts

@@ -1,6 +1,8 @@
 import type { MouseEventHandler } from 'react';
 import React from 'react';
 import type { usePlayer } from './use-player';
+export declare const X_SPACER = 10;
+export declare const X_PADDING = 12;
 declare global {
     interface Document {
         webkitFullscreenEnabled?: boolean;
@@ -22,4 +24,10 @@ export declare const Controls: React.FC<{
     allowFullscreen: boolean;
     onExitFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;
     spaceKeyToPlayOrPause: boolean;
+    onSeekEnd: () => void;
+    onSeekStart: () => void;
+    inFrame: number | null;
+    outFrame: number | null;
+    initiallyShowControls: number | boolean;
+    playerWidth: number;
 }>;

package/dist/PlayerControls.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Controls = void 0;
+exports.Controls = exports.X_PADDING = exports.X_SPACER = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -8,6 +8,9 @@ const format_time_1 = require("./format-time");
 const icons_1 = require("./icons");
 const MediaVolumeSlider_1 = require("./MediaVolumeSlider");
 const PlayerSeekBar_1 = require("./PlayerSeekBar");
+const use_video_controls_resize_1 = require("./use-video-controls-resize");
+exports.X_SPACER = 10;
+exports.X_PADDING = 12;
 const containerStyle = {
     boxSizing: 'border-box',
     position: 'absolute',
@@ -17,8 +20,8 @@ const containerStyle = {
     paddingBottom: 10,
     background: 'linear-gradient(transparent, rgba(0, 0, 0, 0.4))',
     display: 'flex',
-    paddingRight: 12,
-    paddingLeft: 12,
+    paddingRight: exports.X_PADDING,
+    paddingLeft: exports.X_PADDING,
     flexDirection: 'column',
     transition: 'opacity 0.3s',
 };
@@ -57,23 +60,40 @@ const flex1 = {
     flex: 1,
 };
 const fullscreen = {};
-const timeLabel = {
-    color: 'white',
-    fontFamily: 'sans-serif',
-    fontSize: 14,
-};
-const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, }) => {
+const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, }) => {
     const playButtonRef = (0, react_1.useRef)(null);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
+    const { maxTimeLabelWidth, displayVerticalVolumeSlider } = (0, use_video_controls_resize_1.useVideoControlsResize)({ allowFullscreen, playerWidth });
+    const [shouldShowInitially, setInitiallyShowControls] = (0, react_1.useState)(() => {
+        if (typeof initiallyShowControls === 'boolean') {
+            return initiallyShowControls;
+        }
+        if (typeof initiallyShowControls === 'number') {
+            if (initiallyShowControls % 1 !== 0) {
+                throw new Error('initiallyShowControls must be an integer or a boolean');
+            }
+            if (Number.isNaN(initiallyShowControls)) {
+                throw new Error('initiallyShowControls must not be NaN');
+            }
+            if (!Number.isFinite(initiallyShowControls)) {
+                throw new Error('initiallyShowControls must be finite');
+            }
+            if (initiallyShowControls <= 0) {
+                throw new Error('initiallyShowControls must be a positive integer');
+            }
+            return initiallyShowControls;
+        }
+        throw new TypeError('initiallyShowControls must be a number or a boolean');
+    });
     const containerCss = (0, react_1.useMemo)(() => {
         // Hide if playing and mouse outside
-        const shouldShow = hovered || !player.playing;
+        const shouldShow = hovered || !player.playing || shouldShowInitially;
         return {
             ...containerStyle,
             opacity: Number(shouldShow),
         };
-    }, [hovered, player.playing]);
+    }, [hovered, shouldShowInitially, player.playing]);
     (0, react_1.useEffect)(() => {
         if (playButtonRef.current && spaceKeyToPlayOrPause) {
             // This switches focus to play button when player.playing flag changes
@@ -88,8 +108,30 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
         setSupportsFullscreen((_a = (typeof document !== 'undefined' &&
             (document.fullscreenEnabled || document.webkitFullscreenEnabled))) !== null && _a !== void 0 ? _a : false);
     }, []);
-    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 }), (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((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
+    (0, react_1.useEffect)(() => {
+        if (shouldShowInitially === false) {
+            return;
+        }
+        const time = shouldShowInitially === true ? 2000 : shouldShowInitially;
+        const timeout = setTimeout(() => {
+            setInitiallyShowControls(false);
+        }, time);
+        return () => {
+            clearInterval(timeout);
+        };
+    }, [shouldShowInitially]);
+    const timeLabel = (0, react_1.useMemo)(() => {
+        return {
+            color: 'white',
+            fontFamily: 'sans-serif',
+            fontSize: 14,
+            maxWidth: maxTimeLabelWidth,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        };
+    }, [maxTimeLabelWidth]);
+    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, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : 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 }), (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((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
                                 ? onExitFullscreenButtonClick
-                                : 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 })] }));
+                                : 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, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
 };
 exports.Controls = Controls;

package/dist/PlayerSeekBar.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 export declare const PlayerSeekBar: React.FC<{
     durationInFrames: number;
+    onSeekStart: () => void;
+    onSeekEnd: () => void;
+    inFrame: number | null;
+    outFrame: number | null;
 }>;

package/dist/PlayerSeekBar.js

@@ -30,11 +30,18 @@ const containerStyle = {
 };
 const barBackground = {
     height: BAR_HEIGHT,
-    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    backgroundColor: 'rgba(255, 255, 255, 0.25)',
     width: '100%',
     borderRadius: BAR_HEIGHT / 2,
 };
-const PlayerSeekBar = ({ durationInFrames }) => {
+const findBodyInWhichDivIsLocated = (div) => {
+    let current = div;
+    while (current.parentElement) {
+        current = current.parentElement;
+    }
+    return current;
+};
+const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
     const containerRef = (0, react_1.useRef)(null);
     const barHovered = (0, use_hover_state_1.useHoverState)(containerRef);
     const size = (0, use_element_size_1.useElementSize)(containerRef, {
@@ -57,7 +64,8 @@ const PlayerSeekBar = ({ durationInFrames }) => {
             dragging: true,
             wasPlaying: playing,
         });
-    }, [size, durationInFrames, pause, seek, playing]);
+        onSeekStart();
+    }, [size, durationInFrames, pause, seek, playing, onSeekStart]);
     const onPointerMove = (0, react_1.useCallback)((e) => {
         var _a;
         if (!size) {
@@ -82,16 +90,18 @@ const PlayerSeekBar = ({ durationInFrames }) => {
         else {
             pause();
         }
-    }, [dragging, pause, play]);
+        onSeekEnd();
+    }, [dragging, onSeekEnd, pause, play]);
     (0, react_1.useEffect)(() => {
         if (!dragging.dragging) {
             return;
         }
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
+        const body = findBodyInWhichDivIsLocated(containerRef.current);
+        body.addEventListener('pointermove', onPointerMove);
+        body.addEventListener('pointerup', onPointerUp);
         return () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
+            body.removeEventListener('pointermove', onPointerMove);
+            body.removeEventListener('pointerup', onPointerUp);
         };
     }, [dragging.dragging, onPointerMove, onPointerUp]);
     const knobStyle = (0, react_1.useMemo)(() => {
@@ -113,10 +123,24 @@ const PlayerSeekBar = ({ durationInFrames }) => {
         return {
             height: BAR_HEIGHT,
             backgroundColor: 'rgba(255, 255, 255, 1)',
-            width: (frame / (durationInFrames - 1)) * 100 + '%',
+            width: ((frame - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) / (durationInFrames - 1)) * 100 + '%',
+            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
+            borderRadius: BAR_HEIGHT / 2,
+        };
+    }, [durationInFrames, frame, inFrame]);
+    const active = (0, react_1.useMemo)(() => {
+        return {
+            height: BAR_HEIGHT,
+            backgroundColor: 'rgba(255, 255, 255, 0.25)',
+            width: (((outFrame !== null && outFrame !== void 0 ? outFrame : durationInFrames - 1) - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) /
+                (durationInFrames - 1)) *
+                100 +
+                '%',
+            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
             borderRadius: BAR_HEIGHT / 2,
+            position: 'absolute',
         };
-    }, [durationInFrames, frame]);
-    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 })] }));
+    }, [durationInFrames, inFrame, outFrame]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: barBackground, children: [(0, jsx_runtime_1.jsx)("div", { style: active }), (0, jsx_runtime_1.jsx)("div", { style: fillStyle })] }), (0, jsx_runtime_1.jsx)("div", { style: knobStyle })] }));
 };
 exports.PlayerSeekBar = PlayerSeekBar;

package/dist/PlayerUI.d.ts

@@ -7,6 +7,7 @@ export declare type RenderLoading = (canvas: {
     height: number;
     width: number;
 }) => React.ReactChild;
+export declare type RenderPoster = RenderLoading;
 declare const _default: (props: {
     controls: boolean;
     loop: boolean;
@@ -24,8 +25,15 @@ declare const _default: (props: {
     mediaVolume: number;
     errorFallback: ErrorFallback;
     playbackRate: number;
-    renderLoading?: RenderLoading | undefined;
+    renderLoading: RenderLoading | undefined;
+    renderPoster: RenderLoading | undefined;
     className: string | undefined;
     moveToBeginningWhenEnded: boolean;
+    showPosterWhenPaused: boolean;
+    showPosterWhenEnded: boolean;
+    showPosterWhenUnplayed: boolean;
+    inFrame: number | null;
+    outFrame: number | null;
+    initiallyShowControls: number | boolean;
 } & React.RefAttributes<PlayerRef | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default _default;

package/dist/PlayerUI.js

@@ -42,8 +42,8 @@ if (reactVersion === '0') {
     throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
 const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
-const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, className, moveToBeginningWhenEnded, }, ref) => {
-    var _a, _b, _c;
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, initiallyShowControls, }, ref) => {
+    var _a, _b, _c, _d, _e;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
     const container = (0, react_1.useRef)(null);
@@ -55,12 +55,13 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const [hasPausedToResume, setHasPausedToResume] = (0, react_1.useState)(false);
     const [shouldAutoplay, setShouldAutoPlay] = (0, react_1.useState)(autoPlay);
     const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(() => false);
+    const [seeking, setSeeking] = (0, react_1.useState)(false);
     (0, use_playback_1.usePlayback)({
         loop,
         playbackRate,
         moveToBeginningWhenEnded,
-        inFrame: null,
-        outFrame: null,
+        inFrame,
+        outFrame,
     });
     const player = (0, use_player_1.usePlayer)();
     (0, react_1.useEffect)(() => {
@@ -146,6 +147,18 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         };
     }, [player.emitter]);
     const durationInFrames = (_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1;
+    const layout = (0, react_1.useMemo)(() => {
+        if (!config || !canvasSize) {
+            return null;
+        }
+        return (0, calculate_scale_1.calculateCanvasTransformation)({
+            canvasSize,
+            compositionHeight: config.height,
+            compositionWidth: config.width,
+            previewSize: 'auto',
+        });
+    }, [canvasSize, config]);
+    const scale = (_b = layout === null || layout === void 0 ? void 0 : layout.scale) !== null && _b !== void 0 ? _b : 1;
     (0, react_1.useImperativeHandle)(ref, () => {
         const methods = {
             play: player.play,
@@ -195,6 +208,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             unmute: () => {
                 setMediaMuted(false);
             },
+            getScale: () => scale,
         };
         return Object.assign(player.emitter, methods);
     }, [
@@ -209,6 +223,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         setMediaMuted,
         setMediaVolume,
         toggle,
+        scale,
     ]);
     const VideoComponent = video ? video.component : null;
     const outerStyle = (0, react_1.useMemo)(() => {
@@ -228,22 +243,11 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             ...style,
         };
     }, [canvasSize, config, style]);
-    const layout = (0, react_1.useMemo)(() => {
-        if (!config || !canvasSize) {
-            return null;
-        }
-        return (0, calculate_scale_1.calculateScale)({
-            canvasSize,
-            compositionHeight: config.height,
-            compositionWidth: config.width,
-            previewSize: 'auto',
-        });
-    }, [canvasSize, config]);
     const outer = (0, react_1.useMemo)(() => {
         if (!layout || !config) {
             return {};
         }
-        const { centerX, centerY, scale } = layout;
+        const { centerX, centerY } = layout;
         return {
             width: config.width * scale,
             height: config.height * scale,
@@ -254,28 +258,22 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             top: centerY,
             overflow: 'hidden',
         };
-    }, [config, layout]);
+    }, [config, layout, scale]);
     const containerStyle = (0, react_1.useMemo)(() => {
-        if (!config || !canvasSize) {
+        if (!config || !canvasSize || !layout) {
             return {};
         }
-        const { scale, xCorrection, yCorrection } = (0, calculate_scale_1.calculateScale)({
-            canvasSize,
-            compositionHeight: config.height,
-            compositionWidth: config.width,
-            previewSize: 'auto',
-        });
         return {
             position: 'absolute',
             width: config.width,
             height: config.height,
             display: 'flex',
             transform: `scale(${scale})`,
-            marginLeft: xCorrection,
-            marginTop: yCorrection,
+            marginLeft: layout.xCorrection,
+            marginTop: layout.yCorrection,
             overflow: 'hidden',
         };
-    }, [canvasSize, config]);
+    }, [canvasSize, config, layout, scale]);
     const onError = (0, react_1.useCallback)((error) => {
         player.pause();
         // Pay attention to `this context`
@@ -292,6 +290,12 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const onSingleClick = (0, react_1.useCallback)((e) => {
         toggle(e);
     }, [toggle]);
+    const onSeekStart = (0, react_1.useCallback)(() => {
+        setSeeking(true);
+    }, []);
+    const onSeekEnd = (0, react_1.useCallback)(() => {
+        setSeeking(false);
+    }, []);
     const onDoubleClick = (0, react_1.useCallback)(() => {
         if (isFullscreen) {
             exitFullscreen();
@@ -310,7 +314,22 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     if (!config) {
         return null;
     }
-    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] }));
+    const poster = renderPoster
+        ? renderPoster({
+            height: outerStyle.height,
+            width: outerStyle.width,
+        })
+        : null;
+    if (poster === undefined) {
+        throw new TypeError('renderPoster() must return a React element, but undefined was returned');
+    }
+    const shouldShowPoster = poster &&
+        [
+            showPosterWhenPaused && !player.isPlaying() && !seeking,
+            showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
+            showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
+        ].some(Boolean);
+    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, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...((_d = inputProps) !== null && _d !== void 0 ? _d : {}) }) })) : null }) }), shouldShowPoster ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : 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, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, playerWidth: (_e = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _e !== void 0 ? _e : 0 })) : null] }));
     if (is_node_1.IS_NODE && !doesReactVersionSupportSuspense) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

package/dist/calculate-scale.d.ts

@@ -1,7 +1,13 @@
 import type { PreviewSize } from './utils/preview-size';
 import type { Size } from './utils/use-element-size';
-export declare const calculateScale: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
-    previewSize: PreviewSize;
+export declare const calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
+    previewSize: PreviewSize['size'];
+    compositionWidth: number;
+    compositionHeight: number;
+    canvasSize: Size;
+}) => number;
+export declare const calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
+    previewSize: PreviewSize['size'];
     compositionWidth: number;
     compositionHeight: number;
     canvasSize: Size;

package/dist/calculate-scale.js

@@ -1,11 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateScale = void 0;
-const calculateScale = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
+exports.calculateCanvasTransformation = exports.calculateScale = void 0;
+const calculateScale = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
     const heightRatio = canvasSize.height / compositionHeight;
     const widthRatio = canvasSize.width / compositionWidth;
     const ratio = Math.min(heightRatio, widthRatio);
-    const scale = previewSize === 'auto' ? ratio : Number(previewSize);
+    return previewSize === 'auto' ? ratio : Number(previewSize);
+};
+exports.calculateScale = calculateScale;
+const calculateCanvasTransformation = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
+    const scale = (0, exports.calculateScale)({
+        canvasSize,
+        compositionHeight,
+        compositionWidth,
+        previewSize,
+    });
     const correction = 0 - (1 - scale) / 2;
     const xCorrection = correction * compositionWidth;
     const yCorrection = correction * compositionHeight;
@@ -21,4 +30,4 @@ const calculateScale = ({ previewSize, compositionWidth, compositionHeight, canv
         scale,
     };
 };
-exports.calculateScale = calculateScale;
+exports.calculateCanvasTransformation = calculateCanvasTransformation;

package/dist/event-emitter.d.ts

@@ -7,6 +7,9 @@ declare type ErrorPayload = {
 declare type TimeUpdateEventPayload = {
     frame: number;
 };
+declare type FrameUpdateEventPayload = {
+    frame: number;
+};
 declare type RateChangeEventPayload = {
     playbackRate: number;
 };
@@ -21,6 +24,7 @@ declare type StateEventMap = {
     ended: undefined;
     error: ErrorPayload;
     timeupdate: TimeUpdateEventPayload;
+    frameupdate: FrameUpdateEventPayload;
     fullscreenchange: FullscreenChangeEventPayload;
 };
 export declare type EventTypes = keyof StateEventMap;
@@ -42,6 +46,7 @@ export declare class PlayerEmitter {
     dispatchRatechange(playbackRate: number): void;
     dispatchError(error: Error): void;
     dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
+    dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
     dispatchFullscreenChangeUpdate(event: FullscreenChangeEventPayload): void;
 }
 export {};

package/dist/event-emitter.js

@@ -11,6 +11,7 @@ class PlayerEmitter {
             ratechange: [],
             seeked: [],
             timeupdate: [],
+            frameupdate: [],
             fullscreenchange: [],
         };
     }
@@ -52,6 +53,9 @@ class PlayerEmitter {
     dispatchTimeUpdate(event) {
         this.dispatchEvent('timeupdate', event);
     }
+    dispatchFrameUpdate(event) {
+        this.dispatchEvent('frameupdate', event);
+    }
     dispatchFullscreenChangeUpdate(event) {
         this.dispatchEvent('fullscreenchange', event);
     }

package/dist/icons.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export declare const ICON_SIZE = 25;
+export declare const fullscreenIconSize = 16;
 export declare const PlayIcon: React.FC;
 export declare const PauseIcon: React.FC;
 export declare const FullscreenIcon: React.FC<{

package/dist/icons.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.ICON_SIZE = void 0;
+exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.fullscreenIconSize = exports.ICON_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 exports.ICON_SIZE = 25;
-const fullscreenIconSize = 16;
+exports.fullscreenIconSize = 16;
 const rotate = {
     transform: `rotate(90deg)`,
 };
@@ -21,7 +21,7 @@ const FullscreenIcon = ({ minimized }) => {
     const out = minimized ? strokeWidth / 2 : 0;
     const middleInset = minimized ? strokeWidth / 2 : strokeWidth * 1.6;
     const inset = minimized ? strokeWidth * 2 : strokeWidth * 1.6;
-    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: `0 0 ${viewSize} ${viewSize}`, height: fullscreenIconSize, width: fullscreenIconSize, children: [(0, jsx_runtime_1.jsx)("path", { d: `
+    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: `
 				M ${out} ${inset}
 				L ${middleInset} ${middleInset}
 				L ${inset} ${out}

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import type { CallbackListener, EventTypes } from './event-emitter';
 import { PlayerEmitter } from './event-emitter';
-export { ErrorFallback, Player } from './Player';
+export { ErrorFallback, Player, PlayerProps } from './Player';
 export { PlayerMethods, PlayerRef } from './player-methods';
-export type { RenderLoading } from './PlayerUI';
-export { PreviewSize } from './utils/preview-size';
+export type { RenderLoading, RenderPoster } from './PlayerUI';
+export { PreviewSize, Translation } from './utils/preview-size';
 export { Size } from './utils/use-element-size';
 export type { CallbackListener, EventTypes };
 export declare const PlayerInternals: {
@@ -14,6 +14,7 @@ export declare const PlayerInternals: {
         frameBack: (frames: number) => void;
         frameForward: (frames: number) => void;
         isLastFrame: boolean;
+        isFirstFrame: boolean;
         emitter: PlayerEmitter;
         playing: boolean;
         play: (e?: import("react").SyntheticEvent<Element, Event> | undefined) => void;
@@ -22,6 +23,7 @@ export declare const PlayerInternals: {
         seek: (newFrame: number) => void;
         getCurrentFrame: () => number;
         isPlaying: () => boolean;
+        hasPlayed: boolean;
     };
     usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }: {
         loop: boolean;
@@ -34,8 +36,8 @@ export declare const PlayerInternals: {
         triggerOnWindowResize: boolean;
         shouldApplyCssTransforms: boolean;
     }) => import("./utils/use-element-size").Size | null;
-    calculateScale: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
-        previewSize: import("./utils/preview-size").PreviewSize;
+    calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
+        previewSize: number | "auto";
         compositionWidth: number;
         compositionHeight: number;
         canvasSize: import("./utils/use-element-size").Size;
@@ -48,4 +50,10 @@ export declare const PlayerInternals: {
     };
     useHoverState: (ref: import("react").RefObject<HTMLDivElement>) => boolean;
     updateAllElementsSizes: () => void;
+    calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
+        previewSize: number | "auto";
+        compositionWidth: number;
+        compositionHeight: number;
+        canvasSize: import("./utils/use-element-size").Size;
+    }) => number;
 };

package/dist/index.js

@@ -16,7 +16,8 @@ exports.PlayerInternals = {
     usePlayer: use_player_1.usePlayer,
     usePlayback: use_playback_1.usePlayback,
     useElementSize: use_element_size_1.useElementSize,
-    calculateScale: calculate_scale_1.calculateScale,
+    calculateCanvasTransformation: calculate_scale_1.calculateCanvasTransformation,
     useHoverState: use_hover_state_1.useHoverState,
     updateAllElementsSizes: use_element_size_1.updateAllElementsSizes,
+    calculateScale: calculate_scale_1.calculateScale,
 };

package/dist/player-css-classname.d.ts

@@ -1,2 +1 @@
 export declare const PLAYER_CSS_CLASSNAME = "__remotion-player";
-export declare const VOLUME_SLIDER_INPUT_CSS_CLASSNAME: string;

package/dist/player-css-classname.js

@@ -1,5 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VOLUME_SLIDER_INPUT_CSS_CLASSNAME = exports.PLAYER_CSS_CLASSNAME = void 0;
+exports.PLAYER_CSS_CLASSNAME = void 0;
 exports.PLAYER_CSS_CLASSNAME = '__remotion-player';
-exports.VOLUME_SLIDER_INPUT_CSS_CLASSNAME = exports.PLAYER_CSS_CLASSNAME.concat('_volume-slider-input');

package/dist/player-methods.d.ts

@@ -16,5 +16,6 @@ export declare type PlayerMethods = {
     isPlaying: () => boolean;
     mute: () => void;
     unmute: () => void;
+    getScale: () => number;
 };
 export declare type PlayerRef = PlayerEmitter & PlayerMethods;

package/dist/test/validate-in-out-frames.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/validate-in-out-frames.test.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const validate_in_out_frame_1 = require("../utils/validate-in-out-frame");
+test('Validate in out frames', () => {
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 201,
+        outFrame: undefined,
+    })).toThrow(/inFrame must be less than \(durationInFrames - 1\)/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 199,
+        outFrame: 201,
+    })).toThrow(/outFrame must be less than \(durationInFrames - 1\)/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: -10,
+        outFrame: null,
+    })).toThrow(/inFrame must be greater than 0, but is -10/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: null,
+        outFrame: -10,
+    })).toThrow(/outFrame must be greater than 0, but is -10/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 1.5,
+        outFrame: null,
+    })).toThrow(/"inFrame" must be an integer, but is 1.5/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 20,
+        outFrame: 20,
+    })).toThrow(/outFrame must be greater than inFrame, but is 20/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 21,
+        outFrame: 20,
+    })).toThrow(/outFrame must be greater than inFrame, but is 20 <= 21/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: null,
+        outFrame: 20,
+    })).not.toThrow();
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: null,
+        outFrame: null,
+    })).not.toThrow();
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 10,
+        outFrame: 20,
+    })).not.toThrow();
+});

package/dist/test/validate-prop.test.js

@@ -51,7 +51,7 @@ test('No durationInFrames should give errors', () => {
             durationInFrames: undefined, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/The "durationInFrames" prop of the <Player\/> component must be a number, but you passed a value of type undefined/);
+        expect(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
     }
 });
 test('Invalid playbackRate should give error', () => {

package/dist/use-playback.js

@@ -85,5 +85,8 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         }, 250);
         return () => clearInterval(interval);
     }, [emitter]);
+    (0, react_1.useEffect)(() => {
+        emitter.dispatchFrameUpdate({ frame });
+    }, [emitter, frame]);
 };
 exports.usePlayback = usePlayback;

package/dist/use-player.d.ts

@@ -4,6 +4,7 @@ declare type UsePlayerMethods = {
     frameBack: (frames: number) => void;
     frameForward: (frames: number) => void;
     isLastFrame: boolean;
+    isFirstFrame: boolean;
     emitter: PlayerEmitter;
     playing: boolean;
     play: (e?: SyntheticEvent) => void;
@@ -12,6 +13,7 @@ declare type UsePlayerMethods = {
     seek: (newFrame: number) => void;
     getCurrentFrame: () => number;
     isPlaying: () => boolean;
+    hasPlayed: boolean;
 };
 export declare const usePlayer: () => UsePlayerMethods;
 export {};

package/dist/use-player.js

@@ -7,8 +7,9 @@ const emitter_context_1 = require("./emitter-context");
 const usePlayer = () => {
     var _a;
     const [playing, setPlaying, imperativePlaying] = remotion_1.Internals.Timeline.usePlayingState();
+    const [hasPlayed, setHasPlayed] = (0, react_1.useState)(false);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const playStart = (0, react_1.useRef)(0);
+    const playStart = (0, react_1.useRef)(frame);
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const setTimelinePosition = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const audioContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioContext);
@@ -20,6 +21,7 @@ const usePlayer = () => {
     const emitter = (0, react_1.useContext)(emitter_context_1.PlayerEventEmitterContext);
     const lastFrame = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
     const isLastFrame = frame === lastFrame;
+    const isFirstFrame = frame === 0;
     if (!emitter) {
         throw new TypeError('Expected Player event emitter context');
     }
@@ -31,6 +33,7 @@ const usePlayer = () => {
         if (imperativePlaying.current) {
             return;
         }
+        setHasPlayed(true);
         if (isLastFrame) {
             seek(0);
         }
@@ -104,21 +107,25 @@ const usePlayer = () => {
             play,
             pause,
             seek,
+            isFirstFrame,
             getCurrentFrame: () => frameRef.current,
             isPlaying: () => imperativePlaying.current,
             pauseAndReturnToPlayStart,
+            hasPlayed,
         };
     }, [
-        emitter,
         frameBack,
         frameForward,
-        imperativePlaying,
         isLastFrame,
-        pause,
-        play,
+        emitter,
         playing,
-        pauseAndReturnToPlayStart,
+        play,
+        pause,
         seek,
+        isFirstFrame,
+        pauseAndReturnToPlayStart,
+        imperativePlaying,
+        hasPlayed,
     ]);
     return returnValue;
 };

package/dist/use-video-controls-resize.d.ts

@@ -0,0 +1,7 @@
+export declare const useVideoControlsResize: ({ allowFullscreen: allowFullScreen, playerWidth, }: {
+    allowFullscreen: boolean;
+    playerWidth: number;
+}) => {
+    maxTimeLabelWidth: number;
+    displayVerticalVolumeSlider: boolean;
+};

package/dist/use-video-controls-resize.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVideoControlsResize = void 0;
+const react_1 = require("react");
+const icons_1 = require("./icons");
+const MediaVolumeSlider_1 = require("./MediaVolumeSlider");
+const PlayerControls_1 = require("./PlayerControls");
+const useVideoControlsResize = ({ allowFullscreen: allowFullScreen, playerWidth, }) => {
+    const resizeInfo = (0, react_1.useMemo)(() => {
+        const playPauseIconSize = icons_1.ICON_SIZE;
+        const volumeIconSize = icons_1.ICON_SIZE;
+        const _fullscreenIconSize = allowFullScreen ? icons_1.fullscreenIconSize : 0;
+        const elementsSize = volumeIconSize +
+            playPauseIconSize +
+            _fullscreenIconSize +
+            PlayerControls_1.X_PADDING * 2 +
+            PlayerControls_1.X_SPACER * 2;
+        const maxTimeLabelWidth = playerWidth - elementsSize;
+        const maxTimeLabelWidthWithoutNegativeValue = Math.max(maxTimeLabelWidth, 0);
+        const availableTimeLabelWidthIfVolumeOpen = maxTimeLabelWidthWithoutNegativeValue - MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH;
+        // If max label width is lower than the volume width
+        // then it means we need to take it's width as the max label width
+        // otherwise we took the available width when volume open
+        const computedLabelWidth = availableTimeLabelWidthIfVolumeOpen < MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH
+            ? maxTimeLabelWidthWithoutNegativeValue
+            : availableTimeLabelWidthIfVolumeOpen;
+        const minWidthForHorizontalDisplay = computedLabelWidth + elementsSize + MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH;
+        const displayVerticalVolumeSlider = playerWidth < minWidthForHorizontalDisplay;
+        return {
+            maxTimeLabelWidth: maxTimeLabelWidthWithoutNegativeValue,
+            displayVerticalVolumeSlider,
+        };
+    }, [allowFullScreen, playerWidth]);
+    return resizeInfo;
+};
+exports.useVideoControlsResize = useVideoControlsResize;

package/dist/utils/preview-size.d.ts

@@ -1 +1,8 @@
-export declare type PreviewSize = 'auto' | number;
+export declare type Translation = {
+    x: number;
+    y: number;
+};
+export declare type PreviewSize = {
+    size: number | 'auto';
+    translation: Translation;
+};

package/dist/utils/validate-in-out-frame.d.ts

@@ -0,0 +1,6 @@
+export declare const validateSingleFrameFrame: (frame: unknown, variableName: string) => number | null;
+export declare const validateInOutFrames: ({ inFrame, durationInFrames, outFrame, }: {
+    inFrame: unknown;
+    outFrame: unknown;
+    durationInFrames: number;
+}) => void;

package/dist/utils/validate-in-out-frame.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateInOutFrames = exports.validateSingleFrameFrame = void 0;
+const validateSingleFrameFrame = (frame, variableName) => {
+    if (typeof frame === 'undefined' || frame === null) {
+        return frame !== null && frame !== void 0 ? frame : null;
+    }
+    if (typeof frame !== 'number') {
+        throw new TypeError(`"${variableName}" must be a number, but is ${JSON.stringify(frame)}`);
+    }
+    if (Number.isNaN(frame)) {
+        throw new TypeError(`"${variableName}" must not be NaN, but is ${JSON.stringify(frame)}`);
+    }
+    if (!Number.isFinite(frame)) {
+        throw new TypeError(`"${variableName}" must be finite, but is ${JSON.stringify(frame)}`);
+    }
+    if (frame % 1 !== 0) {
+        throw new TypeError(`"${variableName}" must be an integer, but is ${JSON.stringify(frame)}`);
+    }
+    return frame;
+};
+exports.validateSingleFrameFrame = validateSingleFrameFrame;
+const validateInOutFrames = ({ inFrame, durationInFrames, outFrame, }) => {
+    const validatedInFrame = (0, exports.validateSingleFrameFrame)(inFrame, 'inFrame');
+    const validateOutFrame = (0, exports.validateSingleFrameFrame)(outFrame, 'outFrame');
+    if (validatedInFrame === null && validateOutFrame === null) {
+        return;
+    }
+    // Must not be over the duration
+    if (validatedInFrame !== null && validatedInFrame > durationInFrames - 1) {
+        throw new Error('inFrame must be less than (durationInFrames - 1), but is ' +
+            validatedInFrame);
+    }
+    if (validateOutFrame !== null && validateOutFrame > durationInFrames - 1) {
+        throw new Error('outFrame must be less than (durationInFrames - 1), but is ' +
+            validatedInFrame);
+    }
+    // Must not be under 0
+    if (validatedInFrame !== null && validatedInFrame < 0) {
+        throw new Error('inFrame must be greater than 0, but is ' + validatedInFrame);
+    }
+    if (validateOutFrame !== null && validateOutFrame < 0) {
+        throw new Error('outFrame must be greater than 0, but is ' + validateOutFrame);
+    }
+    if (validateOutFrame !== null &&
+        validatedInFrame !== null &&
+        validateOutFrame <= validatedInFrame) {
+        throw new Error('outFrame must be greater than inFrame, but is ' +
+            validateOutFrame +
+            ' <= ' +
+            validatedInFrame);
+    }
+};
+exports.validateInOutFrames = validateInOutFrames;

package/dist/utils/validate-initial-frame.d.ts

@@ -0,0 +1,4 @@
+export declare const validateInitialFrame: ({ initialFrame, durationInFrames, }: {
+    initialFrame: unknown;
+    durationInFrames: unknown;
+}) => void;

package/dist/utils/validate-initial-frame.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateInitialFrame = void 0;
+const validateInitialFrame = ({ initialFrame, durationInFrames, }) => {
+    if (typeof durationInFrames !== 'number') {
+        throw new Error(`\`durationInFrames\` must be a number, but is ${JSON.stringify(durationInFrames)}`);
+    }
+    if (typeof initialFrame === 'undefined') {
+        return;
+    }
+    if (typeof initialFrame !== 'number') {
+        throw new Error(`\`initialFrame\` must be a number, but is ${JSON.stringify(initialFrame)}`);
+    }
+    if (Number.isNaN(initialFrame)) {
+        throw new Error(`\`initialFrame\` must be a number, but is NaN`);
+    }
+    if (!Number.isFinite(initialFrame)) {
+        throw new Error(`\`initialFrame\` must be a number, but is Infinity`);
+    }
+    if (initialFrame % 1 !== 0) {
+        throw new Error(`\`initialFrame\` must be an integer, but is ${JSON.stringify(initialFrame)}`);
+    }
+    if (initialFrame > durationInFrames - 1) {
+        throw new Error(`\`initialFrame\` must be less or equal than \`durationInFrames - 1\`, but is ${JSON.stringify(initialFrame)}`);
+    }
+};
+exports.validateInitialFrame = validateInitialFrame;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/player",
-	"version": "4.0.0-umungobongo.5+220a57d86",
+	"version": "4.0.0-webhook.26+c8e41db11",
 	"description": "Remotion Player",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -28,7 +28,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.0-umungobongo.5+220a57d86"
+		"remotion": "4.0.0-webhook.26+c8e41db11"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -50,7 +50,7 @@
 		"react-dom": "^18.0.0",
 		"ts-jest": "^27.0.5",
 		"typescript": "^4.7.0",
-		"webpack": "5.72.0"
+		"webpack": "5.74.0"
 	},
 	"keywords": [
 		"remotion",
@@ -63,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "220a57d86ddead39e87215c5639ed7aa78aeb417"
+	"gitHead": "c8e41db114d645c5183edbf016a22b733243dce2"
 }