@remotion/cli 4.0.113 → 4.0.115

package/dist/editor/components/PlayPause.js

@@ -1,209 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlayPause = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const jump_to_start_1 = require("../icons/jump-to-start");
-const pause_1 = require("../icons/pause");
-const play_1 = require("../icons/play");
-const step_back_1 = require("../icons/step-back");
-const step_forward_1 = require("../icons/step-forward");
-const in_out_1 = require("../state/in-out");
-const ControlButton_1 = require("./ControlButton");
-const imperative_state_1 = require("./Timeline/imperative-state");
-const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
-const backStyle = {
-    height: 18,
-    color: 'white',
-};
-const forwardBackStyle = {
-    height: 16,
-    color: 'white',
-};
-const PlayPause = ({ playbackRate, loop }) => {
-    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
-    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    player_1.PlayerInternals.usePlayback({
-        loop,
-        playbackRate,
-        moveToBeginningWhenEnded: true,
-        inFrame,
-        outFrame,
-    });
-    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, isLastFrame, isFirstFrame, } = player_1.PlayerInternals.usePlayer();
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
-    (0, react_1.useEffect)(() => {
-        if (isStill) {
-            pause();
-        }
-    }, [isStill, pause]);
-    const onSpace = (0, react_1.useCallback)((e) => {
-        if (playing) {
-            pause();
-        }
-        else {
-            play();
-        }
-        e.preventDefault();
-    }, [pause, play, playing]);
-    const onEnter = (0, react_1.useCallback)((e) => {
-        if (playing) {
-            // Don't prevent keyboard navigation
-            e.preventDefault();
-            pauseAndReturnToPlayStart();
-        }
-    }, [pauseAndReturnToPlayStart, playing]);
-    const onArrowLeft = (0, react_1.useCallback)((e) => {
-        e.preventDefault();
-        if (e.altKey) {
-            seek(0);
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-left',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: 0,
-            });
-        }
-        else if (e.shiftKey) {
-            frameBack((0, imperative_state_1.getCurrentFps)());
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-left',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.max(0, (0, imperative_state_1.getCurrentFrame)() - (0, imperative_state_1.getCurrentFps)()),
-            });
-        }
-        else {
-            frameBack(1);
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-left',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.max(0, (0, imperative_state_1.getCurrentFrame)() - 1),
-            });
-        }
-    }, [frameBack, seek]);
-    const onArrowRight = (0, react_1.useCallback)((e) => {
-        if (e.altKey) {
-            seek((0, imperative_state_1.getCurrentDuration)() - 1);
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-right',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)() - 1,
-                frame: (0, imperative_state_1.getCurrentDuration)() - 1,
-            });
-        }
-        else if (e.shiftKey) {
-            frameForward((0, imperative_state_1.getCurrentFps)());
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-right',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, (0, imperative_state_1.getCurrentFrame)() + (0, imperative_state_1.getCurrentFps)()),
-            });
-        }
-        else {
-            frameForward(1);
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-right',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, (0, imperative_state_1.getCurrentFrame)() + 1),
-            });
-        }
-        e.preventDefault();
-    }, [frameForward, seek]);
-    const oneFrameBack = (0, react_1.useCallback)(() => {
-        frameBack(1);
-    }, [frameBack]);
-    const oneFrameForward = (0, react_1.useCallback)(() => {
-        frameForward(1);
-    }, [frameForward]);
-    const jumpToStart = (0, react_1.useCallback)(() => {
-        seek(inFrame !== null && inFrame !== void 0 ? inFrame : 0);
-    }, [seek, inFrame]);
-    const jumpToEnd = (0, react_1.useCallback)(() => {
-        seek(outFrame !== null && outFrame !== void 0 ? outFrame : (0, imperative_state_1.getCurrentDuration)() - 1);
-    }, [seek, outFrame]);
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    (0, react_1.useEffect)(() => {
-        const arrowLeft = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'ArrowLeft',
-            callback: onArrowLeft,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const arrowRight = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'ArrowRight',
-            callback: onArrowRight,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const space = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: ' ',
-            callback: onSpace,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const enter = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'enter',
-            callback: onEnter,
-            commandCtrlKey: false,
-            preventDefault: false,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const a = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'a',
-            callback: jumpToStart,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const e = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'e',
-            callback: jumpToEnd,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            arrowLeft.unregister();
-            arrowRight.unregister();
-            space.unregister();
-            enter.unregister();
-            a.unregister();
-            e.unregister();
-        };
-    }, [
-        jumpToEnd,
-        jumpToStart,
-        keybindings,
-        onArrowLeft,
-        onArrowRight,
-        onEnter,
-        onSpace,
-    ]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: (0, jsx_runtime_1.jsx)(jump_to_start_1.JumpToStart, { style: backStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
-                        height: 14,
-                        width: 14,
-                        color: 'white',
-                    } })) : ((0, jsx_runtime_1.jsx)(play_1.Play, { style: {
-                        height: 14,
-                        width: 14,
-                        color: 'white',
-                    } })) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: (0, jsx_runtime_1.jsx)(step_forward_1.StepForward, { style: forwardBackStyle }) })] }));
-};
-exports.PlayPause = PlayPause;

