@remotion/studio 4.0.149 → 4.0.151

package/.turbo/turbo-build.log

@@ -1,4 +1,6 @@
 
-> @remotion/studio@4.0.148 build /Users/jonathanburger/remotion/packages/studio
-> bun bundle.ts
+> @remotion/studio@4.0.150 build /Users/jonathanburger/remotion/packages/studio
+> bun --env-file=../.env.bundle bundle.ts
 
+warn: Remotion currently uses a fork of Bun to bundle.
+You dont currently run the fork, this could lead to duplicate key warnings in React.

package/bundle.ts

@@ -1,4 +1,17 @@
-import {build} from 'bun';
+import {build, revision} from 'bun';
+
+if (process.env.NODE_ENV !== 'production') {
+	throw new Error('This script must be run using NODE_ENV=production');
+}
+
+if (!revision.startsWith('07ce')) {
+	// eslint-disable-next-line no-console
+	console.warn('warn: Remotion currently uses a fork of Bun to bundle.');
+	// eslint-disable-next-line no-console
+	console.log(
+		'You dont currently run the fork, this could lead to duplicate key warnings in React.',
+	);
+}
 
 const mainModule = await build({
 	entrypoints: ['src/index.ts'],
@@ -7,9 +20,7 @@ const mainModule = await build({
 });
 
 const [file] = mainModule.outputs;
-const text = (await file.text())
-	.replace(/jsxDEV/g, 'jsx')
-	.replace(/react\/jsx-dev-runtime/g, 'react/jsx-runtime');
+const text = await file.text();
 
 await Bun.write('dist/esm/index.mjs', text);
 

package/dist/components/Canvas.d.ts

@@ -2,6 +2,7 @@ import type { Size } from '@remotion/player';
 import React from 'react';
 import type { CanvasContent } from 'remotion';
 export declare const Canvas: React.FC<{
-    canvasContent: CanvasContent;
-    size: Size;
+    readonly canvasContent: CanvasContent;
+    readonly size: Size;
+    readonly isRefreshing: boolean;
 }>;

package/dist/components/Canvas.js

@@ -34,7 +34,7 @@ const resetZoom = {
     right: layout_1.SPACING_UNIT * 2,
 };
 const ZOOM_PX_FACTOR = 0.003;
-const Canvas = ({ canvasContent, size }) => {
+const Canvas = ({ canvasContent, size, isRefreshing }) => {
     const { setSize, size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
@@ -249,6 +249,6 @@ const Canvas = ({ canvasContent, size }) => {
     (0, react_1.useEffect)(() => {
         fetchMetadata();
     }, [fetchMetadata]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? ((0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution })) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && ((0, jsx_runtime_1.jsx)(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && ((0, jsx_runtime_1.jsx)(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? ((0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, isRefreshing: isRefreshing })) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && ((0, jsx_runtime_1.jsx)(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && ((0, jsx_runtime_1.jsx)(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };
 exports.Canvas = Canvas;

package/dist/components/CanvasOrLoading.d.ts

@@ -1,5 +1,5 @@
 import type { Size } from '@remotion/player';
 import React from 'react';
 export declare const CanvasOrLoading: React.FC<{
-    size: Size;
+    readonly size: Size;
 }>;

package/dist/components/CanvasOrLoading.js

@@ -9,12 +9,11 @@ const colors_1 = require("../helpers/colors");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const Canvas_1 = require("./Canvas");
 const FramePersistor_1 = require("./FramePersistor");
-const styles_1 = require("./Menu/styles");
-const Spinner_1 = require("./Spinner");
+const RefreshCompositionOverlay_1 = require("./RefreshCompositionOverlay");
+const RunningCalculateMetadata_1 = require("./RunningCalculateMetadata");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const ZoomPersistor_1 = require("./ZoomPersistor");
-const layout_1 = require("./layout");
 const container = {
     color: 'white',
     flex: 1,
@@ -26,19 +25,11 @@ const container = {
 };
 const CanvasOrLoading = ({ size }) => {
     const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
-    const [takesALongTime, setTakesALongTime] = (0, react_1.useState)(false);
     const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     (0, react_1.useEffect)(() => {
-        const timeout = setTimeout(() => {
-            setTakesALongTime(true);
-        }, 500);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if ((resolved === null || resolved === void 0 ? void 0 : resolved.type) !== 'success') {
+        if ((resolved === null || resolved === void 0 ? void 0 : resolved.type) !== 'success' &&
+            (resolved === null || resolved === void 0 ? void 0 : resolved.type) !== 'success-and-refreshing') {
             return;
         }
         const c = resolved.result;
@@ -50,18 +41,11 @@ const CanvasOrLoading = ({ size }) => {
             });
         });
     }, [resolved, setZoom]);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...loaderLabel,
-            opacity: takesALongTime ? 1 : 0,
-            transition: 'opacity 0.3s',
-        };
-    }, [takesALongTime]);
     if (!canvasContent) {
         const compname = window.location.pathname.replace('/', '');
-        return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Composition with ID ", compname, " not found."] }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: RunningCalculateMetadata_1.loaderLabel, children: ["Composition with ID ", compname, " not found."] }) }));
     }
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, { size: size, canvasContent: canvasContent })] }));
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, { isRefreshing: (resolved === null || resolved === void 0 ? void 0 : resolved.type) === 'success-and-refreshing', size: size, canvasContent: canvasContent }), (resolved === null || resolved === void 0 ? void 0 : resolved.type) === 'success-and-refreshing' ? ((0, jsx_runtime_1.jsx)(RefreshCompositionOverlay_1.RefreshCompositionOverlay, {})) : null] }));
     if (canvasContent.type === 'asset' || canvasContent.type === 'output') {
         return content;
     }
