@remotion/cli 4.0.42 → 4.0.44

package/dist/editor/components/RenderPreview.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
+const FilePreview_1 = require("./FilePreview");
+const Preview_1 = require("./Preview");
+const msgStyle = {
+    fontSize: 13,
+    color: 'white',
+    fontFamily: 'sans-serif',
+    display: 'flex',
+    justifyContent: 'center',
+};
+const errMsgStyle = {
+    ...msgStyle,
+    color: colors_1.LIGHT_TEXT,
+};
+const RenderPreview = ({ path }) => {
+    const fileType = (0, Preview_1.getPreviewFileType)(path);
+    const src = window.remotion_staticBase.replace('static', 'outputs') + path;
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
+    if (connectionStatus === 'disconnected') {
+        return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "Studio server disconnected" });
+    }
+    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { currentAsset: path, fileSize: null, fileType: fileType, src: src }));
+};
+exports.RenderPreview = RenderPreview;

package/dist/editor/components/RenderQueue/index.js

@@ -1,8 +1,31 @@
 "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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
@@ -36,14 +59,29 @@ const renderQueue = {
 const RenderQueue = () => {
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const previousJobCount = react_1.default.useRef(jobs.length);
     const jobCount = jobs.length;
+    const divRef = react_1.default.useRef(null);
+    (0, react_1.useEffect)(() => {
+        if (!divRef.current) {
+            return;
+        }
+        // Scroll down to bottom of render queue if new jobs have been added
+        if (jobCount > previousJobCount.current) {
+            divRef.current.scrollTo({
+                top: divRef.current.scrollHeight,
+                behavior: 'smooth',
+            });
+        }
+        previousJobCount.current = jobCount;
+    }, [jobCount]);
     if (connectionStatus === 'disconnected') {
         return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The studio server has disconnected." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
     }
     if (jobCount === 0) {
         return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "No renders in the queue." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: jobs.map((j, index) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: divRef, style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: jobs.map((j, index) => {
             return ((0, jsx_runtime_1.jsx)("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: (0, jsx_runtime_1.jsx)(RenderQueueItem_1.RenderQueueItem, { job: j }) }, j.id));
         }) }));
 };

package/dist/editor/components/RendersTab.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RendersTab = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const layout_1 = require("./layout");
 const context_1 = require("./RenderQueue/context");
@@ -26,8 +27,15 @@ const badge = {
 };
 const RendersTab = ({ selected, onClick }) => {
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const failedJobs = jobs.filter((j) => j.status === 'failed').length;
     const jobCount = jobs.length;
+    const isActuallySelected = (0, react_1.useMemo)(() => {
+        if (!canvasContent || canvasContent.type !== 'composition') {
+            return true;
+        }
+        return selected;
+    }, [canvasContent, selected]);
     const badgeStyle = (0, react_1.useMemo)(() => {
         return {
             ...badge,
@@ -38,6 +46,6 @@ const RendersTab = ({ selected, onClick }) => {
             borderColor: colors_1.LIGHT_TEXT,
         };
     }, [failedJobs]);
-    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: selected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: isActuallySelected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
 };
 exports.RendersTab = RendersTab;

package/dist/editor/components/SizeSelector.js

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const Checkmark_1 = require("../icons/Checkmark");
 const preview_size_1 = require("../state/preview-size");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
+const Preview_1 = require("./Preview");
 const commonPreviewSizes = [
     {
         size: 'auto',
@@ -66,12 +68,22 @@ const getUniqueSizes = (size) => {
 };
 exports.getUniqueSizes = getUniqueSizes;
 const SizeSelector = () => {
+    const zoomableFileTypes = ['video', 'image'];
     const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const style = (0, react_1.useMemo)(() => {
         return {
             padding: ControlButton_1.CONTROL_BUTTON_PADDING,
         };
     }, []);
+    const zoomable = (0, react_1.useMemo)(() => {
+        if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset') {
+            if (zoomableFileTypes.includes((0, Preview_1.getPreviewFileType)(canvasContent.asset))) {
+                return true;
+            }
+        }
+        return false;
+    }, [canvasContent, zoomableFileTypes]);
     const items = (0, react_1.useMemo)(() => {
         return (0, exports.getUniqueSizes)(size).map((newSize) => {
             return {
@@ -91,6 +103,9 @@ const SizeSelector = () => {
             };
         });
     }, [setSize, size]);
+    if (!zoomable) {
+        return null;
+    }
     return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/editor/components/StaticFilePreview.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StaticFilePreview: React.FC<{
+    currentAsset: string;
+}>;

package/dist/editor/components/StaticFilePreview.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StaticFilePreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const format_bytes_1 = require("../../format-bytes");
+const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
+const FilePreview_1 = require("./FilePreview");
+const Preview_1 = require("./Preview");
+const msgStyle = {
+    fontSize: 13,
+    color: 'white',
+    fontFamily: 'sans-serif',
+    display: 'flex',
+    justifyContent: 'center',
+};
+const errMsgStyle = {
+    ...msgStyle,
+    color: colors_1.LIGHT_TEXT,
+};
+const StaticFilePreview = ({ currentAsset, }) => {
+    const fileType = (0, Preview_1.getPreviewFileType)(currentAsset);
+    const staticFileSrc = (0, remotion_1.staticFile)(currentAsset);
+    const staticFiles = (0, remotion_1.getStaticFiles)();
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
+    const exists = staticFiles.find((file) => file.name === currentAsset);
+    if (connectionStatus === 'disconnected') {
+        return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "Studio server disconnected" });
+    }
+    if (!exists) {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: errMsgStyle, children: [currentAsset, " does not exist in your public folder."] }));
+    }
+    const fileSize = (() => {
+        const fileFromStaticFiles = staticFiles.find((file) => file.name === currentAsset);
+        if (fileFromStaticFiles) {
+            return (0, format_bytes_1.formatBytes)(fileFromStaticFiles === null || fileFromStaticFiles === void 0 ? void 0 : fileFromStaticFiles.sizeInBytes);
+        }
+        return null;
+    })();
+    if (!currentAsset) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileSize: fileSize, fileType: fileType, src: staticFileSrc }));
+};
+exports.StaticFilePreview = StaticFilePreview;

