@remotion/studio 4.0.423 → 4.0.425

package/dist/components/CurrentAsset.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrentAsset = exports.CURRENT_ASSET_HEIGHT = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
+const mediabunny_1 = require("mediabunny");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const use_static_files_1 = require("./use-static-files");
+exports.CURRENT_ASSET_HEIGHT = 80;
+const container = {
+    height: exports.CURRENT_ASSET_HEIGHT,
+    display: 'block',
+    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+    padding: 12,
+    color: 'white',
+    backgroundColor: colors_1.BACKGROUND,
+};
+const title = {
+    fontWeight: 'bold',
+    fontSize: 12,
+    whiteSpace: 'nowrap',
+    lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
+};
+const subtitle = {
+    fontSize: 12,
+    opacity: 0.8,
+    whiteSpace: 'nowrap',
+    lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
+};
+const row = {
+    display: 'flex',
+    flexDirection: 'row',
+    lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
+};
+const formatDuration = (seconds) => {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = seconds % 60;
+    const sFixed = s.toFixed(2).padStart(5, '0');
+    if (h > 0) {
+        return `${h}:${String(m).padStart(2, '0')}:${sFixed}`;
+    }
+    return `${String(m).padStart(2, '0')}:${sFixed}`;
+};
+const CurrentAsset = () => {
+    var _a;
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const assetName = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' ? canvasContent.asset : null;
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
+    const sizeInBytes = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!assetName) {
+            return null;
+        }
+        const file = staticFiles.find((f) => f.name === assetName);
+        return (_a = file === null || file === void 0 ? void 0 : file.sizeInBytes) !== null && _a !== void 0 ? _a : null;
+    }, [assetName, staticFiles]);
+    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        setMediaMetadata(null);
+        if (!assetName) {
+            return;
+        }
+        const url = (0, remotion_1.staticFile)(assetName);
+        const input = new mediabunny_1.Input({
+            formats: mediabunny_1.ALL_FORMATS,
+            source: new mediabunny_1.UrlSource(url),
+        });
+        Promise.all([
+            input.computeDuration(),
+            input.getFormat(),
+            input.getPrimaryVideoTrack(),
+        ])
+            .then(([duration, format, videoTrack]) => {
+            var _a, _b;
+            setMediaMetadata({
+                duration,
+                format: format.name,
+                width: (_a = videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.displayWidth) !== null && _a !== void 0 ? _a : null,
+                height: (_b = videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.displayHeight) !== null && _b !== void 0 ? _b : null,
+            });
+        })
+            .catch(() => {
+            // InputDisposedError (user navigated away) and
+            // non-media files (e.g. .png, .json) — ignore silently
+        });
+        return () => {
+            input.dispose();
+        };
+    }, [assetName]);
+    if (!assetName) {
+        return jsx_runtime_1.jsx("div", { style: container });
+    }
+    const fileName = (_a = assetName.split('/').pop()) !== null && _a !== void 0 ? _a : assetName;
+    const subtitleParts = [];
+    if (sizeInBytes !== null) {
+        subtitleParts.push((0, studio_shared_1.formatBytes)(sizeInBytes));
+    }
+    if (mediaMetadata) {
+        subtitleParts.push(mediaMetadata.format);
+        if (mediaMetadata.width !== null && mediaMetadata.height !== null) {
+            subtitleParts.push(`${mediaMetadata.width}x${mediaMetadata.height}`);
+        }
+    }
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs("div", { children: [
+                    jsx_runtime_1.jsx("div", { style: title, children: fileName }), subtitleParts.length > 0 ? (jsx_runtime_1.jsx("div", { style: subtitle, children: subtitleParts.join(' · ') })) : null, mediaMetadata ? (jsx_runtime_1.jsx("div", { style: subtitle, children: formatDuration(mediaMetadata.duration) })) : null] }) }) }));
+};
+exports.CurrentAsset = CurrentAsset;

package/dist/components/CurrentComposition.js

