diff --git a/app/actions/actionsTypes.ts b/app/actions/actionsTypes.ts
index 75f42588c..f65a6d8b3 100644
--- a/app/actions/actionsTypes.ts
+++ b/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]);
diff --git a/app/actions/app.ts b/app/actions/app.ts
index 8747fda56..bafcc46ec 100644
--- a/app/actions/app.ts
+++ b/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
+ };
+}
diff --git a/app/containers/message/Audio.tsx b/app/containers/message/Audio.tsx
index 3ab079e92..9eac3a908 100644
--- a/app/containers/message/Audio.tsx
+++ b/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 customIconName = () => {
- if (toDownload) {
- return 'arrow-down-circle';
- }
- return paused ? 'play-filled' : 'pause-filled';
- };
+const Button = React.memo(({ loading, paused, onPress, disabled, cached }: IButton) => {
+ const { colors } = useTheme();
+
+ let customIconName: 'arrow-down-circle' | 'play-filled' | 'pause-filled' = 'arrow-down-circle';
+ if (cached) {
+ customIconName = paused ? 'play-filled' : 'pause-filled';
+ }
return (
+ background={Touchable.SelectableBackgroundBorderless()}
+ >
{loading ? (
) : (
-
+
)}
);
@@ -131,7 +131,7 @@ class MessageAudio extends React.Component {
- const { toDownload } = this.state;
- return toDownload ? this.startDownload() : this.togglePlayPause();
+ const { cached } = this.state;
+ return cached ? this.togglePlayPause() : this.startDownload();
};
playPause = async () => {
@@ -340,7 +341,7 @@ class MessageAudio extends React.Component
-
+ ]}
+ >
+
{
+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_MOBILE_DATA ||
- (userParam && userParam.author?._id === userParam.user.id)
+ (mediaDownloadPreference === MediaDownloadOption.WIFI && internetType === NetInfoStateType.wifi) ||
+ mediaDownloadPreference === MediaDownloadOption.WIFI_MOBILE_DATA
);
};
diff --git a/app/lib/store/index.ts b/app/lib/store/index.ts
index 1b3520871..b8bd0b43c 100644
--- a/app/lib/store/index.ts
+++ b/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()
diff --git a/app/lib/store/internetStateMiddleware.ts b/app/lib/store/internetStateMiddleware.ts
new file mode 100644
index 000000000..104a2aa05
--- /dev/null
+++ b/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;
+ };
diff --git a/app/reducers/app.ts b/app/reducers/app.ts
index b9876b836..83b9af389 100644
--- a/app/reducers/app.ts
+++ b/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;
}