Rocket.Chat.ReactNative/app/views/ShareView/Preview.tsx

import React from 'react';
import { Video } from 'expo-av';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { ScrollView, StyleSheet, Text } from 'react-native';
import prettyBytes from 'pretty-bytes';

import { CustomIcon } from '../../lib/Icons';
import { ImageViewer, types } from '../../presentation/ImageViewer';
import { useDimensions, useOrientation } from '../../dimensions';
import { getHeaderHeight } from '../../containers/Header';
import sharedStyles from '../Styles';
import I18n from '../../i18n';
import { isAndroid } from '../../utils/deviceInfo';
import { allowPreview } from './utils';
import { IAttachment, IUseDimensions } from './interfaces';
import { THUMBS_HEIGHT } from './constants';
import { TSupportedThemes } from '../../theme';
import { themes } from '../../lib/constants';

const MESSAGEBOX_HEIGHT = 56;

const styles = StyleSheet.create({
	fileContainer: {
		alignItems: 'center',
		justifyContent: 'center'
	},
	fileName: {
		fontSize: 16,
		marginHorizontal: 10,
		...sharedStyles.textMedium,
		...sharedStyles.textAlignCenter
	},
	fileSize: {
		fontSize: 14,
		...sharedStyles.textRegular
	}
});

interface IIconPreview {
	iconName: string;
	title: string;
	description?: string;
	theme: TSupportedThemes;
	width: number;
	height: number;
	danger?: boolean;
}

const IconPreview = React.memo(({ iconName, title, description, theme, width, height, danger }: IIconPreview) => (
	<ScrollView
		style={{ backgroundColor: themes[theme].auxiliaryBackground }}
		contentContainerStyle={[styles.fileContainer, { width, height }]}>
		<CustomIcon name={iconName} size={56} color={danger ? themes[theme].dangerColor : themes[theme].tintColor} />
		<Text style={[styles.fileName, { color: themes[theme].titleText }]}>{title}</Text>
		{description ? <Text style={[styles.fileSize, { color: themes[theme].bodyText }]}>{description}</Text> : null}
	</ScrollView>
));

interface IPreview {
	item: IAttachment;
	theme: TSupportedThemes;
	isShareExtension: boolean;
	length: number;
}

const Preview = React.memo(({ item, theme, isShareExtension, length }: IPreview) => {
	const type = item?.mime;
	const { width, height } = useDimensions() as IUseDimensions;
	const { isLandscape } = useOrientation();
	const insets = useSafeAreaInsets();
	const headerHeight = getHeaderHeight(isLandscape);
	const thumbsHeight = length > 1 ? THUMBS_HEIGHT : 0;
	const calculatedHeight = height - insets.top - insets.bottom - MESSAGEBOX_HEIGHT - thumbsHeight - headerHeight;

	if (item?.canUpload) {
		// Disable video preview on iOS to save memory
		if (isAndroid && type?.match(/video/)) {
			return (
				<ScrollView style={{ height: calculatedHeight }}>
					<Video
						source={{ uri: item.path }}
						rate={1.0}
						volume={1.0}
						isMuted={false}
						resizeMode={Video.RESIZE_MODE_CONTAIN}
						isLooping={false}
						style={{ width, height: calculatedHeight }}
						useNativeControls
					/>
				</ScrollView>
			);
		}

		// Disallow preview of images too big in order to prevent memory issues on iOS share extension
		if (type?.match(/image/)) {
			if (allowPreview(isShareExtension, item?.size)) {
				return (
					<ImageViewer
						uri={item.path}
						imageComponentType={isShareExtension ? types.REACT_NATIVE_IMAGE : types.FAST_IMAGE}
						width={width}
						height={calculatedHeight}
						theme={theme}
					/>
				);
			}
		}
		return (
			<IconPreview
				iconName={type?.match(/image/) ? 'image' : 'attach'}
				title={item?.filename}
				description={prettyBytes(item?.size ?? 0)}
				theme={theme}
				width={width}
				height={calculatedHeight}
			/>
		);
	}

	return (
		<IconPreview
			iconName='warning'
			title={I18n.t(item?.error)}
			description={prettyBytes(item?.size ?? 0)}
			theme={theme}
			width={width}
			height={calculatedHeight}
			danger
		/>
	);
});

export default Preview;