remove blurcomponent, fix the blur style in image.tsx, minor tweak video function name
This commit is contained in:
parent
7108e35ae7
commit
d3c87a19eb
|
@ -1,27 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { BlurView } from '@react-native-community/blur';
|
|
||||||
import { View, ViewStyle } from 'react-native';
|
|
||||||
|
|
||||||
import RCActivityIndicator from '../../ActivityIndicator';
|
|
||||||
import { CustomIcon } from '../../CustomIcon';
|
|
||||||
import { useTheme } from '../../../theme';
|
|
||||||
|
|
||||||
const BlurComponent = ({ loading = false, style }: { loading: boolean; style: ViewStyle }) => {
|
|
||||||
const { theme, colors } = useTheme();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<BlurView
|
|
||||||
style={[style, { position: 'absolute', borderWidth: 0, top: 0, left: 0, bottom: 0, right: 0 }]}
|
|
||||||
blurType={theme === 'light' ? 'light' : 'dark'}
|
|
||||||
blurAmount={10}
|
|
||||||
reducedTransparencyFallbackColor='white'
|
|
||||||
/>
|
|
||||||
<View style={[style, { position: 'absolute', justifyContent: 'center', alignItems: 'center', borderWidth: 0 }]}>
|
|
||||||
{loading ? <RCActivityIndicator /> : <CustomIcon color={colors.buttonText} name='arrow-down-circle' size={54} />}
|
|
||||||
</View>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BlurComponent;
|
|
|
@ -5,6 +5,7 @@ import { dequal } from 'dequal';
|
||||||
import { createImageProgress } from 'react-native-image-progress';
|
import { createImageProgress } from 'react-native-image-progress';
|
||||||
import * as Progress from 'react-native-progress';
|
import * as Progress from 'react-native-progress';
|
||||||
import * as FileSystem from 'expo-file-system';
|
import * as FileSystem from 'expo-file-system';
|
||||||
|
import { BlurView } from '@react-native-community/blur';
|
||||||
|
|
||||||
import Touchable from './Touchable';
|
import Touchable from './Touchable';
|
||||||
import Markdown from '../markdown';
|
import Markdown from '../markdown';
|
||||||
|
@ -17,7 +18,8 @@ import { TSupportedThemes, useTheme } from '../../theme';
|
||||||
import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
|
import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
|
||||||
import { MediaTypes, downloadMediaFile, searchMediaFileAsync } from '../../lib/methods/handleMediaDownload';
|
import { MediaTypes, downloadMediaFile, searchMediaFileAsync } from '../../lib/methods/handleMediaDownload';
|
||||||
import { isAutoDownloadEnabled } from './helpers/mediaDownload/autoDownloadPreference';
|
import { isAutoDownloadEnabled } from './helpers/mediaDownload/autoDownloadPreference';
|
||||||
import BlurComponent from './Components/BlurComponent';
|
import RCActivityIndicator from '../ActivityIndicator';
|
||||||
|
import { CustomIcon } from '../CustomIcon';
|
||||||
|
|
||||||
interface IMessageButton {
|
interface IMessageButton {
|
||||||
children: React.ReactElement;
|
children: React.ReactElement;
|
||||||
|
@ -50,6 +52,24 @@ const Button = React.memo(({ children, onPress, disabled, theme }: IMessageButto
|
||||||
</Touchable>
|
</Touchable>
|
||||||
));
|
));
|
||||||
|
|
||||||
|
const BlurComponent = ({ loading = false }: { loading: boolean }) => {
|
||||||
|
const { theme, colors } = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<BlurView
|
||||||
|
style={[styles.image, styles.imageBlur]}
|
||||||
|
blurType={theme === 'light' ? 'light' : 'dark'}
|
||||||
|
blurAmount={10}
|
||||||
|
reducedTransparencyFallbackColor='white'
|
||||||
|
/>
|
||||||
|
<View style={[styles.image, styles.imageIndicator]}>
|
||||||
|
{loading ? <RCActivityIndicator /> : <CustomIcon color={colors.buttonText} name='arrow-down-circle' size={54} />}
|
||||||
|
</View>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export const MessageImage = React.memo(
|
export const MessageImage = React.memo(
|
||||||
({ imgUri, toDownload, loading }: { imgUri: string; toDownload: boolean; loading: boolean }) => {
|
({ imgUri, toDownload, loading }: { imgUri: string; toDownload: boolean; loading: boolean }) => {
|
||||||
const { colors } = useTheme();
|
const { colors } = useTheme();
|
||||||
|
@ -65,7 +85,7 @@ export const MessageImage = React.memo(
|
||||||
color: colors.actionTintColor
|
color: colors.actionTintColor
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{toDownload ? <BlurComponent style={styles.image} loading={loading} /> : null}
|
{toDownload ? <BlurComponent loading={loading} /> : null}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -151,7 +151,7 @@ const Video = React.memo(
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!isIOS && file.video_url) {
|
if (!isIOS && file.video_url) {
|
||||||
await downloadVideo(video);
|
await downloadVideoToGallery(video);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
EventEmitter.emit(LISTENER, { message: I18n.t('Unsupported_format') });
|
EventEmitter.emit(LISTENER, { message: I18n.t('Unsupported_format') });
|
||||||
|
@ -165,7 +165,7 @@ const Video = React.memo(
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const downloadVideo = async (uri: string) => {
|
const downloadVideoToGallery = async (uri: string) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const fileDownloaded = await fileDownload(uri, file);
|
const fileDownloaded = await fileDownload(uri, file);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
|
|
@ -170,5 +170,19 @@ export default StyleSheet.create({
|
||||||
threadDetails: {
|
threadDetails: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
marginLeft: 12
|
marginLeft: 12
|
||||||
|
},
|
||||||
|
imageBlur: {
|
||||||
|
position: 'absolute',
|
||||||
|
borderWidth: 0,
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
bottom: 0,
|
||||||
|
right: 0
|
||||||
|
},
|
||||||
|
imageIndicator: {
|
||||||
|
position: 'absolute',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
borderWidth: 0
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
export NODE_BINARY="/Users/reinaldoneto/.nvm/versions/node/v14.19.3/bin/node"
|
|
Loading…
Reference in New Issue