"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const models_1 = require("../../../models/index.js");
const utils_1 = require("../../../utils/index.js");
const DefaultVideo_1 = require("../../DefaultVideo/DefaultVideo.js");
const ReactPlayer_1 = tslib_1.__importDefault(require("../../ReactPlayer/ReactPlayer.js"));
const b = (0, utils_1.block)('media-component-video');
const Video = (props) => {
    const { video, height, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, ratio, } = props;
    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'source');
    const ref = React.useRef(null);
    React.useEffect(() => {
        if (ref && ref.current) {
            const { loop } = video;
            if (loop && typeof loop !== 'boolean') {
                const { start = 0, end } = loop;
                ref.current.addEventListener('timeupdate', () => {
                    const videoRef = ref.current;
                    const endTime = end || (videoRef && videoRef.duration);
                    if (videoRef && videoRef.currentTime === endTime) {
                        videoRef.currentTime = start;
                        videoRef.play().catch(() => setHasVideoFallback(true));
                    }
                }, { passive: true });
            }
            if (playVideo) {
                ref.current.play().catch(() => setHasVideoFallback(true));
            }
        }
    }, [playVideo, video, setHasVideoFallback]);
    const reactPlayerBlock = React.useMemo(() => {
        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, contain, } = video;
        return ((0, jsx_runtime_1.jsx)(ReactPlayer_1.default, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio === 'auto' ? undefined : ratio, autoRatio: ratio === 'auto', contain: contain }));
    }, [
        video,
        height,
        videoClassName,
        previewImg,
        playVideo,
        commonPlayButton,
        customBarControlsClassName,
        analyticsEvents,
        ratio,
    ]);
    const defaultVideoBlock = React.useMemo(() => {
        return video.src.length && !hasVideoFallback ? ((0, jsx_runtime_1.jsx)("div", { className: b('wrap', videoClassName), style: { height }, "data-qa": qaAttributes.default, children: (0, jsx_runtime_1.jsx)(DefaultVideo_1.DefaultVideo, { ref: ref, video: video, qa: qaAttributes.source }) })) : null;
    }, [
        video,
        hasVideoFallback,
        videoClassName,
        height,
        qaAttributes.default,
        qaAttributes.source,
    ]);
    switch (video.type) {
        case models_1.MediaVideoType.Player:
            return reactPlayerBlock;
        case models_1.MediaVideoType.Default:
        default:
            return defaultVideoBlock;
    }
};
exports.default = Video;
//# sourceMappingURL=Video.js.map
