2019-12-18 21:13:11 +00:00
|
|
|
import React from 'react';
|
2021-10-01 18:12:19 +00:00
|
|
|
import { PermissionsAndroid, StyleSheet, View } from 'react-native';
|
2019-12-18 21:13:11 +00:00
|
|
|
import { connect } from 'react-redux';
|
2021-11-25 14:25:11 +00:00
|
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
|
|
import { RouteProp } from '@react-navigation/native';
|
2019-12-18 21:13:11 +00:00
|
|
|
import CameraRoll from '@react-native-community/cameraroll';
|
|
|
|
import * as mime from 'react-native-mime-types';
|
2020-11-30 17:00:06 +00:00
|
|
|
import RNFetchBlob from 'rn-fetch-blob';
|
2019-12-18 21:13:11 +00:00
|
|
|
import { Video } from 'expo-av';
|
2021-11-25 14:25:11 +00:00
|
|
|
import { sha256 } from 'js-sha256';
|
2020-06-26 20:22:56 +00:00
|
|
|
import { withSafeAreaInsets } from 'react-native-safe-area-context';
|
2019-12-18 21:13:11 +00:00
|
|
|
|
|
|
|
import { LISTENER } from '../containers/Toast';
|
|
|
|
import EventEmitter from '../utils/events';
|
|
|
|
import I18n from '../i18n';
|
|
|
|
import { withTheme } from '../theme';
|
2020-06-26 20:22:56 +00:00
|
|
|
import { ImageViewer } from '../presentation/ImageViewer';
|
2019-12-18 21:13:11 +00:00
|
|
|
import { themes } from '../constants/colors';
|
|
|
|
import { formatAttachmentUrl } from '../lib/utils';
|
|
|
|
import RCActivityIndicator from '../containers/ActivityIndicator';
|
2020-10-30 16:15:58 +00:00
|
|
|
import * as HeaderButton from '../containers/HeaderButton';
|
2019-12-18 21:13:11 +00:00
|
|
|
import { isAndroid } from '../utils/deviceInfo';
|
2020-02-11 14:09:14 +00:00
|
|
|
import { getUserSelector } from '../selectors/login';
|
2020-06-26 20:22:56 +00:00
|
|
|
import { withDimensions } from '../dimensions';
|
|
|
|
import { getHeaderHeight } from '../containers/Header';
|
|
|
|
import StatusBar from '../containers/StatusBar';
|
2021-12-24 13:12:49 +00:00
|
|
|
import { InsideStackParamList } from '../stacks/types';
|
|
|
|
import { IAttachment } from '../definitions/IAttachment';
|
2019-12-18 21:13:11 +00:00
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
container: {
|
|
|
|
flex: 1
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2021-11-25 14:25:11 +00:00
|
|
|
interface IAttachmentViewState {
|
|
|
|
attachment: IAttachment;
|
|
|
|
loading: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface IAttachmentViewProps {
|
2021-12-24 13:12:49 +00:00
|
|
|
navigation: StackNavigationProp<InsideStackParamList, 'AttachmentView'>;
|
|
|
|
route: RouteProp<InsideStackParamList, 'AttachmentView'>;
|
2021-11-25 14:25:11 +00:00
|
|
|
theme: string;
|
|
|
|
baseUrl: string;
|
|
|
|
width: number;
|
|
|
|
height: number;
|
|
|
|
insets: { left: number; bottom: number; right: number; top: number };
|
|
|
|
user: {
|
|
|
|
id: string;
|
|
|
|
token: string;
|
2021-10-01 18:12:19 +00:00
|
|
|
};
|
2021-11-25 14:25:11 +00:00
|
|
|
Allow_Save_Media_to_Gallery: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
class AttachmentView extends React.Component<IAttachmentViewProps, IAttachmentViewState> {
|
|
|
|
private unsubscribeBlur: (() => void) | undefined;
|
|
|
|
private videoRef: any;
|
2019-12-18 21:13:11 +00:00
|
|
|
|
2021-11-25 14:25:11 +00:00
|
|
|
constructor(props: IAttachmentViewProps) {
|
2019-12-18 21:13:11 +00:00
|
|
|
super(props);
|
2020-06-15 14:00:46 +00:00
|
|
|
const attachment = props.route.params?.attachment;
|
2019-12-18 21:13:11 +00:00
|
|
|
this.state = { attachment, loading: true };
|
2020-06-15 14:00:46 +00:00
|
|
|
this.setHeader();
|
2019-12-18 21:13:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
const { navigation } = this.props;
|
2020-06-15 14:00:46 +00:00
|
|
|
this.unsubscribeBlur = navigation.addListener('blur', () => {
|
2020-02-28 16:18:45 +00:00
|
|
|
if (this.videoRef && this.videoRef.stopAsync) {
|
|
|
|
this.videoRef.stopAsync();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
2020-06-15 14:00:46 +00:00
|
|
|
if (this.unsubscribeBlur) {
|
|
|
|
this.unsubscribeBlur();
|
2020-02-28 16:18:45 +00:00
|
|
|
}
|
2019-12-18 21:13:11 +00:00
|
|
|
}
|
|
|
|
|
2020-06-15 14:00:46 +00:00
|
|
|
setHeader = () => {
|
2021-10-01 18:12:19 +00:00
|
|
|
const { route, navigation, theme, Allow_Save_Media_to_Gallery } = this.props;
|
2020-06-15 14:00:46 +00:00
|
|
|
const attachment = route.params?.attachment;
|
2020-07-08 16:40:51 +00:00
|
|
|
let { title } = attachment;
|
|
|
|
try {
|
|
|
|
title = decodeURI(title);
|
|
|
|
} catch {
|
|
|
|
// Do nothing
|
|
|
|
}
|
2020-06-15 14:00:46 +00:00
|
|
|
const options = {
|
2020-07-08 16:40:51 +00:00
|
|
|
title,
|
2021-11-25 14:25:11 +00:00
|
|
|
headerLeft: () => <HeaderButton.CloseModal testID='close-attachment-view' navigation={navigation} />,
|
2021-10-01 18:12:19 +00:00
|
|
|
headerRight: () =>
|
2021-11-25 14:25:11 +00:00
|
|
|
Allow_Save_Media_to_Gallery ? <HeaderButton.Download testID='save-image' onPress={this.handleSave} /> : null,
|
2020-06-26 20:22:56 +00:00
|
|
|
headerBackground: () => <View style={{ flex: 1, backgroundColor: themes[theme].previewBackground }} />,
|
|
|
|
headerTintColor: themes[theme].previewTintColor,
|
2020-09-15 13:34:49 +00:00
|
|
|
headerTitleStyle: { color: themes[theme].previewTintColor, marginHorizontal: 10 }
|
2020-06-15 14:00:46 +00:00
|
|
|
};
|
|
|
|
navigation.setOptions(options);
|
2021-10-01 18:12:19 +00:00
|
|
|
};
|
2020-06-15 14:00:46 +00:00
|
|
|
|
2021-11-25 14:25:11 +00:00
|
|
|
getVideoRef = (ref: Video) => (this.videoRef = ref);
|
2020-02-28 16:18:45 +00:00
|
|
|
|
2021-10-01 18:12:19 +00:00
|
|
|
handleSave = async () => {
|
2019-12-18 21:13:11 +00:00
|
|
|
const { attachment } = this.state;
|
|
|
|
const { user, baseUrl } = this.props;
|
2021-10-01 18:12:19 +00:00
|
|
|
const { title_link, image_url, image_type, video_url, video_type } = attachment;
|
|
|
|
const url = title_link || image_url || video_url;
|
2020-04-30 18:08:48 +00:00
|
|
|
const mediaAttachment = formatAttachmentUrl(url, user.id, user.token, baseUrl);
|
2019-12-18 21:13:11 +00:00
|
|
|
|
|
|
|
if (isAndroid) {
|
|
|
|
const rationale = {
|
|
|
|
title: I18n.t('Write_External_Permission'),
|
2021-11-25 14:25:11 +00:00
|
|
|
message: I18n.t('Write_External_Permission_Message'),
|
|
|
|
buttonPositive: 'Ok'
|
2019-12-18 21:13:11 +00:00
|
|
|
};
|
|
|
|
const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, rationale);
|
|
|
|
if (!(result || result === PermissionsAndroid.RESULTS.GRANTED)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({ loading: true });
|
|
|
|
try {
|
2022-01-24 20:12:25 +00:00
|
|
|
const extension = image_url
|
|
|
|
? `.${mime.extension(image_type) || 'jpg'}`
|
|
|
|
: `.${(video_type === 'video/quicktime' && 'mov') || mime.extension(video_type) || 'mp4'}`;
|
|
|
|
// The return of mime.extension('video/quicktime') is .qt,
|
|
|
|
// this format the iOS isn't recognize and can't save on gallery
|
2021-10-01 18:12:19 +00:00
|
|
|
const documentDir = `${RNFetchBlob.fs.dirs.DocumentDir}/`;
|
2021-11-25 14:25:11 +00:00
|
|
|
const path = `${documentDir + sha256(url!) + extension}`;
|
2021-03-15 20:16:34 +00:00
|
|
|
const file = await RNFetchBlob.config({ path }).fetch('GET', mediaAttachment);
|
|
|
|
await CameraRoll.save(path, { album: 'Rocket.Chat' });
|
|
|
|
await file.flush();
|
2019-12-18 21:13:11 +00:00
|
|
|
EventEmitter.emit(LISTENER, { message: I18n.t('saved_to_gallery') });
|
|
|
|
} catch (e) {
|
2020-04-30 18:08:48 +00:00
|
|
|
EventEmitter.emit(LISTENER, { message: I18n.t(image_url ? 'error-save-image' : 'error-save-video') });
|
2019-12-18 21:13:11 +00:00
|
|
|
}
|
|
|
|
this.setState({ loading: false });
|
|
|
|
};
|
|
|
|
|
2021-11-25 14:25:11 +00:00
|
|
|
renderImage = (uri: string) => {
|
2021-10-01 18:12:19 +00:00
|
|
|
const { theme, width, height, insets } = this.props;
|
2020-06-26 20:22:56 +00:00
|
|
|
const headerHeight = getHeaderHeight(width > height);
|
|
|
|
return (
|
|
|
|
<ImageViewer
|
|
|
|
uri={uri}
|
|
|
|
onLoadEnd={() => this.setState({ loading: false })}
|
|
|
|
theme={theme}
|
|
|
|
width={width}
|
|
|
|
height={height - insets.top - insets.bottom - headerHeight}
|
|
|
|
/>
|
|
|
|
);
|
2021-10-01 18:12:19 +00:00
|
|
|
};
|
2019-12-18 21:13:11 +00:00
|
|
|
|
2021-11-25 14:25:11 +00:00
|
|
|
renderVideo = (uri: string) => (
|
2019-12-18 21:13:11 +00:00
|
|
|
<Video
|
|
|
|
source={{ uri }}
|
|
|
|
rate={1.0}
|
|
|
|
volume={1.0}
|
|
|
|
isMuted={false}
|
|
|
|
resizeMode={Video.RESIZE_MODE_CONTAIN}
|
|
|
|
shouldPlay
|
|
|
|
isLooping={false}
|
|
|
|
style={styles.container}
|
|
|
|
useNativeControls
|
|
|
|
onLoad={() => this.setState({ loading: false })}
|
|
|
|
onError={console.log}
|
2020-02-28 16:18:45 +00:00
|
|
|
ref={this.getVideoRef}
|
2019-12-18 21:13:11 +00:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { loading, attachment } = this.state;
|
|
|
|
const { theme, user, baseUrl } = this.props;
|
|
|
|
let content = null;
|
|
|
|
|
|
|
|
if (attachment && attachment.image_url) {
|
2021-10-01 18:12:19 +00:00
|
|
|
const uri = formatAttachmentUrl(attachment.title_link || attachment.image_url, user.id, user.token, baseUrl);
|
2019-12-18 21:13:11 +00:00
|
|
|
content = this.renderImage(encodeURI(uri));
|
|
|
|
} else if (attachment && attachment.video_url) {
|
|
|
|
const uri = formatAttachmentUrl(attachment.video_url, user.id, user.token, baseUrl);
|
|
|
|
content = this.renderVideo(encodeURI(uri));
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
|
2020-06-26 20:22:56 +00:00
|
|
|
<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
|
2019-12-18 21:13:11 +00:00
|
|
|
{content}
|
|
|
|
{loading ? <RCActivityIndicator absolute size='large' theme={theme} /> : null}
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-11-25 14:25:11 +00:00
|
|
|
const mapStateToProps = (state: any) => ({
|
2020-02-11 14:09:14 +00:00
|
|
|
baseUrl: state.server.server,
|
2020-09-15 13:34:49 +00:00
|
|
|
user: getUserSelector(state),
|
|
|
|
Allow_Save_Media_to_Gallery: state.settings.Allow_Save_Media_to_Gallery ?? true
|
2019-12-18 21:13:11 +00:00
|
|
|
});
|
|
|
|
|
2020-06-26 20:22:56 +00:00
|
|
|
export default connect(mapStateToProps)(withTheme(withDimensions(withSafeAreaInsets(AttachmentView))));
|