@remotion/cli 4.0.83 → 4.0.84

package/dist/editor/components/PlayPause.js

@@ -0,0 +1,210 @@
+"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();
+    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, isLastFrame, isFirstFrame, remotionInternal_currentFrameRef, } = player_1.PlayerInternals.usePlayer();
+    player_1.PlayerInternals.usePlayback({
+        loop,
+        playbackRate,
+        moveToBeginningWhenEnded: true,
+        inFrame,
+        outFrame,
+        frameRef: remotionInternal_currentFrameRef,
+    });
+    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

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

package/dist/editor/components/PlaybackKeyboardShortcutsManager.js

@@ -0,0 +1,80 @@
+"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

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

package/dist/editor/components/PlaybackRatePersistor.js

@@ -0,0 +1,17 @@
+"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

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

package/dist/editor/components/PlaybackRateSelector.js

@@ -0,0 +1,59 @@
+"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

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

package/dist/editor/components/PlayerEmitterContext.js

@@ -0,0 +1,11 @@
+"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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,158 @@
+"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

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

package/dist/editor/components/PreviewToolbar.js

@@ -0,0 +1,55 @@
+"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

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