@remotion/studio 4.0.472 → 4.0.473

package/dist/components/NewComposition/RenameStaticFile.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenameStaticFileModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const rename_static_file_1 = require("../../api/rename-static-file");
+const url_state_1 = require("../../helpers/url-state");
+const modals_1 = require("../../state/modals");
+const Button_1 = require("../Button");
+const layout_1 = require("../layout");
+const ModalFooter_1 = require("../ModalFooter");
+const ModalHeader_1 = require("../ModalHeader");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const layout_2 = require("../RenderModal/layout");
+const use_static_files_1 = require("../use-static-files");
+const DismissableModal_1 = require("./DismissableModal");
+const RemInput_1 = require("./RemInput");
+const ValidationMessage_1 = require("./ValidationMessage");
+const content = {
+    padding: 12,
+    paddingRight: 12,
+    flex: 1,
+    fontSize: 13,
+    minWidth: 500,
+};
+const getParent = (relativePath) => {
+    const slashIndex = relativePath.lastIndexOf('/');
+    return slashIndex === -1 ? '' : relativePath.slice(0, slashIndex);
+};
+const getBaseName = (relativePath) => {
+    const slashIndex = relativePath.lastIndexOf('/');
+    return slashIndex === -1 ? relativePath : relativePath.slice(slashIndex + 1);
+};
+const RenameStaticFileModal = ({ relativePath }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
+    const [newName, setNewName] = (0, react_1.useState)(() => getBaseName(relativePath));
+    const [submitting, setSubmitting] = (0, react_1.useState)(false);
+    const parent = (0, react_1.useMemo)(() => getParent(relativePath), [relativePath]);
+    const newRelativePath = (0, react_1.useMemo)(() => {
+        return [parent, newName].filter(Boolean).join('/');
+    }, [newName, parent]);
+    const changed = newRelativePath !== relativePath;
+    const validationMessage = (0, react_1.useMemo)(() => {
+        const trimmedName = newName.trim();
+        if (trimmedName.length === 0) {
+            return 'Name cannot be empty';
+        }
+        if (trimmedName !== newName) {
+            return 'Name cannot start or end with whitespace';
+        }
+        if (newName.includes('/') || newName.includes('\\')) {
+            return 'Name cannot include slashes';
+        }
+        const existingFile = staticFiles.find((file) => {
+            return file.name === newRelativePath && file.name !== relativePath;
+        });
+        if (existingFile) {
+            return 'An asset with this name already exists';
+        }
+        return null;
+    }, [newName, newRelativePath, relativePath, staticFiles]);
+    const valid = changed && validationMessage === null;
+    const onNameChange = (0, react_1.useCallback)((e) => {
+        setNewName(e.target.value);
+    }, []);
+    const onRename = (0, react_1.useCallback)(() => {
+        if (!valid) {
+            return;
+        }
+        setSubmitting(true);
+        const notification = (0, NotificationCenter_1.showNotification)(`Renaming ${relativePath}...`, null);
+        (0, rename_static_file_1.renameStaticFile)({
+            oldRelativePath: relativePath,
+            newRelativePath,
+        })
+            .then(() => {
+            setSelectedModal(null);
+            if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
+                canvasContent.asset === relativePath) {
+                setCanvasContent({ type: 'asset', asset: newRelativePath });
+                (0, url_state_1.pushUrl)(`/assets/${newRelativePath}`);
+            }
+            notification.replaceContent(`Renamed to ${newRelativePath}`, 2000);
+        })
+            .catch((err) => {
+            setSubmitting(false);
+            notification.replaceContent(`Could not rename ${relativePath}: ${err.message}`, 3000);
+        });
+    }, [
+        canvasContent,
+        newRelativePath,
+        relativePath,
+        setCanvasContent,
+        setSelectedModal,
+        valid,
+    ]);
+    const onSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        onRename();
+    }, [onRename]);
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${relativePath}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+                    jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Name" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
+                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newName, onChange: onNameChange, type: "text", autoFocus: true, autoComplete: "off", "data-1p-ignore": true, placeholder: "Asset name", status: validationMessage ? 'error' : 'ok', rightAlign: true }), validationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: validationMessage, type: "error" })
+                                                ] })) : null] }) })
+                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", justify: "flex-end", children: [
+                                jsx_runtime_1.jsx(Button_1.Button, { onClick: () => setSelectedModal(null), children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onRename, disabled: !valid || submitting, children: "Rename" })
+                            ] }) })
+                ] })
+        ] }));
+};
+exports.RenameStaticFileModal = RenameStaticFileModal;

