@remotion/cli 4.0.79 → 4.0.82

package/dist/editor/components/AssetSelectorItem.js

@@ -1,196 +0,0 @@
-"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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AssetSelectorItem = exports.AssetFolderTree = exports.AssetFolderItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const remotion_1 = require("remotion");
-const truthy_1 = require("../../truthy");
-const colors_1 = require("../helpers/colors");
-const copy_text_1 = require("../helpers/copy-text");
-const clipboard_1 = require("../icons/clipboard");
-const file_1 = require("../icons/file");
-const folder_1 = require("../icons/folder");
-const InlineAction_1 = require("./InlineAction");
-const layout_1 = require("./layout");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const actions_1 = require("./RenderQueue/actions");
-const ASSET_ITEM_HEIGHT = 32;
-const iconStyle = {
-    width: 18,
-    height: 18,
-    flexShrink: 0,
-};
-const itemStyle = {
-    paddingRight: 10,
-    paddingTop: 6,
-    paddingBottom: 6,
-    fontSize: 13,
-    display: 'flex',
-    textDecoration: 'none',
-    cursor: 'default',
-    alignItems: 'center',
-    marginBottom: 1,
-    appearance: 'none',
-    border: 'none',
-    width: '100%',
-    textAlign: 'left',
-    backgroundColor: colors_1.BACKGROUND,
-    height: ASSET_ITEM_HEIGHT,
-    userSelect: 'none',
-};
-const labelStyle = {
-    textAlign: 'left',
-    textDecoration: 'none',
-    fontSize: 13,
-    flex: '1 1 0%',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-};
-const revealIconStyle = {
-    height: 12,
-    color: 'currentColor',
-};
-const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const folderStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...itemStyle,
-            paddingLeft: 4 + level * 8,
-            backgroundColor: hovered ? colors_1.CLEAR_HOVER : 'transparent',
-        };
-    }, [hovered, level]);
-    const label = (0, react_1.useMemo)(() => {
-        return {
-            ...labelStyle,
-            color: hovered ? 'white' : colors_1.LIGHT_TEXT,
-        };
-    }, [hovered]);
-    const onClick = (0, react_1.useCallback)(() => {
-        toggleFolder(item.name, parentFolder);
-    }, [item.name, parentFolder, toggleFolder]);
-    const Icon = item.expanded ? folder_1.ExpandedFolderIcon : folder_1.CollapsedFolderIcon;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: folderStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, title: item.name, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Icon, { style: iconStyle, color: hovered ? 'white' : colors_1.LIGHT_TEXT }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.name })] }) }), item.expanded ? ((0, jsx_runtime_1.jsx)(exports.AssetFolderTree, { item: item.items, name: item.name, level: level, parentFolder: parentFolder, tabIndex: tabIndex, toggleFolder: toggleFolder }, item.name)) : null] }));
-};
-exports.AssetFolderItem = AssetFolderItem;
-const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, tabIndex }) => {
-    const combinedParents = (0, react_1.useMemo)(() => {
-        return [parentFolder, name].filter(truthy_1.truthy).join('/');
-    }, [name, parentFolder]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [item.folders.map((folder) => {
-                return ((0, jsx_runtime_1.jsx)(exports.AssetFolderItem, { item: folder, tabIndex: tabIndex, level: level + 1, parentFolder: combinedParents, toggleFolder: toggleFolder }, folder.name));
-            }), item.files.map((file) => {
-                return ((0, jsx_runtime_1.jsx)(exports.AssetSelectorItem, { item: file, tabIndex: tabIndex, level: level, parentFolder: combinedParents }, file.src));
-            })] }));
-};
-exports.AssetFolderTree = AssetFolderTree;
-const AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const { canvasContent, setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const selected = (0, react_1.useMemo)(() => {
-        if (canvasContent && canvasContent.type === 'asset') {
-            const nameWOParent = canvasContent.asset.split('/').pop();
-            return nameWOParent === item.name;
-        }
-        return false;
-    }, [canvasContent, item.name]);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const onClick = (0, react_1.useCallback)(() => {
-        const relativePath = parentFolder
-            ? parentFolder + '/' + item.name
-            : item.name;
-        setCanvasContent({ type: 'asset', asset: relativePath });
-        window.history.pushState({}, 'Studio', `/assets/${relativePath}`);
-    }, [item.name, parentFolder, setCanvasContent]);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...itemStyle,
-            color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT,
-            backgroundColor: hovered
-                ? selected
-                    ? colors_1.SELECTED_BACKGROUND
-                    : colors_1.CLEAR_HOVER
-                : selected
-                    ? colors_1.SELECTED_BACKGROUND
-                    : 'transparent',
-            paddingLeft: 12 + level * 8,
-        };
-    }, [hovered, level, selected]);
-    const label = (0, react_1.useMemo)(() => {
-        return {
-            ...labelStyle,
-            color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT,
-        };
-    }, [hovered, selected]);
-    const renderFileExplorerAction = (0, react_1.useCallback)((color) => {
-        return (0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIcon, { style: revealIconStyle, color: color });
-    }, []);
-    const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return (0, jsx_runtime_1.jsx)(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
-    }, []);
-    const revealInExplorer = react_1.default.useCallback((e) => {
-        e.stopPropagation();
-        (0, actions_1.openInFileExplorer)({
-            directory: window.remotion_publicFolderExists +
-                '/' +
-                parentFolder +
-                '/' +
-                item.name,
-        }).catch((err) => {
-            (0, NotificationCenter_1.sendErrorNotification)(`Could not open file: ${err.message}`);
-        });
-    }, [item.name, parentFolder]);
-    const copyToClipboard = (0, react_1.useCallback)((e) => {
-        e.stopPropagation();
-        const content = `staticFile("${[parentFolder, item.name].join('/')}")`;
-        (0, copy_text_1.copyText)(content)
-            .then(() => {
-            var _a;
-            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-                content: `Copied '${content}' to clipboard`,
-                created: Date.now(),
-                duration: 1000,
-                id: String(Math.random()),
-            });
-        })
-            .catch((err) => {
-            (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
-        });
-    }, [item.name, parentFolder]);
-    return ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("div", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, tabIndex: tabIndex, title: item.name, children: [(0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: iconStyle, color: colors_1.LIGHT_TEXT }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.name }), hovered ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { title: "Copy staticFile() name", renderAction: renderCopyAction, onClick: copyToClipboard }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { title: "Open in Explorer", renderAction: renderFileExplorerAction, onClick: revealInExplorer })] })) : null] }) }));
-};
-exports.AssetSelectorItem = AssetSelectorItem;

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