@@ -38,8 +38,9 @@ const row = {
 const CurrentComposition = () => {
     const video = remotion_1.Internals.useVideo();
     if (!video) {
-        return (0, jsx_runtime_1.jsx)("div", { style: container });
+        return jsx_runtime_1.jsx("div", { style: container });
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: video.id }), (0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? ((0, jsx_runtime_1.jsx)("div", { style: subtitle, children: "Still" })) : ((0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] }) }) }));
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs("div", { children: [
+                    jsx_runtime_1.jsx("div", { style: title, children: video.id }), jsx_runtime_1.jsxs("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx("div", { style: subtitle, children: "Still" })) : (jsx_runtime_1.jsxs("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] }) }) }));
 };
 exports.CurrentComposition = CurrentComposition;

package/dist/components/Editor.js

@@ -96,6 +96,11 @@ 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, { readOnlyStudio: readOnlyStudio, children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), (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 (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsxs(timeline_zoom_1.TimelineZoomContext, { children: [
+                jsx_runtime_1.jsx(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: jsx_runtime_1.jsxs("div", { style: background, children: [canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null, jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
+                                    jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
+                                ] })
+                        ] }) }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
+            ] }) }));
 };
 exports.Editor = Editor;

package/dist/components/EditorContent.js

@@ -23,6 +23,11 @@ const EditorContent = ({ readOnlyStudio, children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     // Preventing multiple renders so the update check doesn't get rendered twice and needs to be aborted
     const onlyTopPanel = canvasContent === null || isStill || canvasContent.type !== 'composition';
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), onlyTopPanel ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }))] })] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [
+                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), onlyTopPanel ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(Timeline_1.Timeline, {}) })
+                        ] }))] })
+        ] }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/EditorContexts.js

@@ -21,6 +21,8 @@ const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
 const ShowRulersProvider_1 = require("./ShowRulersProvider");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children, readOnlyStudio }) => {
-    return ((0, jsx_runtime_1.jsx)(get_zod_if_possible_1.ZodProvider, { children: (0, jsx_runtime_1.jsx)(VisualControls_1.VisualControlsProvider, { children: (0, jsx_runtime_1.jsx)(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, children: (0, jsx_runtime_1.jsxs)(context_1.RenderQueueContextProvider, { children: [(0, jsx_runtime_1.jsx)(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), (0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(CheckerboardProvider_1.CheckerboardProvider, { children: (0, jsx_runtime_1.jsx)(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: (0, jsx_runtime_1.jsx)(ShowRulersProvider_1.ShowRulersProvider, { children: (0, jsx_runtime_1.jsx)(ShowGuidesProvider_1.ShowGuidesProvider, { children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(ModalsProvider_1.ModalsProvider, { children: (0, jsx_runtime_1.jsx)(MediaVolumeProvider_1.MediaVolumeProvider, { children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) })] }) }) }) }));
+    return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsx(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs(context_1.RenderQueueContextProvider, { children: [
+                        jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) })
+                    ] }) }) }) }));
 };
 exports.EditorContexts = EditorContexts;

package/dist/components/EditorGuides/Guide.js

@@ -79,7 +79,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             },
         ];
     }, [guide.id, setGuidesList]);
