remotion 4.0.519 → 4.0.521

package/dist/cjs/use-media-in-timeline.js

@@ -5,10 +5,10 @@ const react_1 = require("react");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
 const get_timeline_duration_js_1 = require("./get-timeline-duration.js");
-const nonce_js_1 = require("./nonce.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const use_sequence_registration_js_1 = require("./use-sequence-registration.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const volume_prop_js_1 = require("./volume-prop.js");
 const didWarn = {};
@@ -63,14 +63,12 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
         }
     }, [initialVolume, mediaType, src, volume]);
     const doesVolumeChange = typeof volume === 'function';
-    const nonce = (0, nonce_js_1.useNonce)();
     const startMediaFrom = 0 - mediaStartsAt + (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0);
     const memoizedResult = (0, react_1.useMemo)(() => {
         return {
             volumes,
             duration,
             doesVolumeChange,
-            nonce,
             finalDisplayName: displayName !== null && displayName !== void 0 ? displayName : (0, get_asset_file_name_js_1.getAssetDisplayName)(src),
             startMediaFrom,
             src,
@@ -81,7 +79,6 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
         volumes,
         duration,
         doesVolumeChange,
-        nonce,
         displayName,
         src,
         startMediaFrom,
@@ -92,13 +89,13 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
 };
 exports.useBasicMediaInTimeline = useBasicMediaInTimeline;
 const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, muted, }) => {
+    var _a, _b;
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
-    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
     const sequenceRegistrationEnabled = (0, react_1.useContext)(SequenceManager_js_1.SequenceRegistrationContext);
     const { durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
-    const { volumes, duration, doesVolumeChange, nonce, finalDisplayName } = (0, exports.useBasicMediaInTimeline)({
+    const { volumes, duration, doesVolumeChange, finalDisplayName } = (0, exports.useBasicMediaInTimeline)({
         volume,
         mediaVolume,
         mediaType,
@@ -113,21 +110,12 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
         muted,
     });
     const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        var _c;
+    const getSequenceForRegistration = (0, react_1.useCallback)(() => {
+        var _a;
         if (!src) {
             throw new Error('No src passed');
         }
-        if (!isStudio &&
-            !sequenceRegistrationEnabled &&
-            ((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) !== 'test') {
-            return;
-        }
-        if (!showInTimeline) {
-            return;
-        }
-        registerSequence({
+        return {
             effectRuntimeValues: null,
             type: mediaType,
             src,
@@ -135,13 +123,13 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             duration,
             from: 0,
             trimBefore: null,
-            parent: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _c !== void 0 ? _c : null,
+            parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
             displayName: finalDisplayName,
             documentationLink,
             volume: volumes,
             muted,
             showInTimeline: true,
-            nonce: nonce.get(),
+            timelineOrder: null,
             startMediaFrom: 0 - startsAt,
             mediaFrameAtSequenceZero: null,
             doesVolumeChange,
@@ -156,34 +144,32 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             isInsideSeries: false,
             frozenFrame: null,
             frozenMediaFrame: null,
-        });
-        return () => {
-            unregisterSequence(id);
         };
     }, [
         duration,
         id,
         parentSequence,
         src,
-        registerSequence,
-        unregisterSequence,
         volumes,
         doesVolumeChange,
-        nonce,
         mediaType,
         startsAt,
         playbackRate,
         getStack,
-        showInTimeline,
         premountDisplay,
         postmountDisplay,
         loopDisplay,
         documentationLink,
         finalDisplayName,
-        isStudio,
-        sequenceRegistrationEnabled,
         refForOutline,
         muted,
     ]);
+    const registrationEnabled = isStudio ||
+        sequenceRegistrationEnabled ||
+        (typeof window !== 'undefined' && ((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) === 'test');
+    (0, use_sequence_registration_js_1.useSequenceRegistration)({
+        getSequence: registrationEnabled && showInTimeline ? getSequenceForRegistration : null,
+        id,
+    });
 };
 exports.useMediaInTimeline = useMediaInTimeline;

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

@@ -4,7 +4,6 @@ exports.useMediaPlayback = void 0;
 const react_1 = require("react");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const buffer_until_first_frame_js_1 = require("./buffer-until-first-frame.js");
-const buffering_js_1 = require("./buffering.js");
 const get_media_sync_action_js_1 = require("./get-media-sync-action.js");
 const log_level_context_js_1 = require("./log-level-context.js");
 const log_js_1 = require("./log.js");
@@ -13,6 +12,7 @@ const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-al
 const playback_logging_js_1 = require("./playback-logging.js");
 const seek_js_1 = require("./seek.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const use_buffering_js_1 = require("./use-buffering.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
 const use_media_buffering_js_1 = require("./use-media-buffering.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -20,21 +20,32 @@ const use_request_video_callback_time_js_1 = require("./use-request-video-callba
 const use_video_config_js_1 = require("./use-video-config.js");
 const get_current_time_js_1 = require("./video/get-current-time.js");
 const warn_about_non_seekable_media_js_1 = require("./warn-about-non-seekable-media.js");
+// In Safari, amplified media can lag behind by around 0.4 seconds.
+const DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION = 0.65;
+const getPauseReason = ({ reason, isPremounting, isPostmounting, }) => {
+    if (reason === 'buffering') {
+        return 'player is buffering but media tag is not';
+    }
+    if (isPremounting) {
+        return 'media is premounting';
+    }
+    if (isPostmounting) {
+        return 'media is postmounting';
+    }
+    return 'Player is not playing';
+};
 const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, preservePitch = true, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, isPostmounting, onAutoPlayError, }) => {
     const { playbackRate: globalPlaybackRate } = (0, timeline_position_state_js_1.usePlaybackRate)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
-    const [playing] = (0, timeline_position_state_js_1.usePlayingState)();
-    const buffering = (0, react_1.useContext)(buffering_js_1.BufferingContextReact);
+    const playing = (0, timeline_position_state_js_1.usePlaying)();
+    const playerBuffering = (0, use_buffering_js_1.useBuffering)();
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const lastSeekDueToShift = (0, react_1.useRef)(null);
     const lastSeek = (0, react_1.useRef)(null);
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const mountTime = (0, log_level_context_js_1.useMountTime)();
-    if (!buffering) {
-        throw new Error('useMediaPlayback must be used inside a <BufferingContext>');
-    }
     const isVariableFpsVideoMap = (0, react_1.useRef)({});
     const onVariableFpsVideoDetected = (0, react_1.useCallback)(() => {
         if (!src) {
@@ -79,62 +90,22 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
     const playbackRate = localPlaybackRate * globalPlaybackRate;
     const acceptableTimeShiftButLessThanDuration = (() => {
         var _a;
-        // In Safari, it seems to lag behind mostly around ~0.4 seconds
-        const DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_NORMAL_PLAYBACK = 0.45;
-        // If there is amplification, the acceptable timeshift is higher
-        const DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION = DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_NORMAL_PLAYBACK + 0.2;
-        const defaultAcceptableTimeshift = DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION;
         // For short audio, a lower acceptable time shift is used
         if ((_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.duration) {
-            return Math.min(mediaRef.current.duration, acceptableTimeshift !== null && acceptableTimeshift !== void 0 ? acceptableTimeshift : defaultAcceptableTimeshift);
+            return Math.min(mediaRef.current.duration, acceptableTimeshift !== null && acceptableTimeshift !== void 0 ? acceptableTimeshift : DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION);
         }
-        return acceptableTimeshift !== null && acceptableTimeshift !== void 0 ? acceptableTimeshift : defaultAcceptableTimeshift;
+        return (acceptableTimeshift !== null && acceptableTimeshift !== void 0 ? acceptableTimeshift : DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION);
     })();
-    const isPlayerBuffering = (0, buffering_js_1.useIsPlayerBuffering)(buffering);
-    (0, react_1.useEffect)(() => {
-        var _a, _b, _c, _d, _e;
-        if ((_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.paused) {
-            return;
-        }
-        if (!playing) {
-            (0, playback_logging_js_1.playbackLogging)({
-                logLevel,
-                tag: 'pause',
-                message: `Pausing ${(_b = mediaRef.current) === null || _b === void 0 ? void 0 : _b.src} because ${isPremounting ? 'media is premounting' : isPostmounting ? 'media is postmounting' : 'Player is not playing'}`,
-                mountTime,
-            });
-            (_c = mediaRef.current) === null || _c === void 0 ? void 0 : _c.pause();
-            return;
-        }
-        const isMediaTagBufferingOrStalled = isMediaTagBuffering || isBuffering();
-        const playerBufferingNotStateButLive = buffering.buffering.current;
-        if (playerBufferingNotStateButLive && !isMediaTagBufferingOrStalled) {
-            (0, playback_logging_js_1.playbackLogging)({
-                logLevel,
-                tag: 'pause',
-                message: `Pausing ${(_d = mediaRef.current) === null || _d === void 0 ? void 0 : _d.src} because player is buffering but media tag is not`,
-                mountTime,
-            });
-            (_e = mediaRef.current) === null || _e === void 0 ? void 0 : _e.pause();
-        }
-    }, [
-        isBuffering,
-        isMediaTagBuffering,
-        buffering,
-        isPlayerBuffering,
-        isPremounting,
-        logLevel,
-        mediaRef,
-        mediaType,
-        mountTime,
-        playing,
-        isPostmounting,
-    ]);
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     // This must be a useLayoutEffect, because afterwards, useVolume() looks at the playbackRate
     // and it is also in a useLayoutEffect.
     (0, react_1.useLayoutEffect)(() => {
         const playbackRateToSet = Math.max(0, playbackRate);
+        // Loading a resource resets playbackRate to defaultPlaybackRate.
+        if (mediaRef.current &&
+            mediaRef.current.defaultPlaybackRate !== playbackRateToSet) {
+            mediaRef.current.defaultPlaybackRate = playbackRateToSet;
+        }
         if (mediaRef.current &&
             mediaRef.current.playbackRate !== playbackRateToSet) {
             mediaRef.current.playbackRate = playbackRateToSet;
@@ -154,6 +125,27 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
         }
         const { current } = mediaRef;
+        const isMediaTagBufferingOrStalled = isMediaTagBuffering || isBuffering();
+        let pauseReason = null;
+        if (!playing) {
+            pauseReason = 'not-playing';
+        }
+        else if (playerBuffering && !isMediaTagBufferingOrStalled) {
+            pauseReason = 'buffering';
+        }
+        if (!current.paused && pauseReason !== null) {
+            (0, playback_logging_js_1.playbackLogging)({
+                logLevel,
+                tag: 'pause',
+                message: `Pausing ${current.src} because ${getPauseReason({
+                    reason: pauseReason,
+                    isPremounting,
+                    isPostmounting,
+                })}`,
+                mountTime,
+            });
+            current.pause();
+        }
         const action = (0, get_media_sync_action_js_1.getMediaSyncAction)({
             duration: current.duration,
             currentTime: current.currentTime,
@@ -169,8 +161,8 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             lastSeekDueToShift: lastSeekDueToShift.current,
             playing,
             playbackRate,
-            mediaTagBufferingOrStalled: isMediaTagBuffering || isBuffering(),
-            playerBuffering: buffering.buffering.current,
+            mediaTagBufferingOrStalled: isMediaTagBufferingOrStalled,
+            playerBuffering,
             absoluteFrame,
             onlyWarnForMediaSeekingError,
             isPremounting,
@@ -246,7 +238,6 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         absoluteFrame,
         acceptableTimeShiftButLessThanDuration,
         bufferUntilFirstFrame,
-        buffering.buffering,
         rvcCurrentTime,
         logLevel,
         desiredUnclampedTime,
@@ -256,6 +247,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         mediaType,
         onlyWarnForMediaSeekingError,
         playbackRate,
+        playerBuffering,
         playing,
         src,
         onAutoPlayError,

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

@@ -4,10 +4,15 @@ exports.useMediaTag = void 0;
 const react_1 = require("react");
 const log_level_context_js_1 = require("./log-level-context.js");
 const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.js");
+const playback_logging_js_1 = require("./playback-logging.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const useMediaTag = ({ mediaRef, id, mediaType, onAutoPlayError, isPremounting, isPostmounting, }) => {
-    const { audioAndVideoTags, imperativePlaying } = (0, timeline_position_state_js_1.useTimelineContext)();
+    const { audioAndVideoTags, isPlaying } = (0, timeline_position_state_js_1.useTimelineContext)();
+    const { subscribePlaying } = (0, react_1.useContext)(TimelineContext_js_1.SetTimelineContext);
+    const isPlayingRef = (0, react_1.useRef)(isPlaying);
+    isPlayingRef.current = isPlaying;
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const mountTime = (0, log_level_context_js_1.useMountTime)();
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
@@ -15,7 +20,7 @@ const useMediaTag = ({ mediaRef, id, mediaType, onAutoPlayError, isPremounting,
         const tag = {
             id,
             play: (reason) => {
-                if (!imperativePlaying.current) {
+                if (!isPlayingRef.current()) {
                     // Don't play if for example in a <Freeze> state.
                     return;
                 }
@@ -34,7 +39,24 @@ const useMediaTag = ({ mediaRef, id, mediaType, onAutoPlayError, isPremounting,
             },
         };
         audioAndVideoTags.current.push(tag);
+        const unsubscribe = subscribePlaying((state) => {
+            if (state.playing) {
+                return;
+            }
+            const media = mediaRef.current;
+            if (!media || media.paused) {
+                return;
+            }
+            (0, playback_logging_js_1.playbackLogging)({
+                logLevel,
+                tag: 'pause',
+                message: `Pausing ${media.src} because Player is not playing`,
+                mountTime,
+            });
+            media.pause();
+        });
         return () => {
+            unsubscribe();
             audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
         };
     }, [
@@ -43,12 +65,12 @@ const useMediaTag = ({ mediaRef, id, mediaType, onAutoPlayError, isPremounting,
         mediaRef,
         mediaType,
         onAutoPlayError,
-        imperativePlaying,
         isPremounting,
         isPostmounting,
         logLevel,
         mountTime,
         env.isPlayer,
+        subscribePlaying,
     ]);
 };
 exports.useMediaTag = useMediaTag;

package/dist/cjs/use-playing.d.ts

@@ -0,0 +1 @@
+export declare const usePlaying: () => boolean;

package/dist/cjs/use-playing.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePlaying = void 0;
+const react_1 = require("react");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const TimelineContext_js_1 = require("./TimelineContext.js");
+const use_sync_external_store_js_1 = require("./use-sync-external-store.js");
+const usePlaying = () => {
+    const { isPlaying } = (0, timeline_position_state_js_1.useTimelineContext)();
+    const { subscribePlaying } = (0, react_1.useContext)(TimelineContext_js_1.SetTimelineContext);
+    // Read the local Freeze override, but subscribe to the shared playing store.
+    return (0, use_sync_external_store_js_1.useSyncExternalStore)(subscribePlaying, isPlaying, isPlaying);
+};
+exports.usePlaying = usePlaying;

package/dist/cjs/use-sequence-registration.d.ts

@@ -0,0 +1,5 @@
+import type { TSequence } from './CompositionManager.js';
+export declare const useSequenceRegistration: ({ getSequence, id, }: {
+    getSequence: (() => TSequence) | null;
+    id: string;
+}) => void;

package/dist/cjs/use-sequence-registration.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSequenceRegistration = void 0;
+const react_1 = require("react");
+const SequenceManager_js_1 = require("./SequenceManager.js");
+const useSequenceRegistration = ({ getSequence, id, }) => {
+    const { registerSequence, unregisterSequence, updateSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
+    const getSequenceRef = (0, react_1.useRef)(getSequence);
+    getSequenceRef.current = getSequence;
+    const lastRegisteredGetterRef = (0, react_1.useRef)(null);
+    const registrationEnabled = getSequence !== null;
+    (0, react_1.useEffect)(() => {
+        if (!registrationEnabled) {
+            return;
+        }
+        const currentGetter = getSequenceRef.current;
+        if (currentGetter === null) {
+            throw new Error('Expected a sequence registration getter');
+        }
+        registerSequence(currentGetter());
+        lastRegisteredGetterRef.current = currentGetter;
+        return () => {
+            lastRegisteredGetterRef.current = null;
+            unregisterSequence(id);
+        };
+    }, [id, registerSequence, registrationEnabled, unregisterSequence]);
+    (0, react_1.useEffect)(() => {
+        if (getSequence === null ||
+            updateSequence === null ||
+            lastRegisteredGetterRef.current === getSequence) {
+            return;
+        }
+        updateSequence(getSequence());
+        lastRegisteredGetterRef.current = getSequence;
+    }, [getSequence, updateSequence]);
+};
+exports.useSequenceRegistration = useSequenceRegistration;

package/dist/cjs/use-sync-external-store.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license React
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ * Adapted from use-sync-external-store 1.5.0.
+ */
+type UseSyncExternalStore = <TSnapshot>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => TSnapshot, getServerSnapshot?: () => TSnapshot) => TSnapshot;
+export declare const useSyncExternalStore: UseSyncExternalStore;
+export {};

package/dist/cjs/use-sync-external-store.js

@@ -0,0 +1,116 @@
+"use strict";
+/**
+ * @license React
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ * Adapted from use-sync-external-store 1.5.0.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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;
+    };
+})();
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSyncExternalStore = void 0;
+const React = __importStar(require("react"));
+const objectIs = typeof Object.is === 'function'
+    ? Object.is
+    : (first, second) => (first === second &&
+        (first !== 0 || 1 / first === 1 / second)) ||
+        (Number.isNaN(first) && Number.isNaN(second));
+let didWarnAboutUncachedGetSnapshot = false;
+const checkIfSnapshotChanged = (instance) => {
+    try {
+        return !objectIs(instance.value, instance.getSnapshot());
+    }
+    catch (_a) {
+        return true;
+    }
+};
+const useSyncExternalStoreShimClient = (subscribe, getSnapshot) => {
+    const value = getSnapshot();
+    if (process.env.NODE_ENV !== 'production' &&
+        !didWarnAboutUncachedGetSnapshot &&
+        !objectIs(value, getSnapshot())) {
+        // eslint-disable-next-line no-console
+        console.error('The result of getSnapshot should be cached to avoid an infinite loop');
+        didWarnAboutUncachedGetSnapshot = true;
+    }
+    const [{ instance }, forceUpdate] = React.useState({
+        instance: { value, getSnapshot },
+    });
+    React.useLayoutEffect(() => {
+        instance.value = value;
+        instance.getSnapshot = getSnapshot;
+        if (checkIfSnapshotChanged(instance)) {
+            forceUpdate({ instance });
+        }
+    }, [getSnapshot, instance, subscribe, value]);
+    React.useEffect(() => {
+        if (checkIfSnapshotChanged(instance)) {
+            forceUpdate({ instance });
+        }
+        return subscribe(() => {
+            if (checkIfSnapshotChanged(instance)) {
+                forceUpdate({ instance });
+            }
+        });
+    }, [instance, subscribe]);
+    React.useDebugValue(value);
+    return value;
+};
+const useSyncExternalStoreShimServer = (_subscribe, getSnapshot) => getSnapshot();
+const shim = typeof window === 'undefined' ||
+    typeof window.document === 'undefined' ||
+    typeof window.document.createElement === 'undefined'
+    ? useSyncExternalStoreShimServer
+    : useSyncExternalStoreShimClient;
+exports.useSyncExternalStore = (_a = React.useSyncExternalStore) !== null && _a !== void 0 ? _a : shim;

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

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.519';
+exports.VERSION = '4.0.521';

package/dist/cjs/video/VideoForPreview.js

@@ -43,11 +43,13 @@ const get_cross_origin_value_js_1 = require("../get-cross-origin-value.js");
 const log_level_context_js_1 = require("../log-level-context.js");
 const playback_logging_js_1 = require("../playback-logging.js");
 const prefetch_js_1 = require("../prefetch.js");
+const sequence_order_marker_js_1 = require("../sequence-order-marker.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const use_amplification_js_1 = require("../use-amplification.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
 const use_media_playback_js_1 = require("../use-media-playback.js");
 const use_media_tag_js_1 = require("../use-media-tag.js");
+const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const version_js_1 = require("../version.js");
 const volume_position_state_js_1 = require("../volume-position-state.js");
@@ -101,6 +103,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const { fps, durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const mountTime = (0, log_level_context_js_1.useMountTime)();
     const [timelineId] = (0, react_1.useState)(() => String(Math.random()));
@@ -281,6 +284,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         requestsVideoFrame: Boolean(onVideoFrame),
         isClientSideRendering: false,
     });
-    return (jsx_runtime_1.jsx("video", { ...nativeProps, ref: videoRef, muted: muted || playerMuted || userPreferredVolume <= 0, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, controls: false }));
+    const video = (jsx_runtime_1.jsx("video", { ...nativeProps, ref: videoRef, muted: muted || playerMuted || userPreferredVolume <= 0, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, controls: false }));
+    return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: timelineId, children: video })) : (video);
 };
 exports.VideoForPreview = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);

package/dist/cjs/wrap-remotion-context.d.ts

@@ -2,10 +2,8 @@ import React from 'react';
 export declare function useRemotionContexts(): {
     compositionManagerCtx: import("./CompositionManagerContext.js").CompositionManagerContext;
     timelineContext: import("./TimelineContext.js").TimelineContextValue | null;
-    timelineImperativeContext: import("./TimelineContext.js").TimelineImperativeContextValue | null;
     setTimelineContext: import("./TimelineContext.js").SetTimelineContextValue;
     sequenceContext: import("./SequenceContext.js").SequenceContextType | null;
-    nonceContext: import("./nonce.js").TNonceContext;
     canUseRemotionHooksContext: boolean;
     preloadContext: {
         [x: string]: string;
@@ -31,18 +29,9 @@ export declare function useRemotionContexts(): {
     sequenceManagerRefContext: import("./SequenceManager.js").SequenceManagerRef;
     visualModePropStatusesRefContext: import("./SequenceManager.js").VisualModePropStatusesRef;
     bufferManagerContext: {
-        addBlock: (block: {
-            id: string;
-        }) => {
+        addBlock: () => {
             unblock: () => void;
         };
-        listenForBuffering: (callback: () => void) => {
-            remove: () => void;
-        };
-        listenForResume: (callback: () => void) => {
-            remove: () => void;
-        };
-        buffering: React.RefObject<boolean>;
     } | null;
     logLevelContext: import("./log-level-context.js").LoggingContextValue;
 };