@interactify-live/pindo-wizard-react-native
Version:
React Native PindoWizard component for media capture and interaction management
108 lines (107 loc) • 4.47 kB
JavaScript
"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 react_native_1 = require("react-native");
const Add_1 = __importDefault(require("../icons/Add"));
const MediaThumbnails = (0, react_1.memo)(({ medias, activeMedia, setActiveMedia, setActiveInteraction, coverIndex, setCurrentStep, settings, }) => {
const handleMediaClick = (0, react_1.useCallback)((idx) => {
setActiveMedia(idx);
setActiveInteraction(-1);
}, [setActiveMedia, setActiveInteraction]);
const handleAddClick = (0, react_1.useCallback)(() => {
// Navigate to camera step
setCurrentStep('camera');
}, [setCurrentStep]);
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.mediaThumbnailsContainer, children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.mediaThumbnailsScroll, contentContainerStyle: styles.mediaThumbnailsScrollContent, children: [medias.map((media, idx) => ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [
styles.mediaThumbnail,
idx === activeMedia && styles.activeMediaThumbnail,
], onPress: () => handleMediaClick(idx), children: [(0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: media.thumbnail || media.url }, style: styles.thumbnailImage }), media.type === 'video' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.videoPlayIcon, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.videoPlayText, children: "\u25B6" }) })), idx === coverIndex && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.coverIndicator, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.coverText, children: "\u0639\u06A9\u0633 \u0627\u0635\u0644\u06CC" }) }))] }, media.id))), medias.length < settings.numMedias && ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: styles.addMediaButton, onPress: handleAddClick, children: [(0, jsx_runtime_1.jsx)(Add_1.default, {}), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.addMediaLabel, children: "\u0627\u0641\u0632\u0648\u062F\u0646" })] }))] }) }));
});
const styles = react_native_1.StyleSheet.create({
mediaThumbnailsContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
height: 80,
},
mediaThumbnailsScroll: {
flex: 1,
height: 80,
direction: 'rtl',
},
mediaThumbnailsScrollContent: {
flexDirection: 'row',
alignItems: 'center',
height: '100%',
},
mediaThumbnail: {
width: 62,
height: 62,
marginRight: 10,
borderRadius: 10,
overflow: 'hidden',
borderWidth: 4,
borderColor: 'transparent',
},
activeMediaThumbnail: {
borderColor: '#0C8CE9',
},
thumbnailImage: {
width: '100%',
height: '100%',
opacity: 1,
},
videoPlayIcon: {
position: 'absolute',
top: '50%',
left: '50%',
transform: [{ translateX: -12 }, { translateY: -12 }],
},
videoPlayText: {
color: '#ffffff',
fontSize: 24,
},
coverIndicator: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: 18,
backgroundColor: 'rgba(158, 158, 158, 0.7)',
justifyContent: 'center',
alignItems: 'center',
},
coverText: {
color: '#ffffff',
fontSize: 10,
},
addMediaButton: {
width: 62,
height: 62,
backgroundColor: '#ccc',
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
marginRight: 10,
},
addMediaLabel: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: 18,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
backgroundColor: 'rgba(158, 158, 158, 0.7)',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
fontSize: 10,
color: '#ffffff',
},
});
exports.default = MediaThumbnails;