Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

[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
··· 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 })