@oxyhq/services 5.14.0 → 5.15.0

package/src/ui/components/fileManagement/FileDetailsModal.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, Modal, ScrollView } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import type { FileMetadata } from '../../../models/interfaces';
+import { formatFileSize, getFileIcon } from '../../utils/fileManagement';
+import { fileManagementStyles } from './styles';
+import type { ThemeStyles } from '../../hooks/useThemeStyles';
+
+interface FileDetailsModalProps {
+    visible: boolean;
+    file: FileMetadata | null;
+    onClose: () => void;
+    onDownload: (fileId: string, filename: string) => void;
+    onDelete: (fileId: string, filename: string) => void;
+    themeStyles: ThemeStyles;
+    isOwner: boolean;
+}
+
+export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
+    visible,
+    file,
+    onClose,
+    onDownload,
+    onDelete,
+    themeStyles,
+    isOwner,
+}) => {
+    const backgroundColor = themeStyles.backgroundColor;
+    const borderColor = themeStyles.borderColor;
+
+    if (!file) return null;
+
+    return (
+        <Modal
+            visible={visible}
+            animationType="slide"
+            presentationStyle="pageSheet"
+            onRequestClose={onClose}
+        >
+            <View style={[fileManagementStyles.modalContainer, { backgroundColor }]}>
+                <View style={[fileManagementStyles.modalHeader, { borderBottomColor: borderColor }]}>
+                    <TouchableOpacity
+                        style={fileManagementStyles.modalCloseButton}
+                        onPress={onClose}
+                    >
+                        <Ionicons name="close" size={24} color={themeStyles.textColor} />
+                    </TouchableOpacity>
+                    <Text style={[fileManagementStyles.modalTitle, { color: themeStyles.textColor }]}>File Details</Text>
+                    <View style={fileManagementStyles.modalPlaceholder} />
+                </View>
+
+                <ScrollView style={fileManagementStyles.modalContent}>
+                    <View style={[fileManagementStyles.fileDetailCard, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }]}>
+                        <View style={fileManagementStyles.fileDetailIcon}>
+                            <Ionicons
+                                name={getFileIcon(file.contentType) as any}
+                                size={64}
+                                color={themeStyles.primaryColor}
+                            />
+                        </View>
+
+                        <Text style={[fileManagementStyles.fileDetailName, { color: themeStyles.textColor }]}>
+                            {file.filename}
+                        </Text>
+
+                        <View style={fileManagementStyles.fileDetailInfo}>
+                            <View style={fileManagementStyles.detailRow}>
+                                <Text style={[fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                    Size:
+                                </Text>
+                                <Text style={[fileManagementStyles.detailValue, { color: themeStyles.textColor }]}>
+                                    {formatFileSize(file.length)}
+                                </Text>
+                            </View>
+
+                            <View style={fileManagementStyles.detailRow}>
+                                <Text style={[fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                    Type:
+                                </Text>
+                                <Text style={[fileManagementStyles.detailValue, { color: themeStyles.textColor }]}>
+                                    {file.contentType}
+                                </Text>
+                            </View>
+
+                            <View style={fileManagementStyles.detailRow}>
+                                <Text style={[fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                    Uploaded:
+                                </Text>
+                                <Text style={[fileManagementStyles.detailValue, { color: themeStyles.textColor }]}>
+                                    {new Date(file.uploadDate).toLocaleString()}
+                                </Text>
+                            </View>
+
+                            {file.metadata?.description && (
+                                <View style={fileManagementStyles.detailRow}>
+                                    <Text style={[fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                        Description:
+                                    </Text>
+                                    <Text style={[fileManagementStyles.detailValue, { color: themeStyles.textColor }]}>
+                                        {file.metadata.description}
+                                    </Text>
+                                </View>
+                            )}
+                        </View>
+
+                        <View style={fileManagementStyles.modalActions}>
+                            <TouchableOpacity
+                                style={[fileManagementStyles.modalActionButton, { backgroundColor: themeStyles.primaryColor }]}
+                                onPress={() => {
+                                    onDownload(file.id, file.filename);
+                                    onClose();
+                                }}
+                            >
+                                <Ionicons name="download" size={20} color="#FFFFFF" />
+                                <Text style={fileManagementStyles.modalActionText}>Download</Text>
+                            </TouchableOpacity>
+
+                            {isOwner && (
+                                <TouchableOpacity
+                                    style={[fileManagementStyles.modalActionButton, { backgroundColor: themeStyles.dangerColor }]}
+                                    onPress={() => {
+                                        onClose();
+                                        onDelete(file.id, file.filename);
+                                    }}
+                                >
+                                    <Ionicons name="trash" size={20} color="#FFFFFF" />
+                                    <Text style={fileManagementStyles.modalActionText}>Delete</Text>
+                                </TouchableOpacity>
+                            )}
+                        </View>
+                    </View>
+                </ScrollView>
+            </View>
+        </Modal>
+    );
+};
+

package/src/ui/components/fileManagement/FileViewer.tsx

@@ -0,0 +1,380 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Image } from 'react-native';
+import { Image as ExpoImage } from 'expo-image';
+// @ts-ignore - MaterialCommunityIcons is available at runtime
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import type { FileMetadata } from '../../../models/interfaces';
+import { formatFileSize } from '../../utils/fileManagement';
+import { fileManagementStyles } from './styles';
+import type { ThemeStyles } from '../../hooks/useThemeStyles';
+import { GroupedSection } from '../GroupedSection';
+
+interface FileViewerProps {
+    file: FileMetadata;
+    fileContent: string | null;
+    loadingFileContent: boolean;
+    showFileDetailsInViewer: boolean;
+    onToggleDetails: () => void;
+    onClose: () => void;
+    onDownload: (fileId: string, filename: string) => void;
+    onDelete: (fileId: string, filename: string) => void;
+    themeStyles: ThemeStyles;
+    isOwner: boolean;
+}
+
+export const FileViewer: React.FC<FileViewerProps> = ({
+    file,
+    fileContent,
+    loadingFileContent,
+    showFileDetailsInViewer,
+    onToggleDetails,
+    onClose,
+    onDownload,
+    onDelete,
+    themeStyles,
+    isOwner,
+}) => {
+    const isImage = file.contentType.startsWith('image/');
+    const isText = file.contentType.startsWith('text/') ||
+        file.contentType.includes('json') ||
+        file.contentType.includes('xml') ||
+        file.contentType.includes('javascript') ||
+        file.contentType.includes('typescript');
+    const isPDF = file.contentType.includes('pdf');
+    const isVideo = file.contentType.startsWith('video/');
+    const isAudio = file.contentType.startsWith('audio/');
+
+    const backgroundColor = isImage && fileContent
+        ? 'transparent'
+        : themeStyles.backgroundColor;
+    const borderColor = themeStyles.borderColor;
+
+    const [containerWidth, setContainerWidth] = useState<number>(0);
+    const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null);
+
+    // Load image dimensions when image content is available
+    useEffect(() => {
+        if (isImage && fileContent) {
+            Image.getSize(
+                fileContent,
+                (width, height) => {
+                    setImageDimensions({ width, height });
+                },
+                () => {
+                    // Fallback if dimensions can't be loaded
+                    setImageDimensions({ width: 400, height: 400 });
+                }
+            );
+        } else {
+            setImageDimensions(null);
+        }
+    }, [isImage, fileContent]);
+
+    // Calculate display size based on natural dimensions and max constraints
+    // Use natural size when smaller, scale down when larger
+    const imageDisplaySize = useMemo(() => {
+        if (!imageDimensions || !containerWidth) {
+            // Return default size while loading
+            return { width: 400, height: 400 };
+        }
+        
+        const maxWidth = containerWidth - 24; // Account for padding
+        const maxHeight = 500;
+        const aspectRatio = imageDimensions.width / imageDimensions.height;
+        
+        // Start with natural dimensions
+        let displayWidth = imageDimensions.width;
+        let displayHeight = imageDimensions.height;
+        
+        // Only scale down if exceeds max width
+        if (displayWidth > maxWidth) {
+            displayWidth = maxWidth;
+            displayHeight = displayWidth / aspectRatio;
+        }
+        
+        // Only scale down if exceeds max height
+        if (displayHeight > maxHeight) {
+            displayHeight = maxHeight;
+            displayWidth = displayHeight * aspectRatio;
+        }
+        
+        return { width: displayWidth, height: displayHeight };
+    }, [imageDimensions, containerWidth]);
+
+    const fileDetailItems = useMemo(() => {
+        const items = [
+            {
+                id: 'filename',
+                icon: 'document-text',
+                iconColor: themeStyles.colors.iconSecurity,
+                title: 'File Name',
+                subtitle: file.filename,
+            },
+            {
+                id: 'size',
+                icon: 'server',
+                iconColor: themeStyles.colors.iconStorage,
+                title: 'Size',
+                subtitle: formatFileSize(file.length),
+            },
+            {
+                id: 'type',
+                icon: 'code',
+                iconColor: themeStyles.colors.iconData,
+                title: 'Type',
+                subtitle: file.contentType,
+            },
+            {
+                id: 'uploaded',
+                icon: 'time',
+                iconColor: themeStyles.colors.iconPersonalInfo,
+                title: 'Uploaded',
+                subtitle: new Date(file.uploadDate).toLocaleString(),
+            },
+        ];
+
+        if (file.metadata?.description) {
+            items.push({
+                id: 'description',
+                icon: 'text',
+                iconColor: themeStyles.colors.iconData,
+                title: 'Description',
+                subtitle: file.metadata.description,
+            });
+        }
+
+        items.push({
+            id: 'fileId',
+            icon: 'key',
+            iconColor: themeStyles.colors.iconSecurity,
+            title: 'File ID',
+            subtitle: file.id,
+        });
+
+        return items;
+    }, [file, themeStyles.colors]);
+
+    return (
+        <View style={[fileManagementStyles.fileViewerContainer, { backgroundColor }]}>
+            {/* Blurred Background Image - only for images */}
+            {isImage && fileContent && (
+                <>
+                    <ExpoImage
+                        source={{ uri: fileContent }}
+                        style={fileManagementStyles.backgroundImage}
+                        contentFit="cover"
+                        blurRadius={50}
+                        transition={120}
+                        cachePolicy="memory-disk"
+                    />
+                    <View style={[fileManagementStyles.backgroundOverlay, { backgroundColor: themeStyles.isDarkTheme ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.85)' }]} />
+                </>
+            )}
+
+            {/* Floating Back Button */}
+            <TouchableOpacity
+                style={[fileManagementStyles.floatingBackButton, { backgroundColor: themeStyles.colors.card }]}
+                onPress={onClose}
+            >
+                <MaterialCommunityIcons name="arrow-left" size={20} color={themeStyles.textColor} />
+            </TouchableOpacity>
+
+            {/* Floating Download Button */}
+            <TouchableOpacity
+                style={[fileManagementStyles.floatingDownloadButton, { backgroundColor: themeStyles.colors.card }]}
+                onPress={() => onDownload(file.id, file.filename)}
+            >
+                <MaterialCommunityIcons name="download" size={20} color={themeStyles.primaryColor} />
+            </TouchableOpacity>
+
+            {/* File Content */}
+            <ScrollView
+                style={fileManagementStyles.fileViewerContent}
+                contentContainerStyle={fileManagementStyles.fileViewerContentContainer}
+            >
+                {loadingFileContent ? (
+                    <View style={fileManagementStyles.fileViewerLoading}>
+                        <ActivityIndicator size="large" color={themeStyles.primaryColor} />
+                        <Text style={[fileManagementStyles.fileViewerLoadingText, { color: themeStyles.textColor }]}>
+                            Loading file content...
+                        </Text>
+                    </View>
+                ) : isImage && fileContent ? (
+                    <View 
+                        style={fileManagementStyles.imageContainer}
+                        onLayout={(e) => {
+                            const width = e.nativeEvent.layout.width;
+                            if (width > 0) {
+                                setContainerWidth(width);
+                            }
+                        }}
+                    >
+                        <View 
+                            style={[
+                                fileManagementStyles.imageWrapper,
+                                {
+                                    width: imageDisplaySize.width,
+                                    height: imageDisplaySize.height,
+                                }
+                            ]}
+                        >
+                            <ExpoImage
+                                source={{ uri: fileContent }}
+                                style={{
+                                    width: imageDisplaySize.width,
+                                    height: imageDisplaySize.height,
+                                }}
+                                contentFit="contain"
+                                transition={120}
+                                cachePolicy="memory-disk"
+                                onError={() => {
+                                    // Image failed to load
+                                }}
+                                accessibilityLabel={file.filename}
+                            />
+                        </View>
+                    </View>
+                ) : isText && fileContent ? (
+                    <View style={[fileManagementStyles.textContainer, { backgroundColor: themeStyles.colors.card }]}>
+                        <ScrollView style={{ flex: 1 }} nestedScrollEnabled>
+                            <Text style={[fileManagementStyles.textContent, { color: themeStyles.textColor }]}>
+                                {fileContent}
+                            </Text>
+                        </ScrollView>
+                    </View>
+                ) : isPDF && fileContent ? (
+                    <View style={fileManagementStyles.unsupportedFileContainer}>
+                        <MaterialCommunityIcons
+                            name="file-pdf-box"
+                            size={64}
+                            color={themeStyles.colors.secondaryText}
+                        />
+                        <Text style={[fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
+                            PDF Preview Not Available
+                        </Text>
+                        <Text style={[fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }]}>
+                            PDF files cannot be previewed in this viewer.{'\n'}
+                            Download the file to view its contents.
+                        </Text>
+                        <TouchableOpacity
+                            style={[fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
+                            onPress={() => onDownload(file.id, file.filename)}
+                        >
+                            <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
+                            <Text style={fileManagementStyles.downloadButtonText}>Download PDF</Text>
+                        </TouchableOpacity>
+                    </View>
+                ) : isVideo && fileContent ? (
+                    <View style={fileManagementStyles.unsupportedFileContainer}>
+                        <MaterialCommunityIcons
+                            name="video-outline"
+                            size={64}
+                            color={themeStyles.colors.secondaryText}
+                        />
+                        <Text style={[fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
+                            Video Playback Not Available
+                        </Text>
+                        <Text style={[fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }]}>
+                            Video playback is not supported in this viewer.{'\n'}
+                            Download the file to view it.
+                        </Text>
+                        <TouchableOpacity
+                            style={[fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
+                            onPress={() => onDownload(file.id, file.filename)}
+                        >
+                            <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
+                            <Text style={fileManagementStyles.downloadButtonText}>Download Video</Text>
+                        </TouchableOpacity>
+                    </View>
+                ) : isAudio && fileContent ? (
+                    <View style={fileManagementStyles.unsupportedFileContainer}>
+                        <MaterialCommunityIcons
+                            name="music-note-outline"
+                            size={64}
+                            color={themeStyles.colors.secondaryText}
+                        />
+                        <Text style={[fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
+                            Audio Playback Not Available
+                        </Text>
+                        <Text style={[fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }]}>
+                            Audio playback is not supported in this viewer.{'\n'}
+                            Download the file to listen to it.
+                        </Text>
+                        <TouchableOpacity
+                            style={[fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
+                            onPress={() => onDownload(file.id, file.filename)}
+                        >
+                            <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
+                            <Text style={fileManagementStyles.downloadButtonText}>Download Audio</Text>
+                        </TouchableOpacity>
+                    </View>
+                ) : (
+                    <View style={fileManagementStyles.unsupportedFileContainer}>
+                        <MaterialCommunityIcons
+                            name="file-outline"
+                            size={64}
+                            color={themeStyles.colors.secondaryText}
+                        />
+                        <Text style={[fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }]}>
+                            Preview Not Available
+                        </Text>
+                        <Text style={[fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }]}>
+                            This file type cannot be previewed.{'\n'}
+                            Download the file to view its contents.
+                        </Text>
+                        <TouchableOpacity
+                            style={[fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }]}
+                            onPress={() => onDownload(file.id, file.filename)}
+                        >
+                            <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
+                            <Text style={fileManagementStyles.downloadButtonText}>Download File</Text>
+                        </TouchableOpacity>
+                    </View>
+                )}
+            </ScrollView>
+
+            {/* File Details Section - at bottom */}
+            <View style={[fileManagementStyles.fileDetailsSection, { backgroundColor: themeStyles.colors.card }]}>
+                <View style={fileManagementStyles.fileDetailsSectionHeader}>
+                    <Text style={[fileManagementStyles.fileDetailsSectionTitle, { color: themeStyles.textColor }]}>
+                        File Details
+                    </Text>
+                    <TouchableOpacity
+                        style={fileManagementStyles.fileDetailsSectionToggle}
+                        onPress={onToggleDetails}
+                    >
+                        <MaterialCommunityIcons
+                            name={showFileDetailsInViewer ? "chevron-up" : "chevron-down"}
+                            size={20}
+                            color={themeStyles.colors.secondaryText}
+                        />
+                    </TouchableOpacity>
+                </View>
+
+                {showFileDetailsInViewer && (
+                    <>
+                        <View style={fileManagementStyles.fileDetailsSectionContent}>
+                            <GroupedSection items={fileDetailItems} />
+                        </View>
+
+                        {isOwner && (
+                            <View style={fileManagementStyles.fileDetailsActions}>
+                                <TouchableOpacity
+                                    style={[fileManagementStyles.fileDetailsActionButton, { backgroundColor: themeStyles.dangerColor }]}
+                                    onPress={() => {
+                                        onClose();
+                                        onDelete(file.id, file.filename);
+                                    }}
+                                >
+                                    <MaterialCommunityIcons name="delete" size={16} color="#FFFFFF" />
+                                    <Text style={fileManagementStyles.fileDetailsActionText}>Delete</Text>
+                                </TouchableOpacity>
+                            </View>
+                        )}
+                    </>
+                )}
+            </View>
+        </View>
+    );
+};
+