@remotion/player 4.0.304 → 4.0.306

package/dist/cjs/Player.d.ts

@@ -60,6 +60,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props extends Record<string
     readonly noSuspense?: boolean;
     readonly acknowledgeRemotionLicense?: boolean;
     readonly audioLatencyHint?: AudioContextLatencyCategory;
+    readonly volumePersistenceKey?: string;
 } & 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, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, audioLatencyHint = 'interactive', ...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, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, audioLatencyHint = 'interactive', volumePersistenceKey, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -157,7 +157,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
             mode: 'prevent-media-session',
         });
     }, [passedBrowserMediaControlsBehavior]);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, 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, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: (0, 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 ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, 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, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: (0, 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, 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

@@ -14,4 +14,5 @@ export declare const SharedPlayerContexts: React.FC<{
     readonly initiallyMuted: boolean;
     readonly logLevel: LogLevel;
     readonly audioLatencyHint: AudioContextLatencyCategory;
+    readonly volumePersistenceKey?: string;
 }>;

package/dist/cjs/SharedPlayerContext.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const volume_persistance_js_1 = require("./volume-persistance.js");
 exports.PLAYER_COMP_ID = 'player-comp';
-const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, logLevel, audioLatencyHint, }) => {
+const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, logLevel, audioLatencyHint, volumePersistenceKey, }) => {
     const compositionManagerContext = (0, react_1.useMemo)(() => {
         const context = {
             compositions: [
@@ -31,7 +31,7 @@ const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeigh
         return context;
     }, [component, durationInFrames, compositionHeight, compositionWidth, fps]);
     const [mediaMuted, setMediaMuted] = (0, react_1.useState)(() => initiallyMuted);
-    const [mediaVolume, setMediaVolume] = (0, react_1.useState)(() => (0, volume_persistance_js_1.getPreferredVolume)());
+    const [mediaVolume, setMediaVolume] = (0, react_1.useState)(() => (0, volume_persistance_js_1.getPreferredVolume)(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : null));
     const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
         return {
             mediaMuted,
@@ -40,8 +40,8 @@ const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeigh
     }, [mediaMuted, mediaVolume]);
     const setMediaVolumeAndPersist = (0, react_1.useCallback)((vol) => {
         setMediaVolume(vol);
-        (0, volume_persistance_js_1.persistVolume)(vol, logLevel);
-    }, [logLevel]);
+        (0, volume_persistance_js_1.persistVolume)(vol, logLevel, volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : null);
+    }, [logLevel, volumePersistenceKey]);
     const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
         return {
             setMediaMuted,

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

@@ -85,6 +85,10 @@ const test_utils_js_1 = require("./test-utils.js");
     (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
     (0, bun_test_1.expect)(true).toBe(true);
 });
