@remotion/studio 4.0.515 → 4.0.516

package/dist/components/selected-outline-measurement.d.ts

@@ -80,6 +80,6 @@ export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideI
     readonly compositions?: readonly import("remotion").AnyComposition[] | undefined;
     readonly timelinePosition: number;
 }) => SequenceWithSelectedOutline[];
-export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineLayoutTarget[]) => SelectedOutline[];
+export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineLayoutTarget[], hoveredTimelineNodePathKey: string | null) => SelectedOutline[];
 export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;
 export {};

package/dist/components/selected-outline-measurement.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedRotationInfo = exports.getSelectedTransformOriginInfo = exports.getSelectedCropInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.cropOutlinePoints = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const colors_1 = require("../helpers/colors");
+const get_box_quads_polyfill_internals_js_1 = require("../helpers/get-box-quads-polyfill-internals.js");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
 const selected_outline_types_1 = require("./selected-outline-types");
 const selected_outline_uv_1 = require("./selected-outline-uv");
@@ -186,11 +188,18 @@ const getSvgSvgElementOutlinePoints = (element, containerRect) => {
         containerRect,
     });
 };
-const getElementOutlinePoints = (element, containerRect) => {
+const getElementOutlinePoints = (element, containerRect, includeOutsideContainer) => {
     const elementRect = element.getBoundingClientRect();
     if (elementRect.width === 0 && elementRect.height === 0) {
         return null;
     }
+    if (!includeOutsideContainer &&
+        (elementRect.right <= containerRect.left ||
+            elementRect.left >= containerRect.right ||
+            elementRect.bottom <= containerRect.top ||
+            elementRect.top >= containerRect.bottom)) {
+        return null;
+    }
     if (isSvgSvgElement(element)) {
         return getSvgSvgElementOutlinePoints(element, containerRect);
     }
@@ -410,7 +419,9 @@ const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths,
     });
 };
 exports.getSequencesWithSelectableOutlines = getSequencesWithSelectableOutlines;