package/dist/editor/components/TextViewer.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const TextViewer: React.FC<{
+    src: string;
+}>;

package/dist/editor/components/TextViewer.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const textStyle = {
+    margin: 14,
+    fontFamily: 'monospace',
+    flex: 1,
+    color: 'white',
+    whiteSpace: 'pre-wrap',
+};
+const TextViewer = ({ src }) => {
+    const [txt, setTxt] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        fetch(src).then(async (res) => {
+            if (!res.ok || !res.body) {
+                return;
+            }
+            const text = await res.text();
+            setTxt(text);
+        });
+    }, [src]);
+    return (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [txt, " "] });
+};
+exports.TextViewer = TextViewer;

package/dist/editor/components/Timeline/TimelineZoomControls.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineZoomControls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const minus_1 = require("../../icons/minus");
 const plus_1 = require("../../icons/plus");
@@ -24,6 +25,7 @@ const iconStyle = {
     width: 14,
 };
 const TimelineZoomControls = () => {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setZoom, zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onMinusClicked = (0, react_1.useCallback)(() => {
@@ -36,7 +38,7 @@ const TimelineZoomControls = () => {
         setZoom(() => Number(e.target.value));
     }, [setZoom]);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
-    if (isStill) {
+    if (isStill || canvasContent === null || canvasContent.type === 'asset') {
         return null;
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { color: "currentcolor", style: iconStyle }) })] }));

package/dist/editor/components/TimelineInOutToggle.js

@@ -27,6 +27,7 @@ exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -234,7 +235,7 @@ const TimelineInOutPointToggle = () => {
             outMarkClick: onOutMark,
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
-    if (isStill) {
+    if (isStill || canvasContent === null || canvasContent.type === 'asset') {
         return null;
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: (e) => onInMark(e), onContextMenu: clearInMark, disabled: !videoConfig || timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : colors_1.BLUE, style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : colors_1.BLUE, style: style }) })] }));

package/dist/editor/components/UpdateCheck.d.ts

@@ -7,4 +7,10 @@ export type UpdateInfo = {
     timedOut: boolean;
     packageManager: PackageManager | 'unknown';
 };
+export type Bug = {
+    title: string;
+    description: string;
+    link: string;
+    versions: string[];
+};
 export declare const UpdateCheck: () => JSX.Element | null;

