@remotion/player 3.2.21 → 3.2.23-ensure-ffmpeg.123

package/dist/event-emitter.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlayerEmitter = void 0;
+exports.ThumbnailEmitter = exports.PlayerEmitter = void 0;
 class PlayerEmitter {
     constructor() {
         this.listeners = {
@@ -11,6 +11,7 @@ class PlayerEmitter {
             ratechange: [],
             seeked: [],
             timeupdate: [],
+            frameupdate: [],
             fullscreenchange: [],
         };
     }
@@ -52,8 +53,35 @@ class PlayerEmitter {
     dispatchTimeUpdate(event) {
         this.dispatchEvent('timeupdate', event);
     }
+    dispatchFrameUpdate(event) {
+        this.dispatchEvent('frameupdate', event);
+    }
     dispatchFullscreenChangeUpdate(event) {
         this.dispatchEvent('fullscreenchange', event);
     }
 }
 exports.PlayerEmitter = PlayerEmitter;
+class ThumbnailEmitter {
+    constructor() {
+        this.listeners = {
+            error: [],
+        };
+    }
+    addEventListener(name, callback) {
+        this.listeners[name].push(callback);
+    }
+    removeEventListener(name, callback) {
+        this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
+    }
+    dispatchEvent(dispatchName, context) {
+        this.listeners[dispatchName].forEach((callback) => {
+            callback({ detail: context });
+        });
+    }
+    dispatchError(error) {
+        this.dispatchEvent('error', {
+            error,
+        });
+    }
+}
+exports.ThumbnailEmitter = ThumbnailEmitter;

package/dist/icons.d.ts

@@ -1,9 +1,10 @@
 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<{
-    minimized: boolean;
+    isFullscreen: boolean;
 }>;
 export declare const VolumeOffIcon: React.FC;
 export declare const VolumeOnIcon: 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)`,
 };
@@ -15,13 +15,13 @@ const PauseIcon = () => {
     return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 100 100", width: exports.ICON_SIZE, height: exports.ICON_SIZE, children: [(0, jsx_runtime_1.jsx)("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), (0, jsx_runtime_1.jsx)("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })] }));
 };
 exports.PauseIcon = PauseIcon;
-const FullscreenIcon = ({ minimized }) => {
+const FullscreenIcon = ({ isFullscreen, }) => {
     const strokeWidth = 6;
     const viewSize = 32;
-    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: `
+    const out = isFullscreen ? 0 : strokeWidth / 2;
+    const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
+    const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
+    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,12 +1,14 @@
 /// <reference types="react" />
-import type { CallbackListener, EventTypes } from './event-emitter';
+import type { CallbackListener, PlayerEventTypes } from './event-emitter';
 import { PlayerEmitter } from './event-emitter';
-export { ErrorFallback, Player, PlayerProps } from './Player';
-export { PlayerMethods, PlayerRef } from './player-methods';
-export type { RenderLoading, RenderPoster } from './PlayerUI';
+export { Player, PlayerProps } from './Player';
+export { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods';
+export type { RenderFullscreenButton, RenderPlayPauseButton, } from './PlayerControls';
+export type { ErrorFallback, RenderLoading, RenderPoster } from './PlayerUI';
+export { Thumbnail } from './Thumbnail';
 export { PreviewSize, Translation } from './utils/preview-size';
 export { Size } from './utils/use-element-size';
-export type { CallbackListener, EventTypes };
+export type { CallbackListener, PlayerEventTypes as EventTypes };
 export declare const PlayerInternals: {
     PlayerEventEmitterContext: import("react").Context<PlayerEmitter | undefined>;
     PlayerEmitter: typeof PlayerEmitter;

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlayerInternals = exports.Player = void 0;
+exports.PlayerInternals = exports.Thumbnail = exports.Player = void 0;
 const calculate_scale_1 = require("./calculate-scale");
 const emitter_context_1 = require("./emitter-context");
 const event_emitter_1 = require("./event-emitter");
@@ -10,6 +10,8 @@ const use_player_1 = require("./use-player");
 const use_element_size_1 = require("./utils/use-element-size");
 var Player_1 = require("./Player");
 Object.defineProperty(exports, "Player", { enumerable: true, get: function () { return Player_1.Player; } });
+var Thumbnail_1 = require("./Thumbnail");
+Object.defineProperty(exports, "Thumbnail", { enumerable: true, get: function () { return Thumbnail_1.Thumbnail; } });
 exports.PlayerInternals = {
     PlayerEventEmitterContext: emitter_context_1.PlayerEventEmitterContext,
     PlayerEmitter: event_emitter_1.PlayerEmitter,

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

@@ -1,11 +1,14 @@
 import type { SyntheticEvent } from 'react';
 import type { PlayerEmitter } from './event-emitter';
-export declare type PlayerMethods = {
+export declare type ThumbnailMethods = {
+    getContainerNode: () => HTMLDivElement | null;
+    getScale: () => number;
+};
+export declare type PlayerMethods = ThumbnailMethods & {
     play: (e?: SyntheticEvent) => void;
     pause: () => void;
     toggle: (e?: SyntheticEvent) => void;
     seekTo: (frame: number) => void;
-    getContainerNode: () => HTMLDivElement | null;
     getCurrentFrame: () => number;
     requestFullscreen: () => void;
     exitFullscreen: () => void;
@@ -17,4 +20,5 @@ export declare type PlayerMethods = {
     mute: () => void;
     unmute: () => void;
 };
+export declare type ThumbnailRef = PlayerEmitter & ThumbnailMethods;
 export declare type PlayerRef = PlayerEmitter & PlayerMethods;

package/dist/test/index.test.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
 const use_player_1 = require("../use-player");
-test('It should throw an error if not being used inside a RemotionRoot', () => {
-    expect(() => {
+(0, vitest_1.test)('It should throw an error if not being used inside a RemotionRoot', () => {
+    (0, vitest_1.expect)(() => {
         (0, use_player_1.usePlayer)();
     }).toThrow();
 });

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

@@ -1,53 +1,54 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
 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)({
+(0, vitest_1.test)('Validate in out frames', () => {
+    (0, vitest_1.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)({
+    (0, vitest_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)({
+    (0, vitest_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)({
+    (0, vitest_1.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)({
+    (0, vitest_1.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)({
+    (0, vitest_1.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)({
+    (0, vitest_1.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)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: null,
         outFrame: 20,
     })).not.toThrow();
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: null,
         outFrame: null,
     })).not.toThrow();
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 10,
         outFrame: 20,

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

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
+const vitest_1 = require("vitest");
 const index_1 = require("../index");
 const test_utils_1 = require("./test-utils");
-test('no compositionWidth should give errors', () => {
+(0, vitest_1.test)('no compositionWidth should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player
         // @ts-expect-error
@@ -13,27 +14,27 @@ test('no compositionWidth should give errors', () => {
             compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
+        (0, vitest_1.expect)(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
     }
 });
-test('no compositionHeight should give errors', () => {
+(0, vitest_1.test)('no compositionHeight should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
             compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
+        (0, vitest_1.expect)(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
     }
 });
-test('No fps should give errors', () => {
+(0, vitest_1.test)('No fps should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
             fps: null, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
+        (0, vitest_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
     }
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
@@ -41,51 +42,51 @@ test('No fps should give errors', () => {
             fps: undefined, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
+        (0, vitest_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
     }
 });
-test('No durationInFrames should give errors', () => {
+(0, vitest_1.test)('No durationInFrames should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, 
             // @ts-expect-error
             durationInFrames: undefined, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
+        (0, vitest_1.expect)(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
     }
 });
-test('Invalid playbackRate should give error', () => {
+(0, vitest_1.test)('Invalid playbackRate should give error', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5 }));
     }
     catch (e) {
-        expect(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
+        (0, vitest_1.expect)(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
     }
 });
-test('playbackRate of 0 should not be possible', () => {
+(0, vitest_1.test)('playbackRate of 0 should not be possible', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }));
     }
     catch (e) {
-        expect(e.message).toMatch(/A playback rate of 0 is not supported./);
+        (0, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
     }
 });
-test('playbackRate of wrong type should not be possible', () => {
+(0, vitest_1.test)('playbackRate of wrong type should not be possible', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, 
             // @ts-expect-error
             playbackRate: 'hi' }));
     }
     catch (e) {
-        expect(e.message).toMatch(/A playback rate of 0 is not supported./);
+        (0, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
     }
 });
-test('playbackRate of undefined should be okay', () => {
+(0, vitest_1.test)('playbackRate of undefined should be okay', () => {
     (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
-    expect(true).toBe(true);
+    (0, vitest_1.expect)(true).toBe(true);
 });
-test('passing in <Composition /> instance should not be possible', () => {
-    expect(() => {
+(0, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
+    (0, vitest_1.expect)(() => {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: remotion_1.Composition, controls: true, showVolumeControls: true, inputProps: {
                 id: 'HelloWorld',
                 width: 500,
@@ -96,8 +97,8 @@ test('passing in <Composition /> instance should not be possible', () => {
             } }));
     }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
 });
-test('passing in <Composition /> instance should not be possible', () => {
-    expect(() => {
+(0, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
+    (0, vitest_1.expect)(() => {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, 
             // @ts-expect-error
             component: (0, jsx_runtime_1.jsx)(remotion_1.Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: test_utils_1.HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
@@ -110,7 +111,7 @@ test('passing in <Composition /> instance should not be possible', () => {
             } }));
     }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
 });
-test.each([
+vitest_1.test.each([
     ['controls'],
     ['loop'],
     ['autoPlay'],
@@ -125,6 +126,6 @@ test.each([
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: test_utils_1.HelloWorld, ...props }));
     }
     catch (e) {
-        expect(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
+        (0, vitest_1.expect)(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
     }
 });

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-thumbnail.d.ts

@@ -0,0 +1,6 @@
+import type { ThumbnailEmitter } from './event-emitter';
+declare type UseThumbnailMethods = {
+    emitter: ThumbnailEmitter;
+};
+export declare const useThumbnail: () => UseThumbnailMethods;
+export {};

package/dist/use-thumbnail.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThumbnail = void 0;
+const react_1 = require("react");
+const emitter_context_1 = require("./emitter-context");
+const useThumbnail = () => {
+    const emitter = (0, react_1.useContext)(emitter_context_1.ThumbnailEmitterContext);
+    if (!emitter) {
+        throw new TypeError('Expected Player event emitter context');
+    }
+    const returnValue = (0, react_1.useMemo)(() => {
+        return {
+            emitter,
+        };
+    }, [emitter]);
+    return returnValue;
+};
+exports.useThumbnail = useThumbnail;

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/props-if-has-props.d.ts

@@ -0,0 +1,5 @@
+export declare type PropsIfHasProps<Props> = {} extends Props ? {
+    inputProps?: Props;
+} : {
+    inputProps: Props;
+};

package/dist/utils/props-if-has-props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,12 +1,11 @@
 {
 	"name": "@remotion/player",
-	"version": "3.2.21",
+	"version": "3.2.23-ensure-ffmpeg.123+3ffa18f9e",
 	"description": "Remotion Player",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
 		"lint": "eslint src --ext ts,tsx",
-		"test": "jest",
 		"build": "tsc -d",
 		"watch": "tsc -w",
 		"prerelease": "cp ../../README.md ."
@@ -28,7 +27,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "3.2.21"
+		"remotion": "3.2.23-ensure-ffmpeg.123+3ffa18f9e"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -37,20 +36,20 @@
 	"devDependencies": {
 		"@jonny/eslint-config": "3.0.266",
 		"@testing-library/react": "13.1.1",
-		"@types/jest": "^27.4.0",
 		"@types/node": "^14.14.14",
-		"@types/react": "18.0.1",
+		"@types/react": "18.0.23",
 		"@types/react-dom": "18.0.0",
-		"csstype": "^3.0.9",
-		"eslint": "8.13.0",
-		"jest": "^27.2.4",
-		"prettier": "^2.0.5",
+		"@vitejs/plugin-react": "^2.0.0",
+		"csstype": "^3.0.11",
+		"eslint": "8.25.0",
+		"jsdom": "20.0.1",
+		"prettier": "^2.7.1",
 		"prettier-plugin-organize-imports": "^2.3.4",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",
-		"ts-jest": "^27.0.5",
 		"typescript": "^4.7.0",
-		"webpack": "5.72.0"
+		"vitest": "0.24.3",
+		"webpack": "5.74.0"
 	},
 	"keywords": [
 		"remotion",
@@ -63,5 +62,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7236c416c1efcc6079ad262d6d5afa10e6775b81"
+	"gitHead": "3ffa18f9eafd4322373c51c92816c671b92e3258"
 }