@remotion/player 4.0.452 → 4.0.453

package/dist/cjs/Player.d.ts

@@ -61,6 +61,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props extends Record<string
     readonly acknowledgeRemotionLicense?: boolean;
     readonly audioLatencyHint?: AudioContextLatencyCategory;
     readonly volumePersistenceKey?: string;
+    readonly initialVolume?: number;
 } & CompProps<Props> & PropsIfHasProps<Schema, Props>;
 export type PlayerPropsWithoutZod<Props extends Record<string, unknown>> = PlayerProps<AnyZodObject, Props>;
 export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;

package/dist/cjs/Player.js

@@ -23,7 +23,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, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, showPosterWhenBufferingAndPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, renderCustomControls, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, audioLatencyHint = 'playback', volumePersistenceKey, ...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, showPosterWhenBuffering, showPosterWhenBufferingAndPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, renderCustomControls, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, audioLatencyHint = 'playback', volumePersistenceKey, initialVolume, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         window.remotion_isPlayer = true;
     }
@@ -102,6 +102,17 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         typeof spaceKeyToPlayOrPause !== 'undefined') {
         throw new TypeError(`'spaceKeyToPlayOrPause' must be a boolean or undefined but got '${typeof spaceKeyToPlayOrPause}' instead`);
     }
+    if (typeof initialVolume !== 'undefined' &&
+        typeof initialVolume !== 'number') {
+        throw new TypeError(`'initialVolume' must be a number or undefined but got '${typeof initialVolume}' instead`);
+    }
+    if (typeof initialVolume === 'number' &&
+        (!Number.isFinite(initialVolume) ||
+            Number.isNaN(initialVolume) ||
+            initialVolume < 0 ||
+            initialVolume > 1)) {
+        throw new TypeError(`'initialVolume' must be between 0 and 1 but got '${initialVolume}' instead`);
+    }
     if (typeof numberOfSharedAudioTags !== 'number' ||
         numberOfSharedAudioTags % 1 !== 0 ||
         !Number.isFinite(numberOfSharedAudioTags) ||
@@ -154,7 +165,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
             mode: 'prevent-media-session',
         });
     }, [passedBrowserMediaControlsBehavior]);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, audioLatencyHint: audioLatencyHint, volumePersistenceKey: volumePersistenceKey, inputProps: actualInputProps, audioEnabled: true, children: jsx_runtime_1.jsx(remotion_1.Internals.SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx_runtime_1.jsx(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: jsx_runtime_1.jsx(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
+    return (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, audioLatencyHint: audioLatencyHint, volumePersistenceKey: volumePersistenceKey, initialVolume: initialVolume, inputProps: actualInputProps, audioEnabled: true, children: jsx_runtime_1.jsx(remotion_1.Internals.SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx_runtime_1.jsx(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: jsx_runtime_1.jsx(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                             ? clickToPlay
                             : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), showPosterWhenBufferingAndPaused: Boolean(showPosterWhenBufferingAndPaused), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, renderCustomControls: renderCustomControls !== null && renderCustomControls !== void 0 ? renderCustomControls : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior, overrideInternalClassName: overrideInternalClassName !== null && overrideInternalClassName !== void 0 ? overrideInternalClassName : undefined, noSuspense: Boolean(noSuspense) }) }) }) }) }));
 };

package/dist/cjs/SharedPlayerContext.d.ts

@@ -15,6 +15,7 @@ export declare const SharedPlayerContexts: React.FC<{
     readonly logLevel: LogLevel;
     readonly audioLatencyHint: AudioContextLatencyCategory;
     readonly volumePersistenceKey?: string;
+    readonly initialVolume?: number;
     readonly inputProps: Record<string, unknown>;
     readonly audioEnabled: boolean;
 }>;

package/dist/cjs/SharedPlayerContext.js

@@ -6,7 +6,8 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const volume_persistence_js_1 = require("./volume-persistence.js");
 exports.PLAYER_COMP_ID = 'player-comp';