package/dist/components/OptionsPanel.js

@@ -181,7 +181,11 @@ const OptionsPanel = ({ readOnlyStudio }) => {
             saveToFile(updater);
         }
     }, [compositionId, compositionDefaultProps, saveToFile, updateProps]);
-    return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", children: [
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [visualControlsTabActivated ? (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'visual-controls', onClick: onVisualControlsSelected, children: "Controls" })) : null, jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", hasLocalModifications ? (jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: resetToOriginal })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'input-props' ? (composition ? (jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props" }, composition.id)) : null) : panel === 'visual-controls' && visualControlsTabActivated ? (jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
 };
 exports.OptionsPanel = OptionsPanel;

package/dist/components/OutlineToggle.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const OutlineToggle: React.FC;

package/dist/components/OutlineToggle.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OutlineToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const editor_outlines_1 = require("../state/editor-outlines");
+const ControlButton_1 = require("./ControlButton");
+const OutlineToggle = () => {
+    const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
+    const onClick = (0, react_1.useCallback)(() => {
+        setEditorShowOutlines((current) => !current);
+    }, [setEditorShowOutlines]);
+    const color = editorShowOutlines ? colors_1.BLUE : 'white';
+    const accessibilityLabel = editorShowOutlines
+        ? 'Hide outlines'
+        : 'Show outlines';
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 16, height: 16 }, viewBox: "0 0 512 512", fill: color, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { d: "M32 119.4C12.9 108.4 0 87.7 0 64 0 28.7 28.7 0 64 0 87.7 0 108.4 12.9 119.4 32l273.1 0c11.1-19.1 31.7-32 55.4-32 35.3 0 64 28.7 64 64 0 23.7-12.9 44.4-32 55.4l0 273.1c19.1 11.1 32 31.7 32 55.4 0 35.3-28.7 64-64 64-23.7 0-44.4-12.9-55.4-32l-273.1 0c-11.1 19.1-31.7 32-55.4 32-35.3 0-64-28.7-64-64 0-23.7 12.9-44.4 32-55.4l0-273.1zm64 0l0 273.1c9.7 5.6 17.8 13.7 23.4 23.4l273.1 0c5.6-9.7 13.7-17.8 23.4-23.4l0-273.1c-9.7-5.6-17.8-13.7-23.4-23.4L119.4 96c-5.6 9.7-13.7 17.8-23.4 23.4z" }) }) }));
+};
+exports.OutlineToggle = OutlineToggle;

package/dist/components/Preview.d.ts

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

package/dist/components/Preview.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoPreview = exports.getPreviewFileType = void 0;
+exports.VideoPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
@@ -8,12 +8,15 @@ const remotion_1 = require("remotion");
 const ErrorLoader_1 = require("../error-overlay/remotion-overlay/ErrorLoader");
 const checkerboard_background_1 = require("../helpers/checkerboard-background");
 const colors_1 = require("../helpers/colors");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const checkerboard_1 = require("../state/checkerboard");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const RenderPreview_1 = require("./RenderPreview");
 const SelectedOutlineOverlay_1 = require("./SelectedOutlineOverlay");
 const Spinner_1 = require("./Spinner");
 const StaticFilePreview_1 = require("./StaticFilePreview");
