@interactify-live/player-react-native/lib/MediaWidgets/InteractionRenderer.js

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

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const WidgetManager_1 = __importDefault(require("./WidgetManager"));
const TextWidget_1 = __importDefault(require("./widgets/TextWidget"));
const InteractionRenderer = ({ interactions = [], onInteractionPress, onInteractionDragEnd, isDraggable = true, style, width, height, }) => {
    const [currentInteractions, setCurrentInteractions] = (0, react_1.useState)(interactions);
    (0, react_1.useEffect)(() => {
        setCurrentInteractions(interactions);
    }, [interactions]);
    const handleInteractionPress = (interaction) => {
        if (onInteractionPress) {
            onInteractionPress(interaction);
        }
    };
    const handleInteractionDragEnd = (index, geometric) => {
        console.log("InteractionRenderer: handleInteractionDragEnd", {
            index,
            geometric,
        });
        if (onInteractionDragEnd) {
            onInteractionDragEnd(index, geometric);
        }
    };
    const renderInteraction = (interaction, index) => {
        if (interaction.interaction === "text") {
            return ((0, jsx_runtime_1.jsx)(TextWidget_1.default, { text: interaction.payload.text, x: interaction.geometric.x, y: interaction.geometric.y, width: interaction.geometric.width, height: interaction.geometric.height, fontSize: interaction.payload.size || 16, fontWeight: "bold", color: interaction.payload.color || "#ffffff", backgroundColor: interaction.payload.background || "rgba(0,0,0,0.5)", borderRadius: interaction.payload.borderRadius !== undefined
                    ? interaction.payload.borderRadius
                    : 8, isDraggable: isDraggable, onPress: () => handleInteractionPress(interaction), onDragEnd: (position) => handleInteractionDragEnd(index, {
                    x: position.x,
                    y: position.y,
                    width: interaction.geometric.width,
                    height: interaction.geometric.height,
                }) }, `interaction-${interaction.geometric.x}-${interaction.geometric.y}-${index}`));
        }
        return null;
    };
    return ((0, jsx_runtime_1.jsx)(WidgetManager_1.default, { style: style, width: width, height: height, enableDrag: isDraggable, children: currentInteractions.map((interaction, index) => renderInteraction(interaction, index)) }));
};
exports.default = InteractionRenderer;