@remotion/player 4.0.515 → 4.0.517

package/dist/cjs/Player.js

@@ -1,16 +1,50 @@
 "use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Player = exports.componentOrNullIfLazy = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const EmitterProvider_js_1 = require("./EmitterProvider.js");
 const player_css_classname_js_1 = require("./player-css-classname.js");
 const PlayerUI_js_1 = __importDefault(require("./PlayerUI.js"));
 const SharedPlayerContext_js_1 = require("./SharedPlayerContext.js");
+const timeline_sequence_observer_context_js_1 = require("./timeline-sequence-observer-context.js");
 const use_remotion_license_acknowledge_js_1 = require("./use-remotion-license-acknowledge.js");
 const validate_in_out_frame_js_1 = require("./utils/validate-in-out-frame.js");
 const validate_initial_frame_js_1 = require("./utils/validate-initial-frame.js");
@@ -23,10 +57,18 @@ const componentOrNullIfLazy = (props) => {
     return null;
 };
 exports.componentOrNullIfLazy = componentOrNullIfLazy;
+const TimelineSequenceObserverComponent = ({ onTimelineSequenceChange }) => {
+    const { sequences } = react_1.default.useContext(remotion_1.Internals.SequenceManager);
+    (0, react_1.useEffect)(() => {
+        onTimelineSequenceChange(sequences);
+    }, [onTimelineSequenceChange, sequences]);
+    return null;
+};
 const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, showPosterWhenBufferingAndPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, renderCustomControls, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, audioLatencyHint = 'playback', sampleRate = 48000, volumePersistenceKey, initialVolume, _experimentalKeepAudioContextAlive = false, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         window.remotion_isPlayer = true;
     }
+    const onTimelineSequenceChange = react_1.default.useContext(timeline_sequence_observer_context_js_1.TimelineSequenceObserverContext);
     // @ts-expect-error
     if (componentProps.defaultProps !== undefined) {
         throw new Error('The <Player /> component does not accept `defaultProps`, but some were passed. Use `inputProps` instead.');
@@ -172,9 +214,14 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
             mode: 'prevent-media-session',
         });
     }, [passedBrowserMediaControlsBehavior]);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, playbackRateContext: playbackRateContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, audioLatencyHint: audioLatencyHint, sampleRate: sampleRate, _experimentalKeepAudioContextAlive: _experimentalKeepAudioContextAlive, volumePersistenceKey: volumePersistenceKey, initialVolume: initialVolume, inputProps: actualInputProps, audioEnabled: true, children: jsx_runtime_1.jsx(remotion_1.Internals.SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx_runtime_1.jsx(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: jsx_runtime_1.jsx(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
+    const player = (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, playbackRateContext: playbackRateContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, audioLatencyHint: audioLatencyHint, sampleRate: sampleRate, _experimentalKeepAudioContextAlive: _experimentalKeepAudioContextAlive, volumePersistenceKey: volumePersistenceKey, initialVolume: initialVolume, inputProps: actualInputProps, audioEnabled: true, children: jsx_runtime_1.jsx(remotion_1.Internals.SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx_runtime_1.jsx(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: jsx_runtime_1.jsx(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                             ? clickToPlay
                             : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), showPosterWhenBufferingAndPaused: Boolean(showPosterWhenBufferingAndPaused), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, renderCustomControls: renderCustomControls !== null && renderCustomControls !== void 0 ? renderCustomControls : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior, overrideInternalClassName: overrideInternalClassName !== null && overrideInternalClassName !== void 0 ? overrideInternalClassName : undefined, noSuspense: Boolean(noSuspense) }) }) }) }) }));
