@interactify-live/pindo-wizard-react-native
Version:
React Native PindoWizard component for media capture and interaction management
83 lines (82 loc) • 4.38 kB
JavaScript
;
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 react_native_1 = require("react-native");
const player_react_native_1 = require("@interactify-live/player-react-native");
const CoverSelector_1 = __importDefault(require("./CoverSelector"));
const MainContent = (0, react_1.memo)(({ medias, setMedias, activeMedia, _activeInteraction, setActiveInteraction, coverIndex, setCoverIndex, onEditInteraction, settings, }) => {
const playerRef = (0, react_1.useRef)(null);
const currentMedia = medias[activeMedia];
(0, react_1.useEffect)(() => {
console.log("MainContent: Medias changed", currentMedia);
}, [currentMedia]);
if (!currentMedia)
return null;
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.mainContent, children: [(0, jsx_runtime_1.jsx)(player_react_native_1.InteractifyPlayer, { ref: playerRef, media: {
id: currentMedia.id,
type: currentMedia.type,
url: currentMedia.url,
}, interactions: currentMedia.interactions, autoPlay: true, muted: true, loop: true, isDraggable: true, onPlay: () => {
console.log("Player: Started playing");
}, onPause: () => {
console.log("Player: Paused");
}, onEnded: () => {
console.log("Player: Ended");
}, onError: (error) => console.error("Player: Error:", error), onInteractionClick: (interaction) => {
console.log("MainContent: onInteractionClick", interaction);
const interactionIndex = currentMedia.interactions?.findIndex((inter) => inter.interaction === interaction.interaction &&
inter.geometric.x === interaction.geometric.x &&
inter.geometric.y === interaction.geometric.y &&
inter.payload?.text === interaction.payload?.text);
if (interactionIndex !== -1) {
setActiveInteraction(interactionIndex);
// Open edit modal for the clicked interaction
onEditInteraction(interaction);
}
else {
setActiveInteraction(-1);
}
}, onInteractionDragEnd: (index, position) => {
console.log("MainContent: onInteractionDragEnd", {
index,
position,
});
console.log("MainContent: Current media index:", activeMedia);
console.log("MainContent: Current media interactions:", currentMedia.interactions);
setMedias((prevMedias) => prevMedias.map((media, i) => i === activeMedia
? {
...media,
interactions: media.interactions.map((inter, idx) => {
if (idx === index) {
console.log("MainContent: Updating interaction", {
index,
oldGeometric: inter.geometric,
newGeometric: position,
});
return { ...inter, geometric: position };
}
return inter;
}),
}
: media));
}, style: styles.player }), settings.isCoverActive && ((0, jsx_runtime_1.jsx)(CoverSelector_1.default, { coverIndex: coverIndex, activeMedia: activeMedia, setCoverIndex: setCoverIndex, medias: medias }))] }));
});
const styles = react_native_1.StyleSheet.create({
mainContent: {
flex: 1,
position: "relative",
backgroundColor: "#000000",
borderRadius: 8,
overflow: "hidden",
},
player: {
flex: 1,
width: "100%",
height: "100%",
},
});
exports.default = MainContent;