-    return ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: values, children: (0, jsx_runtime_1.jsx)("div", { style: guideStyle, onMouseDown: onMouseDown, className: "__remotion_editor_guide", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: (0, jsx_runtime_1.jsx)("div", { style: guideContentStyle, className: [
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: values, children: jsx_runtime_1.jsx("div", { style: guideStyle, onMouseDown: onMouseDown, className: "__remotion_editor_guide", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: [
                     '__remotion_editor_guide_content',
                     selectedGuideId === guide.id || hoveredGuideId === guide.id
                         ? '__remotion_editor_guide_selected'

package/dist/components/EditorGuides/index.js

@@ -25,8 +25,8 @@ const EditorGuides = ({ canvasSize, contentDimensions, assetMetadata }) => {
             return guide.compositionId === canvasContent.compositionId;
         });
     }, [canvasContent.compositionId, guidesList]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: guidesForThisComposition.map((guide) => {
-            return ((0, jsx_runtime_1.jsx)(Guide_1.default, { guide: guide, canvasDimensions: canvasDimensions, scale: scale }, guide.id));
+    return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: guidesForThisComposition.map((guide) => {
+            return (jsx_runtime_1.jsx(Guide_1.default, { guide: guide, canvasDimensions: canvasDimensions, scale: scale }, guide.id));
         }) }));
 };
 exports.default = EditorGuides;

package/dist/components/EditorRuler/Ruler.js

@@ -103,6 +103,6 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
             setCursor(isVerticalRuler ? 'ew-resize' : 'ns-resize');
         }
     }, [selectedGuideId, isVerticalRuler]);
-    return ((0, jsx_runtime_1.jsx)("canvas", { ref: rulerCanvasRef, width: rulerWidth * window.devicePixelRatio, height: rulerHeight * window.devicePixelRatio, style: rulerStyle, onPointerDown: onMouseDown, onPointerEnter: changeCursor, onPointerLeave: changeCursor }));
+    return (jsx_runtime_1.jsx("canvas", { ref: rulerCanvasRef, width: rulerWidth * window.devicePixelRatio, height: rulerHeight * window.devicePixelRatio, style: rulerStyle, onPointerDown: onMouseDown, onPointerEnter: changeCursor, onPointerLeave: changeCursor }));
 };
 exports.default = Ruler;

package/dist/components/EditorRuler/index.js

@@ -162,6 +162,8 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
             }
         };
     }, [selectedGuideId, onMouseMove, onMouseUp]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: originBlockStyles }), (0, jsx_runtime_1.jsx)(Ruler_1.default, { orientation: "horizontal", scale: scale, points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.left, size: canvasSize }), (0, jsx_runtime_1.jsx)(Ruler_1.default, { orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.top, size: canvasSize })] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("div", { style: originBlockStyles }), jsx_runtime_1.jsx(Ruler_1.default, { orientation: "horizontal", scale: scale, points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.left, size: canvasSize }), jsx_runtime_1.jsx(Ruler_1.default, { orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.top, size: canvasSize })
+        ] }));
 };
 exports.EditorRulers = EditorRulers;

package/dist/components/ExplorerPanel.js

@@ -53,6 +53,9 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
             },
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(CompSelectorRef_1.CompSelectorRef, { children: (0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })] }) }), panel === 'compositions' ? ((0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {})) : ((0, jsx_runtime_1.jsx)(AssetSelector_1.AssetSelector, { readOnlyStudio: readOnlyStudio }))] }) }));
+    return (jsx_runtime_1.jsx(CompSelectorRef_1.CompSelectorRef, { children: jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", children: [
+                jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [
+                            jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })
+                        ] }) }), panel === 'compositions' ? (jsx_runtime_1.jsx(CompositionSelector_1.CompositionSelector, {})) : (jsx_runtime_1.jsx(AssetSelector_1.AssetSelector, { readOnlyStudio: readOnlyStudio }))] }) }));
 };
 exports.ExplorerPanel = ExplorerPanel;

package/dist/components/FilePreview.js

@@ -21,20 +21,22 @@ const FilePreview = ({ fileType, src, currentAsset, assetMetadata }) => {
         throw new Error('expected to have assetMetadata, got "not-found"');
     }
     if (fileType === 'audio') {
-        return (0, jsx_runtime_1.jsx)("audio", { src: src, controls: true });
+        return jsx_runtime_1.jsx("audio", { src: src, controls: true });
     }
     if (fileType === 'video') {
-        return (0, jsx_runtime_1.jsx)("video", { src: src, controls: true });
+        return jsx_runtime_1.jsx("video", { src: src, controls: true });
     }
     if (fileType === 'image') {
-        return (0, jsx_runtime_1.jsx)("img", { src: src });
+        return jsx_runtime_1.jsx("img", { src: src });
     }
     if (fileType === 'json') {
-        return (0, jsx_runtime_1.jsx)(JSONViewer_1.JSONViewer, { src: src });
+        return jsx_runtime_1.jsx(JSONViewer_1.JSONViewer, { src: src });
     }
     if (fileType === 'txt') {
-        return (0, jsx_runtime_1.jsx)(TextViewer_1.TextViewer, { src: src });
+        return jsx_runtime_1.jsx(TextViewer_1.TextViewer, { src: src });
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: msgStyle, children: currentAsset }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: msgStyle, children: ["Size: ", (0, studio_shared_1.formatBytes)(assetMetadata.size), " "] })] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("div", { style: msgStyle, children: currentAsset }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsxs("div", { style: msgStyle, children: ["Size: ", (0, studio_shared_1.formatBytes)(assetMetadata.size), " "] })
+        ] }));
 };
 exports.FilePreview = FilePreview;

