import { jsx as _jsx } from "react/jsx-runtime";
import "./tach-video-js.css";
import { memo, useMemo } from "react";
import cn from "classnames";
import VideoJS from "./components/video-js";
import WithBlur from "./components/with-blur";
import WithCover from "./components/with-cover";
import WithDurationBadge from "./components/with-duration-badge";
import WithErrors from "./components/with-errors";
import { WithMouseEvents } from "./components/with-mouse-events";
import { WithObservation } from "./components/with-observation";
import WithProcessing from "./components/with-processing";
import { gcd } from "./shared/math";
import styles from "./video.module.scss";
const calculateAspectWidth = (width, height) => {
    const divisor = gcd(width, height);
    return width / divisor;
};
const calculateAspectHeight = (width, height) => {
    const divisor = gcd(width, height);
    return height / divisor;
};
const calculateAspectRatio = (width, height) => {
    const aspectWidth = calculateAspectWidth(width, height) > 20
        ? 20
        : calculateAspectWidth(width, height);
    const aspectHeight = calculateAspectHeight(width, height) > 15
        ? 11
        : calculateAspectHeight(width, height);
    return `${aspectWidth}:${aspectHeight}`;
};
export const VideoPlayer = memo(({ src, type, showErrors = false, showProcessing = false, withLoading = false, withBlur = false, duration = false, preload = "auto", controls = true, muted = false, fluid = true, responsive = true, autoplay = false, width, height, aspectRatio, preferHQ = false, lazy = false, debug = false, forceHover = false, ...props }) => {
    const videoJsOptions = {
        autoplay,
        controls,
        responsive: true,
        aspectRatio: useMemo(() => aspectRatio
            ? aspectRatio === "none"
                ? undefined
                : aspectRatio
            : width && height
                ? calculateAspectRatio(width, height)
                : "4:3", [aspectRatio, width, height]),
        preload,
        fluid,
        muted,
        sources: [{ src: src, type: type || "application/x-mpegurl" }],
        preferHQ,
        debug,
    };
    // TODO: change to provider or split props between layers
    return (_jsx("div", { className: cn([styles.videoMain, props.className]), style: {
            // width: width || undefined,
            aspectRatio: videoJsOptions.aspectRatio?.split(":").join("/"),
        }, children: _jsx(WithProcessing, { options: videoJsOptions, showProcessing: showProcessing, ...props, children: _jsx(WithDurationBadge, { duration: !showProcessing && duration, children: _jsx(WithCover, { cover: videoJsOptions.poster, forceHover: forceHover, children: _jsx(WithErrors, { showErrors: !showProcessing && showErrors, children: _jsx(WithBlur, { withBlur: !showProcessing && withBlur, children: _jsx(WithObservation, { children: _jsx(WithMouseEvents, { children: _jsx(VideoJS, {}) }) }) }) }) }) }) }) }));
});
VideoPlayer.displayName = "VideoPlayer";
export default VideoPlayer;
//# sourceMappingURL=video-player.js.map