@@ -69,7 +53,7 @@ const CanvasOrLoading = ({ size }) => {
         return null;
     }
     if (resolved.type === 'loading') {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 30, duration: 1 }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2 }), (0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Running ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }), "..."] })] }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsx)(RunningCalculateMetadata_1.RunningCalculateMetadata, {}) }));
     }
     if (resolved.type === 'error') {
         return (0, jsx_runtime_1.jsx)(ErrorLoading, { error: resolved.error });
@@ -77,12 +61,6 @@ const CanvasOrLoading = ({ size }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), " ", content] }));
 };
 exports.CanvasOrLoading = CanvasOrLoading;
-const loaderLabel = {
-    fontSize: 14,
-    color: colors_1.LIGHT_TEXT,
-    fontFamily: 'sans-serif',
-    lineHeight: 1.5,
-};
 const loaderContainer = {
     marginLeft: 'auto',
     marginRight: 'auto',

package/dist/components/Editor.js

@@ -30,6 +30,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const noop_1 = require("../helpers/noop");
+const canvas_ref_1 = require("../state/canvas-ref");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const z_index_1 = require("../state/z-index");
 const EditorContent_1 = require("./EditorContent");
@@ -49,8 +50,7 @@ exports.BUFFER_STATE_DELAY_IN_MILLISECONDS = typeof process.env.BUFFER_STATE_DEL
     ? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS
     : Number(process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS);
 const Editor = ({ Root, readOnlyStudio }) => {
-    const drawRef = (0, react_1.useRef)(null);
-    const size = player_1.PlayerInternals.useElementSize(drawRef, {
+    const size = player_1.PlayerInternals.useElementSize(canvas_ref_1.drawRef, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
@@ -84,6 +84,6 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const MemoRoot = (0, react_1.useMemo)(() => {
         return react_1.default.memo(Root);
     }, [Root]);
-    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsx)(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: (0, jsx_runtime_1.jsxs)("div", { style: background, children: [canvasMounted ? (0, jsx_runtime_1.jsx)(MemoRoot, {}) : null, (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, { drawRef: drawRef, size: size, onMounted: onMounted, readOnlyStudio: readOnlyStudio, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS }), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })] }) }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }) }));
+    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsx)(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: (0, jsx_runtime_1.jsxs)("div", { style: background, children: [canvasMounted ? (0, jsx_runtime_1.jsx)(MemoRoot, {}) : null, (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, { drawRef: canvas_ref_1.drawRef, size: size, onMounted: onMounted, readOnlyStudio: readOnlyStudio, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS }), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })] }) }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }) }));
 };
 exports.Editor = Editor;