package/dist/components/FpsCounter.js

@@ -70,6 +70,6 @@ const FpsCounter = ({ playbackSpeed }) => {
     if (videoConfig === null) {
         return null;
     }
-    return (0, jsx_runtime_1.jsxs)("div", { style: style, children: [fps.toFixed(1), " FPS"] });
+    return jsx_runtime_1.jsxs("div", { style: style, children: [fps.toFixed(1), " FPS"] });
 };
 exports.FpsCounter = FpsCounter;

package/dist/components/FullscreenToggle.js

@@ -43,6 +43,6 @@ const FullScreenToggle = () => {
             f.unregister();
         };
     }, [keybindings, onClick]);
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 448 512", fill: "#fff", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 448 512", fill: "#fff", children: jsx_runtime_1.jsx("path", { d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }) }));
 };
 exports.FullScreenToggle = FullScreenToggle;

package/dist/components/GlobalPropsEditorUpdateButton.js

@@ -71,6 +71,8 @@ const GlobalPropsEditorUpdateButton = ({ compositionId, currentDefaultProps }) =
             },
         }));
     }, [compositionId]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), (0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { disabled: disabled, onClick: onClicked })] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), jsx_runtime_1.jsx(SchemaSaveButton_1.SchemaSaveButton, { disabled: disabled, onClick: onClicked })
+        ] }));
 };
 exports.GlobalPropsEditorUpdateButton = GlobalPropsEditorUpdateButton;

package/dist/components/InitialCompositionLoader.d.ts

@@ -1,5 +1,4 @@
 import type React from 'react';
-import type { _InternalTypes } from 'remotion';
 export declare const useSelectAsset: () => (asset: string) => void;
-export declare const useSelectComposition: () => (c: _InternalTypes["AnyComposition"], push: boolean) => void;
+export declare const useSelectComposition: () => (c: import("remotion").AnyComposition, push: boolean) => void;
 export declare const InitialCompositionLoader: React.FC;

package/dist/components/InitialCompositionLoader.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InitialCompositionLoader = exports.useSelectComposition = exports.useSelectAsset = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const get_static_files_1 = require("../api/get-static-files");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const url_state_1 = require("../helpers/url-state");
 const folders_1 = require("../state/folders");
@@ -11,6 +10,7 @@ const sidebar_1 = require("../state/sidebar");
 const CompositionSelector_1 = require("./CompositionSelector");
 const ExplorerPanel_1 = require("./ExplorerPanel");
 const load_canvas_content_from_url_1 = require("./load-canvas-content-from-url");
+const use_static_files_1 = require("./use-static-files");
 const useSelectAsset = () => {
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const { setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
@@ -75,6 +75,7 @@ const InitialCompositionLoader = () => {
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const selectComposition = (0, exports.useSelectComposition)();
     const selectAsset = (0, exports.useSelectAsset)();
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
     (0, react_1.useEffect)(() => {
         if (canvasContent) {
             return;
@@ -117,7 +118,6 @@ const InitialCompositionLoader = () => {
                 return;
             }
             if (newCanvas && newCanvas.type === 'asset') {
-                const staticFiles = (0, get_static_files_1.getStaticFiles)();
                 const exists = staticFiles.find((file) => {
                     return file.name === newCanvas.asset;
                 });
@@ -130,7 +130,7 @@ const InitialCompositionLoader = () => {
         };
         window.addEventListener('popstate', onchange);
         return () => window.removeEventListener('popstate', onchange);
-    }, [compositions, selectComposition, setCanvasContent]);
+    }, [compositions, selectComposition, setCanvasContent, staticFiles]);
     return null;
 };
 exports.InitialCompositionLoader = InitialCompositionLoader;

package/dist/components/InlineAction.js

@@ -29,6 +29,6 @@ const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
             pointerEvents: disabled ? 'none' : 'auto',
         };
     }, [disabled, hovered]);
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? 'white' : colors_1.LIGHT_TEXT) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? 'white' : colors_1.LIGHT_TEXT) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InlineDropdown.js

