@remotion/player 4.0.248 → 4.0.250

package/dist/cjs/Player.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 import React from 'react';
-import type { CompProps } from 'remotion';
+import type { CompProps, LogLevel } from 'remotion';
 import type { AnyZodObject } from 'zod';
 import type { RenderMuteButton } from './MediaVolumeSlider.js';
 import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
@@ -55,6 +55,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props extends Record<string
     readonly overflowVisible?: boolean;
     readonly browserMediaControlsBehavior?: BrowserMediaControlsBehavior;
     readonly overrideInternalClassName?: string;
+    readonly logLevel?: LogLevel;
 } & 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

@@ -22,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, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, 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, ...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, 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', ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -111,6 +111,9 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         setCurrentPlaybackRate(playbackRate);
     }, [playbackRate]);
     (0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
+    (0, react_1.useState)(() => {
+        remotion_1.Internals.Log.trace(logLevel, `[player] Mounting <Player>. User agent = ${typeof navigator === 'undefined' ? 'server' : navigator.userAgent}`);
+    });
     const timelineContextValue = (0, react_1.useMemo)(() => {
         return {
             frame,
@@ -143,7 +146,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, 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, 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), 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 }) }) }) }) }));
 };

package/dist/cjs/SharedPlayerContext.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType, LazyExoticComponent } from 'react';
 import React from 'react';
