fix: remove blur from attachments (#5475)
* fix: remove the blur view * update story * remove raect-native-blur * update test * change blurcomponent to overlaycomponent --------- Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>
This commit is contained in:
Reinaldo Neto
GitHub
parent
c2656459ea
commit
0639d22e30
File diff suppressed because one or more lines are too long
|
|
@ -1,32 +1,25 @@
|
|||
import React from 'react';
|
||||
import { StyleProp, View, ViewStyle } from 'react-native';
|
||||
import { BlurView } from '@react-native-community/blur';
|
||||
|
||||
import styles from '../../styles';
|
||||
import { useTheme } from '../../../../theme';
|
||||
import RCActivityIndicator from '../../../ActivityIndicator';
|
||||
import { CustomIcon, TIconsName } from '../../../CustomIcon';
|
||||
|
||||
const BlurComponent = ({
|
||||
const OverlayComponent = ({
|
||||
loading = false,
|
||||
style = {},
|
||||
iconName,
|
||||
showOverlay = false
|
||||
iconName
|
||||
}: {
|
||||
loading: boolean;
|
||||
style: StyleProp<ViewStyle>;
|
||||
iconName: TIconsName;
|
||||
showOverlay?: boolean;
|
||||
}) => {
|
||||
const { colors } = useTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
{!showOverlay ? (
|
||||
<BlurView style={[style, styles.blurView]} blurType={'dark'} blurAmount={2} />
|
||||
) : (
|
||||
<View style={[style, styles.blurView, { backgroundColor: colors.overlayColor }]} />
|
||||
)}
|
||||
<View style={[style, styles.blurIndicator]}>
|
||||
{loading ? <RCActivityIndicator size={54} /> : <CustomIcon color={colors.buttonText} name={iconName} size={54} />}
|
||||
</View>
|
||||
|
|
@ -34,4 +27,4 @@ const BlurComponent = ({
|
|||
);
|
||||
};
|
||||
|
||||
export default BlurComponent;
|
||||
export default OverlayComponent;
|
||||
|
|
@ -15,7 +15,7 @@ import {
|
|||
import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
|
||||
import { useTheme } from '../../theme';
|
||||
import Markdown from '../markdown';
|
||||
import BlurComponent from './Components/BlurComponent';
|
||||
import BlurComponent from './Components/OverlayComponent';
|
||||
import MessageContext from './Context';
|
||||
import Touchable from './Touchable';
|
||||
import styles from './styles';
|
||||
|
|
@ -44,7 +44,7 @@ const Button = React.memo(({ children, onPress, disabled }: IMessageButton) => {
|
|||
<Touchable
|
||||
disabled={disabled}
|
||||
onPress={onPress}
|
||||
style={[styles.imageContainer, styles.mustWrapBlur]}
|
||||
style={styles.imageContainer}
|
||||
background={Touchable.Ripple(colors.bannerBackground)}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -21,11 +21,10 @@ import { useTheme } from '../../theme';
|
|||
import sharedStyles from '../../views/Styles';
|
||||
import { LISTENER } from '../Toast';
|
||||
import Markdown from '../markdown';
|
||||
import BlurComponent from './Components/BlurComponent';
|
||||
import BlurComponent from './Components/OverlayComponent';
|
||||
import MessageContext from './Context';
|
||||
import Touchable from './Touchable';
|
||||
import { fileDownload } from './helpers/fileDownload';
|
||||
import messageStyles from './styles';
|
||||
import { DEFAULT_MESSAGE_HEIGHT } from './utils';
|
||||
|
||||
const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/3gp', 'video/mkv'])];
|
||||
|
|
@ -78,12 +77,7 @@ const CancelIndicator = () => {
|
|||
const Thumbnail = ({ loading, thumbnailUrl, cached }: { loading: boolean; thumbnailUrl?: string; cached: boolean }) => (
|
||||
<>
|
||||
{thumbnailUrl ? <FastImage style={styles.thumbnailImage} source={{ uri: thumbnailUrl }} /> : null}
|
||||
<BlurComponent
|
||||
iconName={cached ? 'play-filled' : 'arrow-down-circle'}
|
||||
loading={loading}
|
||||
style={styles.button}
|
||||
showOverlay={cached}
|
||||
/>
|
||||
<BlurComponent iconName={cached ? 'play-filled' : 'arrow-down-circle'} loading={loading} style={styles.button} />
|
||||
{loading ? <CancelIndicator /> : null}
|
||||
</>
|
||||
);
|
||||
|
|
@ -230,7 +224,7 @@ const Video = ({ file, showAttachment, getCustomEmoji, style, isReply, msg }: IM
|
|||
<Markdown msg={msg} username={user.username} getCustomEmoji={getCustomEmoji} style={[isReply && style]} theme={theme} />
|
||||
<Touchable
|
||||
onPress={onPress}
|
||||
style={[styles.button, messageStyles.mustWrapBlur, { backgroundColor: themes[theme].videoBackground }]}
|
||||
style={[styles.button, { backgroundColor: themes[theme].videoBackground }]}
|
||||
background={Touchable.Ripple(themes[theme].bannerBackground)}
|
||||
>
|
||||
<Thumbnail loading={loading} cached={cached} />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import sharedStyles from '../../views/Styles';
|
||||
import { isAndroid, isTablet } from '../../lib/methods/helpers';
|
||||
import { isTablet } from '../../lib/methods/helpers';
|
||||
|
||||
export default StyleSheet.create({
|
||||
root: {
|
||||
|
|
@ -184,9 +184,5 @@ export default StyleSheet.create({
|
|||
position: 'absolute',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
mustWrapBlur: {
|
||||
// https://github.com/Kureev/react-native-blur/issues/520#issuecomment-1378339192 Fix BlurView
|
||||
overflow: isAndroid ? 'hidden' : 'visible'
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export const colors = {
|
|||
n900: '#1F2329',
|
||||
statusBackgroundWarning: '#FFECAD',
|
||||
statusFontOnWarning: '#B88D00',
|
||||
overlayColor: '#1F2329B2',
|
||||
overlayColor: '#1F2329CC',
|
||||
buttonBackgroundPrimaryDefault: '#156FF5',
|
||||
buttonBackgroundSecondaryDefault: '#E4E7EA',
|
||||
buttonFontPrimary: '#FFFFFF',
|
||||
|
|
@ -191,7 +191,7 @@ export const colors = {
|
|||
n900: '#FFFFFF',
|
||||
statusBackgroundWarning: '#FFECAD',
|
||||
statusFontOnWarning: '#B88D00',
|
||||
overlayColor: '#1F2329B2',
|
||||
overlayColor: '#1F2329CC',
|
||||
buttonBackgroundPrimaryDefault: '#3976D1',
|
||||
buttonBackgroundSecondaryDefault: '#2F343D',
|
||||
buttonFontPrimary: '#FFFFFF',
|
||||
|
|
@ -279,7 +279,7 @@ export const colors = {
|
|||
n900: '#FFFFFF',
|
||||
statusBackgroundWarning: '#FFECAD',
|
||||
statusFontOnWarning: '#B88D00',
|
||||
overlayColor: '#1F2329B2',
|
||||
overlayColor: '#1F2329CC',
|
||||
buttonBackgroundPrimaryDefault: '#3976D1',
|
||||
buttonBackgroundSecondaryDefault: '#2F343D',
|
||||
buttonFontPrimary: '#FFFFFF',
|
||||
|
|
|
|||
|
|
@ -358,8 +358,6 @@ PODS:
|
|||
- glog
|
||||
- react-native-background-timer (2.4.1):
|
||||
- React-Core
|
||||
- react-native-blur (4.3.2):
|
||||
- React-Core
|
||||
- react-native-cameraroll (5.6.1):
|
||||
- React-Core
|
||||
- react-native-cookies (6.2.1):
|
||||
|
|
@ -623,7 +621,6 @@ DEPENDENCIES:
|
|||
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
|
||||
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
|
||||
- react-native-background-timer (from `../node_modules/react-native-background-timer`)
|
||||
- "react-native-blur (from `../node_modules/@react-native-community/blur`)"
|
||||
- "react-native-cameraroll (from `../node_modules/@react-native-camera-roll/camera-roll`)"
|
||||
- "react-native-cookies (from `../node_modules/@react-native-cookies/cookies`)"
|
||||
- react-native-document-picker (from `../node_modules/react-native-document-picker`)
|
||||
|
|
@ -770,8 +767,6 @@ EXTERNAL SOURCES:
|
|||
:path: "../node_modules/react-native/ReactCommon/logger"
|
||||
react-native-background-timer:
|
||||
:path: "../node_modules/react-native-background-timer"
|
||||
react-native-blur:
|
||||
:path: "../node_modules/@react-native-community/blur"
|
||||
react-native-cameraroll:
|
||||
:path: "../node_modules/@react-native-camera-roll/camera-roll"
|
||||
react-native-cookies:
|
||||
|
|
@ -932,7 +927,6 @@ SPEC CHECKSUMS:
|
|||
React-jsinspector: cab4d37ebde480f84c79ac89568abbf76b916c3e
|
||||
React-logger: b75b80500ea80457b2cf169427d66de986cdcb29
|
||||
react-native-background-timer: 17ea5e06803401a379ebf1f20505b793ac44d0fe
|
||||
react-native-blur: cfdad7b3c01d725ab62a8a729f42ea463998afa2
|
||||
react-native-cameraroll: 2f08db1ecc9b73dbc01f89335d6d5179fac2894c
|
||||
react-native-cookies: f54fcded06bb0cda05c11d86788020b43528a26c
|
||||
react-native-document-picker: f5ec1a712ca2a975c233117f044817bb8393cad4
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@
|
|||
"@react-native-camera-roll/camera-roll": "5.6.1",
|
||||
"@react-native-clipboard/clipboard": "^1.8.5",
|
||||
"@react-native-community/art": "^1.2.0",
|
||||
"@react-native-community/blur": "^4.1.0",
|
||||
"@react-native-community/datetimepicker": "3.5.2",
|
||||
"@react-native-community/hooks": "2.6.0",
|
||||
"@react-native-community/netinfo": "6.0.0",
|
||||
|
|
|
|||
11
yarn.lock
11
yarn.lock
|
|
@ -3368,9 +3368,9 @@
|
|||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.21.0":
|
||||
version "7.23.6"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
|
||||
integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==
|
||||
version "7.23.8"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650"
|
||||
integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.14.0"
|
||||
|
||||
|
|
@ -5258,11 +5258,6 @@
|
|||
invariant "^2.2.4"
|
||||
prop-types "^15.7.2"
|
||||
|
||||
"@react-native-community/blur@^4.1.0":
|
||||
version "4.3.2"
|
||||
resolved "https://registry.yarnpkg.com/@react-native-community/blur/-/blur-4.3.2.tgz#185a2c7dd03ba168cc95069bc4742e9505fd6c6c"
|
||||
integrity sha512-0ID+pyZKdC4RdgC7HePxUQ6JmsbNrgz03u+6SgqYpmBoK/rE+7JffqIw7IEsfoKitLEcRNLGekIBsfwCqiEkew==
|
||||
|
||||
"@react-native-community/cli-debugger-ui@^7.0.3":
|
||||
version "7.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-7.0.3.tgz#3eeeacc5a43513cbcae56e5e965d77726361bcb4"
|
||||
|
|
|
|||
Loading…
Reference in New Issue