forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[APP-729] Replace the ImageHider blurring effect with a simpler and more reliable card (#959)
* Replace the ImageHider blurring effect with a simpler and more reliable card
* A few improvements to ImageHider layout
* Simplify the ImageHider a bit more
* Small web layout tweak
authored by
Paul Frazee
and committed by
GitHub
bf178576
b06304a2
+31
-79
+31
-79
src/view/com/util/moderation/ImageHider.tsx
+31
-79
src/view/com/util/moderation/ImageHider.tsx
···
2
2
import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
3
3
import {usePalette} from 'lib/hooks/usePalette'
4
4
import {Text} from '../text/Text'
5
-
import {BlurView} from '../BlurView'
6
5
import {ModerationBehavior, ModerationBehaviorCode} from 'lib/labeling/types'
7
-
import {isAndroid} from 'platform/detection'
6
+
import {isDesktopWeb} from 'platform/detection'
7
+
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
8
+
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
8
9
9
10
export function ImageHider({
10
11
testID,
11
12
moderation,
12
13
style,
13
-
containerStyle,
14
14
children,
15
15
}: React.PropsWithChildren<{
16
16
testID?: string
17
17
moderation: ModerationBehavior
18
18
style?: StyleProp<ViewStyle>
19
-
containerStyle?: StyleProp<ViewStyle>
20
19
}>) {
21
20
const pal = usePalette('default')
22
21
const [override, setOverride] = React.useState(false)
23
-
const onPressShow = React.useCallback(() => {
24
-
setOverride(true)
25
-
}, [setOverride])
26
-
const onPressHide = React.useCallback(() => {
27
-
setOverride(false)
22
+
const onPressToggle = React.useCallback(() => {
23
+
setOverride(v => !v)
28
24
}, [setOverride])
29
25
30
26
if (moderation.behavior === ModerationBehaviorCode.Hide) {
···
40
36
}
41
37
42
38
return (
43
-
<View style={[styles.container, containerStyle]}>
44
-
<View testID={testID} style={style}>
45
-
{children}
46
-
</View>
47
-
{override ? (
39
+
<View testID={testID} style={style}>
40
+
<View style={[styles.cover, pal.viewLight]}>
48
41
<Pressable
49
-
onPress={onPressHide}
50
-
style={[styles.hideBtn, pal.view]}
51
-
accessibilityLabel="Hide image"
52
-
accessibilityHint="Rehides the image">
42
+
onPress={onPressToggle}
43
+
style={[styles.toggleBtn]}
44
+
accessibilityLabel="Show image"
45
+
accessibilityHint="">
46
+
<FontAwesomeIcon
47
+
icon={override ? 'eye' : ['far', 'eye-slash']}
48
+
size={24}
49
+
style={pal.text as FontAwesomeIconStyle}
50
+
/>
51
+
<Text type="lg" style={pal.text}>
52
+
{moderation.reason || 'Content warning'}
53
+
</Text>
54
+
<View style={styles.flex1} />
53
55
<Text type="xl-bold" style={pal.link}>
54
-
Hide
56
+
{override ? 'Hide' : 'Show'}
55
57
</Text>
56
58
</Pressable>
57
-
) : (
58
-
<>
59
-
{isAndroid ? (
60
-
/* android has an issue that breaks the blurview */
61
-
/* see https://github.com/Kureev/react-native-blur/issues/486 */
62
-
<View style={[pal.viewLight, styles.overlay, styles.coverView]} />
63
-
) : (
64
-
<BlurView
65
-
style={[styles.overlay, styles.blurView]}
66
-
blurType="light"
67
-
blurAmount={100}
68
-
reducedTransparencyFallbackColor="white"
69
-
/>
70
-
)}
71
-
<View style={[styles.overlay, styles.info]}>
72
-
<Pressable
73
-
onPress={onPressShow}
74
-
style={[styles.showBtn, pal.view]}
75
-
accessibilityLabel="Show image"
76
-
accessibilityHint="Shows image hidden based on your moderation settings">
77
-
<Text type="xl" style={pal.text}>
78
-
{moderation.reason || 'Content warning'}
79
-
</Text>
80
-
<Text type="xl-bold" style={pal.link}>
81
-
Show
82
-
</Text>
83
-
</Pressable>
84
-
</View>
85
-
</>
86
-
)}
59
+
</View>
60
+
{override && children}
87
61
</View>
88
62
)
89
63
}
90
64
91
65
const styles = StyleSheet.create({
92
-
container: {
93
-
position: 'relative',
94
-
marginBottom: 10,
95
-
},
96
-
overlay: {
97
-
position: 'absolute',
98
-
left: 0,
99
-
top: 0,
100
-
right: 0,
101
-
bottom: 0,
102
-
},
103
-
blurView: {
66
+
cover: {
104
67
borderRadius: 8,
105
-
},
106
-
coverView: {
107
-
borderRadius: 8,
108
-
},
109
-
info: {
110
-
justifyContent: 'center',
111
-
alignItems: 'center',
68
+
marginTop: 4,
112
69
},
113
-
showBtn: {
70
+
toggleBtn: {
114
71
flexDirection: 'row',
115
72
gap: 8,
116
-
paddingHorizontal: 18,
117
-
paddingVertical: 14,
118
-
borderRadius: 24,
73
+
alignItems: 'center',
74
+
paddingHorizontal: isDesktopWeb ? 24 : 20,
75
+
paddingVertical: isDesktopWeb ? 20 : 18,
119
76
},
120
-
hideBtn: {
121
-
position: 'absolute',
122
-
left: 8,
123
-
bottom: 20,
124
-
paddingHorizontal: 8,
125
-
paddingVertical: 6,
126
-
borderRadius: 8,
77
+
flex1: {
78
+
flex: 1,
127
79
},
128
80
})