-const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, logLevel, audioLatencyHint, volumePersistenceKey, inputProps, audioEnabled, }) => {
+const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, logLevel, audioLatencyHint, volumePersistenceKey, initialVolume, inputProps, audioEnabled, }) => {
+    const persistVolumeToStorage = initialVolume === undefined;
     const compositionManagerContext = (0, react_1.useMemo)(() => {
         const context = {
             compositions: [
@@ -51,7 +52,9 @@ const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeigh
         inputProps,
     ]);
     const [mediaMuted, setMediaMuted] = (0, react_1.useState)(() => initiallyMuted);
-    const [mediaVolume, setMediaVolume] = (0, react_1.useState)(() => (0, volume_persistence_js_1.getPreferredVolume)(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : null));
+    const [mediaVolume, setMediaVolume] = (0, react_1.useState)(() => persistVolumeToStorage
+        ? (0, volume_persistence_js_1.getPreferredVolume)(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : null)
+        : initialVolume);
     const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
         return {
             mediaMuted,
@@ -60,8 +63,10 @@ const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeigh
     }, [mediaMuted, mediaVolume]);
     const setMediaVolumeAndPersist = (0, react_1.useCallback)((vol) => {
         setMediaVolume(vol);
-        (0, volume_persistence_js_1.persistVolume)(vol, logLevel, volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : null);
-    }, [logLevel, volumePersistenceKey]);
+        if (persistVolumeToStorage) {
+            (0, volume_persistence_js_1.persistVolume)(vol, logLevel, volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : null);
+        }
+    }, [persistVolumeToStorage, logLevel, volumePersistenceKey]);
     const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
         return {
             setMediaMuted,

package/dist/cjs/utils/use-element-size.js

@@ -34,21 +34,24 @@ const useElementSize = (ref, options) => {
             return null;
         }
         return new ResizeObserver((entries) => {
-            // The contentRect returns the width without any `scale()`'s being applied. The height is wrong
+            // `contentRect` is the element's pre-transform content box.
+            // `getClientRects()` is the post-transform AABB. Dividing each AABB
+            // axis by its content-box counterpart cancels the parent CSS transform
+            // whether it is uniform or not.
             const { contentRect, target } = entries[0];
-            // The clientRect returns the size with `scale()` being applied.
             const newSize = target.getClientRects();
             if (!(newSize === null || newSize === void 0 ? void 0 : newSize[0])) {
                 setSize(null);
                 return;
             }
-            const probableCssParentScale = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
-            const width = options.shouldApplyCssTransforms || probableCssParentScale === 0
+            const probableCssParentScaleX = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
+            const probableCssParentScaleY = contentRect.height === 0 ? 1 : newSize[0].height / contentRect.height;
+            const width = options.shouldApplyCssTransforms || probableCssParentScaleX === 0
                 ? newSize[0].width
-                : newSize[0].width * (1 / probableCssParentScale);
-            const height = options.shouldApplyCssTransforms || probableCssParentScale === 0
+                : newSize[0].width * (1 / probableCssParentScaleX);
+            const height = options.shouldApplyCssTransforms || probableCssParentScaleY === 0
                 ? newSize[0].height
-                : newSize[0].height * (1 / probableCssParentScale);
+                : newSize[0].height * (1 / probableCssParentScaleY);
             setSize((prevState) => {
                 const isSame = prevState &&
                     prevState.width === width &&

package/dist/esm/index.mjs

@@ -1174,9 +1174,10 @@ var useElementSize = (ref, options) => {
         setSize(null);
         return;
       }
-      const probableCssParentScale = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
-      const width = options.shouldApplyCssTransforms || probableCssParentScale === 0 ? newSize[0].width : newSize[0].width * (1 / probableCssParentScale);
-      const height = options.shouldApplyCssTransforms || probableCssParentScale === 0 ? newSize[0].height : newSize[0].height * (1 / probableCssParentScale);
+      const probableCssParentScaleX = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
+      const probableCssParentScaleY = contentRect.height === 0 ? 1 : newSize[0].height / contentRect.height;
+      const width = options.shouldApplyCssTransforms || probableCssParentScaleX === 0 ? newSize[0].width : newSize[0].width * (1 / probableCssParentScaleX);
+      const height = options.shouldApplyCssTransforms || probableCssParentScaleY === 0 ? newSize[0].height : newSize[0].height * (1 / probableCssParentScaleY);
       setSize((prevState) => {
         const isSame = prevState && prevState.width === width && prevState.height === height && prevState.left === newSize[0].x && prevState.top === newSize[0].y && prevState.windowSize.height === window.innerHeight && prevState.windowSize.width === window.innerWidth;
         if (isSame) {
@@ -3001,9 +3002,11 @@ var SharedPlayerContexts = ({
   logLevel,
   audioLatencyHint,
   volumePersistenceKey,
+  initialVolume,
   inputProps,
   audioEnabled
 }) => {
+  const persistVolumeToStorage = initialVolume === undefined;
   const compositionManagerContext = useMemo13(() => {
     const context = {
       compositions: [
@@ -3048,7 +3051,7 @@ var SharedPlayerContexts = ({
     inputProps
   ]);
   const [mediaMuted, setMediaMuted] = useState12(() => initiallyMuted);
-  const [mediaVolume, setMediaVolume] = useState12(() => getPreferredVolume(volumePersistenceKey ?? null));
+  const [mediaVolume, setMediaVolume] = useState12(() => persistVolumeToStorage ? getPreferredVolume(volumePersistenceKey ?? null) : initialVolume);
   const mediaVolumeContextValue = useMemo13(() => {
     return {
       mediaMuted,
@@ -3057,8 +3060,10 @@ var SharedPlayerContexts = ({
   }, [mediaMuted, mediaVolume]);
   const setMediaVolumeAndPersist = useCallback12((vol) => {
     setMediaVolume(vol);
-    persistVolume(vol, logLevel, volumePersistenceKey ?? null);
-  }, [logLevel, volumePersistenceKey]);
+    if (persistVolumeToStorage) {
+      persistVolume(vol, logLevel, volumePersistenceKey ?? null);
+    }
+  }, [persistVolumeToStorage, logLevel, volumePersistenceKey]);
   const setMediaVolumeContextValue = useMemo13(() => {
     return {
       setMediaMuted,
@@ -3288,6 +3293,7 @@ var PlayerFn = ({
   acknowledgeRemotionLicense,
   audioLatencyHint = "playback",
   volumePersistenceKey,
+  initialVolume,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -3362,6 +3368,12 @@ var PlayerFn = ({
   if (typeof spaceKeyToPlayOrPause !== "boolean" && typeof spaceKeyToPlayOrPause !== "undefined") {
     throw new TypeError(`'spaceKeyToPlayOrPause' must be a boolean or undefined but got '${typeof spaceKeyToPlayOrPause}' instead`);
   }
+  if (typeof initialVolume !== "undefined" && typeof initialVolume !== "number") {
+    throw new TypeError(`'initialVolume' must be a number or undefined but got '${typeof initialVolume}' instead`);
+  }
+  if (typeof initialVolume === "number" && (!Number.isFinite(initialVolume) || Number.isNaN(initialVolume) || initialVolume < 0 || initialVolume > 1)) {
+    throw new TypeError(`'initialVolume' must be between 0 and 1 but got '${initialVolume}' instead`);
+  }
   if (typeof numberOfSharedAudioTags !== "number" || numberOfSharedAudioTags % 1 !== 0 || !Number.isFinite(numberOfSharedAudioTags) || Number.isNaN(numberOfSharedAudioTags) || numberOfSharedAudioTags < 0) {
     throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
   }
@@ -3421,6 +3433,7 @@ var PlayerFn = ({
       logLevel,
       audioLatencyHint,
       volumePersistenceKey,
+      initialVolume,
       inputProps: actualInputProps,
       audioEnabled: true,
       children: /* @__PURE__ */ jsx14(Internals16.SetTimelineContext.Provider, {

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.452",
+	"version": "4.0.453",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -36,7 +36,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.452"
+		"remotion": "4.0.453"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -50,7 +50,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.452",
+		"@remotion/eslint-config-internal": "4.0.453",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/cjs/volume-persistance.d.ts

@@ -1,2 +0,0 @@
-export declare const persistVolume: (volume: number, logLevel: "error" | "info" | "trace" | "verbose" | "warn", volumePersistenceKey: string | null) => void;
-export declare const getPreferredVolume: (volumePersistenceKey: string | null) => number;

package/dist/cjs/volume-persistance.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPreferredVolume = exports.persistVolume = void 0;
-const remotion_1 = require("remotion");
-const DEFAULT_VOLUME_PERSISTANCE_KEY = 'remotion.volumePreference';
-const persistVolume = (volume, logLevel, volumePersistenceKey) => {
-    if (typeof window === 'undefined') {
-        return;
-    }
-    try {
-        window.localStorage.setItem(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : DEFAULT_VOLUME_PERSISTANCE_KEY, String(volume));
-    }
-    catch (e) {
-        // User can disallow localStorage access
-        // https://github.com/remotion-dev/remotion/issues/3540
-        remotion_1.Internals.Log.error({ logLevel, tag: null }, 'Could not persist volume', e);
-    }
-};
-exports.persistVolume = persistVolume;
-const getPreferredVolume = (volumePersistenceKey) => {
-    if (typeof window === 'undefined') {
-        return 1;
-    }
-    try {
-        const val = window.localStorage.getItem(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : DEFAULT_VOLUME_PERSISTANCE_KEY);
-        return val ? Number(val) : 1;
-    }
-    catch (_a) {
-        // User can disallow localStorage access
-        // https://github.com/remotion-dev/remotion/issues/3540
-        return 1;
-    }
-};
-exports.getPreferredVolume = getPreferredVolume;