@remotion/studio 4.0.372 → 4.0.374

package/dist/Studio.js

@@ -17,8 +17,8 @@ const Studio = ({ rootComponent, readOnly }) => {
     (0, react_1.useLayoutEffect)(() => {
         (0, inject_css_1.injectCSS)();
     }, []);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: window.remotion_numberOfAudioTags, onlyRenderComposition: null, currentCompositionMetadata: null, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', children: (0, jsx_runtime_1.jsxs)(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [(0, jsx_runtime_1.jsx)(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
-                    ? null
-                    : (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', children: (0, jsx_runtime_1.jsxs)(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [(0, jsx_runtime_1.jsx)(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
+                        ? null
+                        : (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }));
 };
 exports.Studio = Studio;

package/dist/components/PlaybackRatePersistor.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const playbackrate_1 = require("../state/playbackrate");
 const PlaybackRatePersistor = () => {
-    const { setPlaybackRate, playbackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
+    const { setPlaybackRate, playbackRate } = (0, react_1.useContext)(remotion_1.Internals.TimelineContext);
     (0, react_1.useEffect)(() => {
         setPlaybackRate((0, playbackrate_1.loadPlaybackRate)());
     }, [setPlaybackRate]);

package/dist/components/PreviewToolbar.js

@@ -73,7 +73,7 @@ const padding = {
     width: timeline_layout_1.TIMELINE_PADDING,
 };
 const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
-    const { playbackRate, setPlaybackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
+    const { playbackRate, setPlaybackRate } = (0, react_1.useContext)(remotion_1.Internals.TimelineContext);
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();

package/dist/components/Timeline/TimelinePlayCursorSyncer.js

@@ -11,7 +11,7 @@ let lastTimelinePositionWhileScrolling = null;
 const TimelinePlayCursorSyncer = () => {
     var _a, _b;
     const video = remotion_1.Internals.useVideo();
-    const timelineContext = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
+    const timelineContext = (0, react_1.useContext)(remotion_1.Internals.TimelineContext);
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -75,7 +75,8 @@ const drawSlot = ({ frame, ctx, filledSlots, visualizationWidth, timestamp, segm
     filledSlots.set(timestamp, frame.timestamp);
 };
 const fillWithCachedFrames = ({ ctx, visualizationWidth, filledSlots, src, segmentDuration, fromSeconds, }) => {
-    const keys = Array.from(frame_database_1.frameDatabase.keys()).filter((k) => k.startsWith(src));
+    const prefix = (0, frame_database_1.getFrameDatabaseKeyPrefix)(src);
+    const keys = Array.from(frame_database_1.frameDatabase.keys()).filter((k) => k.startsWith(prefix));
     const targets = Array.from(filledSlots.keys());
     for (const timestamp of targets) {
         let bestKey;
@@ -142,6 +143,12 @@ const TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrame
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const aspectRatio = (0, react_1.useRef)((0, frame_database_1.getAspectRatioFromCache)(src));
+    (0, react_1.useEffect)(() => {
+        return () => {
+            (0, frame_database_1.clearFramesForSrc)(src);
+        };
+    }, [src]);
+    // for rendering frames
     (0, react_1.useEffect)(() => {
         if (error) {
             return;
@@ -203,7 +210,8 @@ const TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrame
                 return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
             },
             src,
-            onFrame: (frame) => {
+            onVideoSample: (sample) => {
+                const frame = sample.toVideoFrame();
                 const scale = (HEIGHT / frame.displayHeight) * window.devicePixelRatio;
                 const transformed = (0, resize_video_frame_1.resizeVideoFrame)({
                     frame,

package/dist/components/WebRender/TriggerWebRender.js

@@ -27,6 +27,13 @@ const TriggerWebRender = () => {
             fps: video.fps,
             durationInFrames: video.durationInFrames,
             frame,
+        }).then((blob) => {
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'composed.png';
+            a.click();
+            URL.revokeObjectURL(url);
         });
     }, [video, frame]);
     return ((0, jsx_runtime_1.jsx)(Button_1.Button, { id: "render-modal-button", onClick: onClick, buttonContainerStyle: button, disabled: false, children: (0, jsx_runtime_1.jsx)("span", { children: "Render" }) }));