@@ -1,11 +0,0 @@
-import React from 'react';
-export declare const AudioWaveform: React.FC<{
-    src: string;
-    visualizationWidth: number;
-    startFrom: number;
-    durationInFrames: number;
-    setMaxMediaDuration: React.Dispatch<React.SetStateAction<number>>;
-    volume: string | number;
-    doesVolumeChange: boolean;
-    playbackRate: number;
-}>;

package/dist/editor/components/AudioWaveform.js

@@ -1,122 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioWaveform = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const media_utils_1 = require("@remotion/media-utils");
-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 AudioWaveformBar_1 = require("./AudioWaveformBar");
-const container = {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    position: 'absolute',
-    height: timeline_layout_1.TIMELINE_LAYER_HEIGHT,
-};
-const errorMessage = {
-    fontSize: 13,
-    paddingTop: 6,
-    paddingBottom: 6,
-    paddingLeft: 12,
-    paddingRight: 12,
-    alignSelf: 'flex-start',
-    maxWidth: 450,
-    opacity: 0.75,
-};
-const canvasStyle = {
-    position: 'absolute',
-};
-const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, setMaxMediaDuration, volume, doesVolumeChange, playbackRate, }) => {
-    const [metadata, setMetadata] = (0, react_1.useState)(null);
-    const [error, setError] = (0, react_1.useState)(null);
-    const mountState = (0, react_1.useRef)({ isMounted: true });
-    const vidConf = remotion_1.Internals.useUnsafeVideoConfig();
-    if (vidConf === null) {
-        throw new Error('Expected video config');
-    }
-    const canvas = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const { current } = mountState;
-        current.isMounted = true;
-        return () => {
-            current.isMounted = false;
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (!canvas.current) {
-            return;
-        }
-        const context = canvas.current.getContext('2d');
-        if (!context) {
-            return;
-        }
-        context.clearRect(0, 0, visualizationWidth, timeline_layout_1.TIMELINE_LAYER_HEIGHT);
-        if (!doesVolumeChange || typeof volume === 'number') {
-            // The volume is a number, meaning it could change on each frame-
-            // User did not use the (f: number) => number syntax, so we can't draw
-            // a visualization.
-            return;
-        }
-        const volumes = volume.split(',').map((v) => Number(v));
-        context.beginPath();
-        context.moveTo(0, timeline_layout_1.TIMELINE_LAYER_HEIGHT);
-        volumes.forEach((v, index) => {
-            const x = (index / (volumes.length - 1)) * visualizationWidth;
-            const y = (1 - v) * (timeline_layout_1.TIMELINE_LAYER_HEIGHT - timeline_layout_1.TIMELINE_BORDER * 2) + 1;
-            if (index === 0) {
-                context.moveTo(x, y);
-            }
-            else {
-                context.lineTo(x, y);
-            }
-        });
-        context.strokeStyle = colors_1.LIGHT_TRANSPARENT;
-        context.stroke();
-    }, [visualizationWidth, metadata, startFrom, volume, doesVolumeChange]);
-    (0, react_1.useEffect)(() => {
-        setError(null);
-        (0, media_utils_1.getAudioData)(src)
-            .then((data) => {
-            if (mountState.current.isMounted) {
-                setMaxMediaDuration(Math.floor(data.durationInSeconds * vidConf.fps));
-                setMetadata(data);
-            }
-        })
-            .catch((err) => {
-            if (mountState.current.isMounted) {
-                setError(err);
-            }
-        });
-    }, [setMaxMediaDuration, src, vidConf.fps]);
-    const normalized = (0, react_1.useMemo)(() => {
-        if (!metadata || metadata.numberOfChannels === 0) {
-            return [];
-        }
-        const numberOfSamples = Math.floor(visualizationWidth / (AudioWaveformBar_1.WAVEFORM_BAR_LENGTH + AudioWaveformBar_1.WAVEFORM_BAR_MARGIN));
-        return (0, media_utils_1.getWaveformPortion)({
-            audioData: metadata,
-            startTimeInSeconds: startFrom / vidConf.fps,
-            durationInSeconds: (durationInFrames / vidConf.fps) * playbackRate,
-            numberOfSamples,
-        });
-    }, [
-        durationInFrames,
-        vidConf.fps,
-        metadata,
-        playbackRate,
-        startFrom,
-        visualizationWidth,
-    ]);
-    if (error) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("div", { style: errorMessage, children: "No waveform available. Audio might not support CORS." }) }));
-    }
-    if (!metadata) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [normalized.map((w) => {
-                return (0, jsx_runtime_1.jsx)(AudioWaveformBar_1.AudioWaveformBar, { amplitude: w.amplitude }, w.index);
-            }), (0, jsx_runtime_1.jsx)("canvas", { ref: canvas, style: canvasStyle, width: visualizationWidth, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT })] }));
-};
-exports.AudioWaveform = AudioWaveform;

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

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const WAVEFORM_BAR_LENGTH = 4;
-export declare const WAVEFORM_BAR_MARGIN = 2;
-export declare const AudioWaveformBar: React.FC<{
-    amplitude: number;
-}>;

