nasso.dev
my fork of the bluesky client
Attempted video perf improvements (#6519)
* remove layout animations from video
* only show button/spinner when necessary
* use native activityindicator rather than loader
samuel.fm
+26
-28
src/view/com/util/post-embeds/VideoEmbed.tsx
+26
-28
src/view/com/util/post-embeds/VideoEmbed.tsx
···
1
1
import React, {useCallback, useState} from 'react'
2
-
import {View} from 'react-native'
2
+
import {ActivityIndicator, View} from 'react-native'
3
3
import {ImageBackground} from 'expo-image'
4
4
import {AppBskyEmbedVideo} from '@atproto/api'
5
5
import {msg, Trans} from '@lingui/macro'
···
10
10
import {atoms as a} from '#/alf'
11
11
import {Button} from '#/components/Button'
12
12
import {useThrottledValue} from '#/components/hooks/useThrottledValue'
13
-
import {Loader} from '#/components/Loader'
14
13
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
15
14
import {ErrorBoundary} from '../ErrorBoundary'
16
15
import * as VideoFallback from './VideoEmbedInner/VideoFallback'
···
89
88
source={{uri: embed.thumbnail}}
90
89
accessibilityIgnoresInvertColors
91
90
style={[
91
+
a.absolute,
92
+
a.inset_0,
92
93
{
93
-
position: 'absolute',
94
-
top: 0,
95
-
left: 0,
96
-
right: 0,
97
-
bottom: 0,
98
94
backgroundColor: 'transparent', // If you don't add `backgroundColor` to the styles here,
99
95
// the play button won't show up on the first render on android 🥴😮💨
100
96
display: showOverlay ? 'flex' : 'none',
···
102
98
]}
103
99
cachePolicy="memory-disk" // Preferring memory cache helps to avoid flicker when re-displaying on android
104
100
>
105
-
<Button
106
-
style={[a.flex_1, a.align_center, a.justify_center]}
107
-
onPress={() => {
108
-
ref.current?.togglePlayback()
109
-
}}
110
-
label={_(msg`Play video`)}
111
-
color="secondary">
112
-
{showSpinner ? (
113
-
<View
114
-
style={[
115
-
a.rounded_full,
116
-
a.p_xs,
117
-
a.align_center,
118
-
a.justify_center,
119
-
]}>
120
-
<Loader size="2xl" style={{color: 'white'}} />
121
-
</View>
122
-
) : (
123
-
<PlayButtonIcon />
124
-
)}
125
-
</Button>
101
+
{showOverlay && (
102
+
<Button
103
+
style={[a.flex_1, a.align_center, a.justify_center]}
104
+
onPress={() => {
105
+
ref.current?.togglePlayback()
106
+
}}
107
+
label={_(msg`Play video`)}
108
+
color="secondary">
109
+
{showSpinner ? (
110
+
<View
111
+
style={[
112
+
a.rounded_full,
113
+
a.p_xs,
114
+
a.align_center,
115
+
a.justify_center,
116
+
]}>
117
+
<ActivityIndicator size="large" color="white" />
118
+
</View>
119
+
) : (
120
+
<PlayButtonIcon />
121
+
)}
122
+
</Button>
123
+
)}
126
124
</ImageBackground>
127
125
</>
128
126
)
+4
-6
src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx
+4
-6
src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx
···
1
1
import React from 'react'
2
2
import {StyleProp, ViewStyle} from 'react-native'
3
-
import Animated, {FadeInDown, FadeOutDown} from 'react-native-reanimated'
3
+
import {View} from 'react-native'
4
4
5
-
import {atoms as a, native, useTheme} from '#/alf'
5
+
import {atoms as a, useTheme} from '#/alf'
6
6
import {Text} from '#/components/Typography'
7
7
8
8
/**
···
26
26
const seconds = String(time % 60).padStart(2, '0')
27
27
28
28
return (
29
-
<Animated.View
30
-
entering={native(FadeInDown.duration(300))}
31
-
exiting={native(FadeOutDown.duration(500))}
29
+
<View
32
30
pointerEvents="none"
33
31
style={[
34
32
{
···
52
50
]}>
53
51
{`${minutes}:${seconds}`}
54
52
</Text>
55
-
</Animated.View>
53
+
</View>
56
54
)
57
55
}
+2
-4
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
+2
-4
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
···
1
1
import React, {useRef} from 'react'
2
2
import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
3
-
import Animated, {FadeInDown} from 'react-native-reanimated'
4
3
import {AppBskyEmbedVideo} from '@atproto/api'
5
4
import {BlueskyVideoView} from '@haileyok/bluesky-video'
6
5
import {msg} from '@lingui/macro'
···
182
181
style?: StyleProp<ViewStyle>
183
182
}) {
184
183
return (
185
-
<Animated.View
186
-
entering={FadeInDown.duration(300)}
184
+
<View
187
185
style={[
188
186
a.absolute,
189
187
a.rounded_full,
···
207
205
hitSlop={HITSLOP_30}>
208
206
{children}
209
207
</Pressable>
210
-
</Animated.View>
208
+
</View>
211
209
)
212
210
}