@@ -78,8 +78,9 @@ const InlineDropdown = ({ values, ...props }) => {
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, ...props }) }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("div", { ref: ref, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, ...props }) }), portalStyle
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.InlineDropdown = InlineDropdown;

package/dist/components/InstallPackage.js

@@ -103,10 +103,12 @@ const InstallPackageModal = ({ packageManager }) => {
             enter.unregister();
         };
     }, [disabled, onClick, registerKeybinding]);
-    return ((0, jsx_runtime_1.jsxs)(DismissableModal_1.DismissableModal, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: "Install packages" }), (0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: state.type === 'done' ? ((0, jsx_runtime_1.jsxs)("div", { style: text, children: ["Installed package", selectedPackages.length === 1 ? '' : 's', ' ', "successfully. Restart the server to complete."] })) : state.type === 'restarting' ? ((0, jsx_runtime_1.jsx)("div", { style: text, children: "Restarting the Studio server..." })) : state.type === 'installing' ? ((0, jsx_runtime_1.jsxs)("div", { style: text, children: ["Installing package", selectedPackages.length === 1 ? '' : 's', ". Check your terminal for progress."] })) : ((0, jsx_runtime_1.jsxs)("div", { style: text, children: [Object.entries(studio_shared_1.installableMap)
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Install packages" }), jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: state.type === 'done' ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Installed package", selectedPackages.length === 1 ? '' : 's', ' ', "successfully. Restart the server to complete."] })) : state.type === 'restarting' ? (jsx_runtime_1.jsx("div", { style: text, children: "Restarting the Studio server..." })) : state.type === 'installing' ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Installing package", selectedPackages.length === 1 ? '' : 's', ". Check your terminal for progress."] })) : (jsx_runtime_1.jsxs("div", { style: text, children: [Object.entries(studio_shared_1.installableMap)
                             .filter(([, install]) => install)
                             .map(([pkgShort]) => {
-                            var _a, _b;
+                            var _a;
+                            var _b;
                             const pkg = pkgShort === 'core' ? 'remotion' : `@remotion/${pkgShort}`;
                             const isInstalled = (_b = (_a = window.remotion_installedPackages) === null || _a === void 0 ? void 0 : _a.includes(pkg)) !== null && _b !== void 0 ? _b : false;
                             const link = studio_shared_1.apiDocs[pkgShort];
@@ -117,24 +119,32 @@ const InstallPackageModal = ({ packageManager }) => {
                             if (!description) {
                                 throw new Error('No description for ' + pkg);
                             }
-                            return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: map[pkg], name: pkg, onChange: () => {
+                            return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: map[pkg], name: pkg, onChange: () => {
                                             setMap((prev) => ({ ...prev, [pkg]: !prev[pkg] }));
-                                        }, disabled: !canSelectPackages || isInstalled }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), (0, jsx_runtime_1.jsx)(InstallablePackage_1.InstallablePackageComp, { description: description, isInstalled: isInstalled, link: link, pkg: pkg })] }, pkg));
+                                        }, disabled: !canSelectPackages || isInstalled }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 }), jsx_runtime_1.jsx(InstallablePackage_1.InstallablePackageComp, { description: description, isInstalled: isInstalled, link: link, pkg: pkg })
+                                ] }, pkg));
                         }), studio_shared_1.extraPackages.map((extraPkg) => {
-                            var _a, _b;
+                            var _a;
+                            var _b;
                             const isInstalled = (_b = (_a = window.remotion_installedPackages) === null || _a === void 0 ? void 0 : _a.includes(extraPkg.name)) !== null && _b !== void 0 ? _b : false;
-                            return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: map[extraPkg.name], name: extraPkg.name, onChange: () => {
+                            return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: map[extraPkg.name], name: extraPkg.name, onChange: () => {
                                             setMap((prev) => ({
                                                 ...prev,
                                                 [extraPkg.name]: !prev[extraPkg.name],
                                             }));
-                                        }, disabled: !canSelectPackages || isInstalled }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), (0, jsx_runtime_1.jsx)(InstallablePackage_1.InstallablePackageComp, { description: extraPkg.description, isInstalled: isInstalled, link: extraPkg.docsUrl, pkg: `${extraPkg.name}@${extraPkg.version}` })] }, extraPkg.name));
-                        })] })) }), (0, jsx_runtime_1.jsx)(ModalFooter_1.ModalFooterContainer, { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [state.type === 'idle' ? ((0, jsx_runtime_1.jsxs)("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: ["This will install ", selectedPackages.length, " package", selectedPackages.length === 1 ? '' : 's', (0, jsx_runtime_1.jsx)("br", {}), "using ", packageManager, ", Remotion v", remotion_1.VERSION] })) : null, (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)(ModalButton_1.ModalButton, { onClick: onClick, disabled: disabled, children: [state.type === 'restarting'
+                                        }, disabled: !canSelectPackages || isInstalled }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 }), jsx_runtime_1.jsx(InstallablePackage_1.InstallablePackageComp, { description: extraPkg.description, isInstalled: isInstalled, link: extraPkg.docsUrl, pkg: `${extraPkg.name}@${extraPkg.version}` })
+                                ] }, extraPkg.name));
+                        })] })) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [state.type === 'idle' ? (jsx_runtime_1.jsxs("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: ["This will install ", selectedPackages.length, " package", selectedPackages.length === 1 ? '' : 's', jsx_runtime_1.jsx("br", {}),
+                                "using ", packageManager, ", Remotion v", remotion_1.VERSION] })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onClick, disabled: disabled, children: [state.type === 'restarting'
                                     ? 'Restarting...'
                                     : state.type === 'installing'
                                         ? 'Installing...'
                                         : state.type === 'done'
                                             ? 'Restart Server'
-                                            : 'Install', disabled ? null : (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }) })] }));
+                                            : 'Install', disabled ? null : jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })
+                    ] }) })
+        ] }));
 };
 exports.InstallPackageModal = InstallPackageModal;

