@developer_tribe/react-native-comnyx 0.13.13 → 0.15.0

package/src/components/MediaViewerModal.tsx

@@ -0,0 +1,168 @@
+import {
+  Modal,
+  View,
+  Image,
+  TouchableOpacity,
+  StatusBar,
+  useWindowDimensions,
+} from 'react-native';
+import { useState, useEffect } from 'react';
+import { AppText } from './AppText';
+import { ScaledSheet } from './ScaledSheet';
+import { activeOpacity } from '../constants/activeOpacity';
+import { openVideo } from '../NativeComnyxMediaPicker';
+
+export function MediaViewerModal({
+  visible,
+  onClose,
+  mediaUri,
+  mediaType,
+  thumbnailUri,
+}: {
+  visible: boolean;
+  onClose: () => void;
+  mediaUri: string;
+  mediaType: 'image' | 'video';
+  thumbnailUri?: string | null;
+}) {
+  const { width, height } = useWindowDimensions();
+  const [imageError, setImageError] = useState(false);
+  const isVideo = mediaType === 'video';
+  const displayUri = isVideo ? thumbnailUri || undefined : mediaUri;
+  // Reset error state when URI or visibility changes
+  useEffect(() => {
+    if (visible) {
+      setImageError(false);
+    }
+  }, [visible, mediaUri]);
+
+  const handlePlayVideo = () => {
+    if (mediaUri) {
+      openVideo(mediaUri).catch((err) =>
+        console.warn('[Comnyx] Could not open video:', err)
+      );
+    }
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <StatusBar backgroundColor="rgba(0,0,0,0.95)" barStyle="light-content" />
+      <View style={styles.overlay}>
+        <TouchableOpacity
+          style={styles.closeButton}
+          onPress={onClose}
+          activeOpacity={activeOpacity}
+        >
+          <AppText style={styles.closeIcon}>✕</AppText>
+        </TouchableOpacity>
+        <View style={[styles.mediaContainer, { width, height: height * 0.7 }]}>
+          {displayUri && !imageError ? (
+            <Image
+              source={{ uri: displayUri }}
+              style={{ width, height: height * 0.9 }}
+              resizeMode="contain"
+              resizeMethod="resize"
+              onError={() => setImageError(true)}
+            />
+          ) : (
+            <View
+              style={[
+                styles.placeholder,
+                { width: width * 0.6, height: width * 0.6 },
+              ]}
+            >
+              <AppText style={styles.placeholderIcon}>
+                {isVideo ? '🎬' : '🖼️'}
+              </AppText>
+            </View>
+          )}
+
+          {isVideo && (
+            <TouchableOpacity
+              style={styles.playOverlay}
+              onPress={handlePlayVideo}
+              activeOpacity={activeOpacity}
+            >
+              <View style={styles.playButton}>
+                <AppText style={styles.playIcon}>▶</AppText>
+              </View>
+            </TouchableOpacity>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = ScaledSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.95)',
+    justifyContent: 'center',
+  },
+  closeButton: {
+    ...({
+      position: 'absolute',
+      top: '50@vs',
+      left: '20@s',
+      zIndex: 10,
+      width: '40@vs',
+
+      height: '40@vs',
+      borderRadius: 20,
+      backgroundColor: 'rgba(255,255,255,0.2)',
+      justifyContent: 'center',
+      alignItems: 'center',
+    } as any),
+  },
+  closeIcon: {
+    color: '#FFFFFF',
+    fontSize: '20@vs',
+    fontWeight: '300',
+  },
+  mediaContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  placeholder: {
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  placeholderIcon: {
+    fontSize: '60@vs',
+  },
+  playOverlay: {
+    ...({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      justifyContent: 'center',
+      alignItems: 'center',
+    } as any),
+  },
+  playButton: {
+    width: '70@vs',
+    height: '70@vs',
+    borderRadius: '35@vs',
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 2,
+    borderColor: 'rgba(255,255,255,0.8)',
+  },
+  playIcon: {
+    fontSize: '30@vs',
+    color: '#FFFFFF',
+    marginLeft: '4@s',
+  },
+});