import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { isWebkit } from './IfYouKnowReact';
const icon = {
    height: 16,
    marginLeft: 10,
};
export const RealMP4Videos = () => {
    const ref = useRef(null);
    const videoRef = useRef(null);
    const [vid, setVid] = useState('/img/render-progress.webm');
    useEffect(() => {
        if (isWebkit()) {
            setVid('/img/render-progress.mp4');
        }
    }, []);
    useEffect(() => {
        const { current } = ref;
        if (!current) {
            return;
        }
        const callback = (data) => {
            var _a;
            if (data[0].isIntersecting) {
                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
            }
        };
        const observer = new IntersectionObserver(callback, {
            root: null,
            threshold: 0.5,
        });
        observer.observe(current);
        return () => observer.unobserve(current);
    }, []);
    return (_jsxs("div", { ref: ref, className: 'flex flex-col lg:flex-row mt-40 lg:mt-30 gap-6', children: [_jsx("div", { className: "flex w-[500px] justify-start lg:justify-start items-end", children: _jsx("video", { ref: videoRef, src: vid, muted: true, autoPlay: true, playsInline: true, loop: true, style: {
                        width: 400,
                        maxWidth: '100%',
                        borderRadius: 7,
                        overflow: 'hidden',
                    }, className: "w-[550px] cursor-default! relative lg:translate-x-8 -mt-20 lg:mt-0" }) }), ' ', _jsxs("div", { className: "font-brand", children: [_jsxs("h2", { className: "text-4xl fontbrand", children: [_jsx("span", { className: 'text-brand', children: "Scalable" }), " rendering"] }), _jsxs("p", { className: "leading-relaxed", children: ["Render the video as .mp4 or other formats. ", _jsx("br", {}), "Locally, on the server or serverless."] }), ' ', _jsx("div", { className: "h-4" }), _jsxs("div", { className: "leading-6", children: [_jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: "/docs/render", children: ["Render options", ' ', _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("path", { fill: "currentColor", d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z" }) })] }), _jsx("br", {}), _jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: "/lambda", children: ["Remotion Lambda", ' ', _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("path", { fill: "currentColor", d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z" }) })] })] })] })] }));
};