package/dist/editor/components/UpdateCheck.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UpdateCheck = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
@@ -20,6 +21,10 @@ const UpdateCheck = () => {
     const [info, setInfo] = (0, react_1.useState)(null);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
+    const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
+    const hasKnownBugs = (0, react_1.useMemo)(() => {
+        return knownBugs && knownBugs.length > 0;
+    }, [knownBugs]);
     const checkForUpdates = (0, react_1.useCallback)(() => {
         const controller = new AbortController();
         (0, actions_1.updateAvailable)(controller.signal)
@@ -34,24 +39,50 @@ const UpdateCheck = () => {
         });
         return controller;
     }, []);
+    const checkForBugs = (0, react_1.useCallback)(() => {
+        const controller = new AbortController();
+        fetch(`https://bugs.remotion.dev/api/${remotion_1.VERSION}`, {
+            signal: controller.signal,
+        })
+            .then(async (res) => {
+            const body = await res.json();
+            setKnownBugs(body.bugs);
+        })
+            .catch((err) => {
+            if (err.message.includes('aborted')) {
+                return;
+            }
+            console.log('Could not check for bugs in this version', err);
+        });
+        return controller;
+    }, []);
     (0, react_1.useEffect)(() => {
-        const abortController = checkForUpdates();
+        const abortUpdate = checkForUpdates();
+        const abortBugs = checkForBugs();
         return () => {
-            abortController.abort();
+            abortUpdate.abort();
+            abortBugs.abort();
         };
-    }, [checkForUpdates]);
+    }, [checkForBugs, checkForUpdates]);
     const openModal = (0, react_1.useCallback)(() => {
         setSelectedModal({
             type: 'update',
             info: info,
+            knownBugs: knownBugs,
         });
-    }, [info, setSelectedModal]);
+    }, [info, knownBugs, setSelectedModal]);
+    const dynButtonStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...buttonStyle,
+            color: hasKnownBugs ? colors_1.WARNING_COLOR : colors_1.BLUE,
+        };
+    }, [hasKnownBugs]);
     if (!info) {
         return null;
     }
     if (!info.updateAvailable) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: buttonStyle, onClick: openModal, type: "button", children: "Update available!" }));
+    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, type: "button", children: hasKnownBugs ? 'Bugfixes available' : 'Update available' }));
 };
 exports.UpdateCheck = UpdateCheck;

package/dist/editor/components/UpdateModal/UpdateModal.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { UpdateInfo } from '../UpdateCheck';
+import type { Bug, UpdateInfo } from '../UpdateCheck';
 export declare const UpdateModal: React.FC<{
     info: UpdateInfo;
+    knownBugs: Bug[];
 }>;

package/dist/editor/components/UpdateModal/UpdateModal.js

@@ -7,6 +7,7 @@ const colors_1 = require("../../helpers/colors");
 const copy_text_1 = require("../../helpers/copy-text");
 const modals_1 = require("../../state/modals");
 const CopyButton_1 = require("../CopyButton");
+const KnownBugs_1 = require("../KnownBugs");
 const layout_1 = require("../layout");
 const ModalContainer_1 = require("../ModalContainer");
 const ModalHeader_1 = require("../ModalHeader");
@@ -15,33 +16,48 @@ const container = {
     padding: 20,
     paddingTop: 0,
 };
+const text = {
+    fontSize: 14,
+};
+const title = {
+    paddingTop: 12,
+    paddingBottom: 8,
+    ...text,
+};
 const code = {
     background: colors_1.SELECTED_BACKGROUND,
     padding: '12px 10px',
-    fontSize: 17,
+    fontSize: 14,
     marginTop: 10,
     marginBottom: 10,
 };
 const link = {
     fontWeight: 'bold',
-    color: 'inherit',
+    color: colors_1.BLUE,
     textDecoration: 'none',
+    ...text,
 };
 const commands = {
-    npm: 'npm run upgrade',
-    yarn: 'yarn upgrade',
-    pnpm: 'pnpm run upgrade',
-    bun: 'bun run upgrade',
-    unknown: 'npm run upgrade',
+    npm: 'npx remotion upgrade',
+    yarn: 'yarn remotion upgrade',
+    pnpm: 'pnpm exec remotion upgrade',
+    bun: 'bun remotion upgrade',
+    unknown: 'npx remotion upgrade',
 };