package/dist/components/InstallablePackage.js

@@ -5,15 +5,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
 const FONT_SIZE = 13;
 const InstallablePackageComp = ({ isInstalled, pkg, link, description }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { style: {
             fontSize: FONT_SIZE,
             lineHeight: 1.2,
             paddingBottom: 4,
             paddingTop: 4,
-        }, children: [(0, jsx_runtime_1.jsx)("a", { href: link, style: {
+        }, children: [
+            jsx_runtime_1.jsx("a", { href: link, style: {
                     fontSize: FONT_SIZE,
                     color: colors_1.TEXT_COLOR,
                     textDecoration: 'none',
-                }, target: "_blank", children: pkg }), ' ', isInstalled ? ((0, jsx_runtime_1.jsx)("span", { style: { opacity: 0.3, fontSize: 'inherit' }, children: "(installed)" })) : null, (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: FONT_SIZE }, children: description })] }));
+                }, target: "_blank", children: pkg }), ' ', isInstalled ? (jsx_runtime_1.jsx("span", { style: { opacity: 0.3, fontSize: 'inherit' }, children: "(installed)" })) : null, jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: FONT_SIZE }, children: description })
+        ] }));
 };
 exports.InstallablePackageComp = InstallablePackageComp;

package/dist/components/JSONViewer.js

@@ -19,7 +19,7 @@ const JSONViewer = ({ src }) => {
             setJson(JSON.stringify(jsonRes, null, 2));
         });
     }, [src]);
-    return ((0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { value: json !== null && json !== void 0 ? json : undefined, status: "ok", onChange: () => {
+    return (jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { value: json !== null && json !== void 0 ? json : undefined, status: "ok", onChange: () => {
             return null;
         }, style: jsonStyle }));
 };