my fork of the bluesky client

Hardcode Giphy embed height (#6475)

authored by danabra.mov and committed by

GitHub ee49ca7a b87c94e6

+4 -26
+4 -26
src/view/com/util/post-embeds/ExternalGifEmbed.tsx
··· 1 1 import React from 'react' 2 - import { 3 - ActivityIndicator, 4 - GestureResponderEvent, 5 - LayoutChangeEvent, 6 - Pressable, 7 - } from 'react-native' 8 - import {Image, ImageLoadEventData} from 'expo-image' 2 + import {ActivityIndicator, GestureResponderEvent, Pressable} from 'react-native' 3 + import {Image} from 'expo-image' 9 4 import {AppBskyEmbedExternal} from '@atproto/api' 10 5 import {msg} from '@lingui/macro' 11 6 import {useLingui} from '@lingui/react' 12 7 13 - import {EmbedPlayerParams, getGifDims} from '#/lib/strings/embed-player' 8 + import {EmbedPlayerParams} from '#/lib/strings/embed-player' 14 9 import {isIOS, isNative, isWeb} from '#/platform/detection' 15 10 import {useExternalEmbedsPrefs} from '#/state/preferences' 16 11 import {atoms as a, useTheme} from '#/alf' ··· 28 23 }) { 29 24 const t = useTheme() 30 25 const externalEmbedsPrefs = useExternalEmbedsPrefs() 31 - 32 26 const {_} = useLingui() 33 27 const consentDialogControl = useDialogControl() 34 - 35 - const thumbHasLoaded = React.useRef(false) 36 - const viewWidth = React.useRef(0) 37 28 38 29 // Tracking if the placer has been activated 39 30 const [isPlayerActive, setIsPlayerActive] = React.useState(false) ··· 41 32 const [isPrefetched, setIsPrefetched] = React.useState(false) 42 33 // Tracking whether the image is animating 43 34 const [isAnimating, setIsAnimating] = React.useState(true) 44 - const [imageDims, setImageDims] = React.useState({height: 100, width: 1}) 45 35 46 36 // Used for controlling animation 47 37 const imageRef = React.useRef<Image>(null) ··· 93 83 ], 94 84 ) 95 85 96 - const onLoad = React.useCallback((e: ImageLoadEventData) => { 97 - if (thumbHasLoaded.current) return 98 - setImageDims(getGifDims(e.source.height, e.source.width, viewWidth.current)) 99 - thumbHasLoaded.current = true 100 - }, []) 101 - 102 - const onLayout = React.useCallback((e: LayoutChangeEvent) => { 103 - viewWidth.current = e.nativeEvent.layout.width 104 - }, []) 105 - 106 86 return ( 107 87 <> 108 88 <EmbedConsentDialog ··· 113 93 114 94 <Pressable 115 95 style={[ 116 - {height: imageDims.height}, 96 + {height: 300}, 117 97 a.w_full, 118 98 a.overflow_hidden, 119 99 { ··· 122 102 }, 123 103 ]} 124 104 onPress={onPlayPress} 125 - onLayout={onLayout} 126 105 accessibilityRole="button" 127 106 accessibilityHint={_(msg`Plays the GIF`)} 128 107 accessibilityLabel={_(msg`Play ${link.title}`)}> ··· 135 114 }} // Web uses the thumb to control playback 136 115 style={{flex: 1}} 137 116 ref={imageRef} 138 - onLoad={onLoad} 139 117 autoplay={isAnimating} 140 118 contentFit="contain" 141 119 accessibilityIgnoresInvertColors