@interactify-live/player-react-native/lib/MediaWidgets/Widget.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 Widget = ({ x = 0, y = 0, width, height, visible = true, zIndex = 1, opacity = 1, rotation = 0, scale = { x: 1, y: 1 }, isDraggable = false, onPress, onPressIn, onPressOut, onLongPress, onDragStart, onDragMove, onDragEnd, children, style, ...props }) => {
    const [position, setPosition] = (0, react_1.useState)({ x, y });
    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
    const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.ValueXY({ x, y })).current;
    (0, react_1.useEffect)(() => {
        setPosition({ x, y });
        animatedValue.setValue({ x, y });
    }, [x, y, animatedValue]);
    const panResponder = (0, react_1.useRef)(react_native_1.PanResponder.create({
        onStartShouldSetPanResponder: () => {
            console.log("Widget: onStartShouldSetPanResponder, isDraggable:", isDraggable);
            return isDraggable;
        },
        onMoveShouldSetPanResponder: () => {
            console.log("Widget: onMoveShouldSetPanResponder, isDraggable:", isDraggable);
            return isDraggable;
        },
        onPanResponderGrant: () => {
            console.log("Widget: onPanResponderGrant - Starting drag");
            setIsDragging(true);
            onDragStart?.();
        },
        onPanResponderMove: (_, gestureState) => {
            if (isDraggable) {
                const newX = position.x + gestureState.dx;
                const newY = position.y + gestureState.dy;
                console.log("Widget: onPanResponderMove - New position:", { newX, newY }, "Gesture:", { dx: gestureState.dx, dy: gestureState.dy });
                setPosition({ x: newX, y: newY });
                onDragMove?.();
            }
        },
        onPanResponderRelease: () => {
            console.log("Widget: onPanResponderRelease - Final position:", position);
            setIsDragging(false);
            onDragEnd?.(position);
        },
    })).current;
    const handlePress = () => {
        if (!isDragging && onPress) {
            onPress();
        }
    };
    const widgetStyle = {
        position: "absolute",
        left: position.x,
        top: position.y,
        width: width || "auto",
        height: height || "auto",
        opacity: visible ? opacity : 0,
        transform: [
            { rotate: `${rotation}deg` },
            { scaleX: scale.x },
            { scaleY: scale.y },
        ],
        zIndex,
        ...style,
    };
    if (isDraggable) {
        return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: widgetStyle, ...panResponder.panHandlers, ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: handlePress, onPressIn: onPressIn, onPressOut: onPressOut, onLongPress: onLongPress, activeOpacity: 0.8, children: children }) }));
    }
    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: widgetStyle, ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: handlePress, onPressIn: onPressIn, onPressOut: onPressOut, onLongPress: onLongPress, activeOpacity: 0.8, children: children }) }));
};
exports.default = Widget;