diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx
index c0f716bce3..d41371bcb7 100644
--- a/src/components/interstitials/TrendingVideos.tsx
+++ b/src/components/interstitials/TrendingVideos.tsx
@@ -1,17 +1,20 @@
import React from 'react'
import {ScrollView, View} from 'react-native'
-import {AppBskyEmbedVideo} from '@atproto/api'
+import {AppBskyEmbedVideo, AtUri} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {VIDEO_FEED_URI} from '#/lib/constants'
+import {makeCustomFeedLink} from '#/lib/routes/links'
import {logEvent} from '#/lib/statsig/statsig'
import {useTrendingSettingsApi} from '#/state/preferences/trending'
import {usePostFeedQuery} from '#/state/queries/post-feed'
-import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
+import {atoms as a, useGutters, useTheme} from '#/alf'
import {Button, ButtonIcon} from '#/components/Button'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
+import {Link} from '#/components/Link'
import * as Prompt from '#/components/Prompt'
import {Text} from '#/components/Typography'
import {
@@ -76,7 +79,7 @@ export function TrendingVideos() {
horizontal
showsHorizontalScrollIndicator={false}
decelerationRate="fast"
- snapToInterval={CARD_WIDTH + tokens.space.sm}>
+ snapToInterval={CARD_WIDTH + a.gap_sm.gap}>
Whoops! Trending videos failed to load.
) : (
- data.pages
- .flatMap(page => page.slices)
- .map(slice => slice.items[0])
- .filter(Boolean)
- .filter(item => AppBskyEmbedVideo.isView(item.post.embed))
- .map(item => (
-
- {
- logEvent('videoCard:click', {
- context: 'interstitial:discover',
- })
- }}
- />
-
- ))
+
)}
@@ -135,3 +117,78 @@ export function TrendingVideos() {
)
}
+
+function VideoCards({
+ data,
+}: {
+ data: Exclude['data'], undefined>
+}) {
+ const t = useTheme()
+ const {_} = useLingui()
+ const items = React.useMemo(() => {
+ return data.pages
+ .flatMap(page => page.slices)
+ .map(slice => slice.items[0])
+ .filter(Boolean)
+ .filter(item => AppBskyEmbedVideo.isView(item.post.embed))
+ .slice(0, 8)
+ }, [data])
+ const href = React.useMemo(() => {
+ const urip = new AtUri(VIDEO_FEED_URI)
+ return makeCustomFeedLink(urip.host, urip.rkey)
+ }, [])
+
+ return (
+ <>
+ {items.map(item => (
+
+ {
+ logEvent('videoCard:click', {
+ context: 'interstitial:discover',
+ })
+ }}
+ />
+
+ ))}
+
+
+
+
+
+ View more
+
+
+
+
+
+
+
+ >
+ )
+}
diff --git a/src/screens/Search/components/ExploreTrendingVideos.tsx b/src/screens/Search/components/ExploreTrendingVideos.tsx
index 5a719d151f..475a6ba366 100644
--- a/src/screens/Search/components/ExploreTrendingVideos.tsx
+++ b/src/screens/Search/components/ExploreTrendingVideos.tsx
@@ -1,10 +1,11 @@
import React from 'react'
import {ScrollView, View} from 'react-native'
-import {AppBskyEmbedVideo} from '@atproto/api'
+import {AppBskyEmbedVideo, AtUri} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {VIDEO_FEED_URI} from '#/lib/constants'
+import {makeCustomFeedLink} from '#/lib/routes/links'
import {logEvent} from '#/lib/statsig/statsig'
import {isWeb} from '#/platform/detection'
import {useSavedFeeds} from '#/state/queries/feed'
@@ -13,8 +14,10 @@ import {useAddSavedFeedsMutation} from '#/state/queries/preferences'
import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {GradientFill} from '#/components/GradientFill'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
import {Pin_Stroke2_Corner0_Rounded as Pin} from '#/components/icons/Pin'
import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
+import {Link} from '#/components/Link'
import {Text} from '#/components/Typography'
import {
CompactVideoPostCard,
@@ -120,28 +123,7 @@ export function ExploreTrendingVideos() {
Whoops! Trending videos failed to load.
) : (
- data.pages
- .flatMap(page => page.slices)
- .map(slice => slice.items[0])
- .filter(Boolean)
- .filter(item => AppBskyEmbedVideo.isView(item.post.embed))
- .map(item => (
-
- {
- logEvent('videoCard:click', {
- context: 'interstitial:explore',
- })
- }}
- />
-
- ))
+
)}
@@ -176,3 +158,78 @@ export function ExploreTrendingVideos() {
)
}
+
+function VideoCards({
+ data,
+}: {
+ data: Exclude['data'], undefined>
+}) {
+ const t = useTheme()
+ const {_} = useLingui()
+ const items = React.useMemo(() => {
+ return data.pages
+ .flatMap(page => page.slices)
+ .map(slice => slice.items[0])
+ .filter(Boolean)
+ .filter(item => AppBskyEmbedVideo.isView(item.post.embed))
+ .slice(0, 8)
+ }, [data])
+ const href = React.useMemo(() => {
+ const urip = new AtUri(VIDEO_FEED_URI)
+ return makeCustomFeedLink(urip.host, urip.rkey)
+ }, [])
+
+ return (
+ <>
+ {items.map(item => (
+
+ {
+ logEvent('videoCard:click', {
+ context: 'interstitial:discover',
+ })
+ }}
+ />
+
+ ))}
+
+
+
+
+
+ View more
+
+
+
+
+
+
+
+ >
+ )
+}