"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VideoPreview = 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 ErrorLoader_1 = require("../error-overlay/remotion-overlay/ErrorLoader");
const checkerboard_background_1 = require("../helpers/checkerboard-background");
const colors_1 = require("../helpers/colors");
const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
const checkerboard_1 = require("../state/checkerboard");
const is_menu_item_1 = require("./Menu/is-menu-item");
const RenderPreview_1 = require("./RenderPreview");
const SelectedOutlineOverlay_1 = require("./SelectedOutlineOverlay");
const Spinner_1 = require("./Spinner");
const StaticFilePreview_1 = require("./StaticFilePreview");
const should_clear_selection_on_pointer_down_1 = require("./Timeline/should-clear-selection-on-pointer-down");
const TimelineSelection_1 = require("./Timeline/TimelineSelection");
const centeredContainer = {
    display: 'flex',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
};
const label = {
    fontFamily: 'sans-serif',
    fontSize: 14,
    color: colors_1.LIGHT_TEXT,
};
const assetMetadataErrorContainer = {
    marginLeft: 'auto',
    marginRight: 'auto',
    width: '100%',
    position: 'absolute',
    height: '100%',
    overflowY: 'auto',
};
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',
        overflow: 'hidden',
        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, onRetryAssetMetadata, }) => {
    if (assetMetadata && assetMetadata.type === 'not-found') {
        return (jsx_runtime_1.jsx("div", { style: centeredContainer, children: jsx_runtime_1.jsx("div", { style: label, children: "File does not exist" }) }));
    }
    if (assetMetadata && assetMetadata.type === 'metadata-error') {
        return (jsx_runtime_1.jsx("div", { style: assetMetadataErrorContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: false, error: assetMetadata.error, onRetry: onRetryAssetMetadata !== null && onRetryAssetMetadata !== void 0 ? onRetryAssetMetadata : null, calculateMetadata: false }, assetMetadata.error.stack) }));
    }
    if (contentDimensions === null) {
        return (jsx_runtime_1.jsx("div", { style: centeredContainer, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 24 }) }));
    }
    return (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)(remotion_1.Internals.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: canvasContent.type === 'composition' ? 'visible' : 'hidden',
            justifyContent: canvasContent.type === 'asset' ? 'center' : 'flex-start',
            alignItems: canvasContent.type === 'asset' &&
                (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset) === 'audio'
                ? 'center'
                : 'normal',
        };
    }, [
        contentDimensions,
        scale,
        centerX,
        previewSize.translation.x,
        previewSize.translation.y,
        centerY,
        canvasContent,
    ]);
    if (canvasContent.type === 'asset') {
        return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(StaticFilePreview_1.StaticFilePreview, { assetMetadata: assetMetadata, currentAsset: canvasContent.asset }) }));
    }
    if (canvasContent.type === 'output') {
        return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.path, assetMetadata: assetMetadata }) }));
    }
    if (canvasContent.type === 'output-blob') {
        return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.displayName, assetMetadata: assetMetadata, getBlob: canvasContent.getBlob }) }));
    }
    return (jsx_runtime_1.jsxs("div", { className: "remotion-studio-composition-container", style: outer, children: [
            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
        ] }));
};
const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {
    const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
    const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
    const portalContainer = (0, react_1.useRef)(null);
    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 onPointerDown = (0, react_1.useCallback)((event) => {
        if (!(0, should_clear_selection_on_pointer_down_1.shouldClearSelectionOnPointerDown)(event)) {
            return;
        }
        clearSelection();
    }, [clearSelection]);
    (0, react_1.useEffect)(() => {
        const { current } = portalContainer;
        if (!current) {
            return;
        }
        current.addEventListener('pointerdown', onPointerDown);
        return () => {
            current.removeEventListener('pointerdown', onPointerDown);
        };
    }, [onPointerDown]);
    return jsx_runtime_1.jsx("div", { ref: portalContainer, style: style });
};
