@interactify-live/player-react-native/lib/PlayerReactNative/Spinner.js

React Native library for Interactify player with media display, widgets, and MQTT integration

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const Spinner = ({ size = 40, color = "white" }) => {
    const spinValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
    (0, react_1.useEffect)(() => {
        const spinAnimation = react_native_1.Animated.loop(react_native_1.Animated.timing(spinValue, {
            toValue: 1,
            duration: 750, // 0.75s to match the original
            useNativeDriver: true,
        }));
        spinAnimation.start();
        return () => {
            spinAnimation.stop();
        };
    }, [spinValue]);
    const spin = spinValue.interpolate({
        inputRange: [0, 1],
        outputRange: ["0deg", "360deg"],
    });
    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, { width: size, height: size }], children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
                styles.spinner,
                {
                    width: size,
                    height: size,
                    borderColor: color,
                    borderTopColor: "transparent",
                    transform: [{ rotate: spin }],
                },
            ] }) }));
};
const styles = react_native_1.StyleSheet.create({
    container: {
        justifyContent: "center",
        alignItems: "center",
    },
    spinner: {
        borderWidth: 2,
        borderTopWidth: 2,
        borderTopColor: "transparent",
        borderRadius: 50,
    },
});
exports.default = Spinner;