Pipe through feedSourceUri and link to feed

src/components/VideoPostCard.tsx

@@ -1,10 +1,11 @@
-import {Pressable, View} from 'react-native'
+import {View} from 'react-native'
 import {Image} from 'expo-image'
 import {LinearGradient} from 'expo-linear-gradient'
-import {AppBskyEmbedVideo,AppBskyFeedDefs} from '@atproto/api'
+import {AppBskyEmbedVideo, AppBskyFeedDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {VIBES_FEED_URI} from '#/lib/constants'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {formatCount} from '#/view/com/util/numeric/format'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
@@ -14,9 +15,16 @@ import {select} from '#/alf/util/themeSelector'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Heart2_Stroke2_Corner0_Rounded as Heart} from '#/components/icons/Heart2'
 import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
+import {Link} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
-export function VideoPostCard({post}: {post: AppBskyFeedDefs.PostView}) {
+export function VideoPostCard({
+  post,
+  sourceFeedUri = VIBES_FEED_URI,
+}: {
+  post: AppBskyFeedDefs.PostView
+  sourceFeedUri?: string
+}) {
   const t = useTheme()
   const {_, i18n} = useLingui()
   const embed = post.embed
@@ -40,11 +48,24 @@ export function VideoPostCard({post}: {post: AppBskyFeedDefs.PostView}) {
   })
 
   return (
-    <Pressable
+    <Link
-      accessibilityHint={_(msg`View video`)} // TODO
+      label={_(msg`View video`)}
-      accessibilityLabel={_(msg`View video`)}
+      to={{
+        screen: 'TempVibe',
+        params: {
+          feedUri: sourceFeedUri,
+          cursor: post.cid,
+        },
+      }}
       onHoverIn={onHoverIn}
-      onHoverOut={onHoverOut}>
+      onHoverOut={onHoverOut}
+      style={[
+        a.flex_col,
+        {
+          alignItems: undefined,
+          justifyContent: undefined,
+        },
+      ]}>
       <View
         style={[
           a.justify_center,
@@ -122,6 +143,6 @@ export function VideoPostCard({post}: {post: AppBskyFeedDefs.PostView}) {
           {sanitizeHandle(post.author.handle, '@')}
         </Text>
       </View>
-    </Pressable>
+    </Link>
   )
 }

src/components/feeds/PostFeedVideoGridRow.tsx

@@ -5,7 +5,13 @@ import {FeedPostSliceItem} from '#/state/queries/post-feed'
 import {atoms as a, useGutters} from '#/alf'
 import {VideoPostCard} from '#/components/VideoPostCard'
 
-export function PostFeedVideoGridRow({slices}: {slices: FeedPostSliceItem[]}) {
+export function PostFeedVideoGridRow({
+  slices,
+  sourceFeedUri,
+}: {
+  slices: FeedPostSliceItem[]
+  sourceFeedUri: string
+}) {
   const gutters = useGutters(['base', 'base', 0, 'base'])
   const posts = slices
     .filter(slice => AppBskyEmbedVideo.isView(slice.post.embed))
@@ -22,7 +28,7 @@ export function PostFeedVideoGridRow({slices}: {slices: FeedPostSliceItem[]}) {
       <View style={[a.flex_row, a.gap_lg]}>
         {posts.map(post => (
           <View key={post.uri} style={[a.flex_1]}>
-            <VideoPostCard post={post} />
+            <VideoPostCard post={post} sourceFeedUri={sourceFeedUri} />
           </View>
         ))}
       </View>

src/lib/routes/types.ts

@@ -57,7 +57,7 @@ export type CommonNavigatorParams = {
   StarterPackShort: {code: string}
   StarterPackWizard: undefined
   StarterPackEdit: {rkey?: string}
-  TempVibe: undefined
+  TempVibe: {feedUri: string; cursor?: string}
 }
 
 export type BottomTabNavigatorParams = CommonNavigatorParams & {

src/view/com/posts/PostFeed.tsx

@@ -24,7 +24,7 @@ import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {logEvent} from '#/lib/statsig/statsig'
 import {useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
-import {isIOS, isNative,isWeb} from '#/platform/detection'
+import {isIOS, isNative, isWeb} from '#/platform/detection'
 import {listenPostCreated} from '#/state/events'
 import {useFeedFeedbackContext} from '#/state/feed-feedback'
 import {useTrendingSettings} from '#/state/preferences/trending'
@@ -94,6 +94,7 @@ type FeedRow =
       type: 'videoGridRow'
       key: string
       slices: FeedPostSliceItem[]
+      sourceFeedUri: string
     }
   | {
       type: 'sliceViewFullThread'
@@ -358,6 +359,7 @@ let PostFeed = ({
                 type: 'videoGridRow',
                 key: row.map(r => r._reactKey).join('-'),
                 slices: row,
+                sourceFeedUri: feedUri,
               })
             }
           } else {
@@ -595,7 +597,12 @@ let PostFeed = ({
       } else if (row.type === 'sliceViewFullThread') {
         return <ViewFullThread uri={row.uri} />
       } else if (row.type === 'videoGridRow') {
-        return <PostFeedVideoGridRow slices={row.slices} />
+        return (
+          <PostFeedVideoGridRow
+            slices={row.slices}
+            sourceFeedUri={row.sourceFeedUri}
+          />
+        )
       } else {
         return null
       }