remotion 4.0.351 → 4.0.353

package/dist/cjs/audio/use-audio-context.js

@@ -11,7 +11,7 @@ const warnOnce = (logLevel) => {
     warned = true;
     // Don't pullute logs if in SSR
     if (typeof window !== 'undefined') {
-        log_1.Log.warn(logLevel, 'AudioContext is not supported in this browser');
+        log_1.Log.warn({ logLevel, tag: null }, 'AudioContext is not supported in this browser');
     }
 };
 const useSingletonAudioContext = (logLevel, latencyHint) => {

package/dist/cjs/default-css.d.ts

@@ -1,3 +1,3 @@
 export declare const injectCSS: (css: string) => void;
-export declare const OFFTHREAD_VIDEO_CLASS_NAME = "__remotion_offthreadvideo";
+export declare const OBJECTFIT_CONTAIN_CLASS_NAME = "__remotion_objectfitcontain";
 export declare const makeDefaultPreviewCSS: (scope: string | null, backgroundColor: string) => string;

package/dist/cjs/default-css.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeDefaultPreviewCSS = exports.OFFTHREAD_VIDEO_CLASS_NAME = exports.injectCSS = void 0;
+exports.makeDefaultPreviewCSS = exports.OBJECTFIT_CONTAIN_CLASS_NAME = exports.injectCSS = void 0;
 const injected = {};
 const injectCSS = (css) => {
     // Skip in node
@@ -17,7 +17,8 @@ const injectCSS = (css) => {
     injected[css] = true;
 };
 exports.injectCSS = injectCSS;
-exports.OFFTHREAD_VIDEO_CLASS_NAME = '__remotion_offthreadvideo';
+// make object-fit: contain low priority, so it can be overridden by another class name
+exports.OBJECTFIT_CONTAIN_CLASS_NAME = '__remotion_objectfitcontain';
 const makeDefaultPreviewCSS = (scope, backgroundColor) => {
     if (!scope) {
         return `
@@ -28,7 +29,7 @@ const makeDefaultPreviewCSS = (scope, backgroundColor) => {
       margin: 0;
 	    background-color: ${backgroundColor};
     }
-    .${exports.OFFTHREAD_VIDEO_CLASS_NAME} {
+    .${exports.OBJECTFIT_CONTAIN_CLASS_NAME} {
       object-fit: contain;
     }
     `;
@@ -41,7 +42,7 @@ const makeDefaultPreviewCSS = (scope, backgroundColor) => {
       width: 100%;
       height: 100%;
     }
-    ${scope} .${exports.OFFTHREAD_VIDEO_CLASS_NAME} {
+    ${scope} .${exports.OBJECTFIT_CONTAIN_CLASS_NAME} {
       object-fit: contain;
     }
   `;

package/dist/cjs/delay-render.js

@@ -92,13 +92,13 @@ const continueRenderInternal = (handle, environment) => {
                 const { label, startTime, timeout } = window.remotion_delayRenderTimeouts[handle];
                 clearTimeout(timeout);
                 const message = [
-                    label ? `delayRender() "${label}"` : 'A delayRender()',
+                    label ? `"${label}"` : 'A handle',
                     exports.DELAY_RENDER_CLEAR_TOKEN,
                     `${Date.now() - startTime}ms`,
                 ]
                     .filter(truthy_js_1.truthy)
                     .join(' ');
-                log_js_1.Log.verbose(window.remotion_logLevel, message);
+                log_js_1.Log.verbose({ logLevel: window.remotion_logLevel, tag: 'delayRender()' }, message);
                 delete window.remotion_delayRenderTimeouts[handle];
             }
             return false;

package/dist/cjs/freeze.js

@@ -53,6 +53,16 @@ const Freeze = ({ frame: frameToFreeze, children, active = true, }) => {
             },
         };
     }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
-    return ((0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineValue, children: children }));
+    const newSequenceContext = (0, react_1.useMemo)(() => {
+        if (!sequenceContext) {
+            return null;
+        }
+        return {
+            ...sequenceContext,
+            relativeFrom: 0,
+            cumulatedFrom: 0,
+        };
+    }, [sequenceContext]);
+    return ((0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineValue, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: newSequenceContext, children: children }) }));
 };
 exports.Freeze = Freeze;

package/dist/cjs/index.d.ts

@@ -48,6 +48,8 @@ declare global {
         remotion_inputProps: string;
         remotion_envVariables: string;
         remotion_isMainTab: boolean;
+        remotion_mediaCacheSizeInBytes: number | null;
+        remotion_initialMemoryAvailable: number | null;
         remotion_collectAssets: () => TRenderAsset[];
         remotion_isPlayer: boolean;
         remotion_isStudio: boolean;

package/dist/cjs/internals.d.ts

@@ -237,11 +237,26 @@ export declare const Internals: {
     readonly PROPS_UPDATED_EXTERNALLY: "remotion.propsUpdatedExternally";
     readonly validateRenderAsset: (artifact: TRenderAsset) => void;
     readonly Log: {
-        trace: (logLevel: import("./log.js").LogLevel, message?: any, ...optionalParams: any[]) => void;
-        verbose: (logLevel: import("./log.js").LogLevel, message?: any, ...optionalParams: any[]) => void;
-        info: (logLevel: import("./log.js").LogLevel, message?: any, ...optionalParams: any[]) => void;
-        warn: (logLevel: import("./log.js").LogLevel, message?: any, ...optionalParams: any[]) => void;
-        error: (message?: any, ...optionalParams: any[]) => void;
+        trace: (options: {
+            logLevel: import("./log.js").LogLevel;
+            tag: string | null;
+        }, message?: any, ...optionalParams: any[]) => void;
+        verbose: (options: {
+            logLevel: import("./log.js").LogLevel;
+            tag: string | null;
+        }, message?: any, ...optionalParams: any[]) => void;
+        info: (options: {
+            logLevel: import("./log.js").LogLevel;
+            tag: string | null;
+        }, message?: any, ...optionalParams: any[]) => void;
+        warn: (options: {
+            logLevel: import("./log.js").LogLevel;
+            tag: string | null;
+        }, message?: any, ...optionalParams: any[]) => void;
+        error: (options: {
+            logLevel: import("./log.js").LogLevel;
+            tag: string | null;
+        }, message?: any, ...optionalParams: any[]) => void;
     };
     readonly LogLevelContext: import("react").Context<LoggingContextValue>;
     readonly useLogLevel: () => import("./log.js").LogLevel;
@@ -292,5 +307,6 @@ export declare const Internals: {
         readonly stack?: string | undefined;
         readonly onNativeError: React.ReactEventHandler<HTMLAudioElement>;
     }, "ref"> & import("react").RefAttributes<HTMLAudioElement>>;
+    readonly OBJECTFIT_CONTAIN_CLASS_NAME: "__remotion_objectfitcontain";
 };
 export type { CompositionManagerContext, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -44,6 +44,7 @@ const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManager_js_1 = require("./CompositionManager.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const CSSUtils = __importStar(require("./default-css.js"));
+const default_css_js_1 = require("./default-css.js");
 const EditorProps_js_1 = require("./EditorProps.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
@@ -167,4 +168,5 @@ exports.Internals = {
     RemotionEnvironmentContext: remotion_environment_context_js_1.RemotionEnvironmentContext,
     warnAboutTooHighVolume: volume_safeguard_js_1.warnAboutTooHighVolume,
     AudioForPreview: AudioForPreview_js_1.AudioForPreview,
+    OBJECTFIT_CONTAIN_CLASS_NAME: default_css_js_1.OBJECTFIT_CONTAIN_CLASS_NAME,
 };

package/dist/cjs/log.d.ts

@@ -1,10 +1,15 @@
 export declare const logLevels: readonly ["trace", "verbose", "info", "warn", "error"];
 export type LogLevel = (typeof logLevels)[number];
 export declare const isEqualOrBelowLogLevel: (currentLevel: LogLevel, level: LogLevel) => boolean;
+type Options = {
+    logLevel: LogLevel;
+    tag: string | null;
+};
 export declare const Log: {
-    trace: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
-    verbose: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
-    info: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
-    warn: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
-    error: (message?: any, ...optionalParams: any[]) => void;
+    trace: (options: Options, message?: any, ...optionalParams: any[]) => void;
+    verbose: (options: Options, message?: any, ...optionalParams: any[]) => void;
+    info: (options: Options, message?: any, ...optionalParams: any[]) => void;
+    warn: (options: Options, message?: any, ...optionalParams: any[]) => void;
+    error: (options: Options, message?: any, ...optionalParams: any[]) => void;
 };
+export {};

package/dist/cjs/log.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Log = exports.isEqualOrBelowLogLevel = exports.logLevels = void 0;
+const get_remotion_environment_1 = require("./get-remotion-environment");
 /* eslint-disable no-console */
 exports.logLevels = ['trace', 'verbose', 'info', 'warn', 'error'];
 const getNumberForLogLevel = (level) => {
@@ -10,28 +11,44 @@ const isEqualOrBelowLogLevel = (currentLevel, level) => {
     return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
 };
 exports.isEqualOrBelowLogLevel = isEqualOrBelowLogLevel;
+const transformArgs = ({ args, logLevel, tag, }) => {
+    const arr = [...args];
+    if ((0, get_remotion_environment_1.getRemotionEnvironment)().isRendering &&
+        !(0, get_remotion_environment_1.getRemotionEnvironment)().isClientSideRendering) {
+        arr.unshift(Symbol.for(`__remotion_level_${logLevel}`));
+    }
+    if (tag) {
+        arr.unshift(Symbol.for(`__remotion_tag_${tag}`));
+    }
+    return arr;
+};
+const verbose = (options, ...args) => {
+    if ((0, exports.isEqualOrBelowLogLevel)(options.logLevel, 'verbose')) {
+        return console.debug(...transformArgs({ args, logLevel: 'verbose', tag: options.tag }));
+    }
+};
+const trace = (options, ...args) => {
+    if ((0, exports.isEqualOrBelowLogLevel)(options.logLevel, 'trace')) {
+        return console.debug(...transformArgs({ args, logLevel: 'trace', tag: options.tag }));
+    }
+};
+const info = (options, ...args) => {
+    if ((0, exports.isEqualOrBelowLogLevel)(options.logLevel, 'info')) {
+        return console.log(...transformArgs({ args, logLevel: 'info', tag: options.tag }));
+    }
+};
+const warn = (options, ...args) => {
+    if ((0, exports.isEqualOrBelowLogLevel)(options.logLevel, 'warn')) {
+        return console.warn(...transformArgs({ args, logLevel: 'warn', tag: options.tag }));
+    }
+};
+const error = (options, ...args) => {
+    return console.error(...transformArgs({ args, logLevel: 'error', tag: options.tag }));
+};
 exports.Log = {
-    trace: (logLevel, ...args) => {
-        if ((0, exports.isEqualOrBelowLogLevel)(logLevel, 'trace')) {
-            return console.log(...args);
-        }
-    },
-    verbose: (logLevel, ...args) => {
-        if ((0, exports.isEqualOrBelowLogLevel)(logLevel, 'verbose')) {
-            return console.log(...args);
-        }
-    },
-    info: (logLevel, ...args) => {
-        if ((0, exports.isEqualOrBelowLogLevel)(logLevel, 'info')) {
-            return console.log(...args);
-        }
-    },
-    warn: (logLevel, ...args) => {
-        if ((0, exports.isEqualOrBelowLogLevel)(logLevel, 'warn')) {
-            return console.warn(...args);
-        }
-    },
-    error: (...args) => {
-        return console.error(...args);
-    },
+    trace,
+    verbose,
+    info,
+    warn,
+    error,
 };

package/dist/cjs/playback-logging.js

@@ -6,6 +6,6 @@ const playbackLogging = ({ logLevel, tag, message, mountTime, }) => {
     const tags = [mountTime ? Date.now() - mountTime + 'ms ' : null, tag]
         .filter(Boolean)
         .join(' ');
-    log_1.Log.trace(logLevel, `[${tags}]`, message);
+    log_1.Log.trace({ logLevel, tag: null }, `[${tags}]`, message);
 };
 exports.playbackLogging = playbackLogging;

package/dist/cjs/prefetch.js

@@ -87,7 +87,7 @@ const prefetch = (src, options) => {
             waitUntilDone: () => Promise.resolve(srcWithoutHash),
         };
     }
-    log_js_1.Log.verbose(logLevel, `[prefetch] Starting prefetch ${srcWithoutHash}`);
+    log_js_1.Log.verbose({ logLevel, tag: 'prefetch' }, `Starting prefetch ${srcWithoutHash}`);
     let canceled = false;
     let objectUrl = null;
     let resolve = () => undefined;

package/dist/cjs/use-amplification.js

@@ -12,9 +12,9 @@ const warnSafariOnce = (logLevel) => {
         return;
     }
     warned = true;
-    log_1.Log.warn(logLevel, 'In Safari, setting a volume and a playback rate at the same time is buggy.');
-    log_1.Log.warn(logLevel, 'In Desktop Safari, only volumes <= 1 will be applied.');
-    log_1.Log.warn(logLevel, 'In Mobile Safari, the volume will be ignored and set to 1 if a playbackRate is set.');
+    log_1.Log.warn({ logLevel, tag: null }, 'In Safari, setting a volume and a playback rate at the same time is buggy.');
+    log_1.Log.warn({ logLevel, tag: null }, 'In Desktop Safari, only volumes <= 1 will be applied.');
+    log_1.Log.warn({ logLevel, tag: null }, logLevel, 'In Mobile Safari, the volume will be ignored and set to 1 if a playbackRate is set.');
 };
 /**
  * [1] Bug case: In Safari, you cannot combine playbackRate and volume !== 1.
@@ -60,7 +60,7 @@ const useVolume = ({ mediaRef, volume, logLevel, source, shouldUseWebAudioApi, }
             audioStuffRef.current = {
                 gainNode,
             };
-            log_1.Log.trace(logLevel, `Starting to amplify ${(_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.src}. Gain = ${currentVolumeRef.current}, playbackRate = ${(_b = mediaRef.current) === null || _b === void 0 ? void 0 : _b.playbackRate}`);
+            log_1.Log.trace({ logLevel, tag: null }, `Starting to amplify ${(_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.src}. Gain = ${currentVolumeRef.current}, playbackRate = ${(_b = mediaRef.current) === null || _b === void 0 ? void 0 : _b.playbackRate}`);
             return () => {
                 audioStuffRef.current = null;
                 gainNode.disconnect();
@@ -72,7 +72,7 @@ const useVolume = ({ mediaRef, volume, logLevel, source, shouldUseWebAudioApi, }
         const valueToSet = volume;
         if (!(0, is_approximately_the_same_1.isApproximatelyTheSame)(audioStuffRef.current.gainNode.gain.value, valueToSet)) {
             audioStuffRef.current.gainNode.gain.value = valueToSet;
-            log_1.Log.trace(logLevel, `Setting gain to ${valueToSet} for ${(_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.src}`);
+            log_1.Log.trace({ logLevel, tag: null }, `Setting gain to ${valueToSet} for ${(_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.src}`);
         }
     }
     const safariCase = (0, video_fragment_1.isSafari)() && mediaRef.current && ((_b = mediaRef.current) === null || _b === void 0 ? void 0 : _b.playbackRate) !== 1;

package/dist/cjs/use-media-playback.js

@@ -42,7 +42,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (isVariableFpsVideoMap.current[src]) {
             return;
         }
-        log_js_1.Log.verbose(logLevel, `Detected ${src} as a variable FPS video. Disabling buffering while seeking.`);
+        log_js_1.Log.verbose({ logLevel, tag: null }, `Detected ${src} as a variable FPS video. Disabling buffering while seeking.`);
         isVariableFpsVideoMap.current[src] = true;
     }, [logLevel, src]);
     const rvcCurrentTime = (0, use_request_video_callback_time_js_1.useRequestVideoCallbackTime)({

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.351";
+export declare const VERSION = "4.0.353";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.351';
+exports.VERSION = '4.0.353';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -193,7 +193,7 @@ crossOrigin, audioStreamIndex, ...props }) => {
         }
     }, [imageSrc, onError]);
     const className = (0, react_1.useMemo)(() => {
-        return [default_css_js_1.OFFTHREAD_VIDEO_CLASS_NAME, props.className]
+        return [default_css_js_1.OBJECTFIT_CONTAIN_CLASS_NAME, props.className]
             .filter(truthy_js_1.truthy)
             .join(' ');
     }, [props.className]);

package/dist/esm/index.mjs

@@ -105,7 +105,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.351";
+var VERSION = "4.0.353";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1332,9 +1332,22 @@ var Freeze = ({
       }
     };
   }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
+  const newSequenceContext = useMemo8(() => {
+    if (!sequenceContext) {
+      return null;
+    }
+    return {
+      ...sequenceContext,
+      relativeFrom: 0,
+      cumulatedFrom: 0
+    };
+  }, [sequenceContext]);
   return /* @__PURE__ */ jsx7(TimelineContext.Provider, {
     value: timelineValue,
-    children
+    children: /* @__PURE__ */ jsx7(SequenceContext.Provider, {
+      value: newSequenceContext,
+      children
+    })
   });
 };
 
@@ -1617,31 +1630,50 @@ var getNumberForLogLevel = (level) => {
 var isEqualOrBelowLogLevel = (currentLevel, level) => {
   return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
 };
-var Log = {
-  trace: (logLevel, ...args) => {
-    if (isEqualOrBelowLogLevel(logLevel, "trace")) {
-      return console.log(...args);
-    }
-  },
-  verbose: (logLevel, ...args) => {
-    if (isEqualOrBelowLogLevel(logLevel, "verbose")) {
-      return console.log(...args);
-    }
-  },
-  info: (logLevel, ...args) => {
-    if (isEqualOrBelowLogLevel(logLevel, "info")) {
-      return console.log(...args);
-    }
-  },
-  warn: (logLevel, ...args) => {
-    if (isEqualOrBelowLogLevel(logLevel, "warn")) {
-      return console.warn(...args);
-    }
-  },
-  error: (...args) => {
-    return console.error(...args);
+var transformArgs = ({
+  args,
+  logLevel,
+  tag
+}) => {
+  const arr = [...args];
+  if (getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
+    arr.unshift(Symbol.for(`__remotion_level_${logLevel}`));
+  }
+  if (tag) {
+    arr.unshift(Symbol.for(`__remotion_tag_${tag}`));
+  }
+  return arr;
+};
+var verbose = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "verbose")) {
+    return console.debug(...transformArgs({ args, logLevel: "verbose", tag: options.tag }));
+  }
+};
+var trace = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "trace")) {
+    return console.debug(...transformArgs({ args, logLevel: "trace", tag: options.tag }));
   }
 };
+var info = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "info")) {
+    return console.log(...transformArgs({ args, logLevel: "info", tag: options.tag }));
+  }
+};
+var warn = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "warn")) {
+    return console.warn(...transformArgs({ args, logLevel: "warn", tag: options.tag }));
+  }
+};
+var error = (options, ...args) => {
+  return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
+};
+var Log = {
+  trace,
+  verbose,
+  info,
+  warn,
+  error
+};
 
 // src/delay-render.ts
 if (typeof window !== "undefined") {
@@ -1709,11 +1741,11 @@ var continueRenderInternal = (handle, environment) => {
         const { label, startTime, timeout } = window.remotion_delayRenderTimeouts[handle];
         clearTimeout(timeout);
         const message = [
-          label ? `delayRender() "${label}"` : "A delayRender()",
+          label ? `"${label}"` : "A handle",
           DELAY_RENDER_CLEAR_TOKEN,
           `${Date.now() - startTime}ms`
         ].filter(truthy).join(" ");
-        Log.verbose(window.remotion_logLevel, message);
+        Log.verbose({ logLevel: window.remotion_logLevel, tag: "delayRender()" }, message);
         delete window.remotion_delayRenderTimeouts[handle];
       }
       return false;
@@ -2347,7 +2379,7 @@ var playbackLogging = ({
   mountTime
 }) => {
   const tags = [mountTime ? Date.now() - mountTime + "ms " : null, tag].filter(Boolean).join(" ");
-  Log.trace(logLevel, `[${tags}]`, message);
+  Log.trace({ logLevel, tag: null }, `[${tags}]`, message);
 };
 
 // src/prefetch-state.tsx
@@ -2458,7 +2490,7 @@ var prefetch = (src, options) => {
       waitUntilDone: () => Promise.resolve(srcWithoutHash)
     };
   }
-  Log.verbose(logLevel, `[prefetch] Starting prefetch ${srcWithoutHash}`);
+  Log.verbose({ logLevel, tag: "prefetch" }, `Starting prefetch ${srcWithoutHash}`);
   let canceled = false;
   let objectUrl = null;
   let resolve = () => {
@@ -2893,7 +2925,7 @@ var warnOnce = (logLevel) => {
   }
   warned = true;
   if (typeof window !== "undefined") {
-    Log.warn(logLevel, "AudioContext is not supported in this browser");
+    Log.warn({ logLevel, tag: null }, "AudioContext is not supported in this browser");
   }
 };
 var useSingletonAudioContext = (logLevel, latencyHint) => {
@@ -3272,9 +3304,9 @@ var warnSafariOnce = (logLevel) => {
     return;
   }
   warned2 = true;
-  Log.warn(logLevel, "In Safari, setting a volume and a playback rate at the same time is buggy.");
-  Log.warn(logLevel, "In Desktop Safari, only volumes <= 1 will be applied.");
-  Log.warn(logLevel, "In Mobile Safari, the volume will be ignored and set to 1 if a playbackRate is set.");
+  Log.warn({ logLevel, tag: null }, "In Safari, setting a volume and a playback rate at the same time is buggy.");
+  Log.warn({ logLevel, tag: null }, "In Desktop Safari, only volumes <= 1 will be applied.");
+  Log.warn({ logLevel, tag: null }, logLevel, "In Mobile Safari, the volume will be ignored and set to 1 if a playbackRate is set.");
 };
 var useVolume = ({
   mediaRef,
@@ -3318,7 +3350,7 @@ var useVolume = ({
       audioStuffRef.current = {
         gainNode
       };
-      Log.trace(logLevel, `Starting to amplify ${mediaRef.current?.src}. Gain = ${currentVolumeRef.current}, playbackRate = ${mediaRef.current?.playbackRate}`);
+      Log.trace({ logLevel, tag: null }, `Starting to amplify ${mediaRef.current?.src}. Gain = ${currentVolumeRef.current}, playbackRate = ${mediaRef.current?.playbackRate}`);
       return () => {
         audioStuffRef.current = null;
         gainNode.disconnect();
@@ -3330,7 +3362,7 @@ var useVolume = ({
     const valueToSet = volume;
     if (!isApproximatelyTheSame(audioStuffRef.current.gainNode.gain.value, valueToSet)) {
       audioStuffRef.current.gainNode.gain.value = valueToSet;
-      Log.trace(logLevel, `Setting gain to ${valueToSet} for ${mediaRef.current?.src}`);
+      Log.trace({ logLevel, tag: null }, `Setting gain to ${valueToSet} for ${mediaRef.current?.src}`);
     }
   }
   const safariCase = isSafari() && mediaRef.current && mediaRef.current?.playbackRate !== 1;
@@ -3755,8 +3787,8 @@ var useBufferUntilFirstFrame = ({
     const onEndedOrPauseOrCanPlay = () => {
       unblock();
     };
-    current.requestVideoFrameCallback((_, info) => {
-      const differenceFromRequested = Math.abs(info.mediaTime - requestedTime);
+    current.requestVideoFrameCallback((_, info2) => {
+      const differenceFromRequested = Math.abs(info2.mediaTime - requestedTime);
       if (differenceFromRequested > 0.5) {
         onVariableFpsVideoDetected();
       }
@@ -3995,16 +4027,16 @@ var useRequestVideoCallbackTime = ({
       if (!videoTag) {
         return;
       }
-      const cb = videoTag.requestVideoFrameCallback((_, info) => {
+      const cb = videoTag.requestVideoFrameCallback((_, info2) => {
         if (currentTime.current !== null) {
-          const difference = Math.abs(currentTime.current.time - info.mediaTime);
-          const differenceToLastSeek = Math.abs(lastSeek.current === null ? Infinity : info.mediaTime - lastSeek.current);
-          if (difference > 0.5 && differenceToLastSeek > 0.5 && info.mediaTime > currentTime.current.time) {
+          const difference = Math.abs(currentTime.current.time - info2.mediaTime);
+          const differenceToLastSeek = Math.abs(lastSeek.current === null ? Infinity : info2.mediaTime - lastSeek.current);
+          if (difference > 0.5 && differenceToLastSeek > 0.5 && info2.mediaTime > currentTime.current.time) {
             onVariableFpsVideoDetected();
           }
         }
         currentTime.current = {
-          time: info.mediaTime,
+          time: info2.mediaTime,
           lastUpdate: performance.now()
         };
         request();
@@ -4219,7 +4251,7 @@ var useMediaPlayback = ({
     if (isVariableFpsVideoMap.current[src]) {
       return;
     }
-    Log.verbose(logLevel, `Detected ${src} as a variable FPS video. Disabling buffering while seeking.`);
+    Log.verbose({ logLevel, tag: null }, `Detected ${src} as a variable FPS video. Disabling buffering while seeking.`);
     isVariableFpsVideoMap.current[src] = true;
   }, [logLevel, src]);
   const rvcCurrentTime = useRequestVideoCallbackTime({
@@ -5740,7 +5772,7 @@ var exports_default_css = {};
 __export(exports_default_css, {
   makeDefaultPreviewCSS: () => makeDefaultPreviewCSS,
   injectCSS: () => injectCSS,
-  OFFTHREAD_VIDEO_CLASS_NAME: () => OFFTHREAD_VIDEO_CLASS_NAME
+  OBJECTFIT_CONTAIN_CLASS_NAME: () => OBJECTFIT_CONTAIN_CLASS_NAME
 });
 var injected = {};
 var injectCSS = (css) => {
@@ -5756,7 +5788,7 @@ var injectCSS = (css) => {
   head.prepend(style);
   injected[css] = true;
 };
-var OFFTHREAD_VIDEO_CLASS_NAME = "__remotion_offthreadvideo";
+var OBJECTFIT_CONTAIN_CLASS_NAME = "__remotion_objectfitcontain";
 var makeDefaultPreviewCSS = (scope, backgroundColor) => {
   if (!scope) {
     return `
@@ -5767,7 +5799,7 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
       margin: 0;
 	    background-color: ${backgroundColor};
     }
-    .${OFFTHREAD_VIDEO_CLASS_NAME} {
+    .${OBJECTFIT_CONTAIN_CLASS_NAME} {
       object-fit: contain;
     }
     `;
@@ -5780,7 +5812,7 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
       width: 100%;
       height: 100%;
     }
-    ${scope} .${OFFTHREAD_VIDEO_CLASS_NAME} {
+    ${scope} .${OBJECTFIT_CONTAIN_CLASS_NAME} {
       object-fit: contain;
     }
   `;
@@ -6484,7 +6516,8 @@ var Internals = {
   compositionSelectorRef,
   RemotionEnvironmentContext,
   warnAboutTooHighVolume,
-  AudioForPreview
+  AudioForPreview,
+  OBJECTFIT_CONTAIN_CLASS_NAME
 };
 // src/interpolate-colors.ts
 var NUMBER = "[-+]?\\d*\\.?\\d+";
@@ -7509,7 +7542,7 @@ var OffthreadVideoForRendering = ({
     }
   }, [imageSrc, onError]);
   const className = useMemo29(() => {
-    return [OFFTHREAD_VIDEO_CLASS_NAME, props2.className].filter(truthy).join(" ");
+    return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback15((img) => {
     if (onVideoFrame) {

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.351";
+var VERSION = "4.0.353";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
   },
   "name": "remotion",
-  "version": "4.0.351",
+  "version": "4.0.353",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.351"
+    "@remotion/eslint-config-internal": "4.0.353"
   },
   "keywords": [
     "video",

package/dist/cjs/video/use-audio-channel-index.d.ts

@@ -1,4 +0,0 @@
-export declare const useAudioChannelIndex: ({ ref, audioChannelIndex, }: {
-    ref: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>;
-    audioChannelIndex: number;
-}) => void;

package/dist/cjs/video/use-audio-channel-index.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAudioChannelIndex = void 0;
-const react_1 = require("react");
-const useAudioChannelIndex = ({ ref, audioChannelIndex, }) => {
-    (0, react_1.useEffect)(() => {
-        var _a;
-        // @ts-expect-error
-        const audioChannels = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.audioTracks;
-        console.log({ audioChannels, audioChannelIndex });
-    }, [ref, audioChannelIndex]);
-};
-exports.useAudioChannelIndex = useAudioChannelIndex;