mattermost-mobile/app/utils/file/file_picker/index.ts
Elias Nahum 5de54471b7
[Gekidou] Gallery (#6008)
* Gallery screen (ground work)

* Open the gallery from posts

* Open the gallery from post draft

* feedback review

* Feedback review 2

* do not remove dm channel names and localization fix

* update to the latest network-client

* do not override file width, height and imageThumbail if received file does not have it set

* bring back ScrollView wrapper for message component

* Remove Text wrapper for markdown paragraph

* Fix YouTube play icon placeholder

* Make video file play button container round

* Add gif image placeholder

* Save images & videos to camera roll

* Feedback review 3

* load video thumbnail when post is in viewport

* simplify prefix
2022-03-01 13:55:44 -03:00

307 lines
12 KiB
TypeScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {IntlShape} from 'react-intl';
import {Alert, NativeModules, Platform, StatusBar} from 'react-native';
import AndroidOpenSettings from 'react-native-android-open-settings';
import DeviceInfo from 'react-native-device-info';
import DocumentPicker, {DocumentPickerResponse} from 'react-native-document-picker';
import {Asset, CameraOptions, ImageLibraryOptions, ImagePickerResponse, launchCamera, launchImageLibrary} from 'react-native-image-picker';
import Permissions, {AndroidPermission, IOSPermission} from 'react-native-permissions';
import {dismissBottomSheet} from '@screens/navigation';
import {extractFileInfo, lookupMimeType} from '@utils/file';
const ShareExtension = NativeModules.MattermostShare;
type PermissionSource = 'camera' | 'storage' | 'denied_android' | 'denied_ios' | 'photo';
export default class FilePickerUtil {
private readonly uploadFiles: (files: ExtractedFileInfo[]) => void;
private readonly intl: IntlShape;
constructor(
intl: IntlShape,
uploadFiles: (files: ExtractedFileInfo[]) => void) {
this.intl = intl;
this.uploadFiles = uploadFiles;
}
private getPermissionMessages = (source: PermissionSource) => {
const {formatMessage} = this.intl;
const applicationName = DeviceInfo.getApplicationName();
const permissions: Record<string, { title: string; text: string }> = {
camera: {
title: formatMessage(
{
id: 'mobile.camera_photo_permission_denied_title',
defaultMessage:
'{applicationName} would like to access your camera',
},
{applicationName},
),
text: formatMessage({
id: 'mobile.camera_photo_permission_denied_description',
defaultMessage:
'Take photos and upload them to your server or save them to your device. Open Settings to grant {applicationName} Read and Write access to your camera.',
}),
},
storage: {
title: formatMessage(
{
id: 'mobile.storage_permission_denied_title',
defaultMessage:
'{applicationName} would like to access your files',
},
{applicationName},
),
text: formatMessage({
id: 'mobile.storage_permission_denied_description',
defaultMessage:
'Upload files to your server. Open Settings to grant {applicationName} Read and Write access to files on this device.',
}),
},
denied_ios: {
title: formatMessage(
{
id: 'mobile.ios.photos_permission_denied_title',
defaultMessage:
'{applicationName} would like to access your photos',
},
{applicationName},
),
text: formatMessage({
id: 'mobile.ios.photos_permission_denied_description',
defaultMessage:
'Upload photos and videos to your server or save them to your device. Open Settings to grant {applicationName} Read and Write access to your photo and video library.',
}),
},
denied_android: {
title: formatMessage(
{
id: 'mobile.android.photos_permission_denied_title',
defaultMessage:
'{applicationName} would like to access your photos',
},
{applicationName},
),
text: formatMessage({
id: 'mobile.android.photos_permission_denied_description',
defaultMessage:
'Upload photos to your server or save them to your device. Open Settings to grant {applicationName} Read and Write access to your photo library.',
}),
},
};
return permissions[source];
};
private prepareFileUpload = async (files: Array<Asset | DocumentPickerResponse>) => {
const out = await extractFileInfo(files);
if (out.length > 0) {
dismissBottomSheet();
this.uploadFiles(out);
}
};
private getPermissionDeniedMessage = (source?: PermissionSource) => {
const sources = ['camera', 'storage', 'photo'];
const deniedSource: PermissionSource = Platform.select({android: 'denied_android', ios: 'denied_ios'})!;
const msgForSource = source && sources.includes(source) ? source : deniedSource;
return this.getPermissionMessages(msgForSource);
};
private getFilesFromResponse = async (response: ImagePickerResponse): Promise<Asset[]> => {
if (!response?.assets?.length) {
return [];
}
const files: Asset[] = [];
await Promise.all((response.assets.map(async (file) => {
if (Platform.OS === 'ios') {
files.push(file);
} else {
// For android we need to retrieve the realPath in case the file being imported is from the cloud
const uri = (await ShareExtension.getFilePath(file.uri)).filePath;
const type = file.type || lookupMimeType(uri);
let fileName = file.fileName;
if (type.includes('video/')) {
fileName = uri.split('\\').pop().split('/').pop();
}
if (uri) {
files.push({...file, fileName, uri, type, width: file.width, height: file.height});
}
}
})));
return files;
};
private hasPhotoPermission = async (source: PermissionSource) => {
let permissionRequest;
const targetSource = Platform.select({
ios: source === 'camera' ? Permissions.PERMISSIONS.IOS.CAMERA : Permissions.PERMISSIONS.IOS.PHOTO_LIBRARY,
android: Permissions.PERMISSIONS.ANDROID.CAMERA,
}) as AndroidPermission | IOSPermission;
const hasPhotoLibraryPermission = await Permissions.check(targetSource);
switch (hasPhotoLibraryPermission) {
case Permissions.RESULTS.DENIED:
permissionRequest = await Permissions.request(targetSource);
return permissionRequest === Permissions.RESULTS.GRANTED;
case Permissions.RESULTS.BLOCKED: {
const grantOption = {
text: this.intl.formatMessage({
id: 'mobile.permission_denied_retry',
defaultMessage: 'Settings',
}),
onPress: () => Permissions.openSettings(),
};
const {title, text} = this.getPermissionDeniedMessage(source);
Alert.alert(title, text, [
grantOption,
{
text: this.intl.formatMessage({
id: 'mobile.permission_denied_dismiss',
defaultMessage: "Don't Allow",
}),
},
]);
return false;
}
default: return true;
}
};
private hasStoragePermission = async () => {
if (Platform.OS === 'ios') {
return true;
}
const storagePermission = Permissions.PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE;
let permissionRequest;
const hasPermissionToStorage = await Permissions.check(storagePermission);
switch (hasPermissionToStorage) {
case Permissions.RESULTS.DENIED:
permissionRequest = await Permissions.request(storagePermission);
return permissionRequest === Permissions.RESULTS.GRANTED;
break;
case Permissions.RESULTS.BLOCKED: {
const {title, text} = this.getPermissionDeniedMessage();
Alert.alert(title, text, [
{
text: this.intl.formatMessage({
id: 'mobile.permission_denied_dismiss',
defaultMessage: "Don't Allow",
}),
},
{
text: this.intl.formatMessage({
id: 'mobile.permission_denied_retry',
defaultMessage: 'Settings',
}),
onPress: () => AndroidOpenSettings.appDetailsSettings(),
},
]);
return false;
}
default: return true;
}
};
private buildUri = async (doc: DocumentPickerResponse) => {
let uri: string = doc.uri;
if (Platform.OS === 'android') {
// For android we need to retrieve the realPath in case the file being imported is from the cloud
const newUri = await ShareExtension.getFilePath(doc.uri);
uri = newUri?.filePath;
if (uri === undefined) {
return {doc: undefined};
}
}
// Decode file uri to get the actual path
doc.uri = decodeURIComponent(uri);
return {doc};
};
attachFileFromCamera = async (customOptions?: CameraOptions) => {
let options = customOptions;
if (!options) {
options = {
quality: 0.8,
videoQuality: 'high',
mediaType: 'photo',
saveToPhotos: true,
};
}
const hasCameraPermission = await this.hasPhotoPermission('camera');
if (hasCameraPermission) {
launchCamera(options, async (response: ImagePickerResponse) => {
StatusBar.setHidden(false);
if (response.errorCode || response.didCancel) {
return;
}
const files = await this.getFilesFromResponse(response);
await this.prepareFileUpload(files);
});
}
};
attachFileFromFiles = async (browseFileType?: string, allowMultiSelection = false) => {
const hasPermission = await this.hasStoragePermission();
const fileType = browseFileType ?? Platform.select({ios: 'public.item', default: '*/*'});
if (hasPermission) {
try {
const docResponse = (await DocumentPicker.pick({allowMultiSelection, type: [fileType]}));
const proDocs = docResponse.map(async (d: DocumentPickerResponse) => {
const {doc} = await this.buildUri(d);
return doc;
});
const docs = await Promise.all(proDocs) as unknown as DocumentPickerResponse[];
await this.prepareFileUpload(docs);
} catch (error) {
// Do nothing
}
}
};
attachFileFromPhotoGallery = async (selectionLimit = 1) => {
const options: ImageLibraryOptions = {
quality: 1,
mediaType: 'mixed',
includeBase64: false,
selectionLimit,
};
const hasPermission = await this.hasPhotoPermission('photo');
if (hasPermission) {
launchImageLibrary(options, async (response: ImagePickerResponse) => {
StatusBar.setHidden(false);
if (response.errorMessage || response.didCancel) {
return;
}
const files = await this.getFilesFromResponse(response);
await this.prepareFileUpload(files);
});
}
};
}