@remotion/studio 4.0.472 → 4.0.473

package/dist/components/Timeline/TimelineKeyframeDiamond.js

@@ -40,49 +40,52 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
+const TimelineKeyframeDragState_1 = require("./TimelineKeyframeDragState");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const use_timeline_keyframe_drag_1 = require("./use-timeline-keyframe-drag");
+const diamondSize = 12;
 const diamondBase = {
+    alignItems: 'center',
+    background: 'none',
+    border: 'none',
+    display: 'flex',
+    height: diamondSize,
+    justifyContent: 'center',
+    padding: 0,
     position: 'absolute',
-    width: 8,
-    height: 8,
-    backgroundColor: colors_1.LIGHT_TEXT,
-    borderRadius: 1,
-    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
+    width: diamondSize,
 };
 const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { selected, onSelect, selectable } = (0, TimelineSelection_1.useTimelineKeyframeSelection)(nodePathInfo, frame);
+    const { isKeyframeDragging } = (0, TimelineKeyframeDragState_1.useTimelineKeyframeDragState)();
+    const visuallySelected = selected || isKeyframeDragging({ nodePathInfo, frame });
     const style = (0, react_1.useMemo)(() => {
         if (timelineWidth === null) {
             return null;
         }
         return {
             ...diamondBase,
-            backgroundColor: colors_1.LIGHT_TEXT,
-            outline: selected ? '2px solid ' + colors_1.BLUE : 'none',
-            border: 'none',
             cursor: 'pointer',
             left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING,
-            padding: 0,
             pointerEvents: 'auto',
             top: rowHeight / 2,
-            transform: 'translate(-50%, -50%) rotate(45deg)',
+            transform: 'translate(-50%, -50%)',
         };
-    }, [frame, rowHeight, selected, timelineWidth, videoConfig.durationInFrames]);
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        if (e.button === 0) {
-            e.stopPropagation();
-            onSelect({
-                shiftKey: e.shiftKey,
-                toggleKey: e.metaKey || e.ctrlKey,
-            });
-        }
-    }, [onSelect]);
+    }, [frame, rowHeight, timelineWidth, videoConfig.durationInFrames]);
+    const onPointerDown = (0, use_timeline_keyframe_drag_1.useTimelineKeyframeDrag)({
+        frame,
+        nodePathInfo,
+        onSelect,
+        selectable,
+        selected,
+    });
     if (style === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: `Keyframe at frame ${frame}`, "aria-label": `Select keyframe at frame ${frame}`, onPointerDown: selectable ? onPointerDown : undefined }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: `Keyframe at frame ${frame}`, "aria-label": `Select keyframe at frame ${frame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: colors_1.LIGHT_TEXT, selected: visuallySelected, size: diamondSize }) }));
 };
 exports.TimelineKeyframeDiamond = react_1.default.memo(TimelineKeyframeDiamondUnmemoized);

package/dist/components/Timeline/TimelineKeyframeDiamondIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const TimelineKeyframeDiamondIcon: React.FC<{
+    readonly color: string;
+    readonly selected?: boolean;
+    readonly size: number;
+}>;

package/dist/components/Timeline/TimelineKeyframeDiamondIcon.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineKeyframeDiamondIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const svgStyle = {
+    display: 'block',
+    overflow: 'visible',
+};
+const TimelineKeyframeDiamondIcon = ({ color, selected = false, size }) => {
+    return (jsx_runtime_1.jsxs("svg", { width: size, height: size, viewBox: "0 0 12 12", style: svgStyle, "aria-hidden": "true", focusable: "false", children: [selected ? (jsx_runtime_1.jsx("polygon", { points: "6 0.75 11.25 6 6 11.25 0.75 6", fill: "none", stroke: colors_1.BLUE, strokeWidth: "1.5", strokeLinejoin: "round" })) : null, jsx_runtime_1.jsx("polygon", { points: "6 1.5 10.5 6 6 10.5 1.5 6", fill: color, stroke: "rgba(0, 0, 0, 0.4)", strokeWidth: "1", strokeLinejoin: "round" })
+        ] }));
+};
+exports.TimelineKeyframeDiamondIcon = TimelineKeyframeDiamondIcon;

package/dist/components/Timeline/TimelineKeyframeDragState.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export type TimelineDraggedKeyframe = {
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly frame: number;
+};
+export declare const getTimelineKeyframeDragKey: ({ nodePathInfo, frame, }: TimelineDraggedKeyframe) => string;
+type TimelineKeyframeDragStateContextValue = {
+    readonly clearDraggedKeyframes: () => void;
+    readonly isKeyframeDragging: (keyframe: TimelineDraggedKeyframe) => boolean;
+    readonly setDraggedKeyframes: (keyframes: readonly TimelineDraggedKeyframe[]) => void;
+};
+export declare const TimelineKeyframeDragStateProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const useTimelineKeyframeDragState: () => TimelineKeyframeDragStateContextValue;
+export {};

package/dist/components/Timeline/TimelineKeyframeDragState.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineKeyframeDragState = exports.TimelineKeyframeDragStateProvider = exports.getTimelineKeyframeDragKey = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const emptyDraggedKeyframes = new Set();
+const getTimelineKeyframeDragKey = ({ nodePathInfo, frame, }) => {
+    return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)}.keyframe.${frame}`;
+};
+exports.getTimelineKeyframeDragKey = getTimelineKeyframeDragKey;
+const TimelineKeyframeDragStateContext = (0, react_1.createContext)({
+    clearDraggedKeyframes: () => undefined,
+    isKeyframeDragging: () => false,
+    setDraggedKeyframes: () => undefined,
+});
+const TimelineKeyframeDragStateProvider = ({ children }) => {
+    const [draggedKeys, setDraggedKeys] = (0, react_1.useState)(emptyDraggedKeyframes);
+    const setDraggedKeyframes = (0, react_1.useCallback)((keyframes) => {
+        setDraggedKeys(new Set(keyframes.map(exports.getTimelineKeyframeDragKey)));
+    }, []);
+    const clearDraggedKeyframes = (0, react_1.useCallback)(() => {
+        setDraggedKeys(emptyDraggedKeyframes);
+    }, []);
+    const isKeyframeDragging = (0, react_1.useCallback)((keyframe) => {
+        return draggedKeys.has((0, exports.getTimelineKeyframeDragKey)(keyframe));
+    }, [draggedKeys]);
+    const value = (0, react_1.useMemo)(() => ({
+        clearDraggedKeyframes,
+        isKeyframeDragging,
+        setDraggedKeyframes,
+    }), [clearDraggedKeyframes, isKeyframeDragging, setDraggedKeyframes]);
+    return (jsx_runtime_1.jsx(TimelineKeyframeDragStateContext.Provider, { value: value, children: children }));
+};
+exports.TimelineKeyframeDragStateProvider = TimelineKeyframeDragStateProvider;
+const useTimelineKeyframeDragState = () => {
+    return (0, react_1.useContext)(TimelineKeyframeDragStateContext);
+};
+exports.useTimelineKeyframeDragState = useTimelineKeyframeDragState;

