@remotion/studio 4.0.80

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTimeIndicators = exports.TimelineTimePadding = exports.TimelineTimePlaceholders = exports.TIMELINE_TIME_INDICATOR_HEIGHT = 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 timeline_layout_1 = require("../../helpers/timeline-layout");
+const render_frame_1 = require("../../state/render-frame");
+const SplitterHandle_1 = require("../Splitter/SplitterHandle");
+const TimeValue_1 = require("../TimeValue");
+const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+exports.TIMELINE_TIME_INDICATOR_HEIGHT = 30;
+const container = {
+    height: exports.TIMELINE_TIME_INDICATOR_HEIGHT - 4,
+    boxShadow: `0 0 4px ${colors_1.TIMELINE_BACKGROUND}`,
+    position: 'absolute',
+    backgroundColor: colors_1.TIMELINE_BACKGROUND,
+    top: 0,
+};
+const tick = {
+    width: 1,
+    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    height: 20,
+    position: 'absolute',
+};
+const secondTick = {
+    ...tick,
+    height: 15,
+};
+const tickLabel = {
+    fontSize: 12,
+    marginLeft: 8,
+    marginTop: 7,
+    color: colors_1.LIGHT_TEXT,
+};
+const timeValue = {
+    height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    paddingLeft: 10,
+    display: 'flex',
+    alignItems: 'center',
+    backgroundColor: colors_1.BACKGROUND,
+    borderBottom: `${timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM}px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
+};
+const TimelineTimePlaceholders = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: timeValue, children: (0, jsx_runtime_1.jsx)(TimeValue_1.TimeValue, {}) }));
+};
+exports.TimelineTimePlaceholders = TimelineTimePlaceholders;
+const TimelineTimePadding = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
+        } }));
+};
+exports.TimelineTimePadding = TimelineTimePadding;
+const TimelineTimeIndicators = () => {
+    const sliderTrack = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const video = remotion_1.Internals.useVideo();
+    if (sliderTrack === null) {
+        return null;
+    }
+    if (video === null) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Inner, { durationInFrames: video.durationInFrames, fps: video.fps, windowWidth: sliderTrack }));
+};
+exports.TimelineTimeIndicators = TimelineTimeIndicators;
+const Inner = ({ windowWidth, durationInFrames, fps }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const currentRef = ref.current;
+        if (!currentRef) {
+            return;
+        }
+        const { current } = timeline_refs_1.timelineVerticalScroll;
+        if (!current) {
+            return;
+        }
+        const onScroll = () => {
+            currentRef.style.top = current.scrollTop + 'px';
+        };
+        current.addEventListener('scroll', onScroll);
+        return () => {
+            current.removeEventListener('scroll', onScroll);
+        };
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            width: windowWidth - SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
+            overflow: 'hidden',
+            // Since
+            marginLeft: SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
+        };
+    }, [windowWidth]);
+    const ticks = (0, react_1.useMemo)(() => {
+        const frameInterval = (0, timeline_scroll_logic_1.getFrameIncrementFromWidth)(durationInFrames, windowWidth);
+        const MIN_SPACING_BETWEEN_TICKS_PX = 5;
+        const seconds = Math.floor(durationInFrames / fps);
+        const secondMarkerEveryNth = Math.ceil((MIN_SPACING_BETWEEN_TICKS_PX * fps) / (frameInterval * fps));
+        const frameMarkerEveryNth = Math.ceil(MIN_SPACING_BETWEEN_TICKS_PX / frameInterval);
+        // Big ticks showing for every second
+        const secondTicks = new Array(seconds)
+            .fill(true)
+            .map((_, index) => {
+            return {
+                frame: index * fps,
+                style: {
+                    ...secondTick,
+                    left: frameInterval * index * fps +
+                        timeline_layout_1.TIMELINE_PADDING -
+                        SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
+                },
+                showTime: index > 0,
+            };
+        })
+            .filter((_, idx) => idx % secondMarkerEveryNth === 0);
+        const frameTicks = new Array(durationInFrames)
+            .fill(true)
+            .map((_, index) => {
+            return {
+                frame: index,
+                style: {
+                    ...tick,
+                    left: frameInterval * index +
+                        timeline_layout_1.TIMELINE_PADDING -
+                        SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
+                    height: index % fps === 0
+                        ? 10
+                        : (index / frameMarkerEveryNth) % 2 === 0
+                            ? 5
+                            : 2,
+                },
+                showTime: false,
+            };
+        })
+            .filter((_, idx) => idx % frameMarkerEveryNth === 0);
+        // Merge and deduplicate ticks
+        const hasTicks = [];
+        return [...secondTicks, ...frameTicks].filter((t) => {
+            const alreadyUsed = hasTicks.find((ht) => ht === t.frame) !== undefined;
+            hasTicks.push(t.frame);
+            return !alreadyUsed;
+        });
+    }, [durationInFrames, fps, windowWidth]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: style, children: ticks.map((t) => {
+            return ((0, jsx_runtime_1.jsx)("div", { style: t.style, children: t.showTime ? ((0, jsx_runtime_1.jsx)("div", { style: tickLabel, children: (0, render_frame_1.renderFrame)(t.frame, fps) })) : null }, t.frame));
+        }) }));
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineTracks: React.FC<{
+    timeline: TrackWithHash[];
+    hasBeenCut: boolean;
+}>;

package/dist/components/Timeline/TimelineTracks.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTracks = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const is_collapsed_1 = require("./is-collapsed");
+const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const TimelineSequence_1 = require("./TimelineSequence");
+const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
+const content = {
+    paddingLeft: timeline_layout_1.TIMELINE_PADDING,
+    paddingRight: timeline_layout_1.TIMELINE_PADDING,
+    paddingTop: 1,
+};
+const timelineContent = {
+    minHeight: '100%',
+};
+const TimelineTracks = ({ timeline, hasBeenCut }) => {
+    const inner = (0, react_1.useMemo)(() => {
+        return {
+            height: timeline_layout_1.TIMELINE_LAYER_HEIGHT,
+            marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+        };
+    }, []);
+    const timelineStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...timelineContent,
+            width: 100 + '%',
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: timelineStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: [(0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
+                        if ((0, is_collapsed_1.isTrackHidden)(track, timeline)) {
+                            return null;
+                        }
+                        return ((0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }, track.sequence.id));
+                    })] }), hasBeenCut ? (0, jsx_runtime_1.jsx)(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
+};
+exports.TimelineTracks = TimelineTracks;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const TimelineVideoInfo: React.FC<{
+    src: string;
+}>;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineVideoInfo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const media_utils_1 = require("@remotion/media-utils");
+const react_1 = require("react");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const containerStyle = {
+    height: timeline_layout_1.TIMELINE_LAYER_HEIGHT - 2,
+    width: timeline_layout_1.TIMELINE_LAYER_HEIGHT - 2,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+    borderTopLeftRadius: 2,
+    borderBottomLeftRadius: 2,
+    fontSize: 10,
+    fontFamily: 'Arial, Helvetica',
+};
+const svgStyle = {
+    height: 12,
+};
+const pathStyle = {
+    color: '#8e44ad',
+};
+const TimelineVideoInfo = ({ src }) => {
+    const mountState = (0, react_1.useRef)({ isMounted: true });
+    const [videoMetadata, setVideoMetadata] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        (0, media_utils_1.getVideoMetadata)(src)
+            .then((data) => {
+            setVideoMetadata(data);
+        })
+            .catch((err) => {
+            // eslint-disable-next-line no-console
+            console.log('Could not get video metadata', err);
+        });
+    }, [src]);
+    (0, react_1.useEffect)(() => {
+        const { current } = mountState;
+        current.isMounted = true;
+        return () => {
+            current.isMounted = false;
+        };
+    }, []);
+    if (!videoMetadata) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: (0, jsx_runtime_1.jsx)("svg", { style: svgStyle, role: "img", viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { style: pathStyle, fill: "currentColor", d: "M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z" }) }) }));
+};
+exports.TimelineVideoInfo = TimelineVideoInfo;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type TimelineWidthContextType = number | null;
+export declare const TimelineWidthContext: import("react").Context<TimelineWidthContextType>;
+export declare const TimelineWidthProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/components/Timeline/TimelineWidthProvider.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineWidthProvider = exports.TimelineWidthContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const timeline_refs_1 = require("./timeline-refs");
+exports.TimelineWidthContext = (0, react_1.createContext)(null);
+const TimelineWidthProvider = ({ children }) => {
+    var _a;
+    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
+        triggerOnWindowResize: false,
+        shouldApplyCssTransforms: true,
+    });
+    return ((0, jsx_runtime_1.jsx)(exports.TimelineWidthContext.Provider, { value: (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : null, children: children }));
+};
+exports.TimelineWidthProvider = TimelineWidthProvider;

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

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

package/dist/components/Timeline/TimelineZoomControls.js

@@ -0,0 +1,59 @@
+"use strict";
+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");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
+const z_index_1 = require("../../state/z-index");
+const ControlButton_1 = require("../ControlButton");
+const layout_1 = require("../layout");
+const container = {
+    color: 'black',
+    flexDirection: 'row',
+    display: 'flex',
+    alignItems: 'center',
+};
+const buttonStyle = {
+    fontSize: 24,
+};
+const iconStyle = {
+    color: 'white',
+    width: 14,
+};
+const TimelineZoomControls = () => {
+    var _a;
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setZoom, zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onMinusClicked = (0, react_1.useCallback)(() => {
+        if (canvasContent === null || canvasContent.type !== 'composition') {
+            return;
+        }
+        setZoom(canvasContent.compositionId, (z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2));
+    }, [canvasContent, setZoom]);
+    const onPlusClicked = (0, react_1.useCallback)(() => {
+        if (canvasContent === null || canvasContent.type !== 'composition') {
+            return;
+        }
+        setZoom(canvasContent.compositionId, (z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2));
+    }, [canvasContent, setZoom]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        if (canvasContent === null || canvasContent.type !== 'composition') {
+            return;
+        }
+        setZoom(canvasContent.compositionId, () => Number(e.target.value));
+    }, [canvasContent, setZoom]);
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
+    if (isStill ||
+        canvasContent === null ||
+        canvasContent.type !== 'composition') {
+        return null;
+    }
+    const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+    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 }) })] }));
+};
+exports.TimelineZoomControls = TimelineZoomControls;

package/dist/components/Timeline/imperative-state.d.ts

@@ -0,0 +1,8 @@
+export declare const getCurrentZoom: () => number;
+export declare const setCurrentZoom: (z: number) => void;
+export declare const getCurrentFrame: () => number;
+export declare const setCurrentFrame: (f: number) => void;
+export declare const getCurrentDuration: () => number;
+export declare const setCurrentDuration: (d: number) => void;
+export declare const getCurrentFps: () => number;
+export declare const setCurrentFps: (d: number) => void;

package/dist/components/Timeline/imperative-state.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setCurrentFps = exports.getCurrentFps = exports.setCurrentDuration = exports.getCurrentDuration = exports.setCurrentFrame = exports.getCurrentFrame = exports.setCurrentZoom = exports.getCurrentZoom = void 0;
+let currentFrame = 0;
+let currentZoom = 1;
+let currentDuration = 1;
+let currentFps = 1;
+const getCurrentZoom = () => {
+    return currentZoom;
+};
+exports.getCurrentZoom = getCurrentZoom;
+const setCurrentZoom = (z) => {
+    currentZoom = z;
+};
+exports.setCurrentZoom = setCurrentZoom;
+const getCurrentFrame = () => {
+    return currentFrame;
+};
+exports.getCurrentFrame = getCurrentFrame;
+const setCurrentFrame = (f) => {
+    currentFrame = f;
+};
+exports.setCurrentFrame = setCurrentFrame;
+const getCurrentDuration = () => {
+    return currentDuration;
+};
+exports.getCurrentDuration = getCurrentDuration;
+const setCurrentDuration = (d) => {
+    currentDuration = d;
+};
+exports.setCurrentDuration = setCurrentDuration;
+const getCurrentFps = () => {
+    return currentFps;
+};
+exports.getCurrentFps = getCurrentFps;
+const setCurrentFps = (d) => {
+    currentFps = d;
+};
+exports.setCurrentFps = setCurrentFps;

package/dist/components/Timeline/is-collapsed.d.ts

@@ -0,0 +1,2 @@
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const isTrackHidden: (track: TrackWithHash, allTracks: TrackWithHash[]) => boolean;

package/dist/components/Timeline/is-collapsed.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTrackHidden = void 0;
+const isTrackHidden = (track, allTracks) => {
+    if (!track.sequence.parent) {
+        return false;
+    }
+    const parent = allTracks.find((t) => t.sequence.id === track.sequence.parent);
+    // Due to effects and conditional `showInTimeline`, a parent
+    // may not exist in the `allTracks` array.
+    if (!parent) {
+        return true;
+    }
+    return (0, exports.isTrackHidden)(parent, allTracks);
+};
+exports.isTrackHidden = isTrackHidden;

package/dist/components/Timeline/timeline-refs.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const sliderAreaRef: React.RefObject<HTMLDivElement>;
+export declare const scrollableRef: React.RefObject<HTMLDivElement>;
+export declare const timelineVerticalScroll: React.RefObject<HTMLDivElement>;

package/dist/components/Timeline/timeline-refs.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.timelineVerticalScroll = exports.scrollableRef = exports.sliderAreaRef = void 0;
+const react_1 = __importDefault(require("react"));
+exports.sliderAreaRef = react_1.default.createRef();
+exports.scrollableRef = react_1.default.createRef();
+exports.timelineVerticalScroll = react_1.default.createRef();

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -0,0 +1,43 @@
+export declare const canScrollTimelineIntoDirection: () => {
+    canScrollRight: boolean;
+    canScrollLeft: boolean;
+};
+export declare const getFrameWhileScrollingLeft: ({ durationInFrames, width, }: {
+    durationInFrames: number;
+    width: number;
+}) => number;
+export declare const isCursorInViewport: ({ frame, durationInFrames, }: {
+    frame: number;
+    durationInFrames: number;
+}) => boolean;
+export declare const ensureFrameIsInViewport: ({ direction, durationInFrames, frame, }: {
+    direction: 'fit-left' | 'fit-right' | 'page-right' | 'page-left' | 'center';
+    durationInFrames: number;
+    frame: number;
+}) => void;
+export declare const scrollToTimelineXOffset: (scrollPos: number) => void;
+export declare const getScrollPositionForCursorOnLeftEdge: ({ nextFrame, durationInFrames, }: {
+    nextFrame: number;
+    durationInFrames: number;
+}) => number;
+export declare const getScrollPositionForCursorOnRightEdge: ({ nextFrame, durationInFrames, }: {
+    nextFrame: number;
+    durationInFrames: number;
+}) => number;
+export declare const getFrameIncrementFromWidth: (durationInFrames: number, width: number) => number;
+export declare const getFrameWhileScrollingRight: ({ durationInFrames, width, }: {
+    durationInFrames: number;
+    width: number;
+}) => number;
+export declare const getFrameFromX: ({ clientX, durationInFrames, width, extrapolate, }: {
+    clientX: number;
+    durationInFrames: number;
+    width: number;
+    extrapolate: 'clamp' | 'extend';
+}) => number;
+export declare const zoomAndPreserveCursor: ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, }: {
+    oldZoom: number;
+    newZoom: number;
+    currentFrame: number;
+    currentDurationInFrames: number;
+}) => void;