package/dist/editor/components/PlaybackKeyboardShortcutsManager.d.ts

@@ -1,4 +0,0 @@
-import type React from 'react';
-export declare const PlaybackKeyboardShortcutsManager: React.FC<{
-    setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;
-}>;

package/dist/editor/components/PlaybackKeyboardShortcutsManager.js

@@ -1,80 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaybackKeyboardShortcutsManager = void 0;
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const { play, pause, playing } = player_1.PlayerInternals.usePlayer();
-    const onJKey = (0, react_1.useCallback)(() => {
-        setPlaybackRate((prevPlaybackRate) => {
-            if (!playing) {
-                return -1;
-            }
-            if (prevPlaybackRate > -1) {
-                return -1;
-            }
-            if (prevPlaybackRate > -2) {
-                return -2;
-            }
-            return -4;
-        });
-        play();
-    }, [play, playing, setPlaybackRate]);
-    const onKKey = (0, react_1.useCallback)(() => {
-        setPlaybackRate(1);
-        pause();
-    }, [pause, setPlaybackRate]);
-    const onLKey = (0, react_1.useCallback)(() => {
-        setPlaybackRate((prevPlaybackRate) => {
-            if (!playing) {
-                return 1;
-            }
-            if (prevPlaybackRate < 1) {
-                return 1;
-            }
-            if (prevPlaybackRate < 2) {
-                return 2;
-            }
-            return 4;
-        });
-        play();
-    }, [play, playing, setPlaybackRate]);
-    (0, react_1.useEffect)(() => {
-        const jKey = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'j',
-            callback: onJKey,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const kKey = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'k',
-            callback: onKKey,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const lKey = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'l',
-            callback: onLKey,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            jKey.unregister();
-            kKey.unregister();
-            lKey.unregister();
-        };
-    }, [keybindings, onJKey, onKKey, onLKey]);
-    return null;
-};
-exports.PlaybackKeyboardShortcutsManager = PlaybackKeyboardShortcutsManager;

package/dist/editor/components/PlaybackRatePersistor.d.ts

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

