nasso.dev
my fork of the bluesky client
Hardcode Giphy embed height (#6475)
authored by
GitHub
ee49ca7a
b87c94e6
+4
-26
+4
-26
src/view/com/util/post-embeds/ExternalGifEmbed.tsx
+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