remotion 4.0.285 → 4.0.287

package/dist/cjs/CompositionManager.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionManagerProvider = exports.compositionsRef = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/cjs/EditorProps.d.ts

@@ -1,3 +1,4 @@
+import type { SyntheticEvent } from 'react';
 import React from 'react';
 type Props = Record<string, Record<string, unknown>>;
 export type EditorPropsContextType = {
@@ -17,6 +18,9 @@ export declare const editorPropsProviderRef: React.RefObject<{
 export declare const timeValueRef: React.RefObject<{
     goToFrame: () => void;
     seek: (newFrame: number) => void;
+    play: (e?: SyntheticEvent | PointerEvent) => void;
+    pause: () => void;
+    toggle: (e?: SyntheticEvent | PointerEvent) => void;
 } | null>;
 export declare const EditorPropsProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/cjs/EditorProps.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorPropsProvider = exports.timeValueRef = exports.editorPropsProviderRef = exports.EditorPropsContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/cjs/Sequence.js

@@ -51,8 +51,9 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
     const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
     const premounting = (0, react_1.useMemo)(() => {
-        var _a;
-        return ((_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting) !== null && _a !== void 0 ? _a : Boolean(other._remotionInternalIsPremounting));
+        // || is intentional, ?? would not trigger on `false`
+        return ((parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting) ||
+            Boolean(other._remotionInternalIsPremounting));
     }, [other._remotionInternalIsPremounting, parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting]);
     const contextValue = (0, react_1.useMemo)(() => {
         var _a, _b, _c;

package/dist/cjs/SequenceManager.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequenceManagerProvider = exports.SequenceVisibilityToggleContext = exports.SequenceManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/cjs/animated-image/canvas.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/cjs/audio/shared-audio-tags.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSharedAudio = exports.SharedAudioContextProvider = exports.SharedAudioContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/cjs/buffering.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsPlayerBuffering = exports.BufferingProvider = exports.BufferingContextReact = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/cjs/internals.d.ts

@@ -19,7 +19,7 @@ export declare const Internals: {
     readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
     readonly SequenceVisibilityToggleContext: import("react").Context<import("./SequenceManager.js").SequenceVisibilityToggleState>;
     readonly RemotionRoot: import("react").FC<{
-        readonly children: import("react").ReactNode;
+        readonly children: React.ReactNode;
         readonly numberOfAudioTags: number;
         readonly logLevel: import("./log.js").LogLevel;
         readonly onlyRenderComposition: string | null;
@@ -51,7 +51,7 @@ export declare const Internals: {
         registerAudio: (aud: import("./index.js").RemotionAudioProps, audioId: string) => {
             id: number;
             props: import("./index.js").RemotionAudioProps;
-            el: import("react").RefObject<HTMLAudioElement | null>;
+            el: React.RefObject<HTMLAudioElement | null>;
             audioId: string;
         };
         unregisterAudio: (id: number) => void;
@@ -65,7 +65,7 @@ export declare const Internals: {
     } | null>;
     readonly SharedAudioContextProvider: import("react").FC<{
         readonly numberOfAudioTags: number;
-        readonly children: import("react").ReactNode;
+        readonly children: React.ReactNode;
         readonly component: import("react").LazyExoticComponent<import("react").ComponentType<Record<string, unknown>>> | null;
     }>;
     readonly invalidCompositionErrorMessage: string;
@@ -75,23 +75,23 @@ export declare const Internals: {
         getCompositions: () => import("./CompositionManager.js").AnyComposition[];
     } | null>;
     readonly portalNode: () => HTMLElement;
-    readonly waitForRoot: (fn: (comp: import("react").FC) => void) => (() => void);
+    readonly waitForRoot: (fn: (comp: React.FC) => void) => (() => void);
     readonly CanUseRemotionHooksProvider: import("react").FC<{
-        readonly children: import("react").ReactNode;
+        readonly children: React.ReactNode;
     }>;
     readonly CanUseRemotionHooks: import("react").Context<boolean>;
     readonly PrefetchProvider: import("react").FC<{
-        readonly children: import("react").ReactNode;
+        readonly children: React.ReactNode;
     }>;
     readonly DurationsContextProvider: import("react").FC<{
-        readonly children: import("react").ReactNode;
+        readonly children: React.ReactNode;
     }>;
     readonly IsPlayerContextProvider: import("react").FC<{
         children?: import("react").ReactNode | undefined;
     }>;
     readonly useIsPlayer: () => boolean;
     readonly EditorPropsProvider: import("react").FC<{
-        readonly children: import("react").ReactNode;
+        readonly children: React.ReactNode;
     }>;
     readonly EditorPropsContext: import("react").Context<import("./EditorProps.js").EditorPropsContextType>;
     readonly usePreload: (src: string) => string;
@@ -137,7 +137,7 @@ export declare const Internals: {
     readonly addSequenceStackTraces: (component: unknown) => void;
     readonly useMediaStartsAt: () => number;
     readonly BufferingProvider: import("react").FC<{
-        readonly children: import("react").ReactNode;
+        readonly children: React.ReactNode;
     }>;
     readonly BufferingContextReact: import("react").Context<{
         addBlock: (block: {
@@ -151,7 +151,7 @@ export declare const Internals: {
         listenForResume: (callback: () => void) => {
             remove: () => void;
         };
-        buffering: import("react").MutableRefObject<boolean>;
+        buffering: React.MutableRefObject<boolean>;
     } | null>;
     readonly enableSequenceStackTraces: () => void;
     readonly CurrentScaleContext: import("react").Context<import("./use-current-scale.js").CurrentScaleContextType | null>;
@@ -169,18 +169,18 @@ export declare const Internals: {
         getProps: () => {
             [x: string]: Record<string, unknown>;
         };
-        setProps: import("react").Dispatch<import("react").SetStateAction<{
+        setProps: React.Dispatch<React.SetStateAction<{
             [x: string]: Record<string, unknown>;
         }>>;
     } | null>;
     readonly PROPS_UPDATED_EXTERNALLY: "remotion.propsUpdatedExternally";
     readonly validateRenderAsset: (artifact: TRenderAsset) => void;
     readonly Log: {
-        trace: (logLevel: import("./log.js").LogLevel, ...args: Parameters<typeof console.log>) => void;
-        verbose: (logLevel: import("./log.js").LogLevel, ...args: Parameters<typeof console.log>) => void;
-        info: (logLevel: import("./log.js").LogLevel, ...args: Parameters<typeof console.log>) => void;
-        warn: (logLevel: import("./log.js").LogLevel, ...args: Parameters<typeof console.log>) => void;
-        error: (...args: Parameters<typeof console.log>) => void;
+        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;
     };
     readonly LogLevelContext: import("react").Context<LoggingContextValue>;
     readonly useLogLevel: () => import("./log.js").LogLevel;
@@ -193,6 +193,14 @@ export declare const Internals: {
     readonly timeValueRef: import("react").RefObject<{
         goToFrame: () => void;
         seek: (newFrame: number) => void;
+        play: (e?: import("react").SyntheticEvent | PointerEvent) => void;
+        pause: () => void;
+        toggle: (e?: import("react").SyntheticEvent | PointerEvent) => void;
+    } | null>;
+    readonly compositionSelectorRef: import("react").RefObject<{
+        expandComposition: (compName: string) => void;
+        selectComposition: (compName: string) => void;
+        toggleFolder: (folderName: string, parentName: string | null) => void;
     } | null>;
 };
 export type { CompositionManagerContext, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -15,15 +15,26 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Internals = void 0;
+const react_1 = require("react");
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const buffering_js_1 = require("./buffering.js");
@@ -65,6 +76,8 @@ const video_fragment_js_1 = require("./video/video-fragment.js");
 const volume_position_state_js_1 = require("./volume-position-state.js");
 const watch_static_file_js_1 = require("./watch-static-file.js");
 const wrap_remotion_context_js_1 = require("./wrap-remotion-context.js");
+// needs to be in core package so gets deduplicated in studio
+const compositionSelectorRef = (0, react_1.createRef)();
 // Mark them as Internals so use don't assume this is public
 // API and are less likely to use it
 exports.Internals = {
@@ -133,4 +146,5 @@ exports.Internals = {
     useLogLevel: log_level_context_js_1.useLogLevel,
     playbackLogging: playback_logging_js_1.playbackLogging,
     timeValueRef: EditorProps_js_1.timeValueRef,
+    compositionSelectorRef,
 };

package/dist/cjs/log.d.ts

@@ -2,9 +2,9 @@ export declare const logLevels: readonly ["trace", "verbose", "info", "warn", "e
 export type LogLevel = (typeof logLevels)[number];
 export declare const isEqualOrBelowLogLevel: (currentLevel: LogLevel, level: LogLevel) => boolean;
 export declare const Log: {
-    trace: (logLevel: LogLevel, ...args: Parameters<typeof console.log>) => void;
-    verbose: (logLevel: LogLevel, ...args: Parameters<typeof console.log>) => void;
-    info: (logLevel: LogLevel, ...args: Parameters<typeof console.log>) => void;
-    warn: (logLevel: LogLevel, ...args: Parameters<typeof console.log>) => void;
-    error: (...args: Parameters<typeof console.log>) => void;
+    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;
 };

package/dist/cjs/loop/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loop = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/cjs/prefetch.d.ts

@@ -1,4 +1,6 @@
 import type { LogLevel } from './log.js';
+export declare const removeAndGetHashFragment: (src: string) => number | null;
+export declare const getSrcWithoutHash: (src: string) => string;
 export declare const usePreload: (src: string) => string;
 type FetchAndPreload = {
     free: () => void;

package/dist/cjs/prefetch.js

@@ -1,15 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prefetch = exports.usePreload = void 0;
+exports.prefetch = exports.usePreload = exports.getSrcWithoutHash = exports.removeAndGetHashFragment = void 0;
 const react_1 = require("react");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const log_js_1 = require("./log.js");
 const playback_logging_js_1 = require("./playback-logging.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
+const removeAndGetHashFragment = (src) => {
+    const hashIndex = src.indexOf('#');
+    if (hashIndex === -1) {
+        return null;
+    }
+    return hashIndex;
+};
+exports.removeAndGetHashFragment = removeAndGetHashFragment;
+const getSrcWithoutHash = (src) => {
+    const hashIndex = (0, exports.removeAndGetHashFragment)(src);
+    if (hashIndex === null) {
+        return src;
+    }
+    return src.slice(0, hashIndex);
+};
+exports.getSrcWithoutHash = getSrcWithoutHash;
 const usePreload = (src) => {
-    var _a;
     const preloads = (0, react_1.useContext)(prefetch_state_js_1.PreloadContext);
-    return (_a = preloads[src]) !== null && _a !== void 0 ? _a : src;
+    const hashFragmentIndex = (0, exports.removeAndGetHashFragment)(src);
+    const withoutHashFragment = (0, exports.getSrcWithoutHash)(src);
+    if (!preloads[withoutHashFragment]) {
+        return src;
+    }
+    if (hashFragmentIndex !== null) {
+        return preloads[withoutHashFragment] + src.slice(hashFragmentIndex);
+    }
+    return preloads[withoutHashFragment];
 };
 exports.usePreload = usePreload;
 const blobToBase64 = function (blob) {
@@ -57,13 +80,14 @@ const prefetch = (src, options) => {
     var _a, _b, _c;
     const method = (_a = options === null || options === void 0 ? void 0 : options.method) !== null && _a !== void 0 ? _a : 'blob-url';
     const logLevel = (_b = options === null || options === void 0 ? void 0 : options.logLevel) !== null && _b !== void 0 ? _b : 'info';
+    const srcWithoutHash = (0, exports.getSrcWithoutHash)(src);
     if ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering) {
         return {
             free: () => undefined,
-            waitUntilDone: () => Promise.resolve(src),
+            waitUntilDone: () => Promise.resolve(srcWithoutHash),
         };
     }
-    log_js_1.Log.verbose(logLevel, `[prefetch] Starting prefetch ${src}`);
+    log_js_1.Log.verbose(logLevel, `[prefetch] Starting prefetch ${srcWithoutHash}`);
     let canceled = false;
     let objectUrl = null;
     let resolve = () => undefined;
@@ -74,7 +98,7 @@ const prefetch = (src, options) => {
     });
     const controller = new AbortController();
     let canBeAborted = true;
-    fetch(src, {
+    fetch(srcWithoutHash, {
         signal: controller.signal,
         credentials: (_c = options === null || options === void 0 ? void 0 : options.credentials) !== null && _c !== void 0 ? _c : undefined,
     })
@@ -95,10 +119,10 @@ const prefetch = (src, options) => {
                 contentType.startsWith('image/'));
         if (!hasProperContentType) {
             // eslint-disable-next-line no-console
-            console.warn(`Called prefetch() on ${src} which returned a "Content-Type" of ${headerContentType}. Prefetched content should have a proper content type (video/... or audio/...) or a contentType passed the options of prefetch(). Otherwise, prefetching will not work properly in all browsers.`);
+            console.warn(`Called prefetch() on ${srcWithoutHash} which returned a "Content-Type" of ${headerContentType}. Prefetched content should have a proper content type (video/... or audio/...) or a contentType passed the options of prefetch(). Otherwise, prefetching will not work properly in all browsers.`);
         }
         if (!res.body) {
-            throw new Error(`HTTP response of ${src} has no body`);
+            throw new Error(`HTTP response of ${srcWithoutHash} has no body`);
         }
         const reader = res.body.getReader();
         return getBlobFromReader({
@@ -129,13 +153,13 @@ const prefetch = (src, options) => {
         (0, playback_logging_js_1.playbackLogging)({
             logLevel,
             tag: 'prefetch',
-            message: `Finished prefetch ${src} with method ${method}`,
+            message: `Finished prefetch ${srcWithoutHash} with method ${method}`,
             mountTime: null,
         });
         objectUrl = url;
         (0, prefetch_state_js_1.setPreloads)((p) => ({
             ...p,
-            [src]: objectUrl,
+            [srcWithoutHash]: objectUrl,
         }));
         resolve(objectUrl);
     })
@@ -150,7 +174,7 @@ const prefetch = (src, options) => {
             (0, playback_logging_js_1.playbackLogging)({
                 logLevel,
                 tag: 'prefetch',
-                message: `Freeing ${src}`,
+                message: `Freeing ${srcWithoutHash}`,
                 mountTime: null,
             });
             if (objectUrl) {
@@ -159,7 +183,7 @@ const prefetch = (src, options) => {
                 }
                 (0, prefetch_state_js_1.setPreloads)((p) => {
                     const copy = { ...p };
-                    delete copy[src];
+                    delete copy[srcWithoutHash];
                     return copy;
                 });
             }

package/dist/cjs/propagate.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/propagate.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ForwardOffthread = () => {
+    return ((0, jsx_runtime_1.jsx)(OffthreadVideo, { src: "https://assets.remotion.dev/sample-video.mp4", startFrom: 0, endAt: 100 }));
+};

package/dist/cjs/series/is-inside-series.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRequireToBeInsideSeries = exports.IsNotInsideSeriesProvider = exports.IsInsideSeriesContainer = exports.IsInsideSeriesContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/cjs/use-current-scale.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCurrentScale = exports.calculateScale = exports.PreviewSizeContext = exports.CurrentScaleContext = void 0;
 const react_1 = __importStar(require("react"));

package/dist/cjs/use-lazy-component.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLazyComponent = void 0;
 const react_1 = __importStar(require("react"));

package/dist/cjs/validate-media-props.d.ts

@@ -1,4 +1,4 @@
 import type { RemotionAudioProps } from './audio/index.js';
 import type { RemotionVideoProps } from './video/index.js';
-import type { OffthreadVideoProps } from './video/props.js';
-export declare const validateMediaProps: (props: RemotionVideoProps | RemotionAudioProps | OffthreadVideoProps, component: "Video" | "Audio") => void;
+import type { RemotionOffthreadVideoProps } from './video/props.js';
+export declare const validateMediaProps: (props: RemotionVideoProps | RemotionAudioProps | RemotionOffthreadVideoProps, component: "Video" | "Audio") => void;

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.285";
+export declare const VERSION = "4.0.287";

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.285';
+exports.VERSION = '4.0.287';

package/dist/cjs/video/OffthreadVideo.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { OffthreadVideoProps } from './props.js';
-export declare const OffthreadVideo: React.FC<OffthreadVideoProps>;
+import type { RemotionOffthreadVideoProps } from './props.js';
+export declare const OffthreadVideo: React.FC<RemotionOffthreadVideoProps>;

package/dist/cjs/video/OffthreadVideoForRendering.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { OffthreadVideoProps } from './props.js';
-export declare const OffthreadVideoForRendering: React.FC<OffthreadVideoProps>;
+import type { RemotionOffthreadVideoProps } from './props.js';
+export declare const OffthreadVideoForRendering: React.FC<RemotionOffthreadVideoProps>;

package/dist/cjs/video/VideoForPreview.js

@@ -84,8 +84,9 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     const duration = parentSequence
         ? Math.min(parentSequence.durationInFrames, durationInFrames)
         : durationInFrames;
+    const preloadedSrc = (0, prefetch_js_1.usePreload)(src);
     const actualSrc = (0, video_fragment_js_1.useAppendVideoFragment)({
-        actualSrc: (0, prefetch_js_1.usePreload)(src),
+        actualSrc: preloadedSrc,
         actualFrom,
         duration,
         fps,

package/dist/cjs/video/index.d.ts

@@ -1,3 +1,3 @@
 export { OffthreadVideo } from './OffthreadVideo.js';
-export type { RemotionMainVideoProps, OffthreadVideoProps as RemotionOffthreadVideoProps, RemotionVideoProps, } from './props';
+export type { RemotionOffthreadVideoProps as OffthreadVideoProps, RemotionMainVideoProps, RemotionOffthreadVideoProps, RemotionVideoProps, } from './props';
 export { Video } from './Video.js';

package/dist/cjs/video/props.d.ts

@@ -30,7 +30,7 @@ type DeprecatedOffthreadVideoProps = {
      */
     imageFormat?: never;
 };
-export type OffthreadVideoProps = {
+export type RemotionOffthreadVideoProps = {
     src: string;
     className?: string;
     name?: string;

package/dist/cjs/wrap-remotion-context.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RemotionContextProvider = void 0;
 exports.useRemotionContexts = useRemotionContexts;

package/dist/esm/index.mjs

@@ -104,7 +104,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.285";
+var VERSION = "4.0.287";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1287,7 +1287,7 @@ var RegularSequenceRefForwardingFunction = ({
   const { registerSequence, unregisterSequence } = useContext10(SequenceManager);
   const { hidden } = useContext10(SequenceVisibilityToggleContext);
   const premounting = useMemo9(() => {
-    return parentSequence?.premounting ?? Boolean(other._remotionInternalIsPremounting);
+    return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
   const contextValue = useMemo9(() => {
     return {
@@ -2195,9 +2195,31 @@ var PrefetchProvider = ({ children }) => {
 };
 
 // src/prefetch.ts
+var removeAndGetHashFragment = (src) => {
+  const hashIndex = src.indexOf("#");
+  if (hashIndex === -1) {
+    return null;
+  }
+  return hashIndex;
+};
+var getSrcWithoutHash = (src) => {
+  const hashIndex = removeAndGetHashFragment(src);
+  if (hashIndex === null) {
+    return src;
+  }
+  return src.slice(0, hashIndex);
+};
 var usePreload = (src) => {
   const preloads2 = useContext12(PreloadContext);
-  return preloads2[src] ?? src;
+  const hashFragmentIndex = removeAndGetHashFragment(src);
+  const withoutHashFragment = getSrcWithoutHash(src);
+  if (!preloads2[withoutHashFragment]) {
+    return src;
+  }
+  if (hashFragmentIndex !== null) {
+    return preloads2[withoutHashFragment] + src.slice(hashFragmentIndex);
+  }
+  return preloads2[withoutHashFragment];
 };
 var blobToBase64 = function(blob) {
   const reader = new FileReader;
@@ -2244,15 +2266,16 @@ var getBlobFromReader = async ({
 var prefetch = (src, options) => {
   const method = options?.method ?? "blob-url";
   const logLevel = options?.logLevel ?? "info";
+  const srcWithoutHash = getSrcWithoutHash(src);
   if (getRemotionEnvironment().isRendering) {
     return {
       free: () => {
         return;
       },
-      waitUntilDone: () => Promise.resolve(src)
+      waitUntilDone: () => Promise.resolve(srcWithoutHash)
     };
   }
-  Log.verbose(logLevel, `[prefetch] Starting prefetch ${src}`);
+  Log.verbose(logLevel, `[prefetch] Starting prefetch ${srcWithoutHash}`);
   let canceled = false;
   let objectUrl = null;
   let resolve = () => {
@@ -2267,7 +2290,7 @@ var prefetch = (src, options) => {
   });
   const controller = new AbortController;
   let canBeAborted = true;
-  fetch(src, {
+  fetch(srcWithoutHash, {
     signal: controller.signal,
     credentials: options?.credentials ?? undefined
   }).then((res) => {
@@ -2282,10 +2305,10 @@ var prefetch = (src, options) => {
     const contentType = options?.contentType ?? headerContentType;
     const hasProperContentType = contentType && (contentType.startsWith("video/") || contentType.startsWith("audio/") || contentType.startsWith("image/"));
     if (!hasProperContentType) {
-      console.warn(`Called prefetch() on ${src} which returned a "Content-Type" of ${headerContentType}. Prefetched content should have a proper content type (video/... or audio/...) or a contentType passed the options of prefetch(). Otherwise, prefetching will not work properly in all browsers.`);
+      console.warn(`Called prefetch() on ${srcWithoutHash} which returned a "Content-Type" of ${headerContentType}. Prefetched content should have a proper content type (video/... or audio/...) or a contentType passed the options of prefetch(). Otherwise, prefetching will not work properly in all browsers.`);
     }
     if (!res.body) {
-      throw new Error(`HTTP response of ${src} has no body`);
+      throw new Error(`HTTP response of ${srcWithoutHash} has no body`);
     }
     const reader = res.body.getReader();
     return getBlobFromReader({
@@ -2310,13 +2333,13 @@ var prefetch = (src, options) => {
     playbackLogging({
       logLevel,
       tag: "prefetch",
-      message: `Finished prefetch ${src} with method ${method}`,
+      message: `Finished prefetch ${srcWithoutHash} with method ${method}`,
       mountTime: null
     });
     objectUrl = url;
     setPreloads((p) => ({
       ...p,
-      [src]: objectUrl
+      [srcWithoutHash]: objectUrl
     }));
     resolve(objectUrl);
   }).catch((err) => {
@@ -2330,7 +2353,7 @@ var prefetch = (src, options) => {
       playbackLogging({
         logLevel,
         tag: "prefetch",
-        message: `Freeing ${src}`,
+        message: `Freeing ${srcWithoutHash}`,
         mountTime: null
       });
       if (objectUrl) {
@@ -2339,7 +2362,7 @@ var prefetch = (src, options) => {
         }
         setPreloads((p) => {
           const copy = { ...p };
-          delete copy[src];
+          delete copy[srcWithoutHash];
           return copy;
         });
       } else {
@@ -2347,8 +2370,7 @@ var prefetch = (src, options) => {
         if (canBeAborted) {
           try {
             controller.abort(new Error("free() called"));
-          } catch {
-          }
+          } catch {}
         }
       }
     },
@@ -3371,8 +3393,7 @@ function interpolateFunction(input, inputRange, outputRange, options) {
     } else if (extrapolateLeft === "wrap") {
       const range = inputMax - inputMin;
       result = ((result - inputMin) % range + range) % range + inputMin;
-    } else if (extrapolateLeft === "extend") {
-    }
+    } else if (extrapolateLeft === "extend") {}
   }
   if (result > inputMax) {
     if (extrapolateRight === "identity") {
@@ -3383,8 +3404,7 @@ function interpolateFunction(input, inputRange, outputRange, options) {
     } else if (extrapolateRight === "wrap") {
       const range = inputMax - inputMin;
       result = ((result - inputMin) % range + range) % range + inputMin;
-    } else if (extrapolateRight === "extend") {
-    }
+    } else if (extrapolateRight === "extend") {}
   }
   if (outputMin === outputMax) {
     return outputMin;
@@ -5109,6 +5129,9 @@ var ImgRefForwarding = ({
   });
 };
 var Img = forwardRef8(ImgRefForwarding);
+// src/internals.ts
+import { createRef as createRef3 } from "react";
+
 // src/CompositionManager.tsx
 import React22, {
   useCallback as useCallback14,
@@ -5443,8 +5466,7 @@ var getEnvVariables = () => {
     }
     return { ...JSON.parse(param), NODE_ENV: "production" };
   }
-  if (false) {
-  }
+  if (false) {}
   return {
     NODE_ENV: "production"
   };
@@ -5635,6 +5657,7 @@ var RemotionContextProvider = (props2) => {
 };
 
 // src/internals.ts
+var compositionSelectorRef = createRef3();
 var Internals = {
   useUnsafeVideoConfig,
   Timeline: exports_timeline_position_state,
@@ -5700,7 +5723,8 @@ var Internals = {
   LogLevelContext,
   useLogLevel,
   playbackLogging,
-  timeValueRef
+  timeValueRef,
+  compositionSelectorRef
 };
 // src/interpolate-colors.ts
 var NUMBER = "[-+]?\\d*\\.?\\d+";
@@ -6865,8 +6889,9 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   });
   const actualFrom = parentSequence ? parentSequence.relativeFrom : 0;
   const duration = parentSequence ? Math.min(parentSequence.durationInFrames, durationInFrames) : durationInFrames;
+  const preloadedSrc = usePreload(src);
   const actualSrc = useAppendVideoFragment({
-    actualSrc: usePreload(src),
+    actualSrc: preloadedSrc,
     actualFrom,
     duration,
     fps
@@ -7054,8 +7079,7 @@ var seekToTime = ({
   if (isApproximatelyTheSame(element.currentTime, desiredTime)) {
     return {
       wait: Promise.resolve(desiredTime),
-      cancel: () => {
-      }
+      cancel: () => {}
     };
   }
   seek({
@@ -7112,8 +7136,7 @@ var seekToTimeMultipleUntilRight = ({
   if (Number.isFinite(element.duration) && element.currentTime >= element.duration && desiredTime >= element.duration) {
     return {
       prom: Promise.resolve(),
-      cancel: () => {
-      }
+      cancel: () => {}
     };
   }
   const prom = new Promise((resolve, reject) => {
@@ -7394,8 +7417,7 @@ var VideoForwardingFunction = (props2, ref) => {
   const onDuration = useCallback17((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback17(() => {
-  }, []);
+  const onVideoFrame = useCallback17(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {

package/dist/esm/no-react.mjs

@@ -13,8 +13,7 @@ function interpolateFunction(input, inputRange, outputRange, options) {
     } else if (extrapolateLeft === "wrap") {
       const range = inputMax - inputMin;
       result = ((result - inputMin) % range + range) % range + inputMin;
-    } else if (extrapolateLeft === "extend") {
-    }
+    } else if (extrapolateLeft === "extend") {}
   }
   if (result > inputMax) {
     if (extrapolateRight === "identity") {
@@ -25,8 +24,7 @@ function interpolateFunction(input, inputRange, outputRange, options) {
     } else if (extrapolateRight === "wrap") {
       const range = inputMax - inputMin;
       result = ((result - inputMin) % range + range) % range + inputMin;
-    } else if (extrapolateRight === "extend") {
-    }
+    } else if (extrapolateRight === "extend") {}
   }
   if (outputMin === outputMax) {
     return outputMin;

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.285";
+var VERSION = "4.0.287";
 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.285",
+  "version": "4.0.287",
   "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.285"
+    "@remotion/eslint-config-internal": "4.0.287"
   },
   "keywords": [
     "remotion",