+(0, bun_test_1.test)('volumePersistenceKey of string should be okay', () => {
+    (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true, volumePersistenceKey: "custom-key" }));
+    (0, bun_test_1.expect)(true).toBe(true);
+});
 (0, bun_test_1.test)('passing in <Composition /> instance should not be possible', () => {
     (0, bun_test_1.expect)(() => {
         (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: remotion_1.Composition, controls: true, showVolumeControls: true, inputProps: {

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

@@ -1,3 +1,3 @@
 import { type LogLevel } from 'remotion';
-export declare const persistVolume: (volume: number, logLevel: LogLevel) => void;
-export declare const getPreferredVolume: () => number;
+export declare const persistVolume: (volume: number, logLevel: LogLevel, volumePersistenceKey: string | null) => void;
+export declare const getPreferredVolume: (volumePersistenceKey: string | null) => number;

package/dist/cjs/volume-persistance.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPreferredVolume = exports.persistVolume = void 0;
 const remotion_1 = require("remotion");
-const VOLUME_PERSISTANCE_KEY = 'remotion.volumePreference';
-const persistVolume = (volume, logLevel) => {
+const DEFAULT_VOLUME_PERSISTANCE_KEY = 'remotion.volumePreference';
+const persistVolume = (volume, logLevel, volumePersistenceKey) => {
     if (typeof window === 'undefined') {
         return;
     }
     try {
-        window.localStorage.setItem(VOLUME_PERSISTANCE_KEY, String(volume));
+        window.localStorage.setItem(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : DEFAULT_VOLUME_PERSISTANCE_KEY, String(volume));
     }
     catch (e) {
         // User can disallow localStorage access
@@ -17,12 +17,12 @@ const persistVolume = (volume, logLevel) => {
     }
 };
 exports.persistVolume = persistVolume;
-const getPreferredVolume = () => {
+const getPreferredVolume = (volumePersistenceKey) => {
     if (typeof window === 'undefined') {
         return 1;
     }
     try {
-        const val = window.localStorage.getItem(VOLUME_PERSISTANCE_KEY);
+        const val = window.localStorage.getItem(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : DEFAULT_VOLUME_PERSISTANCE_KEY);
         return val ? Number(val) : 1;
     }
     catch (_a) {

package/dist/esm/index.mjs

@@ -2832,23 +2832,23 @@ import { Internals as Internals13 } from "remotion";
 
 // src/volume-persistance.ts
 import { Internals as Internals12 } from "remotion";
-var VOLUME_PERSISTANCE_KEY = "remotion.volumePreference";
-var persistVolume = (volume, logLevel) => {
+var DEFAULT_VOLUME_PERSISTANCE_KEY = "remotion.volumePreference";
+var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   if (typeof window === "undefined") {
     return;
   }
   try {
-    window.localStorage.setItem(VOLUME_PERSISTANCE_KEY, String(volume));
+    window.localStorage.setItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTANCE_KEY, String(volume));
   } catch (e) {
     Internals12.Log.error(logLevel, "Could not persist volume", e);
   }
 };
-var getPreferredVolume = () => {
+var getPreferredVolume = (volumePersistenceKey) => {
   if (typeof window === "undefined") {
     return 1;
   }
   try {
-    const val = window.localStorage.getItem(VOLUME_PERSISTANCE_KEY);
+    const val = window.localStorage.getItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTANCE_KEY);
     return val ? Number(val) : 1;
   } catch {
     return 1;
@@ -2869,7 +2869,8 @@ var SharedPlayerContexts = ({
   numberOfSharedAudioTags,
   initiallyMuted,
   logLevel,
-  audioLatencyHint
+  audioLatencyHint,
+  volumePersistenceKey
 }) => {
   const compositionManagerContext = useMemo13(() => {
     const context = {
@@ -2895,7 +2896,7 @@ var SharedPlayerContexts = ({
     return context;
   }, [component, durationInFrames, compositionHeight, compositionWidth, fps]);
   const [mediaMuted, setMediaMuted] = useState12(() => initiallyMuted);
-  const [mediaVolume, setMediaVolume] = useState12(() => getPreferredVolume());
+  const [mediaVolume, setMediaVolume] = useState12(() => getPreferredVolume(volumePersistenceKey ?? null));
   const mediaVolumeContextValue = useMemo13(() => {
     return {
       mediaMuted,
@@ -2904,8 +2905,8 @@ var SharedPlayerContexts = ({
   }, [mediaMuted, mediaVolume]);
   const setMediaVolumeAndPersist = useCallback12((vol) => {
     setMediaVolume(vol);
-    persistVolume(vol, logLevel);
-  }, [logLevel]);
+    persistVolume(vol, logLevel, volumePersistenceKey ?? null);
+  }, [logLevel, volumePersistenceKey]);
   const setMediaVolumeContextValue = useMemo13(() => {
     return {
       setMediaMuted,
@@ -3119,6 +3120,7 @@ var PlayerFn = ({
   noSuspense,
   acknowledgeRemotionLicense,
   audioLatencyHint = "interactive",
+  volumePersistenceKey,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -3253,6 +3255,7 @@ var PlayerFn = ({
       initiallyMuted,
       logLevel,
       audioLatencyHint,
+      volumePersistenceKey,
       children: /* @__PURE__ */ jsx14(Internals15.Timeline.SetTimelineContext.Provider, {
         value: setTimelineContextValue,
         children: /* @__PURE__ */ jsx14(PlayerEmitterProvider, {

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
   },
   "name": "@remotion/player",
-  "version": "4.0.304",
+  "version": "4.0.306",
   "description": "React component for embedding a Remotion preview into your app",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "remotion": "4.0.304"
+    "remotion": "4.0.306"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -43,7 +43,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.304"
+    "@remotion/eslint-config-internal": "4.0.306"
   },
   "keywords": [
     "remotion",