-const UpdateModal = ({ info }) => {
+const UpdateModal = ({ info, knownBugs }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
+    const hasKnownBugs = (0, react_1.useMemo)(() => {
+        return knownBugs && (knownBugs === null || knownBugs === void 0 ? void 0 : knownBugs.length) > 0;
+    }, [knownBugs]);
     const command = commands[info.packageManager];
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "A new update for Remotion is available! Run the following command:" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: () => (0, copy_text_1.copyText)(command).catch((err) => {
-                                        (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
-                                    }), style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy command", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
+    const onClick = (0, react_1.useCallback)(() => {
+        (0, copy_text_1.copyText)(command).catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
+        });
+    }, [command]);
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [hasKnownBugs ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), (0, jsx_runtime_1.jsx)(KnownBugs_1.KnownBugs, { bugs: knownBugs }), (0, jsx_runtime_1.jsx)("div", { style: { height: '20px' } }), (0, jsx_runtime_1.jsx)("div", { style: text, children: "To upgrade, run the following command:" })] })) : ((0, jsx_runtime_1.jsx)("div", { style: text, children: "A new update for Remotion is available! Run the following command:" })), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: onClick, style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("div", { style: text, children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
 };
 exports.UpdateModal = UpdateModal;

package/dist/editor/components/ZoomPersistor.d.ts

@@ -1,3 +1,5 @@
 import type React from 'react';
+import type { CanvasContent } from 'remotion';
 export declare const getZoomForComposition: (composition: string) => number;
+export declare const deriveCanvasContentFromUrl: () => CanvasContent | null;
 export declare const ZoomPersistor: React.FC;

package/dist/editor/components/ZoomPersistor.js

@@ -1,30 +1,52 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomPersistor = exports.getZoomForComposition = void 0;
+exports.ZoomPersistor = exports.deriveCanvasContentFromUrl = exports.getZoomForComposition = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_zoom_1 = require("../state/timeline-zoom");
-const FramePersistor_1 = require("./FramePersistor");
 const makeKey = (composition) => {
     return `remotion.zoom.${composition}`;
 };
 const persistCurrentZoom = (zoom) => {
-    const currentComposition = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
-    if (!currentComposition) {
+    const currentComposition = (0, exports.deriveCanvasContentFromUrl)();
+    if (!currentComposition || currentComposition.type !== 'composition') {
         return;
     }
-    localStorage.setItem(makeKey(currentComposition), String(zoom));
+    localStorage.setItem(makeKey(currentComposition.compositionId), String(zoom));
 };
 const getZoomForComposition = (composition) => {
     const zoom = localStorage.getItem(makeKey(composition));
     return zoom ? Number(zoom) : 0;
 };
 exports.getZoomForComposition = getZoomForComposition;
+const deriveCanvasContentFromUrl = () => {
+    const substrings = window.location.pathname.split('/');
+    const lastPart = substrings[substrings.length - 1];
+    if (substrings.includes('assets')) {
+        return {
+            type: 'asset',
+            asset: decodeURIComponent(window.location.pathname.substring(8)),
+        };
+    }
+    if (lastPart) {
+        return {
+            type: 'composition',
+            compositionId: lastPart,
+        };
+    }
+    return null;
+};
+exports.deriveCanvasContentFromUrl = deriveCanvasContentFromUrl;
 const ZoomPersistor = () => {
     const [playing] = remotion_1.Internals.Timeline.usePlayingState();
     const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const { currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const isActive = currentComposition === (0, FramePersistor_1.getCurrentCompositionFromUrl)();
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const urlState = (0, exports.deriveCanvasContentFromUrl)();
+    const isActive = urlState &&
+        urlState.type === 'composition' &&
+        canvasContent &&
+        canvasContent.type === 'composition' &&
+        urlState.compositionId === canvasContent.compositionId;
     (0, react_1.useEffect)(() => {
         if (!isActive) {
             return;

package/dist/editor/helpers/create-folder-tree.d.ts

@@ -2,13 +2,14 @@ import type { AnyComposition, StaticFile, TFolder } from 'remotion';
 import type { CompositionSelectorItemType } from '../components/CompositionSelectorItem';
 export type AssetFolder = {
     name: string;
-    items: Structure;
+    items: AssetStructure;
+    expanded: boolean;
 };
-export type Structure = {
+export type AssetStructure = {
     files: StaticFile[];
     folders: AssetFolder[];
 };
-export declare const buildAssetFolderStructure: (files: StaticFile[]) => Structure;
+export declare const buildAssetFolderStructure: (files: StaticFile[], parentFolderName: string | null, foldersExpanded: Record<string, boolean>) => AssetStructure;
 export declare const splitParentIntoNameAndParent: (name: string | null) => {
     name: string | null;
     parent: string | null;

package/dist/editor/helpers/create-folder-tree.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createFolderTree = exports.splitParentIntoNameAndParent = exports.buildAssetFolderStructure = void 0;
 const persist_open_folders_1 = require("./persist-open-folders");
-const buildAssetFolderStructure = (files) => {
+const buildAssetFolderStructure = (files, parentFolderName, foldersExpanded) => {
     const notInFolder = files.filter((f) => !f.name.includes('/'));
     const inFolder = files.filter((f) => f.name.includes('/'));
     const groupedByFolder = {};
@@ -16,6 +16,7 @@ const buildAssetFolderStructure = (files) => {
     return {
         files: notInFolder,
         folders: Object.keys(groupedByFolder).map((folderName) => {
+            var _a;
             const filesInFolder = groupedByFolder[folderName];
             const filesWithoutFolderName = filesInFolder.map((f) => {
                 return {
@@ -23,10 +24,12 @@ const buildAssetFolderStructure = (files) => {
                     name: f.name.substring(folderName.length + 1),
                 };
             });
+            const key = [parentFolderName, folderName].filter(Boolean).join('/');
+            const isExpanded = (_a = foldersExpanded[key]) !== null && _a !== void 0 ? _a : false;
             return {
                 name: folderName,
-                items: (0, exports.buildAssetFolderStructure)(filesWithoutFolderName),
-                expanded: false,
+                items: (0, exports.buildAssetFolderStructure)(filesWithoutFolderName, [parentFolderName, folderName].filter(Boolean).join('/'), foldersExpanded),
+                expanded: isExpanded,
             };
         }),
     };

package/dist/editor/helpers/document-title.d.ts

@@ -1,4 +1,4 @@
 import type { RenderJob } from '../../preview-server/render-queue/job';
-export declare const setCurrentVideoId: (id: string | null) => void;
+export declare const setCurrentCanvasContentId: (id: string | null) => void;
 export declare const setUnsavedProps: (unsaved: boolean) => void;
 export declare const setRenderJobs: (jobs: RenderJob[]) => void;

package/dist/editor/helpers/document-title.js

@@ -1,16 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setRenderJobs = exports.setUnsavedProps = exports.setCurrentVideoId = void 0;
+exports.setRenderJobs = exports.setUnsavedProps = exports.setCurrentCanvasContentId = void 0;
 const truthy_1 = require("../../truthy");
-let currentVideoId = null;
+let currentItemName = null;
 let unsavedProps = false;
 let tabInactive = false;
 let renderJobs = [];
-const setCurrentVideoId = (id) => {
-    currentVideoId = id;
+const setCurrentCanvasContentId = (id) => {
+    if (!id) {
+        currentItemName = id;
+        updateTitle();
+        return;
+    }
+    const idWithoutFolder = id.split('/').pop();
+    currentItemName = idWithoutFolder;
     updateTitle();
 };
-exports.setCurrentVideoId = setCurrentVideoId;
+exports.setCurrentCanvasContentId = setCurrentCanvasContentId;
 const setUnsavedProps = (unsaved) => {
     window.remotion_unsavedProps = unsaved;
     unsavedProps = unsaved;
@@ -28,13 +34,13 @@ document.addEventListener('visibilitychange', () => {
 const productName = 'Remotion Studio';
 const suffix = `- ${productName}`;
 const updateTitle = () => {
-    if (!currentVideoId) {
+    if (!currentItemName) {
         document.title = productName;
         return;
     }
-    const currentCompTitle = `${currentVideoId} / ${window.remotion_projectName}`;
+    const currentCompTitle = `${currentItemName} / ${window.remotion_projectName}`;
     document.title = [
-        getProgressInBrackets(currentVideoId, renderJobs),
+        getProgressInBrackets(currentItemName, renderJobs),
         unsavedProps && tabInactive ? '✏️' : null,
         `${currentCompTitle} ${suffix}`,
     ]