@remotion/cli 4.0.43 → 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/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/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/checkerboard-background.d.ts

@@ -1,4 +1,4 @@
 export declare const getCheckerboardBackgroundSize: (size: number) => string;
 export declare const getCheckerboardBackgroundPos: (size: number) => string;
-export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "white" | "black";
+export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "black" | "white";
 export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n     linear-gradient(\n        45deg,\n        rgba(0, 0, 0, 0.1) 25%,\n        transparent 25%\n      ),\n      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),\n      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)\n    " | undefined;

package/dist/editor/helpers/colors.d.ts

@@ -16,4 +16,4 @@ export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

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}`,
     ]

package/dist/editor/helpers/is-current-selected-still.d.ts

@@ -1,5 +1,5 @@
-export declare const useIsStill: () => boolean;
-export declare const useDimensions: () => {
+export type Dimensions = {
     width: number;
     height: number;
-} | null;
+};
+export declare const useIsStill: () => boolean;

package/dist/editor/helpers/is-current-selected-still.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDimensions = exports.useIsStill = void 0;
-const react_1 = require("react");
+exports.useIsStill = void 0;
 const remotion_1 = require("remotion");
 const is_composition_still_1 = require("./is-composition-still");
 const useIsStill = () => {
@@ -12,16 +11,3 @@ const useIsStill = () => {
     return (0, is_composition_still_1.isCompositionStill)(resolved.result);
 };
 exports.useIsStill = useIsStill;
-const useDimensions = () => {
-    const config = remotion_1.Internals.useUnsafeVideoConfig();
-    return (0, react_1.useMemo)(() => {
-        if (!config) {
-            return null;
-        }
-        return {
-            width: config.width,
-            height: config.height,
-        };
-    }, [config]);
-};
-exports.useDimensions = useDimensions;

package/dist/editor/helpers/persist-open-folders.d.ts

@@ -1,4 +1,6 @@
 export declare const openFolderKey: (folderName: string, parentName: string | null) => string;
 export type ExpandedFoldersState = Record<string, boolean>;
-export declare const persistExpandedFolders: (state: ExpandedFoldersState) => void;
-export declare const loadExpandedFolders: () => ExpandedFoldersState;
+type PersistanceType = 'assets' | 'compositions';
+export declare const persistExpandedFolders: (type: PersistanceType, state: ExpandedFoldersState) => void;
+export declare const loadExpandedFolders: (type: PersistanceType) => ExpandedFoldersState;
+export {};

package/dist/editor/helpers/persist-open-folders.js

@@ -5,13 +5,15 @@ const openFolderKey = (folderName, parentName) => {
     return [parentName !== null && parentName !== void 0 ? parentName : 'no-parent', folderName].join('/');
 };
 exports.openFolderKey = openFolderKey;
-const localStorageKey = 'remotion.expandedFolders';
-const persistExpandedFolders = (state) => {
-    window.localStorage.setItem(localStorageKey, JSON.stringify(state));
+const localStorageKey = (type) => type === 'compositions'
+    ? 'remotion.expandedFolders'
+    : 'remotion.expandedAssetFolders';
+const persistExpandedFolders = (type, state) => {
+    window.localStorage.setItem(localStorageKey(type), JSON.stringify(state));
 };
 exports.persistExpandedFolders = persistExpandedFolders;
-const loadExpandedFolders = () => {
-    const item = window.localStorage.getItem(localStorageKey);
+const loadExpandedFolders = (type) => {
+    const item = window.localStorage.getItem(localStorageKey(type));
     if (item === null) {
         return {};
     }

package/dist/editor/state/folders.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { ExpandedFoldersState } from '../helpers/persist-open-folders';
 type TFolderContext = {
-    foldersExpanded: ExpandedFoldersState;
-    setFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
+    compositionFoldersExpanded: ExpandedFoldersState;
+    setCompositionFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
+    assetFoldersExpanded: ExpandedFoldersState;
+    setAssetFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
 };
 export declare const FolderContext: React.Context<TFolderContext>;
 export declare const FolderContextProvider: React.FC<{

package/dist/editor/state/folders.js

@@ -5,19 +5,26 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 exports.FolderContext = (0, react_1.createContext)({
-    foldersExpanded: {},
-    setFoldersExpanded: () => {
+    compositionFoldersExpanded: {},
+    setCompositionFoldersExpanded: () => {
+        throw new Error('default state');
+    },
+    assetFoldersExpanded: {},
+    setAssetFoldersExpanded: () => {
         throw new Error('default state');
     },
 });
 const FolderContextProvider = ({ children }) => {
-    const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)());
+    const [compositionFoldersExpanded, setCompositionFoldersExpanded] = (0, react_1.useState)(() => (0, persist_open_folders_1.loadExpandedFolders)('compositions'));
+    const [assetFoldersExpanded, setAssetFoldersExpanded] = (0, react_1.useState)(() => (0, persist_open_folders_1.loadExpandedFolders)('assets'));
     const value = (0, react_1.useMemo)(() => {
         return {
-            foldersExpanded,
-            setFoldersExpanded,
+            compositionFoldersExpanded,
+            setCompositionFoldersExpanded,
+            assetFoldersExpanded,
+            setAssetFoldersExpanded,
         };
-    }, [foldersExpanded]);
+    }, [assetFoldersExpanded, compositionFoldersExpanded]);
     return ((0, jsx_runtime_1.jsx)(exports.FolderContext.Provider, { value: value, children: children }));
 };
 exports.FolderContextProvider = FolderContextProvider;

package/dist/get-cli-options.d.ts

@@ -15,13 +15,13 @@ export declare const getCliOptions: (options: {
     browser: "chrome";
     crf: import("@remotion/renderer").Crf | null;
     pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-    proResProfile: "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy" | undefined;
+    proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
     x264Preset: "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
     everyNthFrame: number;
     numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
     browserExecutable: BrowserExecutable;
-    logLevel: "error" | "verbose" | "info" | "warn";
+    logLevel: "verbose" | "info" | "warn" | "error";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;