Add content hider to video card

src/components/VideoPostCard.tsx

@@ -1,30 +1,40 @@
 import {View} from 'react-native'
 import {Image} from 'expo-image'
 import {LinearGradient} from 'expo-linear-gradient'
-import {AppBskyEmbedVideo, AppBskyFeedDefs, AppBskyFeedPost} from '@atproto/api'
+import {
+  AppBskyActorDefs,
+  AppBskyEmbedVideo,
+  AppBskyFeedDefs,
+  AppBskyFeedPost,
+  ModerationDecision,
+} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {formatCount} from '#/view/com/util/numeric/format'
-import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {VideoFeedSourceContext} from '#/screens/VideoFeed/types'
 import {atoms as a, useTheme} from '#/alf'
 import {BLUE_HUE} from '#/alf/util/colorGeneration'
 import {select} from '#/alf/util/themeSelector'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {EyeSlash_Stroke2_Corner0_Rounded as Eye} from '#/components/icons/EyeSlash'
 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 {MediaInsetBorder} from '#/components/MediaInsetBorder'
+import * as Hider from '#/components/moderation/Hider'
 import {Text} from '#/components/Typography'
 
 export function VideoPostCard({
   post,
   sourceContext,
+  moderation,
 }: {
   post: AppBskyFeedDefs.PostView
   sourceContext: VideoFeedSourceContext
+  moderation: ModerationDecision
 }) {
   const t = useTheme()
   const {_, i18n} = useLingui()
@@ -70,82 +80,129 @@ export function VideoPostCard({
           justifyContent: undefined,
         },
       ]}>
-      <View
+      <Hider.Outer modui={moderation.ui('contentList')}>
-        style={[
+        <Hider.Mask>
-          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.justify_center,
-              a.inset_0,
+              a.rounded_md,
-              a.pt_2xl,
+              a.overflow_hidden,
               {
-                top: 'auto',
+                backgroundColor: black,
+                aspectRatio: 9 / 16,
               },
             ]}>
-            <LinearGradient
+            <Image
-              colors={[black, 'rgba(22, 24, 35, 0)']}
+              source={{uri: thumbnail}}
-              locations={[0.02, 1]}
+              style={[a.w_full, a.h_full, {opacity: pressed ? 0.8 : 1}]}
-              start={{x: 0, y: 1}}
+              accessibilityIgnoresInvertColors
-              end={{x: 0, y: 0}}
+              blurRadius={40}
-              style={[a.absolute, a.inset_0, {opacity: 0.9}]}
             />
-
+            <MediaInsetBorder />
-            <View style={[a.relative, a.z_10, a.p_md, a.flex_row, a.gap_md]}>
+            <View
-              {likeCount > 0 && (
+              style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
-                <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+              <View
-                  <Heart size="sm" fill="white" />
+                style={[
-                  <Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
+                  a.absolute,
-                    {formatCount(i18n, likeCount)}
+                  a.inset_0,
-                  </Text>
+                  a.justify_center,
-                </View>
+                  a.align_center,
-              )}
+                  {
-              {repostCount > 0 && (
+                    backgroundColor: 'black',
-                <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+                    opacity: 0.2,
-                  <Repost size="sm" fill="white" />
+                  },
-                  <Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
+                ]}
-                    {formatCount(i18n, repostCount)}
+              />
-                  </Text>
+              <View style={[a.align_center, a.gap_xs]}>
-                </View>
+                <Eye size="lg" fill="white" />
-              )}
+                <Text style={[a.text_sm, {color: 'white'}]}>
+                  {_(msg`Hidden`)}
+                </Text>
+              </View>
             </View>
           </View>
