diff --git a/src/screens/Feeds/VibeScreen.tsx b/src/screens/Feeds/VibeScreen.tsx
index 5c5b41d0f1..6bc5da071b 100644
--- a/src/screens/Feeds/VibeScreen.tsx
+++ b/src/screens/Feeds/VibeScreen.tsx
@@ -10,9 +10,15 @@ import {
import {Gesture, GestureDetector} from 'react-native-gesture-handler'
import {runOnJS} from 'react-native-reanimated'
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'
+import {useEvent} from 'expo'
import {Image} from 'expo-image'
import {LinearGradient} from 'expo-linear-gradient'
-import {useVideoPlayer, VideoPlayer, VideoView} from 'expo-video'
+import {
+ useVideoPlayer,
+ VideoPlayer,
+ VideoPlayerStatus,
+ VideoView,
+} from 'expo-video'
import {
AppBskyEmbedVideo,
AppBskyFeedDefs,
@@ -45,6 +51,7 @@ import {atoms as a, ThemeProvider, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import * as Layout from '#/components/Layout'
import {ListFooter} from '#/components/Lists'
+import {Loader} from '#/components/Loader'
import {RichText} from '#/components/RichText'
import {Text} from '#/components/Typography'
@@ -268,6 +275,8 @@ function VibeItem({
// set the video to be cover rather than contain
const isCloseEnough = videoAspectRatio < screenAspectRatio * 1.2
+ const {status} = useEvent(player, 'statusChange', {status: player.status})
+
return (
)}
-
+
)
@@ -311,9 +320,11 @@ function VibeItem({
function VibeOverlay({
player,
post,
+ status,
}: {
player: VideoPlayer
post: AppBskyFeedDefs.PostView
+ status: VideoPlayerStatus
}) {
const postShadow = usePostShadow(post)
const insets = useSafeAreaInsets()
@@ -357,59 +368,77 @@ function VibeOverlay({
})
return (
-
-
-
-
-
-
-
-
- {sanitizeDisplayName(
- post.author.displayName || post.author.handle,
- )}
-
-
- {sanitizeHandle(post.author.handle, '@')}
-
+ <>
+
+
+
+
+
+
+
+
+ {sanitizeDisplayName(
+ post.author.displayName || post.author.handle,
+ )}
+
+
+ {sanitizeHandle(post.author.handle, '@')}
+
+
-
- {record?.text?.trim() && (
-
- )}
- {postShadow !== POST_TOMBSTONE && record && (
-
- navigation.navigate('PostThread', {name: post.author.did, rkey})
- }
- big
- />
- )}
-
-
-
+ {record?.text?.trim() && (
+
+ )}
+ {postShadow !== POST_TOMBSTONE && record && (
+
+ navigation.navigate('PostThread', {
+ name: post.author.did,
+ rkey,
+ })
+ }
+ big
+ />
+ )}
+
+
+
+ {status === 'loading' && (
+
+
+
+ )}
+ >
)
}