@remotion/studio/dist/components/Spinner.js

APIs for interacting with the Remotion Studio

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Spinner = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const colors_1 = require("../helpers/colors");
const viewBox = 100;
const lines = 8;
const className = '__remotion_spinner_line';
const remotionSpinnerAnimation = '__remotion_spinner_animation';
// Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
const Spinner = ({ size, duration }) => {
    const style = (0, react_1.useMemo)(() => {
        return {
            width: size,
            height: size,
        };
    }, [size]);
    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
            jsx_runtime_1.jsx("style", { type: "text/css", children: `
				@keyframes ${remotionSpinnerAnimation} {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0.15;
          }
        }
        
        .${className} {
            animation: ${remotionSpinnerAnimation} ${duration}s linear infinite;
        }        
			` }), jsx_runtime_1.jsx("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
                    return (jsx_runtime_1.jsx("path", { className: className, style: {
                            rotate: `${(index * Math.PI * 2) / lines}rad`,
                            transformOrigin: 'center center',
                            animationDelay: `${index * (duration / lines) - duration}s`,
                        }, d: translated, fill: colors_1.LIGHT_TEXT }, index));
                }) })
        ] }));
};
exports.Spinner = Spinner;