-        </View>
+          <VideoPostCardTextPlaceholder author={post.author} />
-      </View>
+        </Hider.Mask>
-      <View style={[a.pr_xs, {paddingTop: 6, gap: 4}]}>
+        <Hider.Content>
-        {text && (
+          <View
-          <Text style={[a.text_md, a.leading_snug]} numberOfLines={2}>
-            {text}
-          </Text>
-        )}
-        <View style={[a.flex_row, a.gap_xs, a.align_center]}>
-          <PreviewableUserAvatar type="user" size={20} profile={post.author} />
-          <Text
             style={[
-              a.flex_1,
+              a.justify_center,
-              a.text_sm,
+              a.rounded_md,
-              a.leading_tight,
+              a.overflow_hidden,
-              t.atoms.text_contrast_medium,
+              {
-            ]}
+                backgroundColor: black,
-            numberOfLines={1}>
+                aspectRatio: 9 / 16,
-            {sanitizeHandle(post.author.handle, '@')}
+              },
-          </Text>
+            ]}>
-        </View>
+            <Image
-      </View>
+              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.pt_2xl,
+                  {
+                    top: 'auto',
+                  },
+                ]}>
+                <LinearGradient
+                  colors={[black, 'rgba(22, 24, 35, 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_md, 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>
+                  )}
+                  {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'}]}>
+                        {formatCount(i18n, repostCount)}
+                      </Text>
+                    </View>
+                  )}
+                </View>
+              </View>
+            </View>
+          </View>
+          <View style={[a.pr_xs, {paddingTop: 6, gap: 4}]}>
+            {text && (
+              <Text style={[a.text_md, a.leading_snug]} numberOfLines={2}>
+                {text}
+              </Text>
+            )}
+            <View style={[a.flex_row, a.gap_xs, a.align_center]}>
+              <UserAvatar type="user" size={20} avatar={post.author.avatar} />
+              <Text
+                style={[
+                  a.flex_1,
+                  a.text_sm,
+                  a.leading_tight,
+                  t.atoms.text_contrast_medium,
+                ]}
+                numberOfLines={1}>
+                {sanitizeHandle(post.author.handle, '@')}
+              </Text>
+            </View>
+          </View>
+        </Hider.Content>
+      </Hider.Outer>
     </Link>
   )
 }
@@ -171,6 +228,20 @@ export function VideoPostCardPlaceholder() {
         ]}>
         <MediaInsetBorder />
       </View>
+      <VideoPostCardTextPlaceholder />
+    </View>
+  )
+}
+
+export function VideoPostCardTextPlaceholder({
+  author,
+}: {
+  author?: AppBskyActorDefs.ProfileViewBasic
+}) {
+  const t = useTheme()
+
+  return (
+    <View style={[a.flex_1]}>
       <View style={[a.pr_xs, {paddingTop: 8, gap: 6}]}>
         <View
           style={[
@@ -193,28 +264,44 @@ export function VideoPostCardPlaceholder() {
             },
           ]}
         />
-        <View style={[a.flex_row, a.gap_xs, a.align_center]}>
+        {author ? (
-          <View
+          <View style={[a.flex_row, a.gap_xs, a.align_center]}>
-            style={[
+            <UserAvatar type="user" size={20} avatar={author.avatar} />
-              a.rounded_full,
+            <Text
-              t.atoms.bg_contrast_50,
+              style={[
-              {
+                a.flex_1,
-                width: 20,
+                a.text_sm,
-                height: 20,
+                a.leading_tight,
-              },
+                t.atoms.text_contrast_medium,
-            ]}
+              ]}
-          />
+              numberOfLines={1}>
-          <View
+              {sanitizeHandle(author.handle, '@')}
-            style={[
+            </Text>
-              a.rounded_xs,
+          </View>
-              t.atoms.bg_contrast_25,
+        ) : (
-              {
+          <View style={[a.flex_row, a.gap_xs, a.align_center]}>
-                height: 12,
+            <View
-                width: '75%',
+              style={[
-              },
+                a.rounded_full,
-            ]}
+                t.atoms.bg_contrast_50,
-          />
+                {
-        </View>
+                  width: 20,
+                  height: 20,
+                },
+              ]}
+            />
+            <View
+              style={[
+                a.rounded_xs,
+                t.atoms.bg_contrast_25,
+                {
+                  height: 12,
+                  width: '75%',
+                },
+              ]}
+            />
+          </View>
+        )}
       </View>
     </View>
   )

src/components/feeds/PostFeedVideoGridRow.tsx

@@ -19,7 +19,10 @@ export function PostFeedVideoGridRow({
   const gutters = useGutters(['base', 'base', 0, 'base'])
   const posts = slices
     .filter(slice => AppBskyEmbedVideo.isView(slice.post.embed))
-    .map(slice => slice.post)
+    .map(slice => ({
+      post: slice.post,
+      moderation: slice.moderation,
+    }))
 
   /**
    * This should not happen because we should be filtering out posts without
@@ -31,8 +34,12 @@ export function PostFeedVideoGridRow({
     <View style={[gutters]}>
       <View style={[a.flex_row, a.gap_sm]}>
         {posts.map(post => (
-          <View key={post.uri} style={[a.flex_1]}>
+          <View key={post.post.uri} style={[a.flex_1]}>
-            <VideoPostCard post={post} sourceContext={sourceContext} />
+            <VideoPostCard
+              post={post.post}
+              sourceContext={sourceContext}
+              moderation={post.moderation}
+            />
           </View>
         ))}
       </View>