fix audio and move the netInfo from autoDownloadPreference to redux

app/actions/actionsTypes.ts

@@ -46,7 +46,8 @@ export const APP = createRequestTypes('APP', [
 	'INIT',
 	'INIT_LOCAL_SETTINGS',
 	'SET_MASTER_DETAIL',
-	'SET_NOTIFICATION_PRESENCE_CAP'
+	'SET_NOTIFICATION_PRESENCE_CAP',
+	'SET_INTERNET_TYPE'
 ]);
 export const MESSAGES = createRequestTypes('MESSAGES', ['REPLY_BROADCAST']);
 export const CREATE_CHANNEL = createRequestTypes('CREATE_CHANNEL', [...defaultTypes]);

app/actions/app.ts

@@ -1,4 +1,5 @@
 import { Action } from 'redux';
+import { NetInfoStateType } from '@react-native-community/netinfo';
 
 import { RootEnum } from '../definitions';
 import { APP } from './actionsTypes';
@@ -16,7 +17,11 @@ interface ISetNotificationPresenceCap extends Action {
 	show: boolean;
 }
 
-export type TActionApp = IAppStart & ISetMasterDetail & ISetNotificationPresenceCap;
+interface ISetInternetType extends Action {
+	internetType: NetInfoStateType;
+}
+
+export type TActionApp = IAppStart & ISetMasterDetail & ISetNotificationPresenceCap & ISetInternetType;
 
 interface Params {
 	root: RootEnum;
@@ -62,3 +67,10 @@ export function setNotificationPresenceCap(show: boolean): ISetNotificationPrese
 		show
 	};
 }
+
+export function setInternetType(internetType: NetInfoStateType): ISetInternetType {
+	return {
+		type: APP.SET_INTERNET_TYPE,
+		internetType
+	};
+}

app/containers/message/Audio.tsx

@@ -18,19 +18,18 @@ import ActivityIndicator from '../ActivityIndicator';
 import { withDimensions } from '../../dimensions';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
 import { IAttachment, IUserMessage } from '../../definitions';
-import { TSupportedThemes } from '../../theme';
+import { TSupportedThemes, useTheme } from '../../theme';
 import { MediaTypes, downloadMediaFile, searchMediaFileAsync } from '../../lib/methods/handleMediaDownload';
 import EventEmitter from '../../lib/methods/helpers/events';
 import { PAUSE_AUDIO } from './constants';
