From 448668fc2268d034200c8eee9e7c47a39efc539d Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 15 Jan 2025 15:58:42 +0000 Subject: [PATCH] vibe controls --- src/components/Dialog/index.tsx | 4 +- src/lib/statsig/events.ts | 8 +- src/screens/Feeds/VibeScreen.tsx | 88 +++++++++++++++++++--- src/view/com/util/post-ctrls/PostCtrls.tsx | 2 +- 4 files changed, 86 insertions(+), 16 deletions(-) diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index c424321be7..597964e291 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -27,6 +27,7 @@ import {useA11y} from '#/state/a11y' import {useDialogStateControlContext} from '#/state/dialogs' import {List, ListMethods, ListProps} from '#/view/com/util/List' import {atoms as a, useTheme} from '#/alf' +import {useThemeName} from '#/alf/util/useColorModeTheme' import {Context, useDialogContext} from '#/components/Dialog/context' import { DialogControlProps, @@ -55,7 +56,8 @@ export function Outer({ nativeOptions, testID, }: React.PropsWithChildren) { - const t = useTheme() + const themeName = useThemeName() + const t = useTheme(themeName) const ref = React.useRef(null) const closeCallbacks = React.useRef<(() => void)[]>([]) const {setDialogIsOpen, setFullyExpandedCount} = diff --git a/src/lib/statsig/events.ts b/src/lib/statsig/events.ts index 19bf06ba98..220cbd7810 100644 --- a/src/lib/statsig/events.ts +++ b/src/lib/statsig/events.ts @@ -131,16 +131,16 @@ export type LogEvents = { doesPosterFollowLiker: boolean | undefined likerClout: number | undefined postClout: number | undefined - logContext: 'FeedItem' | 'PostThreadItem' | 'Post' + logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'Vibe' } 'post:repost': { - logContext: 'FeedItem' | 'PostThreadItem' | 'Post' + logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'Vibe' } 'post:unlike': { - logContext: 'FeedItem' | 'PostThreadItem' | 'Post' + logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'Vibe' } 'post:unrepost': { - logContext: 'FeedItem' | 'PostThreadItem' | 'Post' + logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'Vibe' } 'post:mute': {} 'post:unmute': {} diff --git a/src/screens/Feeds/VibeScreen.tsx b/src/screens/Feeds/VibeScreen.tsx index bc9b5b6bde..d318afce3f 100644 --- a/src/screens/Feeds/VibeScreen.tsx +++ b/src/screens/Feeds/VibeScreen.tsx @@ -10,8 +10,15 @@ import {runOnJS} from 'react-native-reanimated' import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context' import {useEvent} from 'expo' import {BlurView} from 'expo-blur' +import {LinearGradient} from 'expo-linear-gradient' import {useVideoPlayer, VideoPlayer, VideoView} from 'expo-video' -import {AppBskyEmbedVideo, AppBskyFeedDefs} from '@atproto/api' +import { + AppBskyEmbedVideo, + AppBskyFeedDefs, + AppBskyFeedPost, + AtUri, + RichText as RichTextAPI, +} from '@atproto/api' import {Trans} from '@lingui/macro' import { useFocusEffect, @@ -23,14 +30,21 @@ import {NativeStackScreenProps} from '@react-navigation/native-stack' import {VIBES_FEED_URI} from '#/lib/constants' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' +import {sanitizeDisplayName} from '#/lib/strings/display-names' +import {sanitizeHandle} from '#/lib/strings/handles' +import {POST_TOMBSTONE, usePostShadow} from '#/state/cache/post-shadow' import {FeedPostSliceItem, usePostFeedQuery} from '#/state/queries/post-feed' import {useSetMinimalShellMode} from '#/state/shell' import {useSetLightStatusBar} from '#/state/shell/light-status-bar' import {List} from '#/view/com/util/List' -import {atoms as a, ThemeProvider} from '#/alf' +import {PostCtrls} from '#/view/com/util/post-ctrls/PostCtrls' +import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' +import {atoms as a, ThemeProvider, useTheme} from '#/alf' import {Button} from '#/components/Button' import * as Layout from '#/components/Layout' import {ListFooter} from '#/components/Lists' +import {RichText} from '#/components/RichText' +import {Text} from '#/components/Typography' type Props = NativeStackScreenProps export function VibeScreen({}: Props) { @@ -121,7 +135,7 @@ function YoloFeed({headerHeight}: {headerHeight: number}) { player={player} post={post} embed={post.embed} - loaded={Math.abs(index - currentIndex) < 2} + loaded={isFocused && Math.abs(index - currentIndex) < 2} active={isFocused && index === currentIndex} headerHeight={headerHeight} /> @@ -172,6 +186,7 @@ function keyExtractor(item: FeedPostSliceItem) { function VibeItem({ player, + post, embed, active, loaded, @@ -240,16 +255,25 @@ function VibeItem({ nativeControls={false} /> )} - + ) } -function VibeOverlay({player}: {player: VideoPlayer}) { +function VibeOverlay({ + player, + post, +}: { + player: VideoPlayer + post: AppBskyFeedDefs.PostView +}) { + const postShadow = usePostShadow(post) + const insets = useSafeAreaInsets() + const t = useTheme() const navigation = useNavigation() const pushToProfile = useNonReactiveCallback(() => { - navigation.navigate('Profile', {name: 'lulaoficial.bsky.social'}) + navigation.navigate('Profile', {name: post.author.did}) }) const togglePlayPause = () => { @@ -276,16 +300,60 @@ function VibeOverlay({player}: {player: VideoPlayer}) { return dragLeftGesture }, [pushToProfile]) + const rkey = new AtUri(post.uri).rkey + const record = AppBskyFeedPost.isRecord(post.record) ? post.record : undefined + const richText = new RichTextAPI({ + text: record?.text || '', + facets: record?.facets, + }) + return ( - - + + - - + + + + + + {sanitizeDisplayName( + post.author.displayName || post.author.handle, + )} + + + {sanitizeHandle(post.author.handle, '@')} + + + + + {postShadow !== POST_TOMBSTONE && record && ( + + navigation.navigate('PostThread', {name: post.author.did, rkey}) + } + big + /> + )} + + + ) } diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx index 607a480ff2..e51353fd31 100644 --- a/src/view/com/util/post-ctrls/PostCtrls.tsx +++ b/src/view/com/util/post-ctrls/PostCtrls.tsx @@ -69,7 +69,7 @@ let PostCtrls = ({ style?: StyleProp onPressReply: () => void onPostReply?: (postUri: string | undefined) => void - logContext: 'FeedItem' | 'PostThreadItem' | 'Post' + logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'Vibe' threadgateRecord?: AppBskyFeedThreadgate.Record }): React.ReactNode => { const t = useTheme()