Explore interstitial, handle dimissal, pinning, compact card

2025-01-17 16:17:58 -06:00
parent e83f962b82
commit dffee47703
4 changed files with 443 additions and 127 deletions
@@ -27,21 +27,25 @@ import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import * as Hider from '#/components/moderation/Hider'
 import {Text} from '#/components/Typography'

-type DisplayVariant = 'default' | 'compact'
+function getBlackColor(t: ReturnType<typeof useTheme>) {
+  return select(t.name, {
+    light: t.palette.black,
+    dark: t.atoms.bg_contrast_25.backgroundColor,
+    dim: `hsl(${BLUE_HUE}, 28%, 6%)`,
+  })
+}

 export function VideoPostCard({
  post,
  sourceContext,
  moderation,
-  variant = 'default',
  onInteract,
 }: {
  post: AppBskyFeedDefs.PostView
  sourceContext: VideoFeedSourceContext
  moderation: ModerationDecision
-  variant?: DisplayVariant
  /**
-   * Callback for metrics and stuff
+   * Callback for metrics etc
   */
  onInteract: () => void
 }) {
@@ -60,16 +64,11 @@ export function VideoPostCard({
   */
  if (!AppBskyEmbedVideo.isView(embed)) return null

-  const isCompact = variant === 'compact'
  const text = AppBskyFeedPost.isRecord(post.record) ? post.record?.text : ''
  const likeCount = post?.likeCount ?? 0
  const repostCount = post?.repostCount ?? 0
  const {thumbnail} = embed
-  const black = select(t.name, {
-    light: t.palette.black,
-    dark: t.atoms.bg_contrast_25.backgroundColor,
-    dim: `hsl(${BLUE_HUE}, 28%, 6%)`,
-  })
+  const black = getBlackColor(t)

  return (
    <Link
@@ -165,7 +164,7 @@ export function VideoPostCard({
                  },
                ]}>
                <LinearGradient
-                  colors={[black, 'rgba(22, 24, 35, 0)']}
+                  colors={[black, 'rgba(0, 0, 0, 0)']}
                  locations={[0.02, 1]}
                  start={{x: 0, y: 1}}
                  end={{x: 0, y: 0}}
@@ -182,7 +181,7 @@ export function VideoPostCard({
                      </Text>
                    </View>
                  )}
-                  {!isCompact && repostCount > 0 && (
+                  {repostCount > 0 && (
                    <View style={[a.flex_row, a.align_center, a.gap_xs]}>
                      <Repost size="sm" fill="white" />
                      <Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
@@ -195,13 +194,17 @@ export function VideoPostCard({
            </View>
          </View>
          <View style={[a.pr_xs, {paddingTop: 6, gap: 4}]}>
-            {!isCompact && text && (
+            {text && (
              <Text style={[a.text_md, a.leading_snug]} numberOfLines={2} emoji>
                {text}
              </Text>
            )}
            <View style={[a.flex_row, a.gap_xs, a.align_center]}>
-              <UserAvatar type="user" size={20} avatar={post.author.avatar} />
+              <View
+                style={[a.relative, a.rounded_full, {width: 20, height: 20}]}>
+                <UserAvatar type="user" size={20} avatar={post.author.avatar} />
+                <MediaInsetBorder />
+              </View>
              <Text
                style={[
                  a.flex_1,
@@ -220,17 +223,9 @@ export function VideoPostCard({
  )
 }

-export function VideoPostCardPlaceholder({
-  variant = 'default',
-}: {
-  variant?: DisplayVariant
-}) {
+export function VideoPostCardPlaceholder() {
  const t = useTheme()
-  const black = select(t.name, {
-    light: t.palette.black,
-    dark: t.atoms.bg_contrast_25.backgroundColor,
-    dim: `hsl(${BLUE_HUE}, 28%, 6%)`,
-  })
+  const black = getBlackColor(t)

  return (
    <View style={[a.flex_1]}>
@@ -245,52 +240,48 @@ export function VideoPostCardPlaceholder({
        ]}>
        <MediaInsetBorder />
      </View>
-      <VideoPostCardTextPlaceholder variant={variant} />
+      <VideoPostCardTextPlaceholder />
    </View>
  )
 }

 export function VideoPostCardTextPlaceholder({
  author,
-  variant,
 }: {
  author?: AppBskyActorDefs.ProfileViewBasic
-  variant?: DisplayVariant
 }) {
  const t = useTheme()
-  const isCompact = variant === 'compact'

  return (
    <View style={[a.flex_1]}>
      <View style={[a.pr_xs, {paddingTop: 8, gap: 6}]}>
-        {!isCompact && (
-          <>
-            <View
-              style={[
-                a.w_full,
-                a.rounded_xs,
-                t.atoms.bg_contrast_50,
-                {
-                  height: 14,
-                },
-              ]}
-            />
-            <View
-              style={[
-                a.w_full,
-                a.rounded_xs,
-                t.atoms.bg_contrast_50,
-                {
-                  height: 14,
-                  width: '70%',
-                },
-              ]}
-            />
-          </>
-        )}
+        <View
+          style={[
+            a.w_full,
+            a.rounded_xs,
+            t.atoms.bg_contrast_50,
+            {
+              height: 14,
+            },
+          ]}
+        />
+        <View
+          style={[
+            a.w_full,
+            a.rounded_xs,
+            t.atoms.bg_contrast_50,
+            {
+              height: 14,
+              width: '70%',
+            },
+          ]}
+        />
        {author ? (
          <View style={[a.flex_row, a.gap_xs, a.align_center]}>
-            <UserAvatar type="user" size={20} avatar={author.avatar} />
+            <View style={[a.relative, a.rounded_full, {width: 20, height: 20}]}>
+              <UserAvatar type="user" size={20} avatar={author.avatar} />
+              <MediaInsetBorder />
+            </View>
            <Text
              style={[
                a.flex_1,
@@ -322,12 +313,197 @@ export function VideoPostCardTextPlaceholder({
                  height: 12,
                  width: '75%',
                },
-              ]}>
-              <MediaInsetBorder />
-            </View>
+              ]}
+            />
          </View>
        )}
      </View>
    </View>
  )
 }
+
+export function CompactVideoPostCard({
+  post,
+  sourceContext,
+  moderation,
+  onInteract,
+}: {
+  post: AppBskyFeedDefs.PostView
+  sourceContext: VideoFeedSourceContext
+  moderation: ModerationDecision
+  /**
+   * Callback for metrics etc
+   */
+  onInteract: () => void
+}) {
+  const t = useTheme()
+  const {_, i18n} = useLingui()
+  const embed = post.embed
+  const {
+    state: pressed,
+    onIn: onPressIn,
+    onOut: onPressOut,
+  } = useInteractionState()
+
+  /**
+   * Filtering should be done at a higher level, such as `PostFeed` or
+   * `PostFeedVideoGridRow`, but we need to protect here as well.
+   */
+  if (!AppBskyEmbedVideo.isView(embed)) return null
+
+  const likeCount = post?.likeCount ?? 0
+  const {thumbnail} = embed
+  const black = getBlackColor(t)
+
+  return (
+    <Link
+      label={_(msg`View video`)}
+      to={{
+        screen: 'VideoFeed',
+        params: {
+          ...sourceContext,
+          initialPostUri: post.uri,
+        },
+      }}
+      onPress={() => {
+        onInteract()
+      }}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      style={[
+        a.flex_col,
+        {
+          alignItems: undefined,
+          justifyContent: undefined,
+        },
+      ]}>
+      <Hider.Outer modui={moderation.ui('contentList')}>
+        <Hider.Mask>
+          <View
+            style={[
+              a.justify_center,
+              a.rounded_md,
+              a.overflow_hidden,
+              {
+                backgroundColor: black,
+                aspectRatio: 9 / 16,
+              },
+            ]}>
+            <Image
+              source={{uri: thumbnail}}
+              style={[a.w_full, a.h_full, {opacity: pressed ? 0.8 : 1}]}
+              accessibilityIgnoresInvertColors
+              blurRadius={40}
+            />
+            <MediaInsetBorder />
+            <View
+              style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
+              <View
+                style={[
+                  a.absolute,
+                  a.inset_0,
+                  a.justify_center,
+                  a.align_center,
+                  {
+                    backgroundColor: 'black',
+                    opacity: 0.2,
+                  },
+                ]}
+              />
+              <View style={[a.align_center, a.gap_xs]}>
+                <Eye size="lg" fill="white" />
+                <Text style={[a.text_sm, {color: 'white'}]}>
+                  {_(msg`Hidden`)}
+                </Text>
+              </View>
+            </View>
+          </View>
+          <VideoPostCardTextPlaceholder author={post.author} />
+        </Hider.Mask>
+        <Hider.Content>
+          <View
+            style={[
+              a.justify_center,
+              a.rounded_md,
+              a.overflow_hidden,
+              {
+                backgroundColor: black,
+                aspectRatio: 9 / 16,
+              },
+            ]}>
+            <Image
+              source={{uri: thumbnail}}
+              style={[a.w_full, a.h_full, {opacity: pressed ? 0.8 : 1}]}
+              accessibilityIgnoresInvertColors
+            />
+            <MediaInsetBorder />
+
+            <View style={[a.absolute, a.inset_0]}>
+              <View style={[a.absolute, a.inset_0, a.p_sm, {bottom: 'auto'}]}>
+                <View
+                  style={[a.relative, a.rounded_full, {width: 20, height: 20}]}>
+                  <UserAvatar
+                    type="user"
+                    size={20}
+                    avatar={post.author.avatar}
+                  />
+                  <MediaInsetBorder />
+                </View>
+              </View>
+              <View
+                style={[
+                  a.absolute,
+                  a.inset_0,
+                  a.pt_2xl,
+                  {
+                    top: 'auto',
+                  },
+                ]}>
+                <LinearGradient
+                  colors={[black, 'rgba(0, 0, 0, 0)']}
+                  locations={[0.02, 1]}
+                  start={{x: 0, y: 1}}
+                  end={{x: 0, y: 0}}
+                  style={[a.absolute, a.inset_0, {opacity: 0.9}]}
+                />
+
+                <View
+                  style={[a.relative, a.z_10, a.p_sm, a.flex_row, a.gap_md]}>
+                  {likeCount > 0 && (
+                    <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+                      <Heart size="sm" fill="white" />
+                      <Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
+                        {formatCount(i18n, likeCount)}
+                      </Text>
+                    </View>
+                  )}
+                </View>
+              </View>
+            </View>
+          </View>
+        </Hider.Content>
+      </Hider.Outer>
+    </Link>
+  )
+}
+
+export function CompactVideoPostCardPlaceholder() {
+  const t = useTheme()
+  const black = getBlackColor(t)
+
+  return (
+    <View style={[a.flex_1]}>
+      <View
+        style={[
+          a.rounded_md,
+          a.overflow_hidden,
+          {
+            backgroundColor: black,
+            aspectRatio: 9 / 16,
+          },
+        ]}>
+        <MediaInsetBorder />
+      </View>
+    </View>
+  )
+}
@@ -1,5 +1,5 @@
 import React from 'react'
-import {ScrollView,View} from 'react-native'
+import {ScrollView, View} from 'react-native'
 import {AppBskyEmbedVideo} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -7,19 +7,16 @@ import {useLingui} from '@lingui/react'
 import {VIDEO_FEED_URI} from '#/lib/constants'
 import {logEvent} from '#/lib/statsig/statsig'
 import {useTrendingSettingsApi} from '#/state/preferences/trending'
-import {useSavedFeeds} from '#/state/queries/feed'
 import {usePostFeedQuery} from '#/state/queries/post-feed'
-import {useAddSavedFeedsMutation} from '#/state/queries/preferences'
-import {atoms as a, useGutters,useTheme} from '#/alf'
-import {Button, ButtonIcon,ButtonText} from '#/components/Button'
-import {Divider} from '#/components/Divider'
-import {Pin_Stroke2_Corner0_Rounded as Pin} from '#/components/icons/Pin'
+import {atoms as a, useGutters, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
+import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
 import {
-  VideoPostCard,
-  VideoPostCardPlaceholder,
+  CompactVideoPostCard,
+  CompactVideoPostCardPlaceholder,
 } from '#/components/VideoPostCard'

 const CARD_WIDTH = 100
@@ -30,33 +27,9 @@ export function TrendingVideos() {
  const gutters = useGutters([0, 'base'])
  const {data, isLoading, error} = usePostFeedQuery(`feedgen|${VIDEO_FEED_URI}`)
  const {setTrendingVideoDisabled} = useTrendingSettingsApi()
+  const trendingPrompt = Prompt.usePromptControl()

-  const {data: saved} = useSavedFeeds()
-  const isSavedAlready = React.useMemo(() => {
-    return !!saved?.feeds?.some(info => info.config.value === VIDEO_FEED_URI)
-  }, [saved])
-
-  const {mutateAsync: addSavedFeeds, isPending: isPinPending} =
-    useAddSavedFeedsMutation()
-  const pinFeed = React.useCallback(
-    (e: any) => {
-      e.preventDefault()
-
-      addSavedFeeds([
-        {
-          type: 'feed',
-          value: VIDEO_FEED_URI,
-          pinned: true,
-        },
-      ])
-
-      // prevent navigation
-      return false
-    },
-    [addSavedFeeds],
-  )
-
-  const hide = React.useCallback(() => {
+  const onConfirmHide = React.useCallback(() => {
    setTrendingVideoDisabled(true)
    logEvent('trendingVideos:hide', {context: 'interstitial'})
  }, [setTrendingVideoDisabled])
@@ -69,7 +42,7 @@ export function TrendingVideos() {
    <View
      style={[
        a.pt_lg,
-        a.pb_md,
+        a.pb_lg,
        a.border_t,
        t.atoms.border_contrast_low,
        t.atoms.bg_contrast_25,
@@ -94,7 +67,7 @@ export function TrendingVideos() {
          variant="ghost"
          color="secondary"
          shape="round"
-          onPress={hide}>
+          onPress={() => trendingPrompt.open()}>
          <ButtonIcon icon={X} />
        </Button>
      </View>
@@ -107,7 +80,6 @@ export function TrendingVideos() {
          style={[
            a.flex_row,
            a.gap_sm,
-            a.pb_sm,
            {
              paddingLeft: gutters.paddingLeft,
              paddingRight: gutters.paddingRight,
@@ -118,7 +90,7 @@ export function TrendingVideos() {
              .fill(0)
              .map((_, i) => (
                <View key={i} style={[{width: CARD_WIDTH}]}>
-                  <VideoPostCardPlaceholder variant="compact" />
+                  <CompactVideoPostCardPlaceholder />
                </View>
              ))
          ) : error || !data ? (
@@ -133,8 +105,7 @@ export function TrendingVideos() {
              .filter(item => AppBskyEmbedVideo.isView(item.post.embed))
              .map(item => (
                <View key={item.post.uri} style={[{width: CARD_WIDTH}]}>
-                  <VideoPostCard
-                    variant="compact"
+                  <CompactVideoPostCard
                    post={item.post}
                    moderation={item.moderation}
                    sourceContext={{
@@ -151,34 +122,13 @@ export function TrendingVideos() {
        </View>
      </ScrollView>

-      {!isSavedAlready && (
-        <View style={[gutters, a.pt_xs]}>
-          <Divider />
-
-          <View
-            style={[
-              a.pt_sm,
-              a.flex_row,
-              a.align_center,
-              a.justify_between,
-              a.gap_md,
-            ]}>
-            <Text style={[a.flex_1, a.text_sm, a.leading_snug]}>
-              <Trans>Pin to your home screen for easy access</Trans>
-            </Text>
-            <Button
-              disabled={isPinPending}
-              label={_(msg`Pin`)}
-              size="small"
-              variant="solid"
-              color="primary"
-              onPress={pinFeed}>
-              <ButtonText>{_(msg`Pin`)}</ButtonText>
-              <ButtonIcon icon={Pin} position="right" />
-            </Button>
-          </View>
-        </View>
-      )}
+      <Prompt.Basic
+        control={trendingPrompt}
+        title={_(msg`Hide trending videos?`)}
+        description={_(msg`You can update this later from your settings.`)}
+        confirmButtonCta={_(msg`Hide`)}
+        onConfirm={onConfirmHide}
+      />
    </View>
  )
 }
@@ -0,0 +1,175 @@
+import React from 'react'
+import {ScrollView, View} from 'react-native'
+import {AppBskyEmbedVideo} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {VIDEO_FEED_URI} from '#/lib/constants'
+import {logEvent} from '#/lib/statsig/statsig'
+import {isWeb} from '#/platform/detection'
+import {useSavedFeeds} from '#/state/queries/feed'
+import {usePostFeedQuery} from '#/state/queries/post-feed'
+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 {Pin_Stroke2_Corner0_Rounded as Pin} from '#/components/icons/Pin'
+import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
+import {Text} from '#/components/Typography'
+import {
+  CompactVideoPostCard,
+  CompactVideoPostCardPlaceholder,
+} from '#/components/VideoPostCard'
+
+const CARD_WIDTH = 100
+
+export function ExploreTrendingVideos() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const gutters = useGutters([0, 'base'])
+  const {data, isLoading, error} = usePostFeedQuery(`feedgen|${VIDEO_FEED_URI}`)
+
+  const {data: saved} = useSavedFeeds()
+  const isSavedAlready = React.useMemo(() => {
+    return !!saved?.feeds?.some(info => info.config.value === VIDEO_FEED_URI)
+  }, [saved])
+
+  const {mutateAsync: addSavedFeeds, isPending: isPinPending} =
+    useAddSavedFeedsMutation()
+  const pinFeed = React.useCallback(
+    (e: any) => {
+      e.preventDefault()
+
+      addSavedFeeds([
+        {
+          type: 'feed',
+          value: VIDEO_FEED_URI,
+          pinned: true,
+        },
+      ])
+
+      // prevent navigation
+      return false
+    },
+    [addSavedFeeds],
+  )
+
+  if (error) {
+    return null
+  }
+
+  return (
+    <View style={[a.pb_xl]}>
+      <View
+        style={[
+          a.flex_row,
+          isWeb
+            ? [a.px_lg, a.py_lg, a.pt_2xl, a.gap_md]
+            : [a.p_lg, a.pt_xl, a.gap_md],
+          a.border_b,
+          t.atoms.border_contrast_low,
+        ]}>
+        <View style={[a.flex_1, a.gap_sm]}>
+          <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+            <Graph
+              size="lg"
+              fill={t.palette.primary_500}
+              style={{marginLeft: -2}}
+            />
+            <Text style={[a.text_2xl, a.font_heavy, t.atoms.text]}>
+              <Trans>Trending Videos</Trans>
+            </Text>
+            <View style={[a.py_xs, a.px_sm, a.rounded_sm, a.overflow_hidden]}>
+              <GradientFill gradient={tokens.gradients.primary} />
+              <Text style={[a.text_sm, a.font_heavy, {color: 'white'}]}>
+                <Trans>BETA</Trans>
+              </Text>
+            </View>
+          </View>
+          <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
+            <Trans>A new way to experience video on Bluesky</Trans>
+          </Text>
+        </View>
+      </View>
+
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        snapToInterval={(CARD_WIDTH + a.gap_sm.gap) * 2}>
+        <View
+          style={[
+            a.pt_lg,
+            a.flex_row,
+            a.gap_sm,
+            {
+              paddingLeft: gutters.paddingLeft,
+              paddingRight: gutters.paddingRight,
+            },
+          ]}>
+          {isLoading ? (
+            Array(10)
+              .fill(0)
+              .map((_, i) => (
+                <View key={i} style={[{width: CARD_WIDTH}]}>
+                  <CompactVideoPostCardPlaceholder />
+                </View>
+              ))
+          ) : error || !data ? (
+            <Text>
+              <Trans>Whoops! Trending videos failed to load.</Trans>
+            </Text>
+          ) : (
+            data.pages
+              .flatMap(page => page.slices)
+              .map(slice => slice.items[0])
+              .filter(Boolean)
+              .filter(item => AppBskyEmbedVideo.isView(item.post.embed))
+              .map(item => (
+                <View key={item.post.uri} style={[{width: CARD_WIDTH}]}>
+                  <CompactVideoPostCard
+                    post={item.post}
+                    moderation={item.moderation}
+                    sourceContext={{
+                      type: 'feedgen',
+                      uri: VIDEO_FEED_URI,
+                    }}
+                    onInteract={() => {
+                      logEvent('trendingVideo:click', {context: 'interstitial'})
+                    }}
+                  />
+                </View>
+              ))
+          )}
+        </View>
+      </ScrollView>
+
+      {!isSavedAlready && (
+        <View
+          style={[
+            gutters,
+            a.pt_lg,
+            a.flex_row,
+            a.align_center,
+            a.justify_between,
+            a.gap_xl,
+          ]}>
+          <Text style={[a.flex_1, a.text_sm, a.leading_snug]}>
+            <Trans>
+              Pin the trending videos feed to your home screen for easy access
+            </Trans>
+          </Text>
+          <Button
+            disabled={isPinPending}
+            label={_(msg`Pin`)}
+            size="small"
+            variant="outline"
+            color="secondary"
+            onPress={pinFeed}>
+            <ButtonText>{_(msg`Pin`)}</ButtonText>
+            <ButtonIcon icon={Pin} position="right" />
+          </Button>
+        </View>
+      )}
+    </View>
+  )
+}
@@ -12,7 +12,7 @@ import {useLingui} from '@lingui/react'

 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
+import {isNative,isWeb} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useGetPopularFeedsQuery} from '#/state/queries/feed'
 import {usePreferencesQuery} from '#/state/queries/preferences'
@@ -26,6 +26,7 @@ import {
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {ExploreRecommendations} from '#/screens/Search/components/ExploreRecommendations'
 import {ExploreTrendingTopics} from '#/screens/Search/components/ExploreTrendingTopics'
+import {ExploreTrendingVideos} from '#/screens/Search/components/ExploreTrendingVideos'
 import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
 import {Button} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
@@ -246,6 +247,10 @@ type ExploreScreenItems =
      type: 'trendingTopics'
      key: string
    }
+  | {
+      type: 'trendingVideos'
+      key: string
+    }
  | {
      type: 'recommendations'
      key: string
@@ -343,6 +348,13 @@ export function Explore() {
      key: `trending-topics`,
    })

+    if (isNative) {
+      i.push({
+        type: 'trendingVideos',
+        key: `trending-videos`,
+      })
+    }
+
    i.push({
      type: 'recommendations',
      key: `recommendations`,
@@ -514,6 +526,9 @@ export function Explore() {
        case 'trendingTopics': {
          return <ExploreTrendingTopics />
        }
+        case 'trendingVideos': {
+          return <ExploreTrendingVideos />
+        }
        case 'recommendations': {
          return <ExploreRecommendations />
        }