"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ViewerLoadingOverlay = ViewerLoadingOverlay;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
const __1 = require("../../..");
function ViewerLoadingOverlay() {
    const status = (0, __1.usePlayerStore)((x) => x.status);
    const opacity = (0, react_native_reanimated_1.useSharedValue)(0);
    (0, react_1.useEffect)(() => {
        if (status === __1.PlayerStatus.PLAYING || status === __1.PlayerStatus.SUSPEND) {
            opacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 300 });
        }
        else {
            opacity.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 300 });
        }
    }, [status, opacity]);
    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
        opacity: opacity.value,
    }));
    if (status === __1.PlayerStatus.PLAYING) {
        return (0, jsx_runtime_1.jsx)(__1.KeepAwake, {});
    }
    if (status === __1.PlayerStatus.SUSPEND || status === __1.PlayerStatus.PAUSE) {
        return null;
    }
    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
            {
                position: "absolute",
                width: "100%",
                height: "100%",
                alignItems: "center",
                justifyContent: "center",
                pointerEvents: "none",
            },
            animatedStyle,
        ], children: (0, jsx_runtime_1.jsx)(__1.Loader, { size: "large" }) }));
}
//# sourceMappingURL=viewer-loading-overlay.js.map