package/dist/editor/components/AudioWaveformBar.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioWaveformBar = exports.WAVEFORM_BAR_MARGIN = exports.WAVEFORM_BAR_LENGTH = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const timeline_layout_1 = require("../helpers/timeline-layout");
-exports.WAVEFORM_BAR_LENGTH = 4;
-exports.WAVEFORM_BAR_MARGIN = 2;
-const container = {
-    width: exports.WAVEFORM_BAR_LENGTH,
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    marginLeft: exports.WAVEFORM_BAR_MARGIN,
-    borderRadius: 2,
-};
-const AudioWaveformBar = ({ amplitude }) => {
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...container,
-            height: (timeline_layout_1.TIMELINE_LAYER_HEIGHT / 2) * amplitude,
-        };
-    }, [amplitude]);
-    return (0, jsx_runtime_1.jsx)("div", { style: style });
-};
-exports.AudioWaveformBar = AudioWaveformBar;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { CanvasContent } from 'remotion';
-export declare const Canvas: React.FC<{
-    canvasContent: CanvasContent;
-}>;

package/dist/editor/components/Canvas.js

@@ -1,260 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Canvas = 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 smooth_zoom_1 = require("../../smooth-zoom");
-const colors_1 = require("../helpers/colors");
-const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
-const get_effective_translation_1 = require("../helpers/get-effective-translation");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const canvas_ref_1 = require("../state/canvas-ref");
-const editor_guides_1 = require("../state/editor-guides");
-const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
-const preview_size_1 = require("../state/preview-size");
-const EditorGuides_1 = __importDefault(require("./EditorGuides"));
-const EditorRuler_1 = require("./EditorRuler");
-const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
-const layout_1 = require("./layout");
-const Preview_1 = require("./Preview");
-const ResetZoomButton_1 = require("./ResetZoomButton");
-const container = {
-    flex: 1,
-    display: 'flex',
-    overflow: 'hidden',
-    position: 'relative',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const resetZoom = {
-    position: 'absolute',
-    top: layout_1.SPACING_UNIT * 2,
-    right: layout_1.SPACING_UNIT * 2,
-};
-const ZOOM_PX_FACTOR = 0.003;
-const Canvas = ({ canvasContent }) => {
-    const { setSize, size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
-    const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const config = remotion_1.Internals.useUnsafeVideoConfig();
-    const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
-    const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
-    const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
-    const contentDimensions = (0, react_1.useMemo)(() => {
-        if ((canvasContent.type === 'asset' || canvasContent.type === 'output') &&
-            assetResolution &&
-            assetResolution.type === 'found') {
-            return assetResolution.dimensions;
-        }
-        if (config) {
-            return { width: config.width, height: config.height };
-        }
-        return null;
-    }, [assetResolution, config, canvasContent]);
-    const size = player_1.PlayerInternals.useElementSize(canvas_ref_1.canvasRef, {
-        triggerOnWindowResize: false,
-        shouldApplyCssTransforms: true,
-    });
-    const isFit = previewSize.size === 'auto';
-    const onWheel = (0, react_1.useCallback)((e) => {
-        if (!editorZoomGestures) {
-            return;
-        }
-        if (!size) {
-            return;
-        }
-        if (!contentDimensions || contentDimensions === 'none') {
-            return;
-        }
-        const wantsToZoom = e.ctrlKey || e.metaKey;
-        if (!wantsToZoom && isFit) {
-            return;
-        }
-        e.preventDefault();
-        setSize((prevSize) => {
-            const scale = player_1.PlayerInternals.calculateScale({
-                canvasSize: size,
-                compositionHeight: contentDimensions.height,
-                compositionWidth: contentDimensions.width,
-                previewSize: prevSize.size,
-            });
-            // Zoom in/out
-            if (wantsToZoom) {
-                const oldSize = prevSize.size === 'auto' ? scale : prevSize.size;
-                const smoothened = (0, smooth_zoom_1.smoothenZoom)(oldSize);
-                const added = smoothened + e.deltaY * ZOOM_PX_FACTOR;
-                const unsmoothened = (0, smooth_zoom_1.unsmoothenZoom)(added);
-                const { centerX, centerY } = (0, get_effective_translation_1.getCenterPointWhileScrolling)({
-                    size,
-                    clientX: e.clientX,
-                    clientY: e.clientY,
-                    compositionWidth: contentDimensions.width,
-                    compositionHeight: contentDimensions.height,
-                    scale,
-                    translation: prevSize.translation,
-                });
-                const zoomDifference = unsmoothened - oldSize;
-                const uvCoordinatesX = centerX / contentDimensions.width;
-                const uvCoordinatesY = centerY / contentDimensions.height;
-                const correctionLeft = -uvCoordinatesX * (zoomDifference * contentDimensions.width) +
-                    (1 - uvCoordinatesX) * zoomDifference * contentDimensions.width;
-                const correctionTop = -uvCoordinatesY * (zoomDifference * contentDimensions.height) +
-                    (1 - uvCoordinatesY) * zoomDifference * contentDimensions.height;
-                return {
-                    translation: (0, get_effective_translation_1.getEffectiveTranslation)({
-                        translation: {
-                            x: prevSize.translation.x - correctionLeft / 2,
-                            y: prevSize.translation.y - correctionTop / 2,
-                        },
-                        canvasSize: size,
-                        compositionHeight: contentDimensions.height,
-                        compositionWidth: contentDimensions.width,
-                        scale,
-                    }),
-                    size: unsmoothened,
-                };
-            }
-            const effectiveTranslation = (0, get_effective_translation_1.getEffectiveTranslation)({
-                translation: prevSize.translation,
-                canvasSize: size,
-                compositionHeight: contentDimensions.height,
-                compositionWidth: contentDimensions.width,
-                scale,
-            });
-            // Pan
-            return {
-                ...prevSize,
-                translation: (0, get_effective_translation_1.getEffectiveTranslation)({
-                    translation: {
-                        x: effectiveTranslation.x + e.deltaX,
-                        y: effectiveTranslation.y + e.deltaY,
-                    },
-                    canvasSize: size,
-                    compositionHeight: contentDimensions.height,
-                    compositionWidth: contentDimensions.width,
-                    scale,
-                }),
-            };
-        });
-    }, [editorZoomGestures, contentDimensions, isFit, setSize, size]);
-    (0, react_1.useEffect)(() => {
-        const { current } = canvas_ref_1.canvasRef;
-        if (!current) {
-            return;
-        }
-        current.addEventListener('wheel', onWheel, { passive: false });
-        return () => 
-        // @ts-expect-error
-        current.removeEventListener('wheel', onWheel, {
-            passive: false,
-        });
-    }, [onWheel]);
-    const onReset = (0, react_1.useCallback)(() => {
-        setSize(() => {
-            return {
-                translation: {
-                    x: 0,
-                    y: 0,
-                },
-                size: 'auto',
-            };
-        });
-    }, [setSize]);
-    const onZoomIn = (0, react_1.useCallback)(() => {
-        if (!contentDimensions || contentDimensions === 'none') {
-            return;
-        }
-        if (!size) {
-            return;
-        }
-        setSize((prevSize) => {
-            const scale = player_1.PlayerInternals.calculateScale({
-                canvasSize: size,
-                compositionHeight: contentDimensions.height,
-                compositionWidth: contentDimensions.width,
-                previewSize: prevSize.size,
-            });
-            return {
-                translation: {
-                    x: 0,
-                    y: 0,
-                },
-                size: Math.min(smooth_zoom_1.MAX_ZOOM, scale * 2),
-            };
-        });
-    }, [contentDimensions, setSize, size]);
-    const onZoomOut = (0, react_1.useCallback)(() => {
-        if (!contentDimensions || contentDimensions === 'none') {
-            return;
-        }
-        if (!size) {
-            return;
-        }
-        setSize((prevSize) => {
-            const scale = player_1.PlayerInternals.calculateScale({
-                canvasSize: size,
-                compositionHeight: contentDimensions.height,
-                compositionWidth: contentDimensions.width,
-                previewSize: prevSize.size,
-            });
-            return {
-                translation: {
-                    x: 0,
-                    y: 0,
-                },
-                size: Math.max(smooth_zoom_1.MIN_ZOOM, scale / 2),
-            };
-        });
-    }, [contentDimensions, setSize, size]);
-    (0, react_1.useEffect)(() => {
-        const resetBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: '0',
-            commandCtrlKey: false,
-            callback: onReset,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const zoomIn = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: '+',
-            commandCtrlKey: false,
-            callback: onZoomIn,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const zoomOut = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: '-',
-            commandCtrlKey: false,
-            callback: onZoomOut,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            resetBinding.unregister();
-            zoomIn.unregister();
-            zoomOut.unregister();
-        };
-    }, [keybindings, onReset, onZoomIn, onZoomOut]);
-    const fetchMetadata = (0, react_1.useCallback)(async () => {
-        setAssetResolution(null);
-        if (canvasContent.type === 'composition') {
-            return;
-        }
-        const metadata = await (0, get_asset_metadata_1.getAssetMetadata)(canvasContent);
-        setAssetResolution(metadata);
-    }, [canvasContent]);
-    (0, react_1.useEffect)(() => {
-        fetchMetadata();
-    }, [fetchMetadata]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? ((0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution })) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && ((0, jsx_runtime_1.jsx)(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && ((0, jsx_runtime_1.jsx)(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
-};
-exports.Canvas = Canvas;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const CanvasOrLoading: React.FC;
-export declare const ErrorLoading: React.FC<{
-    error: Error;
-}>;