package/dist/editor/components/PlaybackRatePersistor.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaybackRatePersistor = void 0;
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const playbackrate_1 = require("../state/playbackrate");
-const PlaybackRatePersistor = () => {
-    const { setPlaybackRate, playbackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
-    (0, react_1.useEffect)(() => {
-        setPlaybackRate((0, playbackrate_1.loadPlaybackRate)());
-    }, [setPlaybackRate]);
-    (0, react_1.useEffect)(() => {
-        (0, playbackrate_1.persistPlaybackRate)(playbackRate);
-    }, [playbackRate]);
-    return null;
-};
-exports.PlaybackRatePersistor = PlaybackRatePersistor;

package/dist/editor/components/PlaybackRateSelector.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const PlaybackRateSelector: React.FC<{
-    playbackRate: number;
-    setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;
-}>;

package/dist/editor/components/PlaybackRateSelector.js

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaybackRateSelector = 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 Checkmark_1 = require("../icons/Checkmark");
-const playbackrate_1 = require("../state/playbackrate");
-const ControlButton_1 = require("./ControlButton");
-const ComboBox_1 = require("./NewComposition/ComboBox");
-const commonPlaybackRates = [
-    -4, -2, -1, -0.5, -0.25, 0.25, 0.5, 1, 1.5, 2, 4,
-];
-const getPlaybackRateLabel = (playbackRate) => {
-    return `${playbackRate}x`;
-};
-const accessibilityLabel = 'Change the playback rate';
-const comboStyle = { width: 80 };
-const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING,
-        };
-    }, []);
-    const items = (0, react_1.useMemo)(() => {
-        const divider = {
-            type: 'divider',
-            id: 'divider',
-        };
-        const values = commonPlaybackRates.map((newPlaybackRate) => {
-            return {
-                id: String(newPlaybackRate),
-                label: getPlaybackRateLabel(newPlaybackRate),
-                onClick: () => {
-                    return setPlaybackRate(() => {
-                        (0, playbackrate_1.persistPlaybackRate)(newPlaybackRate);
-                        return newPlaybackRate;
-                    });
-                },
-                type: 'item',
-                value: newPlaybackRate,
-                keyHint: null,
-                leftItem: String(playbackRate) === String(newPlaybackRate) ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
-                subMenu: null,
-                quickSwitcherLabel: null,
-            };
-        });
-        const middle = Math.floor(commonPlaybackRates.length / 2);
-        return [...values.slice(0, middle), divider, ...values.slice(middle)];
-    }, [playbackRate, setPlaybackRate]);
-    if (isStill || canvasContent === null || canvasContent.type === 'asset') {
-        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(playbackRate), values: items }) }));
-};
-exports.PlaybackRateSelector = PlaybackRateSelector;

package/dist/editor/components/PlayerEmitterContext.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const PlayerEmitterContext: React.FC<{
-    children: React.ReactNode;
-}>;