+    if (!onTimelineSequenceChange) {
+        return player;
+    }
+    return (jsx_runtime_1.jsx(remotion_1.Internals.SequenceRegistrationContext.Provider, { value: true, children: jsx_runtime_1.jsxs(remotion_1.Internals.SequenceManagerProvider, { children: [
+                jsx_runtime_1.jsx(TimelineSequenceObserverComponent, { onTimelineSequenceChange: onTimelineSequenceChange }), player] }) }));
 };
 const forward = react_1.forwardRef;
 /*

package/dist/cjs/SharedPlayerContext.js

@@ -28,6 +28,7 @@ const SharedPlayerContexts = ({ children, timelineContext, playbackRateContext,
                 },
             ],
             folders: [],
+            currentAssetMetadata: null,
             currentCompositionMetadata: {
                 defaultCodec: null,
                 defaultOutName: null,

package/dist/cjs/index.d.ts

@@ -52,4 +52,5 @@ export declare const PlayerInternals: {
         readonly type: "player" | "studio";
         readonly color?: string | undefined;
     }>;
+    TimelineSequenceObserverContext: import("react").Context<import("./timeline-sequence-observer-context.js").TimelineSequenceObserver | null>;
 };

package/dist/cjs/index.js

@@ -7,6 +7,7 @@ const calculate_scale_js_1 = require("./calculate-scale.js");
 const emitter_context_js_1 = require("./emitter-context.js");
 const EmitterProvider_js_1 = require("./EmitterProvider.js");
 const event_emitter_js_1 = require("./event-emitter.js");
+const timeline_sequence_observer_context_js_1 = require("./timeline-sequence-observer-context.js");
 const use_hover_state_js_1 = require("./use-hover-state.js");
 const use_playback_js_1 = require("./use-playback.js");
 const use_player_methods_js_1 = require("./use-player-methods.js");
@@ -26,4 +27,5 @@ exports.PlayerInternals = {
     updateAllElementsSizes: use_element_size_js_1.updateAllElementsSizes,
     PlayerEmitterProvider: EmitterProvider_js_1.PlayerEmitterProvider,
     BufferingIndicator: BufferingIndicator_js_1.BufferingIndicator,
+    TimelineSequenceObserverContext: timeline_sequence_observer_context_js_1.TimelineSequenceObserverContext,
 };

package/dist/cjs/timeline-sequence-observer-context.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TSequence } from 'remotion';
+export type TimelineSequenceObserver = (sequences: TSequence[]) => void;
+export declare const TimelineSequenceObserverContext: React.Context<TimelineSequenceObserver | null>;

package/dist/cjs/timeline-sequence-observer-context.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineSequenceObserverContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.TimelineSequenceObserverContext = react_1.default.createContext(null);

package/dist/esm/index.mjs

@@ -561,6 +561,10 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   });
 };
 
+// src/timeline-sequence-observer-context.ts
+import React4 from "react";
+var TimelineSequenceObserverContext = React4.createContext(null);
+
 // src/use-hover-state.ts
 import { useEffect as useEffect2, useState as useState2 } from "react";
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
@@ -1409,7 +1413,7 @@ var useElementSize = (source, options) => {
 };
 
 // src/Player.tsx
-import {
+import React14, {
   forwardRef as forwardRef2,
   useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle2,
@@ -1426,7 +1430,7 @@ var playerCssClassname = (override) => {
 };
 
 // src/PlayerUI.tsx
-import React11, {
+import React12, {
   Suspense,
   forwardRef,
   useCallback as useCallback10,
@@ -1440,7 +1444,7 @@ import React11, {
 import { Internals as Internals13 } from "remotion";
 
 // src/error-boundary.tsx
-import React4 from "react";
+import React5 from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var errorStyle = {
   display: "flex",
@@ -1451,7 +1455,7 @@ var errorStyle = {
   width: "100%"
 };
 
-class ErrorBoundary extends React4.Component {
+class ErrorBoundary extends React5.Component {
   state = { hasError: null };
   static getDerivedStateFromError(error) {
     return { hasError: error };
@@ -1473,7 +1477,7 @@ class ErrorBoundary extends React4.Component {
 }
 
 // src/license-blacklist.tsx
-import React5, { useEffect as useEffect7 } from "react";
+import React6, { useEffect as useEffect7 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var getHashOfDomain = async () => {
   if (typeof window === "undefined") {
@@ -1508,7 +1512,7 @@ var DOMAIN_BLACKLIST = [
 ];
 var ran = false;
 var RenderWarningIfBlacklist = () => {
-  const [unlicensed, setUnlicensed] = React5.useState(false);
+  const [unlicensed, setUnlicensed] = React6.useState(false);
   useEffect7(() => {
     if (ran) {
       return;
@@ -1583,7 +1587,7 @@ import { useCallback as useCallback4, useMemo as useMemo5, useRef as useRef6, us
 import { Internals as Internals9 } from "remotion";
 
 // src/render-volume-slider.tsx
-import React6, { useCallback as useCallback3, useMemo as useMemo4, useState as useState4 } from "react";
+import React7, { useCallback as useCallback3, useMemo as useMemo4, useState as useState4 } from "react";
 import { random } from "remotion";
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var KNOB_SIZE = 12;
@@ -1615,7 +1619,7 @@ var DefaultVolumeSlider = ({
       ...common
     };
   }, [isVertical]);
-  const randomId = typeof React6.useId === "undefined" ? "volume-slider" : React6.useId();
+  const randomId = typeof React7.useId === "undefined" ? "volume-slider" : React7.useId();
   const [randomClass] = useState4(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
   const onVolumeChange = useCallback3((e) => {
     setVolume(parseFloat(e.target.value));
@@ -2624,7 +2628,7 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
 
 // src/PlayerUI.tsx
 import { jsx as jsx13, jsxs as jsxs9, Fragment as Fragment3 } from "react/jsx-runtime";
-var reactVersion = React11.version.split(".")[0];
+var reactVersion = React12.version.split(".")[0];
 if (reactVersion === "0") {
   throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
@@ -3194,6 +3198,7 @@ var SharedPlayerContexts = ({
         }
       ],
       folders: [],
+      currentAssetMetadata: null,
       currentCompositionMetadata: {
         defaultCodec: null,
         defaultOutName: null,
@@ -3424,13 +3429,20 @@ var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
 var validateDefaultAndInputProps = NoReactInternals.validateDefaultAndInputProps;
 
 // src/Player.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var componentOrNullIfLazy = (props) => {
   if ("component" in props) {
     return props.component;
   }
   return null;
 };
+var TimelineSequenceObserverComponent = ({ onTimelineSequenceChange }) => {
+  const { sequences } = React14.useContext(Internals17.SequenceManager);
+  useEffect13(() => {
+    onTimelineSequenceChange(sequences);
+  }, [onTimelineSequenceChange, sequences]);
+  return null;
+};
 var PlayerFn = ({
   durationInFrames,
   compositionHeight,
@@ -3489,6 +3501,7 @@ var PlayerFn = ({
   if (typeof window !== "undefined") {
     window.remotion_isPlayer = true;
   }
+  const onTimelineSequenceChange = React14.useContext(TimelineSequenceObserverContext);
   if (componentProps.defaultProps !== undefined) {
     throw new Error("The <Player /> component does not accept `defaultProps`, but some were passed. Use `inputProps` instead.");
   }
@@ -3613,7 +3626,7 @@ var PlayerFn = ({
       mode: "prevent-media-session"
     };
   }, [passedBrowserMediaControlsBehavior]);
-  return /* @__PURE__ */ jsx15(Internals17.IsPlayerContextProvider, {
+  const player = /* @__PURE__ */ jsx15(Internals17.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx15(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
       playbackRateContext: playbackRateContextValue,
@@ -3681,6 +3694,20 @@ var PlayerFn = ({
       })
     })
   });
