diff --git a/src/screens/Feeds/VibeScreen.tsx b/src/screens/Feeds/VibeScreen.tsx index 3ff9363bb5..333d60596d 100644 --- a/src/screens/Feeds/VibeScreen.tsx +++ b/src/screens/Feeds/VibeScreen.tsx @@ -46,6 +46,7 @@ import {useSetLightStatusBar} from '#/state/shell/light-status-bar' import {List} from '#/view/com/util/List' import {PostCtrls} from '#/view/com/util/post-ctrls/PostCtrls' import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' +import {Header} from '#/screens/VideoFeed/Header' import {atoms as a, ThemeProvider, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' import * as Layout from '#/components/Layout' @@ -71,6 +72,7 @@ export function VideoFeed({}: NativeStackScreenProps< 'VideoFeed' >) { const {top} = useSafeAreaInsets() + const {params} = useRoute>() const setMinShellMode = useSetMinimalShellMode() useFocusEffect( @@ -93,16 +95,7 @@ export function VideoFeed({}: NativeStackScreenProps< a.z_30, {top: 0, left: 0, right: 0, paddingTop: top}, ]}> - - - - - {/* TODO: needs to be feed name */} - Videos - - - - +
diff --git a/src/screens/VideoFeed/Header.tsx b/src/screens/VideoFeed/Header.tsx new file mode 100644 index 0000000000..b40f9865b6 --- /dev/null +++ b/src/screens/VideoFeed/Header.tsx @@ -0,0 +1,126 @@ +import {View} from 'react-native' + +import {sanitizeHandle} from '#/lib/strings/handles' +import {useFeedSourceInfoQuery} from '#/state/queries/feed' +import {UserAvatar} from '#/view/com/util/UserAvatar' +import {VideoFeedSourceContext} from '#/screens/VideoFeed/types' +import {atoms as a, useBreakpoints} from '#/alf' +import * as Layout from '#/components/Layout' +import {Text} from '#/components/Typography' + +export function HeaderPlaceholder() { + return ( + + + + + + + + + ) +} + +export function Header({ + sourceContext, +}: { + sourceContext: VideoFeedSourceContext +}) { + let content = null + switch (sourceContext.type) { + case 'feedgen': { + content = + break + } + case 'author': + // TODO + default: { + break + } + } + + return ( + + + {content} + + ) +} + +export function FeedHeader({ + sourceContext, +}: { + sourceContext: Exclude +}) { + const {gtMobile} = useBreakpoints() + + const { + data: info, + isLoading, + error, + } = useFeedSourceInfoQuery({uri: sourceContext.uri}) + + if (isLoading) { + return + } else if (error || !info) { + return null + } + + return ( + + {info.avatar && } + + + + {info.displayName} + + + + {sanitizeHandle(info.creatorHandle, '@')} + + + + + ) +} diff --git a/src/screens/VideoFeed/types.ts b/src/screens/VideoFeed/types.ts new file mode 100644 index 0000000000..22723bcc29 --- /dev/null +++ b/src/screens/VideoFeed/types.ts @@ -0,0 +1,13 @@ +import {AuthorFilter} from '#/state/queries/post-feed' + +/** + * Kind of like `FeedDescriptor` but not + */ +export type VideoFeedSourceContext = + | {type: 'feedgen'; uri: string; initialPostUri?: string} + | { + type: 'author' + did: string + filter: AuthorFilter + initialPostUri?: string + }