+const should_clear_selection_on_pointer_down_1 = require("./Timeline/should-clear-selection-on-pointer-down");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const centeredContainer = {
     display: 'flex',
     flex: 1,
@@ -33,36 +36,6 @@ const assetMetadataErrorContainer = {
     height: '100%',
     overflowY: 'auto',
 };
-const getPreviewFileType = (fileName) => {
-    var _a;
-    if (!fileName) {
-        return 'other';
-    }
-    const audioExtensions = ['mp3', 'wav', 'ogg', 'aac'];
-    const videoExtensions = ['mp4', 'avi', 'mkv', 'mov', 'webm'];
-    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
-    const fileExtension = (_a = fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    if (fileExtension === undefined) {
-        throw new Error('File extension is undefined');
-    }
-    if (audioExtensions.includes(fileExtension)) {
-        return 'audio';
-    }
-    if (videoExtensions.includes(fileExtension)) {
-        return 'video';
-    }
-    if (imageExtensions.includes(fileExtension)) {
-        return 'image';
-    }
-    if (fileExtension === 'json') {
-        return 'json';
-    }
-    if (fileExtension === 'txt') {
-        return 'txt';
-    }
-    return 'other';
-};
-exports.getPreviewFileType = getPreviewFileType;
 const checkerboardSize = 49;
 const containerStyle = (options) => {
     return {
@@ -126,7 +99,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
             overflow: canvasContent.type === 'composition' ? 'visible' : 'hidden',
             justifyContent: canvasContent.type === 'asset' ? 'center' : 'flex-start',
             alignItems: canvasContent.type === 'asset' &&
-                (0, exports.getPreviewFileType)(canvasContent.asset) === 'audio'
+                (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset) === 'audio'
                 ? 'center'
                 : 'normal',
         };
@@ -154,6 +127,8 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
 };
 const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {
     const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
+    const portalContainer = (0, react_1.useRef)(null);
     const style = (0, react_1.useMemo)(() => {
         return containerStyle({
             checkerboard,
@@ -178,6 +153,21 @@ const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions })
             current === null || current === void 0 ? void 0 : current.removeChild(remotion_1.Internals.portalNode());
         };
     }, []);
-    const portalContainer = (0, react_1.useRef)(null);
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        if (!(0, should_clear_selection_on_pointer_down_1.shouldClearSelectionOnPointerDown)(event)) {
+            return;
+        }
+        clearSelection();
+    }, [clearSelection]);
+    (0, react_1.useEffect)(() => {
+        const { current } = portalContainer;
+        if (!current) {
+            return;
+        }
+        current.addEventListener('pointerdown', onPointerDown);
+        return () => {
+            current.removeEventListener('pointerdown', onPointerDown);
+        };
+    }, [onPointerDown]);
     return jsx_runtime_1.jsx("div", { ref: portalContainer, style: style });
 };

package/dist/components/PreviewToolbar.js

@@ -16,12 +16,14 @@ const FullscreenToggle_1 = require("./FullscreenToggle");
 const layout_1 = require("./layout");
 const LoopToggle_1 = require("./LoopToggle");
 const MuteToggle_1 = require("./MuteToggle");
+const OutlineToggle_1 = require("./OutlineToggle");
 const PlaybackKeyboardShortcutsManager_1 = require("./PlaybackKeyboardShortcutsManager");
 const PlaybackRatePersistor_1 = require("./PlaybackRatePersistor");
 const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
 const PlayPause_1 = require("./PlayPause");
 const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
 const TOOLBAR_HEIGHT = 50;