package/dist/components/Timeline/TimelineList.js

@@ -11,8 +11,8 @@ const container = {
 };
 const TimelineList = ({ timeline }) => {
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset }, track.sequence.id) }, track.sequence.id));
+            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track, trackIndex) => {
+                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { trackIndex: trackIndex, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset }, track.sequence.id) }, track.sequence.id));
             })] }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelineMediaInfo.d.ts

@@ -1,17 +1,4 @@
 import React from 'react';
-type LinkInfo = {
-    kind: 'local';
-    assetPath: string;
-    title: string;
-} | {
-    kind: 'remote';
-    href: string;
-    title: string;
-} | null;
-export type TimelineAssetLinkInfo = Exclude<LinkInfo, null>;
-export declare const getTimelineAssetLinkInfo: (src: string) => LinkInfo;
-export declare const openTimelineAssetLink: (linkInfo: TimelineAssetLinkInfo, setCanvasContent: React.Dispatch<React.SetStateAction<import("remotion").CanvasContent | null>>) => void;
 export declare const TimelineMediaInfo: React.FC<{
     readonly src: string;
 }>;
-export {};

package/dist/components/Timeline/TimelineMediaInfo.js

@@ -1,44 +1,12 @@
 "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.TimelineMediaInfo = exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = void 0;