package/dist/components/FullscreenToggle.js

@@ -19,7 +19,7 @@ const FullScreenToggle = () => {
     const { setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const onClick = (0, react_1.useCallback)(() => {
         var _a;
-        (_a = canvas_ref_1.canvasRef.current) === null || _a === void 0 ? void 0 : _a.requestFullscreen();
+        (_a = canvas_ref_1.drawRef.current) === null || _a === void 0 ? void 0 : _a.requestFullscreen();
         if (document.fullscreenElement)
             setSize(() => ({
                 size: 'auto',

package/dist/components/ModalContainer.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export declare const getMaxModalWidth: (width: number) => string;
 export declare const getMaxModalHeight: (height: number) => string;
 export declare const ModalContainer: React.FC<{
-    onEscape: () => void;
-    onOutsideClick: () => void;
-    children: React.ReactNode;
+    readonly onEscape: () => void;
+    readonly onOutsideClick: () => void;
+    readonly children: React.ReactNode;
 }>;

package/dist/components/NewComposition/DismissableModal.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const DismissableModal: React.FC<{
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
 }>;

package/dist/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "#ff3232" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
+}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
 export declare const RemotionInput: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/Preview.d.ts

@@ -6,8 +6,9 @@ import type { Dimensions } from '../helpers/is-current-selected-still';
 export type AssetFileType = 'audio' | 'video' | 'image' | 'json' | 'txt' | 'other';
 export declare const getPreviewFileType: (fileName: string | null) => AssetFileType;
 export declare const VideoPreview: React.FC<{
-    canvasSize: Size;
-    contentDimensions: Dimensions | 'none' | null;
-    canvasContent: CanvasContent;
-    assetMetadata: AssetMetadata | null;
+    readonly canvasSize: Size;
+    readonly contentDimensions: Dimensions | 'none' | null;
+    readonly canvasContent: CanvasContent;
+    readonly assetMetadata: AssetMetadata | null;
+    readonly isRefreshing: boolean;
 }>;

package/dist/components/Preview.js

@@ -68,17 +68,17 @@ const containerStyle = (options) => {
         backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize) /* Must be half of one side of the square */,
     };
 };
-const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata }) => {
+const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata, isRefreshing, }) => {
     if (assetMetadata && assetMetadata.type === 'not-found') {
         return ((0, jsx_runtime_1.jsx)("div", { style: centeredContainer, children: (0, jsx_runtime_1.jsx)("div", { style: label, children: "File does not exist" }) }));
     }
     if (contentDimensions === null) {
         return ((0, jsx_runtime_1.jsx)("div", { style: centeredContainer, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: 24 }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(CompWhenItHasDimensions, { contentDimensions: contentDimensions, canvasSize: canvasSize, canvasContent: canvasContent, assetMetadata: assetMetadata }));
+    return ((0, jsx_runtime_1.jsx)(CompWhenItHasDimensions, { contentDimensions: contentDimensions, canvasSize: canvasSize, canvasContent: canvasContent, assetMetadata: assetMetadata, isRefreshing: isRefreshing }));
 };
 exports.VideoPreview = VideoPreview;
-const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
+const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata, isRefreshing, }) => {
     const { size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { centerX, centerY, yCorrection, xCorrection, scale } = (0, react_1.useMemo)(() => {
         if (contentDimensions === 'none') {
@@ -114,6 +114,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
                 (0, exports.getPreviewFileType)(canvasContent.asset) === 'audio'
                 ? 'center'
                 : 'normal',
+            opacity: isRefreshing ? 0.5 : 1,
         };
     }, [
         contentDimensions,
@@ -123,6 +124,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
         previewSize.translation.y,
         centerY,
         canvasContent,
+        isRefreshing,
     ]);
     return ((0, jsx_runtime_1.jsx)("div", { style: outer, children: canvasContent.type === 'asset' ? ((0, jsx_runtime_1.jsx)(StaticFilePreview_1.StaticFilePreview, { assetMetadata: assetMetadata, currentAsset: canvasContent.asset })) : canvasContent.type === 'output' ? ((0, jsx_runtime_1.jsx)(RenderPreview_1.RenderPreview, { path: canvasContent.path, assetMetadata: assetMetadata })) : ((0, jsx_runtime_1.jsx)(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection })) }));
 };

package/dist/components/PreviewToolbar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const PreviewToolbar: React.FC<{
-    readOnlyStudio: boolean;
-    bufferStateDelayInMilliseconds: number;
+    readonly readOnlyStudio: boolean;
+    readonly bufferStateDelayInMilliseconds: number;
 }>;

package/dist/components/PreviewToolbar.js

@@ -50,6 +50,6 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
     const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null, isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), readOnlyStudio ? null : (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null, isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 })] })) : null, (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), readOnlyStudio ? null : (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

package/dist/components/RefreshCompositionOverlay.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const container: React.CSSProperties;
+export declare const RefreshCompositionOverlay: React.FC;

package/dist/components/RefreshCompositionOverlay.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RefreshCompositionOverlay = exports.container = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const RunningCalculateMetadata_1 = require("./RunningCalculateMetadata");
+exports.container = {
+    justifyContent: 'flex-end',
+    alignItems: 'flex-start',
+    padding: 20,
+    pointerEvents: 'none',
+};
+const shadow = {
+    boxShadow: '0 0 4px black',
+};
+const RefreshCompositionOverlay = () => {
+    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: exports.container, children: (0, jsx_runtime_1.jsx)("div", { style: shadow, children: (0, jsx_runtime_1.jsx)(RunningCalculateMetadata_1.RunningCalculateMetadata, {}) }) }));
+};
+exports.RefreshCompositionOverlay = RefreshCompositionOverlay;

