media auto download view completed and saving the settings in mmkv

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"
 }

app/lib/constants/index.ts

@@ -11,3 +11,4 @@ export * from './messageTypeLoad';
 export * from './notifications';
 export * from './defaultSettings';
 export * from './tablet';
+export * from './mediaAutoDownload';

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';

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;

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 ? () => <CustomIcon name={'check'} size={20} color={colors.tintActive} /> : undefined
+		}));
+
+	return (
+		<List.Item
+			title={title}
+			testID={testID}
+			onPress={() => showActionSheet({ options: getOptions() })}
+			right={() => (
+				<Text style={[styles.title, { color: colors.actionTintColor }]}>
+					{option?.label ? I18n.t(option?.label, { defaultValue: option?.label }) : option?.label}
+				</Text>
+			)}
+		/>
+	);
+};
+
+export default ListPicker;

app/views/MediaAutoDownloadView/index.tsx

@@ -1,14 +1,36 @@
 import React from 'react';
-import { StackNavigationProp } from '@react-navigation/stack';
+import { useMMKVStorage } from 'react-native-mmkv-storage';
-import { useNavigation } from '@react-navigation/native';
 
 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<StackNavigationProp<SettingsStackParamList, 'MediaAutoDownloadView'>>();
+	const [imagesPreference, setImagesPreference] = useMMKVStorage<MediaDownloadOption>(
+		IMAGES_PREFERENCE_DOWNLOAD,
+		MMKV,
+		MediaDownloadOption.NEVER
+	);
+	const [videoPreference, setVideoPreference] = useMMKVStorage<MediaDownloadOption>(
+		VIDEO_PREFERENCE_DOWNLOAD,
+		MMKV,
+		MediaDownloadOption.NEVER
+	);
+	const [audioPreference, setAudioPreference] = useMMKVStorage<MediaDownloadOption>(
+		AUDIO_PREFERENCE_DOWNLOAD,
+		MMKV,
+		MediaDownloadOption.NEVER
+	);
 
 	return (
 		<SafeAreaView testID='security-privacy-view'>
@@ -16,16 +38,24 @@ const MediaAutoDownload = () => {
 			<List.Container testID='security-privacy-view-list'>
 				<List.Section>
 					<List.Separator />
-					<List.Item
+					<ListPicker
-						title='E2E_Encryption'
+						onChangeValue={setImagesPreference}
-						showActionIndicator
+						value={imagesPreference}
-						onPress={() => {}}
+						title='Images'
-						// onPress={() => navigateToScreen('E2EEncryptionSecurityView')}
+						testID='media-auto-download-view-images'
-						testID='security-privacy-view-e2e-encryption'
+					/>
+					<ListPicker
+						onChangeValue={setVideoPreference}
+						value={videoPreference}
+						title='Video'
+						testID='media-auto-download-view-video'
+					/>
+					<ListPicker
+						onChangeValue={setAudioPreference}
+						value={audioPreference}
+						title='Audio'
+						testID='media-auto-download-view-audio'
 					/>
-					<List.Separator />
-					<List.Item title='Screen_lock' showActionIndicator onPress={() => {}} testID='security-privacy-view-screen-lock' />
-					<List.Separator />
 				</List.Section>
 			</List.Container>
 		</SafeAreaView>