WIP need to fix types

src/screens/VideoFeed/index.tsx

@@ -48,6 +48,8 @@ import {
 } from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
+import {EyeSlash_Stroke2_Corner0_Rounded as Eye} from '#/components/icons/EyeSlash'
+import * as Hider from '#/components/moderation/Hider'
 import {HITSLOP_20} from '#/lib/constants'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped'
@@ -151,7 +153,7 @@ export function VideoFeed({}: NativeStackScreenProps<
 
 type CurrentSource = {
   source: string
-  moderation?: ModerationDecision
+  moderation: ModerationDecision
 } | null
 
 function Feed() {
@@ -208,6 +210,8 @@ function Feed() {
   const renderItem: ListRenderItem<FeedPostSliceItem> = useCallback(
     ({item, index}) => {
       const {post} = item
+
+      // filtered above, here for TS
       if (!post.embed || !AppBskyEmbedVideo.isView(post.embed)) {
         return null
       }
@@ -215,6 +219,10 @@ function Feed() {
       const player = players?.[index % 3]
       const currentSource = currentSources[index % 3]
 
+      if (!currentSource?.moderation) {
+        return null
+      }
+
       return (
         <VideoItem
           player={player}
@@ -225,7 +233,7 @@ function Feed() {
             index === currentIndex &&
             currentSource?.source === post.embed.playlist
           }
-          moderation={currentSource?.moderation}
+          moderation={currentSource.moderation}
           scrollGesture={scrollGesture}
         />
       )
@@ -445,7 +453,7 @@ function VideoItem({
   embed: AppBskyEmbedVideo.View
   active: boolean
   scrollGesture: NativeGesture
-  moderation?: ModerationDecision
+  moderation: ModerationDecision
 }) {
   const postShadow = usePostShadow(post)
   const {width, height} = useSafeAreaFrame()
@@ -495,6 +503,7 @@ function VideoItem({
             <Overlay
               player={player}
               post={postShadow}
+              embed={embed}
               active={active}
               scrollGesture={scrollGesture}
               moderation={moderation}
@@ -538,18 +547,67 @@ function VideoItemInner({
   )
 }
 
+function ModerationOverlay({
+  embed,
+  onPressShow,
+}: {
+  embed: AppBskyEmbedVideo.View
+  onPressShow: () => void
+}) {
+  const hider = Hider.useHider()
+  const {_} = useLingui()
+
+  const onShow = React.useCallback(() => {
+    hider.setIsContentVisible(true)
+    onPressShow()
+  }, [hider])
+
+  return (
+    <View style={[a.absolute, a.inset_0, a.z_20]}>
+      <VideoItemPlaceholder blur embed={embed} />
+      <View
+        style={[
+          a.absolute,
+          a.inset_0,
+          a.z_20,
+          a.justify_center,
+          a.align_center,
+        ]}>
+        <View style={[a.align_center, a.gap_sm]}>
+          <Eye width={36} fill="white" />
+          <Text style={[a.text_center, a.leading_snug, a.pb_xs]}>
+            <Trans>Hidden by your moderation settings.</Trans>
+          </Text>
+          <Button
+            label={_(msg`Show anyway`)}
+            size="small"
+            variant="solid"
+            color="secondary_inverted"
+            onPress={onShow}>
+            <ButtonText>
+              <Trans>Show anyway</Trans>
+            </ButtonText>
+          </Button>
+        </View>
+      </View>
+    </View>
+  )
+}
+
 function Overlay({
   player,
   post,
+  embed,
   active,
   scrollGesture,
-}: // moderation
+  moderation,
-{
+}: {
   player?: VideoPlayer
   post: Shadow<AppBskyFeedDefs.PostView>
+  embed: AppBskyEmbedVideo.View
   active: boolean
   scrollGesture: NativeGesture
-  moderation?: ModerationDecision
+  moderation: ModerationDecision
 }) {
   const {_} = useLingui()
   const t = useTheme()
@@ -574,7 +632,16 @@ function Overlay({
   }))
 
   return (
-    <>
+    <Hider.Outer modui={moderation.ui('contentView')}>
+      <Hider.Mask>
+        <ModerationOverlay
+          embed={embed}
+          onPressShow={() => {
+            player?.play()
+          }}
+        />
+      </Hider.Mask>
+      <Hider.Content>
         <View style={[a.absolute, a.inset_0, a.z_20]}>
           <View style={[a.flex_1]}>
             <PlayPauseTapArea player={player} post={post} />
@@ -602,7 +669,11 @@ function Overlay({
                     a.pb_sm,
                     a.align_center,
                   ]}>
-                <UserAvatar type="user" avatar={post.author.avatar} size={32} />
+                  <UserAvatar
+                    type="user"
+                    avatar={post.author.avatar}
+                    size={32}
+                  />
                   <View style={[a.flex_1]}>
                     <Text
                       style={[a.text_md, a.font_heavy]}
@@ -636,7 +707,9 @@ function Overlay({
                     style={[a.mb_xs, a.bg_transparent]}
                     hoverStyle={[]}
                     onPress={() =>
-                    profile.viewer?.following ? queueUnfollow() : queueFollow()
+                      profile.viewer?.following
+                        ? queueUnfollow()
+                        : queueFollow()
                     }>
                     {!!profile.viewer?.following && (
                       <ButtonIcon icon={CheckIcon} />
@@ -704,7 +777,8 @@ function Overlay({
         </View>
       )}
         */}
-    </>
+      </Hider.Content>
+    </Hider.Outer>
   )
 }
 
@@ -954,17 +1028,24 @@ function ExpandableRichTextView({
 function VideoItemPlaceholder({
   embed,
   style,
+  blur,
 }: {
   embed: AppBskyEmbedVideo.View
   style?: ImageStyle
+  blur?: boolean
 }) {
   const src = embed.thumbnail
+  let contentFit = isTallAspectRatio(embed.aspectRatio) ? 'cover' : 'contain'
+  if (blur) {
+    contentFit = 'cover'
+  }
   return src ? (
     <Image
       accessibilityIgnoresInvertColors
       source={{uri: src}}
       style={[a.absolute, a.inset_0, style]}
-      contentFit={isTallAspectRatio(embed.aspectRatio) ? 'cover' : 'contain'}
+      contentFit={contentFit}
+      blurRadius={blur ? 40 : 0}
     />
   ) : null
 }