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 + + + + + + + + + ) +}