-import type { TimelineContextValue } from 'remotion';
+import type { LogLevel, TimelineContextValue } from 'remotion';
 export declare const PLAYER_COMP_ID = "player-comp";
 export declare const SharedPlayerContexts: React.FC<{
     readonly children: React.ReactNode;
@@ -12,4 +12,5 @@ export declare const SharedPlayerContexts: React.FC<{
     readonly component: LazyExoticComponent<ComponentType<unknown>>;
     readonly numberOfSharedAudioTags: number;
     readonly initiallyMuted: boolean;
+    readonly logLevel: LogLevel;
 }>;

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, }) => {
+const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, logLevel, }) => {
     const compositionManagerContext = (0, react_1.useMemo)(() => {
         const context = {
             compositions: [
@@ -47,14 +47,14 @@ const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeigh
     }, [mediaMuted, mediaVolume]);
     const setMediaVolumeAndPersist = (0, react_1.useCallback)((vol) => {
         setMediaVolume(vol);
-        (0, volume_persistance_js_1.persistVolume)(vol);
-    }, []);
+        (0, volume_persistance_js_1.persistVolume)(vol, logLevel);
+    }, [logLevel]);
     const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
         return {
             setMediaMuted,
             setMediaVolume: setMediaVolumeAndPersist,
         };
     }, [setMediaVolumeAndPersist]);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.DurationsContextProvider, { 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, component: component, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.LogLevelContext.Provider, { value: logLevel, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.DurationsContextProvider, { 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, component: component, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.SharedPlayerContexts = SharedPlayerContexts;

package/dist/cjs/Thumbnail.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import type { CompProps } from 'remotion';
+import type { CompProps, LogLevel } from 'remotion';
 import type { AnyZodObject } from 'zod';
 import type { ThumbnailMethods } from './player-methods.js';
 import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
@@ -16,6 +16,7 @@ export type ThumbnailProps<Schema extends AnyZodObject, Props extends Record<str
     readonly renderLoading?: RenderLoading;
     readonly className?: string;
     readonly overrideInternalClassName?: string;
+    readonly logLevel?: LogLevel;
 };
 export type ThumbnailPropsWithoutZod<Props extends Record<string, unknown>> = ThumbnailProps<AnyZodObject, Props>;
 export declare const Thumbnail: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;

package/dist/cjs/Thumbnail.js

@@ -11,7 +11,7 @@ const emitter_context_js_1 = require("./emitter-context.js");
 const event_emitter_js_1 = require("./event-emitter.js");
 const SharedPlayerContext_js_1 = require("./SharedPlayerContext.js");
 const ThumbnailUI_js_1 = __importDefault(require("./ThumbnailUI.js"));
-const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, overflowVisible = false, overrideInternalClassName, ...componentProps }, ref) => {
+const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, overflowVisible = false, overrideInternalClassName, logLevel = 'info', ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -44,7 +44,7 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
     const passedInputProps = (0, react_1.useMemo)(() => {
         return inputProps !== null && inputProps !== void 0 ? inputProps : {};
     }, [inputProps]);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: 0, initiallyMuted: true, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_js_1.default, { ref: rootRef, className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style, overflowVisible: overflowVisible, overrideInternalClassName: overrideInternalClassName }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: 0, initiallyMuted: true, logLevel: logLevel, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_js_1.default, { ref: rootRef, className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style, overflowVisible: overflowVisible, overrideInternalClassName: overrideInternalClassName }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /*

package/dist/cjs/error-boundary.d.ts

@@ -15,5 +15,5 @@ export declare class ErrorBoundary extends React.Component<{
         hasError: Error;
     };
     componentDidCatch(error: Error): void;
-    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }

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

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

package/dist/cjs/volume-persistance.js

@@ -1,8 +1,9 @@
 "use strict";
 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) => {
+const persistVolume = (volume, logLevel) => {
     if (typeof window === 'undefined') {
         return;
     }
@@ -12,8 +13,7 @@ const persistVolume = (volume) => {
     catch (e) {
         // User can disallow localStorage access
         // https://github.com/remotion-dev/remotion/issues/3540
-        // eslint-disable-next-line no-console
-        console.log('Could not persist volume', e);
+        remotion_1.Internals.Log.error(logLevel, 'Could not persist volume', e);
     }
 };
 exports.persistVolume = persistVolume;

package/dist/esm/index.mjs

@@ -1143,7 +1143,7 @@ import {
   useRef as useRef11,
   useState as useState13
 } from "react";
-import { Composition, Internals as Internals13 } from "remotion";
+import { Composition, Internals as Internals14 } from "remotion";
 
 // src/PlayerUI.tsx
 import React10, {
@@ -2824,18 +2824,19 @@ var PlayerUI_default = forwardRef(PlayerUI);
 
 // src/SharedPlayerContext.tsx
 import { useCallback as useCallback12, useMemo as useMemo13, useState as useState12 } from "react";
-import { Internals as Internals12 } from "remotion";
+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) => {
+var persistVolume = (volume, logLevel) => {
   if (typeof window === "undefined") {
     return;
   }
   try {
     window.localStorage.setItem(VOLUME_PERSISTANCE_KEY, String(volume));
   } catch (e) {
-    console.log("Could not persist volume", e);
+    Internals12.Log.error(logLevel, "Could not persist volume", e);
   }
 };
 var getPreferredVolume = () => {
@@ -2862,7 +2863,8 @@ var SharedPlayerContexts = ({
   durationInFrames,
   component,
   numberOfSharedAudioTags,
-  initiallyMuted
+  initiallyMuted,
+  logLevel
 }) => {
   const compositionManagerContext = useMemo13(() => {
     const context = {
@@ -2918,31 +2920,34 @@ var SharedPlayerContexts = ({
   }, [mediaMuted, mediaVolume]);
   const setMediaVolumeAndPersist = useCallback12((vol) => {
     setMediaVolume(vol);
-    persistVolume(vol);
-  }, []);
+    persistVolume(vol, logLevel);
+  }, [logLevel]);
   const setMediaVolumeContextValue = useMemo13(() => {
     return {
       setMediaMuted,
       setMediaVolume: setMediaVolumeAndPersist
     };
   }, [setMediaVolumeAndPersist]);
-  return /* @__PURE__ */ jsx13(Internals12.CanUseRemotionHooksProvider, {
-    children: /* @__PURE__ */ jsx13(Internals12.Timeline.TimelineContext.Provider, {
-      value: timelineContext,
-      children: /* @__PURE__ */ jsx13(Internals12.CompositionManager.Provider, {
-        value: compositionManagerContext,
-        children: /* @__PURE__ */ jsx13(Internals12.ResolveCompositionConfig, {
-          children: /* @__PURE__ */ jsx13(Internals12.PrefetchProvider, {
-            children: /* @__PURE__ */ jsx13(Internals12.DurationsContextProvider, {
-              children: /* @__PURE__ */ jsx13(Internals12.MediaVolumeContext.Provider, {
-                value: mediaVolumeContextValue,
-                children: /* @__PURE__ */ jsx13(Internals12.SetMediaVolumeContext.Provider, {
-                  value: setMediaVolumeContextValue,
-                  children: /* @__PURE__ */ jsx13(Internals12.SharedAudioContextProvider, {
-                    numberOfAudioTags: numberOfSharedAudioTags,
-                    component,
-                    children: /* @__PURE__ */ jsx13(Internals12.BufferingProvider, {
-                      children
+  return /* @__PURE__ */ jsx13(Internals13.LogLevelContext.Provider, {
+    value: logLevel,
+    children: /* @__PURE__ */ jsx13(Internals13.CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx13(Internals13.Timeline.TimelineContext.Provider, {
+        value: timelineContext,
+        children: /* @__PURE__ */ jsx13(Internals13.CompositionManager.Provider, {
+          value: compositionManagerContext,
+          children: /* @__PURE__ */ jsx13(Internals13.ResolveCompositionConfig, {
+            children: /* @__PURE__ */ jsx13(Internals13.PrefetchProvider, {
+              children: /* @__PURE__ */ jsx13(Internals13.DurationsContextProvider, {
+                children: /* @__PURE__ */ jsx13(Internals13.MediaVolumeContext.Provider, {
+                  value: mediaVolumeContextValue,
+                  children: /* @__PURE__ */ jsx13(Internals13.SetMediaVolumeContext.Provider, {
+                    value: setMediaVolumeContextValue,
+                    children: /* @__PURE__ */ jsx13(Internals13.SharedAudioContextProvider, {
+                      numberOfAudioTags: numberOfSharedAudioTags,
+                      component,
+                      children: /* @__PURE__ */ jsx13(Internals13.BufferingProvider, {
+                        children
+                      })
                     })
                   })
                 })
@@ -3103,6 +3108,7 @@ var PlayerFn = ({
   renderMuteButton,
   browserMediaControlsBehavior: passedBrowserMediaControlsBehavior,
   overrideInternalClassName,
+  logLevel = "info",
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -3120,7 +3126,7 @@ var PlayerFn = ({
   if (componentForValidation === Composition) {
     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 = Internals13.useLazyComponent(componentProps);
+  const component = Internals14.useLazyComponent(componentProps);
   validateInitialFrame({ initialFrame, durationInFrames });
   const [frame, setFrame] = useState13(() => ({
     [PLAYER_COMP_ID]: initialFrame ?? 0
@@ -3182,6 +3188,9 @@ var PlayerFn = ({
     setCurrentPlaybackRate(playbackRate);
   }, [playbackRate]);
   useImperativeHandle2(ref, () => rootRef.current, []);
+  useState13(() => {
+    Internals14.Log.trace(logLevel, `[player] Mounting <Player>. User agent = ${typeof navigator === "undefined" ? "server" : navigator.userAgent}`);
+  });
   const timelineContextValue = useMemo14(() => {
     return {
       frame,
@@ -3203,7 +3212,7 @@ var PlayerFn = ({
   }, [setFrame]);
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
-      Internals13.CSSUtils.injectCSS(Internals13.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
+      Internals14.CSSUtils.injectCSS(Internals14.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
     }, [overrideInternalClassName]);
   }
   const actualInputProps = useMemo14(() => inputProps ?? {}, [inputProps]);
@@ -3212,7 +3221,7 @@ var PlayerFn = ({
       mode: "prevent-media-session"
     };
   }, [passedBrowserMediaControlsBehavior]);
-  return /* @__PURE__ */ jsx14(Internals13.IsPlayerContextProvider, {
+  return /* @__PURE__ */ jsx14(Internals14.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx14(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
       component,
@@ -3222,7 +3231,8 @@ var PlayerFn = ({
       fps,
       numberOfSharedAudioTags,
       initiallyMuted,
-      children: /* @__PURE__ */ jsx14(Internals13.Timeline.SetTimelineContext.Provider, {
+      logLevel,
+      children: /* @__PURE__ */ jsx14(Internals14.Timeline.SetTimelineContext.Provider, {
         value: setTimelineContextValue,
         children: /* @__PURE__ */ jsx14(PlayerEmitterProvider, {
           currentPlaybackRate,
@@ -3280,7 +3290,7 @@ import {
   useRef as useRef13,
   useState as useState14
 } from "react";
-import { Internals as Internals15, random as random2 } from "remotion";
+import { Internals as Internals16, random as random2 } from "remotion";
 
 // src/ThumbnailUI.tsx
 import React13, {
@@ -3291,7 +3301,7 @@ import React13, {
   useMemo as useMemo16,
   useRef as useRef12
 } from "react";
-import { Internals as Internals14 } from "remotion";
+import { Internals as Internals15 } from "remotion";
 
 // src/use-thumbnail.ts
 import { useContext as useContext7, useMemo as useMemo15 } from "react";
@@ -3324,8 +3334,8 @@ var ThumbnailUI = ({
   overflowVisible,
   overrideInternalClassName
 }, ref) => {
-  const config = Internals14.useUnsafeVideoConfig();
-  const video = Internals14.useVideo();
+  const config = Internals15.useUnsafeVideoConfig();
+  const video = Internals15.useVideo();
   const container = useRef12(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
@@ -3401,7 +3411,7 @@ var ThumbnailUI = ({
       children: VideoComponent ? /* @__PURE__ */ jsx15(ErrorBoundary, {
         onError,
         errorFallback,
-        children: /* @__PURE__ */ jsx15(Internals14.CurrentScaleContext.Provider, {
+        children: /* @__PURE__ */ jsx15(Internals15.CurrentScaleContext.Provider, {
           value: currentScaleContext,
           children: /* @__PURE__ */ jsx15(VideoComponent, {
             ...video?.props ?? {},
@@ -3446,6 +3456,7 @@ var ThumbnailFn = ({
   renderLoading,
   overflowVisible = false,
   overrideInternalClassName,
+  logLevel = "info",
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -3474,12 +3485,12 @@ var ThumbnailFn = ({
     return value;
   }, [frameToDisplay, thumbnailId]);
   useImperativeHandle4(ref, () => rootRef.current, []);
-  const Component = Internals15.useLazyComponent(componentProps);
+  const Component = Internals16.useLazyComponent(componentProps);
   const [emitter] = useState14(() => new ThumbnailEmitter);
   const passedInputProps = useMemo17(() => {
     return inputProps ?? {};
   }, [inputProps]);
-  return /* @__PURE__ */ jsx16(Internals15.IsPlayerContextProvider, {
+  return /* @__PURE__ */ jsx16(Internals16.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx16(SharedPlayerContexts, {
       timelineContext: timelineState,
       component: Component,
@@ -3489,6 +3500,7 @@ var ThumbnailFn = ({
       fps,
       numberOfSharedAudioTags: 0,
       initiallyMuted: true,
+      logLevel,
       children: /* @__PURE__ */ jsx16(ThumbnailEmitterContext.Provider, {
         value: emitter,
         children: /* @__PURE__ */ jsx16(ThumbnailUI_default, {

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
   },
   "name": "@remotion/player",
-  "version": "4.0.248",
+  "version": "4.0.250",
   "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.248"
+    "remotion": "4.0.250"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -43,7 +43,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.14.0",
-    "@remotion/eslint-config-internal": "4.0.248"
+    "@remotion/eslint-config-internal": "4.0.250"
   },
   "keywords": [
     "remotion",