-import { isAutoDownloadEnabled } from '../../lib/methods/autoDownloadPreference';
+import { fetchAutoDownloadEnabled } from '../../lib/methods/autoDownloadPreference';
 
 interface IButton {
 	loading: boolean;
 	paused: boolean;
-	theme: TSupportedThemes;
 	disabled?: boolean;
 	onPress: () => void;
-	toDownload: boolean;
+	cached: boolean;
 }
 
 interface IMessageAudioProps {
@@ -49,7 +48,7 @@ interface IMessageAudioState {
 	currentTime: number;
 	duration: number;
 	paused: boolean;
-	toDownload: boolean;
+	cached: boolean;
 }
 
 const mode = {
@@ -94,24 +93,25 @@ const formatTime = (seconds: number) => moment.utc(seconds * 1000).format('mm:ss
 
 const BUTTON_HIT_SLOP = { top: 12, right: 12, bottom: 12, left: 12 };
 
-const Button = React.memo(({ loading, paused, onPress, disabled, theme, toDownload }: IButton) => {
+const Button = React.memo(({ loading, paused, onPress, disabled, cached }: IButton) => {
-	const customIconName = () => {
+	const { colors } = useTheme();
-		if (toDownload) {
+
-			return 'arrow-down-circle';
+	let customIconName: 'arrow-down-circle' | 'play-filled' | 'pause-filled' = 'arrow-down-circle';
-		}
+	if (cached) {
-		return paused ? 'play-filled' : 'pause-filled';
+		customIconName = paused ? 'play-filled' : 'pause-filled';
-	};
+	}
 	return (
 		<Touchable
 			style={styles.playPauseButton}
 			disabled={disabled}
 			onPress={onPress}
 			hitSlop={BUTTON_HIT_SLOP}
-			background={Touchable.SelectableBackgroundBorderless()}>
+			background={Touchable.SelectableBackgroundBorderless()}
+		>
 			{loading ? (
 				<ActivityIndicator style={[styles.playPauseButton, styles.audioLoading]} />
 			) : (
-				<CustomIcon name={customIconName()} size={36} color={disabled ? themes[theme].tintDisabled : themes[theme].tintColor} />
+				<CustomIcon name={customIconName} size={36} color={disabled ? colors.tintDisabled : colors.tintColor} />
 			)}
 		</Touchable>
 	);
@@ -131,7 +131,7 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 			currentTime: 0,
 			duration: 0,
 			paused: true,
-			toDownload: false
+			cached: true
 		};
 
 		this.sound = new Audio.Sound();
@@ -177,14 +177,15 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 		const url = this.getUrl();
 		try {
 			if (url) {
-				const autoDownload = await isAutoDownloadEnabled('audioPreferenceDownload', { author, user });
+				const isCurrentUserAuthor = author?._id === user.id;
-				if (autoDownload) {
+				const autoDownload = fetchAutoDownloadEnabled('audioPreferenceDownload');
+				if (autoDownload || isCurrentUserAuthor) {
 					await this.startDownload();
 					return;
 				}
 
 				// MediaDownloadOption.NEVER or MediaDownloadOption.WIFI and the mobile is using mobile data
-				return this.setState({ loading: false, toDownload: true });
+				return this.setState({ loading: false, cached: false });
 			}
 		} catch {
 			// Do nothing
@@ -192,7 +193,7 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 	};
 
 	shouldComponentUpdate(nextProps: IMessageAudioProps, nextState: IMessageAudioState) {
-		const { currentTime, duration, paused, loading, toDownload } = this.state;
+		const { currentTime, duration, paused, loading, cached } = this.state;
 		const { file, theme } = this.props;
 		if (nextProps.theme !== theme) {
 			return true;
@@ -212,7 +213,7 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 		if (nextState.loading !== loading) {
 			return true;
 		}
-		if (nextState.toDownload !== toDownload) {
+		if (nextState.cached !== cached) {
 			return true;
 		}
 		return false;
@@ -301,16 +302,16 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 				});
 
 				await this.sound.loadAsync({ uri: audio });
-				return this.setState({ loading: false, toDownload: false });
+				return this.setState({ loading: false, cached: true });
 			}
 		} catch {
-			return this.setState({ loading: false, toDownload: true });
+			return this.setState({ loading: false, cached: false });
 		}
 	};
 
 	onPress = () => {
-		const { toDownload } = this.state;
+		const { cached } = this.state;
-		return toDownload ? this.startDownload() : this.togglePlayPause();
+		return cached ? this.togglePlayPause() : this.startDownload();
 	};
 
 	playPause = async () => {
@@ -340,7 +341,7 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 	};
 
 	render() {
-		const { loading, paused, currentTime, duration, toDownload } = this.state;
+		const { loading, paused, currentTime, duration, cached } = this.state;
 		const { file, getCustomEmoji, theme, scale, isReply, style } = this.props;
 		const { description } = file;
 		// @ts-ignore can't use declare to type this
@@ -370,15 +371,9 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 					style={[
 						styles.audioContainer,
 						{ backgroundColor: themes[theme].chatComponentBackground, borderColor: themes[theme].borderColor }
-					]}>
+					]}
-					<Button
+				>
-						disabled={isReply}
+					<Button disabled={isReply} loading={loading} paused={paused} cached={cached} onPress={this.onPress} />
-						loading={loading}
-						paused={paused}
-						toDownload={toDownload}
-						onPress={this.onPress}
-						theme={theme}
-					/>
 					<Slider
 						disabled={isReply}
 						style={styles.slider}

app/lib/methods/autoDownloadPreference.ts

@@ -1,4 +1,4 @@
-import NetInfo, { NetInfoStateType } from '@react-native-community/netinfo';
+import { NetInfoStateType } from '@react-native-community/netinfo';
 
 import {
 	IMAGES_PREFERENCE_DOWNLOAD,
@@ -7,21 +7,16 @@ import {
 	MediaDownloadOption
 } from '../constants';
 import userPreferences from './userPreferences';
-import { IUser, IUserMessage } from '../../definitions';
+import { store } from '../store/auxStore';
 
 type TMediaType = typeof IMAGES_PREFERENCE_DOWNLOAD | typeof AUDIO_PREFERENCE_DOWNLOAD | typeof VIDEO_PREFERENCE_DOWNLOAD;
-interface IUsersParam {
-	user: IUser;
-	author?: IUserMessage;
-}
 
-export const isAutoDownloadEnabled = async (mediaType: TMediaType, userParam?: IUsersParam) => {
+export const fetchAutoDownloadEnabled = (mediaType: TMediaType) => {
+	const { internetType } = store.getState().app;
 	const mediaDownloadPreference = userPreferences.getString(mediaType);
-	const netInfoState = await NetInfo.fetch();
 
 	return (
-		(mediaDownloadPreference === MediaDownloadOption.WIFI && netInfoState.type === NetInfoStateType.wifi) ||
+		(mediaDownloadPreference === MediaDownloadOption.WIFI && internetType === NetInfoStateType.wifi) ||
-		mediaDownloadPreference === MediaDownloadOption.WIFI_MOBILE_DATA ||
+		mediaDownloadPreference === MediaDownloadOption.WIFI_MOBILE_DATA
-		(userParam && userParam.author?._id === userParam.user.id)
 	);
 };

app/lib/store/index.ts

@@ -4,6 +4,7 @@ import createSagaMiddleware from 'redux-saga';
 import reducers from '../../reducers';
 import sagas from '../../sagas';
 import applyAppStateMiddleware from './appStateMiddleware';
+import applyInternetStateMiddleware from './internetStateMiddleware';
 
 let sagaMiddleware;
 let enhancers;
@@ -17,6 +18,7 @@ if (__DEV__) {
 
 	enhancers = compose(
 		applyAppStateMiddleware(),
+		applyInternetStateMiddleware(),
 		applyMiddleware(reduxImmutableStateInvariant),
 		applyMiddleware(sagaMiddleware),
 		Reactotron.createEnhancer()

app/lib/store/internetStateMiddleware.ts

@@ -0,0 +1,21 @@
+import NetInfo, { NetInfoState, NetInfoStateType } from '@react-native-community/netinfo';
+
+import { setInternetType } from '../../actions/app';
+
+export default () =>
+	(createStore: any) =>
+	(...args: any) => {
+		const store = createStore(...args);
+
+		let currentType: NetInfoStateType | undefined;
+
+		const handleInternetStateChange = (nextState: NetInfoState) => {
+			if (nextState.type !== currentType) {
+				store.dispatch(setInternetType(nextState.type));
+				currentType = nextState.type;
+			}
+		};
+
+		NetInfo.addEventListener(handleInternetStateChange);
+		return store;
+	};

app/reducers/app.ts

@@ -1,3 +1,5 @@
+import { NetInfoStateType } from '@react-native-community/netinfo';
+
 import { TActionApp } from '../actions/app';
 import { RootEnum } from '../definitions';
 import { APP, APP_STATE } from '../actions/actionsTypes';
@@ -10,6 +12,7 @@ export interface IApp {
 	foreground: boolean;
 	background: boolean;
 	notificationPresenceCap: boolean;
+	internetType?: NetInfoStateType;
 }
 
 export const initialState: IApp = {
@@ -19,7 +22,8 @@ export const initialState: IApp = {
 	ready: false,
 	foreground: true,
 	background: false,
-	notificationPresenceCap: false
+	notificationPresenceCap: false,
+	internetType: undefined
 };
 
 export default function app(state = initialState, action: TActionApp): IApp {
@@ -62,6 +66,11 @@ export default function app(state = initialState, action: TActionApp): IApp {
 				...state,
 				notificationPresenceCap: action.show
 			};
+		case APP.SET_INTERNET_TYPE:
+			return {
+				...state,
+				internetType: action.internetType
+			};
 		default:
 			return state;
 	}