package/dist/editor/components/PlayerEmitterContext.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlayerEmitterContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const PlayerEmitterContext = ({ children }) => {
-    const [emitter] = (0, react_1.useState)(() => new player_1.PlayerInternals.PlayerEmitter());
-    return ((0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
-};
-exports.PlayerEmitterContext = PlayerEmitterContext;

package/dist/editor/components/Preview.d.ts

@@ -1,13 +0,0 @@
-import type { Size } from '@remotion/player';
-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<{
-    canvasSize: Size;
-    contentDimensions: Dimensions | 'none' | null;
-    canvasContent: CanvasContent;
-    assetMetadata: AssetMetadata | null;
-}>;

package/dist/editor/components/Preview.js

@@ -1,158 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoPreview = exports.getPreviewFileType = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const checkerboard_background_1 = require("../helpers/checkerboard-background");
-const colors_1 = require("../helpers/colors");
-const checkerboard_1 = require("../state/checkerboard");
-const preview_size_1 = require("../state/preview-size");
-const RenderPreview_1 = require("./RenderPreview");
-const Spinner_1 = require("./Spinner");
-const StaticFilePreview_1 = require("./StaticFilePreview");
-const centeredContainer = {
-    display: 'flex',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-};
-const label = {
-    fontFamily: 'sans-serif',
-    fontSize: 14,
-    color: colors_1.LIGHT_TEXT,
-};
-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 {
-        transform: `scale(${options.scale})`,
-        marginLeft: options.xCorrection,
-        marginTop: options.yCorrection,
-        width: options.width,
-        height: options.height,
-        display: 'flex',
-        position: 'absolute',
-        backgroundColor: (0, checkerboard_background_1.checkerboardBackgroundColor)(options.checkerboard),
-        backgroundImage: (0, checkerboard_background_1.checkerboardBackgroundImage)(options.checkerboard),
-        backgroundSize: (0, checkerboard_background_1.getCheckerboardBackgroundSize)(checkerboardSize) /* Must be a square */,
-        backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize) /* Must be half of one side of the square */,
-    };
-};
-const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata }) => {
-    if (assetMetadata && assetMetadata.type === 'not-found') {
-        return ((0, jsx_runtime_1.jsx)("div", { style: centeredContainer, children: (0, jsx_runtime_1.jsx)("div", { style: label, children: "File does not exist" }) }));
-    }
-    if (contentDimensions === null) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: centeredContainer, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: 24 }) }));
-    }
-    return ((0, jsx_runtime_1.jsx)(CompWhenItHasDimensions, { contentDimensions: contentDimensions, canvasSize: canvasSize, canvasContent: canvasContent, assetMetadata: assetMetadata }));
-};
-exports.VideoPreview = VideoPreview;
-const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
-    const { size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
-    const { centerX, centerY, yCorrection, xCorrection, scale } = (0, react_1.useMemo)(() => {
-        if (contentDimensions === 'none') {
-            return {
-                centerX: 0,
-                centerY: 0,
-                yCorrection: 0,
-                xCorrection: 0,
-                scale: 1,
-            };
-        }
-        return player_1.PlayerInternals.calculateCanvasTransformation({
-            canvasSize,
-            compositionHeight: contentDimensions.height,
-            compositionWidth: contentDimensions.width,
-            previewSize: previewSize.size,
-        });
-    }, [canvasSize, contentDimensions, previewSize.size]);
-    const outer = (0, react_1.useMemo)(() => {
-        return {
-            width: contentDimensions === 'none' ? '100%' : contentDimensions.width * scale,
-            height: contentDimensions === 'none'
-                ? '100%'
-                : contentDimensions.height * scale,
-            display: 'flex',
-            flexDirection: 'column',
-            position: 'absolute',
-            left: centerX - previewSize.translation.x,
-            top: centerY - previewSize.translation.y,
-            overflow: 'hidden',
-            justifyContent: canvasContent.type === 'asset' ? 'center' : 'flex-start',
-            alignItems: canvasContent.type === 'asset' &&
-                (0, exports.getPreviewFileType)(canvasContent.asset) === 'audio'
-                ? 'center'
-                : 'normal',
-        };
-    }, [
-        contentDimensions,
-        scale,
-        centerX,
-        previewSize.translation.x,
-        previewSize.translation.y,
-        centerY,
-        canvasContent,
-    ]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: outer, children: canvasContent.type === 'asset' ? ((0, jsx_runtime_1.jsx)(StaticFilePreview_1.StaticFilePreview, { assetMetadata: assetMetadata, currentAsset: canvasContent.asset })) : canvasContent.type === 'output' ? ((0, jsx_runtime_1.jsx)(RenderPreview_1.RenderPreview, { path: canvasContent.path, assetMetadata: assetMetadata })) : ((0, jsx_runtime_1.jsx)(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection })) }));
-};
-const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {
-    const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
-    const style = (0, react_1.useMemo)(() => {
-        return containerStyle({
-            checkerboard,
-            scale,
-            xCorrection,
-            yCorrection,
-            width: contentDimensions.width,
-            height: contentDimensions.height,
-        });
-    }, [
-        checkerboard,
-        contentDimensions.height,
-        contentDimensions.width,
-        scale,
-        xCorrection,
-        yCorrection,
-    ]);
-    (0, react_1.useEffect)(() => {
-        const { current } = portalContainer;
-        current === null || current === void 0 ? void 0 : current.appendChild(remotion_1.Internals.portalNode());
-        return () => {
-            current === null || current === void 0 ? void 0 : current.removeChild(remotion_1.Internals.portalNode());
-        };
-    }, []);
-    const portalContainer = (0, react_1.useRef)(null);
-    return (0, jsx_runtime_1.jsx)("div", { ref: portalContainer, style: style });
-};

