forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
animate controls + fade out time after a while (#4913)
Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>
authored by
Samuel Newman
Samuel Newman
and committed by
GitHub
0a9782ac
5bfe5aa5
+40
-28
+40
-28
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
+40
-28
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
···
1
1
import React, {useCallback, useEffect, useRef, useState} from 'react'
2
2
import {Pressable, View} from 'react-native'
3
-
import Animated, {FadeIn} from 'react-native-reanimated'
3
+
import Animated, {FadeInDown, FadeOutDown} from 'react-native-reanimated'
4
4
import {VideoPlayer, VideoView} from 'expo-video'
5
5
import {msg} from '@lingui/macro'
6
6
import {useLingui} from '@lingui/react'
···
39
39
<VideoView
40
40
ref={ref}
41
41
player={player}
42
-
style={a.flex_1}
42
+
style={[a.flex_1, a.rounded_sm]}
43
43
nativeControls={true}
44
44
onEnterFullscreen={() => {
45
45
PlatformInfo.setAudioCategory(AudioCategory.Playback)
···
86
86
// duration gets reset to 0 on loop
87
87
if (player.duration) setDuration(Math.floor(player.duration))
88
88
setCurrentTime(Math.floor(player.currentTime))
89
+
89
90
// how often should we update the time?
90
91
// 1000 gets out of sync with the video time
91
92
}, 250)
···
113
114
player.muted = muted
114
115
}, [player])
115
116
117
+
// show countdown when:
118
+
// 1. timeRemaining is a number - was seeing NaNs
119
+
// 2. duration is greater than 0 - means metadata has loaded
120
+
// 3. we're less than 5 second into the video
121
+
const showTime = !isNaN(timeRemaining) && duration > 0 && currentTime <= 5
122
+
116
123
return (
117
124
<View style={[a.absolute, a.inset_0]}>
118
-
{!isNaN(timeRemaining) && (
125
+
{showTime && (
119
126
<Animated.View
120
-
entering={FadeIn.duration(100)}
127
+
entering={FadeInDown.duration(300)}
128
+
exiting={FadeOutDown.duration(500)}
121
129
style={[
122
130
{
123
131
backgroundColor: 'rgba(0, 0, 0, 0.75)',
···
148
156
accessibilityHint={_(msg`Tap to enter full screen`)}
149
157
accessibilityRole="button"
150
158
/>
151
-
<Pressable
152
-
onPress={toggleMuted}
153
-
style={{
154
-
backgroundColor: 'rgba(0, 0, 0, 0.75)',
155
-
borderRadius: 6,
156
-
paddingHorizontal: 6,
157
-
paddingVertical: 3,
158
-
position: 'absolute',
159
-
bottom: 5,
160
-
right: 5,
161
-
minHeight: 20,
162
-
justifyContent: 'center',
163
-
}}
164
-
accessibilityLabel={isMuted ? _(msg`Muted`) : _(msg`Unmuted`)}
165
-
accessibilityHint={_(msg`Tap to toggle sound`)}
166
-
accessibilityRole="button"
167
-
hitSlop={HITSLOP_30}>
168
-
<Animated.View entering={FadeIn.duration(100)}>
169
-
{isMuted ? (
170
-
<MuteIcon width={14} fill={t.palette.white} />
171
-
) : (
172
-
<UnmuteIcon width={14} fill={t.palette.white} />
173
-
)}
159
+
{duration > 0 && (
160
+
<Animated.View
161
+
entering={FadeInDown.duration(300)}
162
+
style={{
163
+
backgroundColor: 'rgba(0, 0, 0, 0.75)',
164
+
borderRadius: 6,
165
+
paddingHorizontal: 6,
166
+
paddingVertical: 3,
167
+
position: 'absolute',
168
+
bottom: 5,
169
+
right: 5,
170
+
minHeight: 20,
171
+
justifyContent: 'center',
172
+
}}>
173
+
<Pressable
174
+
onPress={toggleMuted}
175
+
style={a.flex_1}
176
+
accessibilityLabel={isMuted ? _(msg`Muted`) : _(msg`Unmuted`)}
177
+
accessibilityHint={_(msg`Tap to toggle sound`)}
178
+
accessibilityRole="button"
179
+
hitSlop={HITSLOP_30}>
180
+
{isMuted ? (
181
+
<MuteIcon width={14} fill={t.palette.white} />
182
+
) : (
183
+
<UnmuteIcon width={14} fill={t.palette.white} />
184
+
)}
185
+
</Pressable>
174
186
</Animated.View>
175
-
</Pressable>
187
+
)}
176
188
</View>
177
189
)
178
190
}