From ab56ecd0109dd7bcc657319939108cdb4020c172 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Tue, 9 May 2023 19:21:02 -0300 Subject: [PATCH] media auto download view completed and saving the settings in mmkv --- app/i18n/locales/en.json | 6 +- app/lib/constants/index.ts | 1 + app/lib/constants/mediaAutoDownload.ts | 9 +++ app/lib/methods/userPreferences.ts | 4 + .../MediaAutoDownloadView/ListPicker.tsx | 73 +++++++++++++++++++ app/views/MediaAutoDownloadView/index.tsx | 56 ++++++++++---- 6 files changed, 135 insertions(+), 14 deletions(-) create mode 100644 app/lib/constants/mediaAutoDownload.ts create mode 100644 app/views/MediaAutoDownloadView/ListPicker.tsx diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json index 30d7a7572..81c828981 100644 --- a/app/i18n/locales/en.json +++ b/app/i18n/locales/en.json @@ -901,5 +901,9 @@ "Presence_Cap_Warning_Description": "Active connections have reached the limit for the workspace, thus the service that handles user status is disabled. It can be re-enabled manually in workspace settings.", "Learn_more": "Learn more", "and_N_more": "and {{count}} more", - "Media_auto_download": "Media auto-download" + "Media_auto_download": "Media auto-download", + "Images": "Images", + "Video": "Video", + "Wi_Fi_and_mobile_data":"Wi-Fi and mobile data", + "Wi_Fi": "Wi-fi" } \ No newline at end of file diff --git a/app/lib/constants/index.ts b/app/lib/constants/index.ts index 1d8d67b30..8f25e1ae5 100644 --- a/app/lib/constants/index.ts +++ b/app/lib/constants/index.ts @@ -11,3 +11,4 @@ export * from './messageTypeLoad'; export * from './notifications'; export * from './defaultSettings'; export * from './tablet'; +export * from './mediaAutoDownload'; diff --git a/app/lib/constants/mediaAutoDownload.ts b/app/lib/constants/mediaAutoDownload.ts new file mode 100644 index 000000000..c95794594 --- /dev/null +++ b/app/lib/constants/mediaAutoDownload.ts @@ -0,0 +1,9 @@ +export enum MediaDownloadOption { + NEVER = 'never', + WIFI_MOBILE_DATA = 'wifi_mobile_data', + WIFI = 'wifi' +} + +export const IMAGES_PREFERENCE_DOWNLOAD = 'imagesPreferenceDownload'; +export const VIDEO_PREFERENCE_DOWNLOAD = 'videoPreferenceDownload'; +export const AUDIO_PREFERENCE_DOWNLOAD = 'audioPreferenceDownload'; diff --git a/app/lib/methods/userPreferences.ts b/app/lib/methods/userPreferences.ts index b46e0f2f9..75805b527 100644 --- a/app/lib/methods/userPreferences.ts +++ b/app/lib/methods/userPreferences.ts @@ -14,6 +14,10 @@ class UserPreferences { this.mmkv = MMKV; } + getMMKV() { + return this.mmkv; + } + getString(key: string): string | null { try { return this.mmkv.getString(key) ?? null; diff --git a/app/views/MediaAutoDownloadView/ListPicker.tsx b/app/views/MediaAutoDownloadView/ListPicker.tsx new file mode 100644 index 000000000..1bb5afa90 --- /dev/null +++ b/app/views/MediaAutoDownloadView/ListPicker.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import { StyleSheet, Text } from 'react-native'; + +import { TActionSheetOptionsItem, useActionSheet } from '../../containers/ActionSheet'; +import { CustomIcon } from '../../containers/CustomIcon'; +import * as List from '../../containers/List'; +import I18n from '../../i18n'; +import { useTheme } from '../../theme'; +import sharedStyles from '../Styles'; +import { MediaDownloadOption } from '../../lib/constants'; + +const styles = StyleSheet.create({ + title: { ...sharedStyles.textRegular, fontSize: 16 } +}); + +const OPTIONS: { label: string; value: MediaDownloadOption }[] = [ + { + label: 'Wi_Fi_and_mobile_data', + value: MediaDownloadOption.WIFI_MOBILE_DATA + }, + { + label: 'Wi_Fi', + value: MediaDownloadOption.WIFI + }, + { + label: 'Never', + value: MediaDownloadOption.NEVER + } +]; + +interface IBaseParams { + value: string; + onChangeValue: (value: MediaDownloadOption) => void; +} + +const ListPicker = ({ + value, + title, + testID, + onChangeValue +}: { + title: string; + testID: string; +} & IBaseParams) => { + const { showActionSheet, hideActionSheet } = useActionSheet(); + const { colors } = useTheme(); + const option = OPTIONS.find(option => option.value === value); + + const getOptions = (): TActionSheetOptionsItem[] => + OPTIONS.map(i => ({ + title: I18n.t(i.label, { defaultValue: i.label }), + onPress: () => { + hideActionSheet(); + onChangeValue(i.value); + }, + right: option?.value === i.value ? () => : undefined + })); + + return ( + showActionSheet({ options: getOptions() })} + right={() => ( + + {option?.label ? I18n.t(option?.label, { defaultValue: option?.label }) : option?.label} + + )} + /> + ); +}; + +export default ListPicker; diff --git a/app/views/MediaAutoDownloadView/index.tsx b/app/views/MediaAutoDownloadView/index.tsx index c00f434f7..d753a7f9e 100644 --- a/app/views/MediaAutoDownloadView/index.tsx +++ b/app/views/MediaAutoDownloadView/index.tsx @@ -1,14 +1,36 @@ import React from 'react'; -import { StackNavigationProp } from '@react-navigation/stack'; -import { useNavigation } from '@react-navigation/native'; +import { useMMKVStorage } from 'react-native-mmkv-storage'; import * as List from '../../containers/List'; import SafeAreaView from '../../containers/SafeAreaView'; import StatusBar from '../../containers/StatusBar'; -import { SettingsStackParamList } from '../../stacks/types'; +import ListPicker from './ListPicker'; +import userPreferences from '../../lib/methods/userPreferences'; +import { + AUDIO_PREFERENCE_DOWNLOAD, + IMAGES_PREFERENCE_DOWNLOAD, + MediaDownloadOption, + VIDEO_PREFERENCE_DOWNLOAD +} from '../../lib/constants'; + +const MMKV = userPreferences.getMMKV(); const MediaAutoDownload = () => { - const navigation = useNavigation>(); + const [imagesPreference, setImagesPreference] = useMMKVStorage( + IMAGES_PREFERENCE_DOWNLOAD, + MMKV, + MediaDownloadOption.NEVER + ); + const [videoPreference, setVideoPreference] = useMMKVStorage( + VIDEO_PREFERENCE_DOWNLOAD, + MMKV, + MediaDownloadOption.NEVER + ); + const [audioPreference, setAudioPreference] = useMMKVStorage( + AUDIO_PREFERENCE_DOWNLOAD, + MMKV, + MediaDownloadOption.NEVER + ); return ( @@ -16,16 +38,24 @@ const MediaAutoDownload = () => { - {}} - // onPress={() => navigateToScreen('E2EEncryptionSecurityView')} - testID='security-privacy-view-e2e-encryption' + + + - - {}} testID='security-privacy-view-screen-lock' /> -