package/dist/editor/components/PreviewToolbar.d.ts

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

package/dist/editor/components/PreviewToolbar.js

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewToolbar = 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 is_current_selected_still_1 = require("../helpers/is-current-selected-still");
-const timeline_layout_1 = require("../helpers/timeline-layout");
-const loop_1 = require("../state/loop");
-const CheckboardToggle_1 = require("./CheckboardToggle");
-const FpsCounter_1 = require("./FpsCounter");
-const FullscreenToggle_1 = require("./FullscreenToggle");
-const layout_1 = require("./layout");
-const LoopToggle_1 = require("./LoopToggle");
-const MuteToggle_1 = require("./MuteToggle");
-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 TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
-const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
-const container = {
-    display: 'flex',
-    justifyContent: 'center',
-    borderTop: '1px solid rgba(0, 0, 0, 0.5)',
-    paddingTop: 2,
-    paddingBottom: 2,
-    alignItems: 'center',
-    flexDirection: 'row',
-    background: colors_1.BACKGROUND,
-};
-const sideContainer = {
-    width: 300,
-    height: 38,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-};
-const padding = {
-    width: timeline_layout_1.TIMELINE_PADDING,
-};
-const PreviewToolbar = () => {
-    const { playbackRate, setPlaybackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
-    const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
-    const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
-    const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
-    const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
-    const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null, isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
-};
-exports.PreviewToolbar = PreviewToolbar;

package/dist/editor/components/QuickSwitcher/AlgoliaCredit.d.ts

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

package/dist/editor/components/QuickSwitcher/AlgoliaCredit.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlgoliaCredit = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const link = {
-    display: 'inline-flex',
-};
-const AlgoliaCredit = () => {
-    return ((0, jsx_runtime_1.jsx)("a", { style: link, href: "https://www.algolia.com/ref/docsearch/?utm_source=www.remotion.dev&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch", target: "_blank", rel: "noopener noreferrer", children: (0, jsx_runtime_1.jsx)("svg", { width: "77", height: "19", "aria-label": "Algolia", role: "img", children: (0, jsx_runtime_1.jsx)("path", { d: "M2.5067 0h14.0245c1.384.001 2.5058 1.1205 2.5068 2.5017V16.5c-.0014 1.3808-1.1232 2.4995-2.5068 2.5H2.5067C1.1232 18.9995.0014 17.8808 0 16.5V2.4958A2.495 2.495 0 01.735.7294 2.505 2.505 0 012.5068 0zM37.95 15.0695c-3.7068.0168-3.7068-2.986-3.7068-3.4634L34.2372.3576 36.498 0v11.1794c0 .2715 0 1.9889 1.452 1.994v1.8961zm-9.1666-1.8388c.694 0 1.2086-.0397 1.5678-.1088v-2.2934a5.3639 5.3639 0 00-1.3303-.1679 4.8283 4.8283 0 00-.758.0582 2.2845 2.2845 0 00-.688.2024c-.2029.0979-.371.2362-.4919.4142-.1268.1788-.185.2826-.185.5533 0 .5297.185.8359.5205 1.0375.3355.2016.7928.3053 1.365.3053v-.0008zm-.1969-8.1817c.7463 0 1.3768.092 1.8856.2767.5088.1838.9195.4428 1.2204.7717.3068.334.5147.7777.6423 1.251.1327.4723.196.991.196 1.5603v5.798c-.5235.1036-1.05.192-1.5787.2649-.7048.1037-1.4976.156-2.3774.156-.5832 0-1.1215-.0582-1.6016-.167a3.385 3.385 0 01-1.2432-.5364 2.6034 2.6034 0 01-.8037-.9565c-.191-.3922-.29-.9447-.29-1.5208 0-.5533.11-.905.3246-1.2863a2.7351 2.7351 0 01.8849-.9329c.376-.242.8029-.415 1.2948-.5187a7.4517 7.4517 0 011.5381-.156 7.1162 7.1162 0 011.6667.2024V8.886c0-.259-.0296-.5061-.093-.7372a1.5847 1.5847 0 00-.3245-.6158 1.5079 1.5079 0 00-.6119-.4158 2.6788 2.6788 0 00-.966-.173c-.5206 0-.9948.0634-1.4283.1384a6.5481 6.5481 0 00-1.065.259l-.2712-1.849c.2831-.0986.7048-.1964 1.2491-.2943a9.2979 9.2979 0 011.752-.1501v.0008zm44.6597 8.1193c.6947 0 1.2086-.0405 1.567-.1097v-2.2942a5.3743 5.3743 0 00-1.3303-.1679c-.2485 0-.503.0177-.7573.0582a2.2853 2.2853 0 00-.688.2024 1.2333 1.2333 0 00-.4918.4142c-.1268.1788-.1843.2826-.1843.5533 0 .5297.1843.8359.5198 1.0375.3414.2066.7927.3053 1.365.3053v.0009zm-.191-8.1767c.7463 0 1.3768.0912 1.8856.2759.5087.1847.9195.4436 1.2204.7717.3.329.5147.7786.6414 1.251a5.7248 5.7248 0 01.197 1.562v5.7972c-.3466.0742-.874.1602-1.5788.2648-.7049.1038-1.4976.1552-2.3774.1552-.5832 0-1.1215-.0573-1.6016-.167a3.385 3.385 0 01-1.2432-.5356 2.6034 2.6034 0 01-.8038-.9565c-.191-.3922-.2898-.9447-.2898-1.5216 0-.5533.1098-.905.3245-1.2854a2.7373 2.7373 0 01.8849-.9338c.376-.2412.8029-.4141 1.2947-.5178a7.4545 7.4545 0 012.325-.1097c.2781.0287.5672.081.879.156v-.3686a2.7781 2.7781 0 00-.092-.738 1.5788 1.5788 0 00-.3246-.6166 1.5079 1.5079 0 00-.612-.415 2.6797 2.6797 0 00-.966-.1729c-.5205 0-.9947.0633-1.4282.1384a6.5608 6.5608 0 00-1.065.259l-.2712-1.8498c.283-.0979.7048-.1957 1.2491-.2935a9.8597 9.8597 0 011.752-.1494zm-6.79-1.072c-.7576.001-1.373-.6103-1.3759-1.3664 0-.755.6128-1.3664 1.376-1.3664.764 0 1.3775.6115 1.3775 1.3664s-.6195 1.3664-1.3776 1.3664zm1.1393 11.1507h-2.2726V5.3409l2.2734-.3568v10.0845l-.0008.0017zm-3.984 0c-3.707.0168-3.707-2.986-3.707-3.4642L59.7069.3576 61.9685 0v11.1794c0 .2715 0 1.9889 1.452 1.994V15.0703zm-7.3512-4.979c0-.975-.2138-1.7873-.6305-2.3516-.4167-.571-.9998-.852-1.747-.852-.7454 0-1.3302.281-1.7452.852-.4166.5702-.6195 1.3765-.6195 2.3516 0 .9851.208 1.6473.6254 2.2183.4158.576.9998.8587 1.7461.8587.7454 0 1.3303-.2885 1.747-.8595.4158-.5761.6237-1.2315.6237-2.2184v.0009zm2.3132-.006c0 .7609-.1099 1.3361-.3356 1.9654a4.654 4.654 0 01-.9533 1.6076A4.214 4.214 0 0155.613 14.69c-.579.2412-1.4697.3795-1.9143.3795-.4462-.005-1.3303-.1324-1.9033-.3795a4.307 4.307 0 01-1.474-1.0316c-.4115-.4445-.7293-.9801-.9609-1.6076a5.3423 5.3423 0 01-.3465-1.9653c0-.7608.104-1.493.3356-2.1155a4.683 4.683 0 01.9719-1.5958 4.3383 4.3383 0 011.479-1.0257c.5739-.242 1.2043-.3567 1.8864-.3567.6829 0 1.3125.1197 1.8906.3567a4.1245 4.1245 0 011.4816 1.0257 4.7587 4.7587 0 01.9592 1.5958c.2426.6225.3643 1.3547.3643 2.1155zm-17.0198 0c0 .9448.208 1.9932.6238 2.431.4166.4386.955.6579 1.6142.6579.3584 0 .6998-.0523 1.0176-.1502.3186-.0978.5721-.2134.775-.3517V7.0784a8.8706 8.8706 0 00-1.4926-.1906c-.8206-.0236-1.4452.312-1.8847.8468-.4335.5365-.6533 1.476-.6533 2.3516v-.0008zm6.2863 4.4485c0 1.5385-.3938 2.662-1.1866 3.3773-.791.7136-2.0005 1.0712-3.6308 1.0712-.5958 0-1.834-.1156-2.8228-.334l.3643-1.7865c.8282.173 1.9202.2193 2.4932.2193.9077 0 1.555-.1847 1.943-.5533.388-.3686.578-.916.578-1.643v-.3687a6.8289 6.8289 0 01-.8848.3349c-.3634.1096-.786.167-1.261.167-.6246 0-1.1917-.0979-1.7055-.2944a3.5554 3.5554 0 01-1.3244-.8645c-.3642-.3796-.6541-.8579-.8561-1.4289-.2028-.571-.3068-1.59-.3068-2.339 0-.7034.1099-1.5856.3245-2.1735.2198-.5871.5316-1.0949.9542-1.515.4167-.42.9255-.743 1.5213-.98a5.5923 5.5923 0 012.052-.3855c.7353 0 1.4114.092 2.0707.2024.6592.1088 1.2204.2236 1.6776.35v8.945-.0008zM11.5026 4.2418v-.6511c-.0005-.4553-.3704-.8241-.8266-.8241H8.749c-.4561 0-.826.3688-.8265.824v.669c0 .0742.0693.1264.1445.1096a6.0346 6.0346 0 011.6768-.2362 6.125 6.125 0 011.6202.2185.1116.1116 0 00.1386-.1097zm-5.2806.852l-.3296-.3282a.8266.8266 0 00-1.168 0l-.393.3922a.8199.8199 0 000 1.164l.3237.323c.0524.0515.1268.0397.1733-.0117.191-.259.3989-.507.6305-.7372.2374-.2362.48-.4437.7462-.6335.0575-.0354.0634-.1155.017-.1687zm3.5159 2.069v2.818c0 .081.0879.1392.1622.0987l2.5102-1.2964c.0574-.0287.0752-.0987.0464-.1552a3.1237 3.1237 0 00-2.603-1.574c-.0575 0-.115.0456-.115.1097l-.0008-.0009zm.0008 6.789c-2.0933.0005-3.7915-1.6912-3.7947-3.7804C5.9468 8.0821 7.6452 6.39 9.7387 6.391c2.0932-.0005 3.7911 1.6914 3.794 3.7804a3.7783 3.7783 0 01-1.1124 2.675 3.7936 3.7936 0 01-2.6824 1.1054h.0008zM9.738 4.8002c-1.9218 0-3.6975 1.0232-4.6584 2.6841a5.359 5.359 0 000 5.3683c.9609 1.661 2.7366 2.6841 4.6584 2.6841a5.3891 5.3891 0 003.8073-1.5725 5.3675 5.3675 0 001.578-3.7987 5.3574 5.3574 0 00-1.5771-3.797A5.379 5.379 0 009.7387 4.801l-.0008-.0008z", fill: "currentColor", fillRule: "evenodd" }) }) }));
-};
-exports.AlgoliaCredit = AlgoliaCredit;