+exports.TimelineMediaInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
-const url_state_1 = require("../../helpers/url-state");
+const use_select_asset_1 = require("../use-select-asset");
+const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineSelection_1 = require("./TimelineSelection");
 const lineStyle = {
     whiteSpace: 'nowrap',
@@ -49,43 +17,10 @@ const lineStyle = {
     color: colors_1.VERY_LIGHT_TEXT,
     display: 'inline-block',
 };
-const getTimelineAssetLinkInfo = (src) => {
-    const staticBase = typeof window === 'undefined' ? null : window.remotion_staticBase;
-    if (staticBase && src.startsWith(staticBase + '/')) {
-        const assetPath = src.slice(staticBase.length + 1);
-        return {
-            kind: 'local',
-            assetPath: decodeURIComponent(assetPath),
-            title: decodeURIComponent(assetPath),
-        };
-    }
-    if (src.startsWith('http://') ||
-        src.startsWith('https://') ||
-        src.startsWith('//')) {
-        try {
-            const url = new URL(src.startsWith('//') ? 'https:' + src : src);
-            return { kind: 'remote', href: src, title: url.hostname };
-        }
-        catch (_a) {
-            return { kind: 'remote', href: src, title: src };
-        }
-    }
-    return null;
-};
-exports.getTimelineAssetLinkInfo = getTimelineAssetLinkInfo;
-const openTimelineAssetLink = (linkInfo, setCanvasContent) => {
-    if (linkInfo.kind === 'local') {
-        setCanvasContent({ type: 'asset', asset: linkInfo.assetPath });
-        (0, url_state_1.pushUrl)(`/assets/${linkInfo.assetPath}`);
-        return;
-    }
-    window.open(linkInfo.href, '_blank', 'noopener,noreferrer');
-};
-exports.openTimelineAssetLink = openTimelineAssetLink;
 const useAssetLink = (src) => {
-    const { setCanvasContent } = react_1.default.useContext(remotion_1.Internals.CompositionSetters);
+    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    const linkInfo = (0, react_1.useMemo)(() => (0, exports.getTimelineAssetLinkInfo)(src), [src]);
+    const linkInfo = (0, react_1.useMemo)(() => (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(src), [src]);
     const interactive = !TimelineSelection_1.SELECTION_ENABLED && linkInfo !== null;
     const onClick = (0, react_1.useCallback)((e) => {
         if (!linkInfo) {
@@ -93,8 +28,8 @@ const useAssetLink = (src) => {
         }
         e.preventDefault();
         e.stopPropagation();
-        (0, exports.openTimelineAssetLink)(linkInfo, setCanvasContent);
-    }, [linkInfo, setCanvasContent]);
+        (0, timeline_asset_link_1.openTimelineAssetLink)(linkInfo, selectAsset);
+    }, [linkInfo, selectAsset]);
     const onPointerEnter = (0, react_1.useCallback)(() => setHovered(true), []);
     const onPointerLeave = (0, react_1.useCallback)(() => setHovered(false), []);
     const fileNameStyle = (0, react_1.useMemo)(() => ({

package/dist/components/Timeline/TimelineScaleField.js

@@ -308,7 +308,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
         });
     }, [field.key, linked, scaleLockNodePath, setScaleLockState]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink })
         ] }));
 };
 exports.TimelineScaleField = TimelineScaleField;

package/dist/components/Timeline/TimelineSequenceItem.d.ts

@@ -6,4 +6,5 @@ export declare const TimelineSequenceItem: React.FC<{
     readonly nestedDepth: number;
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly keyframeDisplayOffset: number;
+    readonly trackIndex: number;
 }>;