@@ -70,6 +72,16 @@ const sideContainer = {
 const padding = {
     width: timeline_layout_1.TIMELINE_PADDING,
 };
+const toolbarControl = {
+    display: 'contents',
+};
+const PreviewToolbarControl = ({ children }) => {
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsx("div", { style: toolbarControl, onPointerDown: onPointerDown, children: children }));
+};
 const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const { playbackRate, setPlaybackRate } = remotion_1.Internals.usePlaybackRate();
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
@@ -136,12 +148,13 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     return (jsx_runtime_1.jsxs("div", { ref: previewToolbarRef, style: isMobileLayout ? mobileContainer : container, className: "css-reset", children: [
             jsx_runtime_1.jsx("div", { ref: leftScrollIndicatorRef, style: scrollIndicatorLeft }), isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                            jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {})
-                        ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: mediaMuted }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
-                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                            jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {}) })
+                        ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: mediaMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
+                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), TimelineSelection_1.ENABLE_OUTLINES ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })) : null] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), jsx_runtime_1.jsx("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })
         ] }));
 };

package/dist/components/RenderButton.js

@@ -102,7 +102,9 @@ const RenderButton = ({ readOnlyStudio, }) => {
         shouldApplyCssTransforms: true,
     });
     const refresh = size === null || size === void 0 ? void 0 : size.refresh;
-    const onPointerDown = (0, react_1.useCallback)(() => {
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
         setDropdownOpened((o) => {
             if (!o) {
                 refresh === null || refresh === void 0 ? void 0 : refresh();
@@ -110,6 +112,10 @@ const RenderButton = ({ readOnlyStudio, }) => {
             return !o;
         });
     }, [refresh]);
+    const onMenuPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
     const onClickDropdown = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         const isKeyboardInitiated = e.detail === 0;
@@ -420,7 +426,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
                             ] }) }), shouldShowDropdown ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: dropdownTriggerStyle, disabled: !readOnlyStudio && connectionStatus !== 'connected', className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
                         ] })) : null] }), 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: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                ? 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: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.RenderButton = RenderButton;

package/dist/components/RenderPreview.js

@@ -6,8 +6,8 @@ const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const FilePreview_1 = require("./FilePreview");
-const Preview_1 = require("./Preview");
 const msgStyle = {
     fontSize: 13,
     color: 'white',
@@ -20,7 +20,7 @@ const errMsgStyle = {
     color: colors_1.LIGHT_TEXT,
 };
 const RenderPreview = ({ path, assetMetadata, getBlob }) => {
-    const fileType = (0, Preview_1.getPreviewFileType)(path);
+    const fileType = (0, get_preview_file_type_1.getPreviewFileType)(path);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const [blobUrl, setBlobUrl] = (0, react_1.useState)(null);

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -8,6 +8,26 @@ type OutlinePoint = {
     readonly y: number;
 };
 type UvCoordinate = readonly [number, number];
+type UvCoordinateFieldSchema = Extract<SequenceFieldSchema, {
+    type: 'uv-coordinate';
+}>;
+type SelectedOutlineUvHandle = {
+    readonly clientId: string;
+    readonly codeValue: CanUpdateSequencePropStatusStatic;
+    readonly effectIndex: number;
+    readonly fieldDefault: UvCoordinate | undefined;
+    readonly fieldKey: string;
+    readonly fieldSchema: UvCoordinateFieldSchema;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: SequenceSchema;
+    readonly value: UvCoordinate;
+};
+type UvConnectionHandle = Pick<SelectedOutlineUvHandle, 'effectIndex' | 'fieldKey' | 'fieldSchema' | 'value'>;
+type UvHandleConnectionLine = {
+    readonly key: string;
+    readonly from: OutlinePoint;
+    readonly to: OutlinePoint;
+};
 type SelectedOutlineDragTarget = {
     readonly codeValue: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly clientId: string;
@@ -52,6 +72,10 @@ type SequenceWithSelectedOutline = {
     readonly sequence: TSequence;
 };
 export declare const getUvHandlePosition: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], uv: UvCoordinate) => OutlinePoint;
+export declare const getUvHandleConnectionLines: ({ handles, points, }: {
+    readonly handles: readonly UvConnectionHandle[];
+    readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+}) => UvHandleConnectionLine[];
 export declare const getUvCoordinateForPoint: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], point: OutlinePoint) => UvCoordinate;
 export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlKey, }: {
     readonly shiftKey: boolean;