+  if (!onTimelineSequenceChange) {
+    return player;
+  }
+  return /* @__PURE__ */ jsx15(Internals17.SequenceRegistrationContext.Provider, {
+    value: true,
+    children: /* @__PURE__ */ jsxs10(Internals17.SequenceManagerProvider, {
+      children: [
+        /* @__PURE__ */ jsx15(TimelineSequenceObserverComponent, {
+          onTimelineSequenceChange
+        }),
+        player
+      ]
+    })
+  });
 };
 var forward = forwardRef2;
 var Player = forward(PlayerFn);
@@ -3696,7 +3723,7 @@ import {
 import { Internals as Internals19 } from "remotion";
 
 // src/ThumbnailUI.tsx
-import React14, {
+import React15, {
   forwardRef as forwardRef3,
   Suspense as Suspense2,
   useCallback as useCallback12,
@@ -3723,7 +3750,7 @@ var useThumbnail = () => {
 
 // src/ThumbnailUI.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
-var reactVersion2 = React14.version.split(".")[0];
+var reactVersion2 = React15.version.split(".")[0];
 if (reactVersion2 === "0") {
   throw new Error(`Version ${reactVersion2} of "react" is not supported by Remotion`);
 }
@@ -3948,7 +3975,8 @@ var PlayerInternals = {
   useHoverState,
   updateAllElementsSizes,
   PlayerEmitterProvider,
-  BufferingIndicator
+  BufferingIndicator,
+  TimelineSequenceObserverContext
 };
 export {
   Thumbnail,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.515",
+	"version": "4.0.517",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.515"
+		"remotion": "4.0.517"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -49,7 +49,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.4.3",
-		"@remotion/eslint-config-internal": "4.0.515",
+		"@remotion/eslint-config-internal": "4.0.517",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},