-const measureOutlines = (container, targets) => {
+const measureOutlines = (container, targets, hoveredTimelineNodePathKey) => {
+    // Reuse shared ancestor geometry within this synchronous batch only.
+    (0, get_box_quads_polyfill_internals_js_1.useCache)();
     const containerRect = container.getBoundingClientRect();
     const outlines = [];
     for (const target of targets) {
@@ -418,7 +429,9 @@ const measureOutlines = (container, targets) => {
         if (element === null) {
             continue;
         }
-        const uncroppedPoints = getElementOutlinePoints(element, containerRect);
+        const includeOutsideContainer = target.showSelectedOutline ||
+            (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(target.nodePathInfo.sequenceSubscriptionKey) === hoveredTimelineNodePathKey;
+        const uncroppedPoints = getElementOutlinePoints(element, containerRect, includeOutsideContainer);
         if (uncroppedPoints === null) {
             continue;
         }

package/dist/components/use-delete-asset.d.ts

@@ -0,0 +1 @@
+export declare const useDeleteAsset: (relativePath: string | null) => () => void;

package/dist/components/use-delete-asset.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeleteAsset = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const delete_static_file_1 = require("../api/delete-static-file");
+const ConfirmationDialog_1 = require("./ConfirmationDialog");
+const styles_1 = require("./Menu/styles");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const useDeleteAsset = (relativePath) => {
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    return (0, react_1.useCallback)(() => {
+        if (relativePath === null) {
+            return;
+        }
+        confirm({
+            title: 'Delete asset',
+            message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Do you want to delete the asset", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: relativePath }),
+                    " from your public folder?"] })),
+            confirmLabel: 'Delete',
+        })
+            .then((confirmed) => {
+            if (!confirmed) {
+                return;
+            }
+            const notification = (0, NotificationCenter_1.showNotification)(`Deleting ${relativePath}...`, null);
+            (0, delete_static_file_1.deleteStaticFile)(relativePath)
+                .then(() => {
+                notification.dismiss();
+            })
+                .catch((err) => {
+                notification.replaceContent(`Could not delete ${relativePath}: ${err.message}`, 3000);
+            });
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not delete ${relativePath}: ${err.message}`, 3000);
+        });
+    }, [confirm, relativePath]);
+};
+exports.useDeleteAsset = useDeleteAsset;

package/dist/components/use-selected-outline-control-target.d.ts

@@ -0,0 +1,11 @@
+import type { SelectedOutlineLayoutTarget, SelectedOutlineTarget } from './selected-outline-types';
+export declare const useSelectedOutlineControlTarget: ({ getLatestTargetByKey, layoutTarget, }: {
+    readonly getLatestTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
+    readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
+}) => {
+    controlTarget: SelectedOutlineTarget | undefined;
+    getLayoutTarget: () => SelectedOutlineLayoutTarget | undefined;
+    getTarget: () => SelectedOutlineTarget | undefined;
+    hovered: boolean;
+    onHoverChange: (key: string | null) => void;
+};

package/dist/components/use-selected-outline-control-target.js

@@ -0,0 +1,79 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectedOutlineControlTarget = void 0;
+const react_1 = __importStar(require("react"));
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
+const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
+const useSelectedOutlineControlTarget = ({ getLatestTargetByKey, layoutTarget, }) => {
+    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
+    const targetRef = (0, react_1.useRef)(layoutTarget);
+    (0, react_1.useLayoutEffect)(() => {
+        targetRef.current = layoutTarget;
+    }, [layoutTarget]);
+    const getTarget = react_1.default.useCallback(() => {
+        const currentTarget = targetRef.current;
+        if (currentTarget === undefined) {
+            return undefined;
+        }
+        return getLatestTargetByKey(currentTarget.key);
+    }, [getLatestTargetByKey]);
+    const getLayoutTarget = react_1.default.useCallback(() => targetRef.current, []);
+    const hoveredNodePathKey = (0, react_1.useMemo)(() => layoutTarget === undefined
+        ? null
+        : (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(layoutTarget.nodePathInfo.sequenceSubscriptionKey), [layoutTarget]);
+    const hovered = (0, timeline_sequence_hover_1.useIsTimelineSequenceHovered)(hoveredNodePathKey);
+    const controlTarget = layoutTarget !== undefined && (layoutTarget.containsSelection || hovered)
+        ? getLatestTargetByKey(layoutTarget.key)
+        : undefined;
+    const onHoverChange = react_1.default.useCallback((key) => {
+        setHoveredSequence((currentHover) => {
+            if (key !== null) {
+                const hoverTarget = targetRef.current;
+                if (hoverTarget === undefined || hoverTarget.key !== key) {
+                    return currentHover;
+                }
+                return {
+                    key,
+                    nodePathKey: (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(hoverTarget.nodePathInfo.sequenceSubscriptionKey),
+                    source: 'canvas',
+                };
+            }
+            return (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover;
+        });
+    }, [setHoveredSequence]);
+    return { controlTarget, getLayoutTarget, getTarget, hovered, onHoverChange };
+};
+exports.useSelectedOutlineControlTarget = useSelectedOutlineControlTarget;

package/dist/esm/{chunk-s6k99gh2.js → chunk-4bxz1d3g.js}

@@ -78,7 +78,6 @@ var SELECTED_GUIDE = "#d22d3a";
 var LINE_COLOR = "#363A3E";
 var TIMELINE_TRACK_SEPARATOR = "#13161B";
 var LIGHT_GRAY = "#ccc";
-var KEYBOARD_SHORTCUT_KEY_COLOR = "#eee";
 var NOTIFICATION_BACKGROUND = "#111111";
 var RENDER_STATUS_BACKGROUND = "#222";
 var ERROR_CODE_FRAME_BACKGROUND = "#070707";
@@ -88,6 +87,8 @@ var INFO_BLUE = "#60a5fa";
 var SERVER_DISCONNECTED_BACKGROUND = "#e74c3c";
 var STACK_FRAME_BORDER_BLUE = "rgb(66, 144, 245)";
 var TIMELINE_BACKGROUND_COLOR = "#15181B";
+var TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = "#2C2F32";
+var TIMELINE_NEGATIVE_START_BORDER_COLOR = "#414446";
 var TIMELINE_SELECTED_BACKGROUND_COLOR = "#3B3F42";
 var TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = "#B0B0B0";
 var TIMELINE_BLUE = "#0b84ff";
@@ -159,4 +160,4 @@ var getBackgroundFromHoverState = ({
   return TRANSPARENT;
 };
 
-export { __toESM, __require, BLACK, WHITE, RED, TRANSPARENT, CURRENT_COLOR, CURRENT_COLOR_LOWERCASE, WHITE_HEX, WHITE_FULL_HEX, BLACK_HEX, BLACK_FULL_HEX, BACKGROUND, BACKGROUND_HEX, BACKGROUND__TRANSPARENT, INPUT_BACKGROUND, LIGHT_COLOR, SELECTED_BACKGROUND, LIGHT_TEXT, RULER_COLOR, WHITE_ALPHA_05, WHITE_ALPHA_06, WHITE_ALPHA_08, WHITE_ALPHA_10, WHITE_ALPHA_12, WHITE_ALPHA_15, WHITE_ALPHA_20, WHITE_ALPHA_25, WHITE_ALPHA_30, WHITE_ALPHA_35, WHITE_ALPHA_40, WHITE_ALPHA_45, WHITE_ALPHA_50, WHITE_ALPHA_60, WHITE_ALPHA_70, WHITE_ALPHA_72, WHITE_ALPHA_80, BLACK_ALPHA_30, BLACK_ALPHA_40, BLACK_ALPHA_50, BLACK_ALPHA_60, FAIL_COLOR, WARNING_COLOR, BLUE, BLUE_HOVERED, BLUE_DISABLED, UNSELECTED_GUIDE, SELECTED_GUIDE, LINE_COLOR, TIMELINE_TRACK_SEPARATOR, LIGHT_GRAY, KEYBOARD_SHORTCUT_KEY_COLOR, NOTIFICATION_BACKGROUND, RENDER_STATUS_BACKGROUND, ERROR_CODE_FRAME_BACKGROUND, ERROR_CODE_FRAME_LINE_BACKGROUND, ERROR_LINK_COLOR, INFO_BLUE, SERVER_DISCONNECTED_BACKGROUND, TIMELINE_BACKGROUND_COLOR, TIMELINE_SELECTED_BACKGROUND_COLOR, TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR, TIMELINE_BLUE, TIMELINE_PLAYHEAD_COLOR, TIMELINE_DROP_BLUE_ALPHA_12, TIMELINE_DROP_BLUE_ALPHA_16, TIMELINE_MARQUEE_BLUE_ALPHA_16, INFO_BLUE_BACKGROUND, BORDER_BLACK, BORDER_WHITE, BORDER_WHITE_2PX, BORDER_CURRENT_COLOR, BORDER_TRANSPARENT_2PX, BORDER_BLACK_ALPHA_50, BORDER_BLACK_ALPHA_60, BORDER_WHITE_ALPHA_12, BORDER_WHITE_ALPHA_20, BORDER_INFO_BLUE, BORDER_STACK_FRAME_BLUE, BORDER_TIMELINE_DROP_BLUE, BORDER_TIMELINE_MARQUEE_BLUE, SHADOW_BLACK, SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM, SHADOW_BLACK_ALPHA_50_TOWARDS_TOP, NOTIFICATION_SHADOW, SERVER_DISCONNECTED_SHADOW, COLOR_PICKER_POPUP_SHADOW, COLOR_PICKER_HANDLE_SHADOW, NOTIFICATION_BORDER, FOCUS_BOX_SHADOW, CHECKERBOARD_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_COLOR, COLOR_PICKER_SATURATION_VALUE_GRADIENT, COLOR_PICKER_SATURATION_BLACK_GRADIENT, COLOR_PICKER_ALPHA_TRANSPARENT, COLOR_PICKER_HUE_GRADIENT, ERROR_MESSAGE_MASK_IMAGE, SELECTED_OUTLINE_DROP_SHADOW, SELECTED_OUTLINE_UV_DROP_SHADOW, LOOPED_INDICATOR_DROP_SHADOW, TIMELINE_AUDIO_GRADIENT, TIMELINE_VIDEO_GRADIENT, TIMELINE_IMAGE_GRADIENT, getBackgroundFromHoverState };
+export { __toESM, __require, BLACK, WHITE, RED, TRANSPARENT, CURRENT_COLOR, CURRENT_COLOR_LOWERCASE, WHITE_HEX, WHITE_FULL_HEX, BLACK_HEX, BLACK_FULL_HEX, BACKGROUND, BACKGROUND_HEX, BACKGROUND__TRANSPARENT, INPUT_BACKGROUND, LIGHT_COLOR, SELECTED_BACKGROUND, LIGHT_TEXT, RULER_COLOR, WHITE_ALPHA_05, WHITE_ALPHA_06, WHITE_ALPHA_08, WHITE_ALPHA_10, WHITE_ALPHA_12, WHITE_ALPHA_15, WHITE_ALPHA_20, WHITE_ALPHA_25, WHITE_ALPHA_30, WHITE_ALPHA_35, WHITE_ALPHA_40, WHITE_ALPHA_45, WHITE_ALPHA_50, WHITE_ALPHA_60, WHITE_ALPHA_70, WHITE_ALPHA_72, WHITE_ALPHA_80, BLACK_ALPHA_30, BLACK_ALPHA_40, BLACK_ALPHA_50, BLACK_ALPHA_60, FAIL_COLOR, WARNING_COLOR, BLUE, BLUE_HOVERED, BLUE_DISABLED, UNSELECTED_GUIDE, SELECTED_GUIDE, LINE_COLOR, TIMELINE_TRACK_SEPARATOR, LIGHT_GRAY, NOTIFICATION_BACKGROUND, RENDER_STATUS_BACKGROUND, ERROR_CODE_FRAME_BACKGROUND, ERROR_CODE_FRAME_LINE_BACKGROUND, ERROR_LINK_COLOR, INFO_BLUE, SERVER_DISCONNECTED_BACKGROUND, TIMELINE_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BORDER_COLOR, TIMELINE_SELECTED_BACKGROUND_COLOR, TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR, TIMELINE_BLUE, TIMELINE_PLAYHEAD_COLOR, TIMELINE_DROP_BLUE_ALPHA_12, TIMELINE_DROP_BLUE_ALPHA_16, TIMELINE_MARQUEE_BLUE_ALPHA_16, INFO_BLUE_BACKGROUND, BORDER_BLACK, BORDER_WHITE, BORDER_WHITE_2PX, BORDER_CURRENT_COLOR, BORDER_TRANSPARENT_2PX, BORDER_BLACK_ALPHA_50, BORDER_BLACK_ALPHA_60, BORDER_WHITE_ALPHA_12, BORDER_WHITE_ALPHA_20, BORDER_INFO_BLUE, BORDER_STACK_FRAME_BLUE, BORDER_TIMELINE_DROP_BLUE, BORDER_TIMELINE_MARQUEE_BLUE, SHADOW_BLACK, SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM, SHADOW_BLACK_ALPHA_50_TOWARDS_TOP, NOTIFICATION_SHADOW, SERVER_DISCONNECTED_SHADOW, COLOR_PICKER_POPUP_SHADOW, COLOR_PICKER_HANDLE_SHADOW, NOTIFICATION_BORDER, FOCUS_BOX_SHADOW, CHECKERBOARD_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_COLOR, COLOR_PICKER_SATURATION_VALUE_GRADIENT, COLOR_PICKER_SATURATION_BLACK_GRADIENT, COLOR_PICKER_ALPHA_TRANSPARENT, COLOR_PICKER_HUE_GRADIENT, ERROR_MESSAGE_MASK_IMAGE, SELECTED_OUTLINE_DROP_SHADOW, SELECTED_OUTLINE_UV_DROP_SHADOW, LOOPED_INDICATOR_DROP_SHADOW, TIMELINE_AUDIO_GRADIENT, TIMELINE_VIDEO_GRADIENT, TIMELINE_IMAGE_GRADIENT, getBackgroundFromHoverState };