package/dist/components/RenderModal/ResolveCompositionBeforeModal.js

@@ -29,7 +29,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const styles_1 = require("../Menu/styles");
-const Spinner_1 = require("../Spinner");
+const RunningCalculateMetadata_1 = require("../RunningCalculateMetadata");
 const layout_1 = require("../layout");
 const loaderContainer = {
     paddingTop: 40,
@@ -72,7 +72,7 @@ const ResolveCompositionBeforeModal = ({ compositionId, children }) => {
         };
     }, [resolved, unresolved]);
     if (!resolved || resolved.type === 'loading') {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: loaderContainer, children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 1, size: 30 }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2 }), (0, jsx_runtime_1.jsxs)("div", { style: loaderLabel, children: ["Running ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" })] })] }));
+        return (0, jsx_runtime_1.jsx)(RunningCalculateMetadata_1.RunningCalculateMetadata, {});
     }
     if (resolved.type === 'error') {
         return ((0, jsx_runtime_1.jsxs)("div", { style: loaderContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2 }), (0, jsx_runtime_1.jsxs)("div", { style: loaderLabel, children: ["Running ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }), ' ', "yielded an error:"] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", { style: loaderLabel, children: resolved.error.message || 'Unknown error' })] }));

package/dist/components/RunningCalculateMetadata.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const loaderLabel: React.CSSProperties;
+export declare const RunningCalculateMetadata: React.FC;

package/dist/components/RunningCalculateMetadata.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RunningCalculateMetadata = exports.loaderLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const styles_1 = require("./Menu/styles");
+const Spinner_1 = require("./Spinner");
+const layout_1 = require("./layout");
+exports.loaderLabel = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
+};
+const container = {
+    backgroundColor: colors_1.BACKGROUND,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 20,
+};
+const RunningCalculateMetadata = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 24, duration: 1 }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsxs)("div", { style: exports.loaderLabel, children: ["Running ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }), "..."] })] }));
+};
+exports.RunningCalculateMetadata = RunningCalculateMetadata;

package/dist/components/Spinner.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const Spinner: React.FC<{
-    size: number;
-    duration: number;
+    readonly size: number;
+    readonly duration: number;
 }>;

package/dist/components/Spinner.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const viewBox = 100;
-const lines = 6;
+const lines = 8;
 const className = '__remotion_spinner_line';
 const remotionSpinnerAnimation = '__remotion_spinner_animation';
 // Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3

package/dist/components/Timeline/TimelineTracks.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineTracks: React.FC<{
-    timeline: TrackWithHash[];
-    hasBeenCut: boolean;
+    readonly timeline: TrackWithHash[];
+    readonly hasBeenCut: boolean;
 }>;