Add alerts to embeds (#1138)

* Add alerts to embeds

* Add images to the mock data

* Fix types

src/lib/moderation.ts

@@ -75,3 +75,13 @@ export function getProfileModerationCauses(
     return true
   }) as ModerationCause[]
 }
+
+export function isCauseALabelOnUri(
+  cause: ModerationCause | undefined,
+  uri: string,
+): boolean {
+  if (cause?.type !== 'label') {
+    return false
+  }
+  return cause.label.uri === uri
+}

src/view/com/post-thread/PostThreadItem.tsx

@@ -269,7 +269,10 @@ export const PostThreadItem = observer(function PostThreadItem({
               ) : undefined}
               {item.post.embed && (
                 <ContentHider moderation={item.moderation.embed} style={s.mb10}>
-                  <PostEmbeds embed={item.post.embed} />
+                  <PostEmbeds
+                    embed={item.post.embed}
+                    moderation={item.moderation.embed}
+                  />
                 </ContentHider>
               )}
             </ContentHider>
@@ -428,7 +431,10 @@ export const PostThreadItem = observer(function PostThreadItem({
               ) : undefined}
               {item.post.embed && (
                 <ContentHider style={s.mb10} moderation={item.moderation.embed}>
-                  <PostEmbeds embed={item.post.embed} />
+                  <PostEmbeds
+                    embed={item.post.embed}
+                    moderation={item.moderation.embed}
+                  />
                 </ContentHider>
               )}
               {needsTranslation && (

src/view/com/post/Post.tsx

@@ -267,7 +267,10 @@ const PostLoaded = observer(
               ) : undefined}
               {item.post.embed ? (
                 <ContentHider moderation={item.moderation.embed} style={s.mb10}>
-                  <PostEmbeds embed={item.post.embed} />
+                  <PostEmbeds
+                    embed={item.post.embed}
+                    moderation={item.moderation.embed}
+                  />
                 </ContentHider>
               ) : null}
               {needsTranslation && (

src/view/com/posts/FeedItem.tsx

@@ -293,7 +293,10 @@ export const FeedItem = observer(function ({
               <ContentHider
                 moderation={item.moderation.embed}
                 style={styles.embed}>
-                <PostEmbeds embed={item.post.embed} />
+                <PostEmbeds
+                  embed={item.post.embed}
+                  moderation={item.moderation.embed}
+                />
               </ContentHider>
             ) : null}
             {needsTranslation && (

src/view/com/util/post-embeds/QuoteEmbed.tsx

@@ -5,6 +5,7 @@ import {
   AppBskyFeedPost,
   AppBskyEmbedImages,
   AppBskyEmbedRecordWithMedia,
+  ModerationUI,
 } from '@atproto/api'
 import {AtUri} from '@atproto/api'
 import {PostMeta} from '../PostMeta'
@@ -13,14 +14,17 @@ import {Text} from '../text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {ComposerOptsQuote} from 'state/models/ui/shell'
 import {PostEmbeds} from '.'
+import {PostAlerts} from '../moderation/PostAlerts'
 import {makeProfileLink} from 'lib/routes/links'
 import {InfoCircleIcon} from 'lib/icons'
 
 export function MaybeQuoteEmbed({
   embed,
+  moderation,
   style,
 }: {
   embed: AppBskyEmbedRecord.View
+  moderation: ModerationUI
   style?: StyleProp<ViewStyle>
 }) {
   const pal = usePalette('default')
@@ -39,6 +43,7 @@ export function MaybeQuoteEmbed({
           text: embed.record.value.text,
           embeds: embed.record.embeds,
         }}
+        moderation={moderation}
         style={style}
       />
     )
@@ -66,9 +71,11 @@ export function MaybeQuoteEmbed({
 
 export function QuoteEmbed({
   quote,
+  moderation,
   style,
 }: {
   quote: ComposerOptsQuote
+  moderation?: ModerationUI
   style?: StyleProp<ViewStyle>
 }) {
   const pal = usePalette('default')
@@ -100,16 +107,19 @@ export function QuoteEmbed({
         postHref={itemHref}
         timestamp={quote.indexedAt}
       />
+      {moderation ? (
+        <PostAlerts moderation={moderation} style={styles.alert} />
+      ) : null}
       {!isEmpty ? (
         <Text type="post-text" style={pal.text} numberOfLines={6}>
           {quote.text}
         </Text>
       ) : null}
       {AppBskyEmbedImages.isView(imagesEmbed) && (
-        <PostEmbeds embed={imagesEmbed} />
+        <PostEmbeds embed={imagesEmbed} moderation={{}} />
       )}
       {AppBskyEmbedRecordWithMedia.isView(imagesEmbed) && (
-        <PostEmbeds embed={imagesEmbed.media} />
+        <PostEmbeds embed={imagesEmbed.media} moderation={{}} />
       )}
     </Link>
   )
@@ -140,4 +150,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 14,
     borderWidth: 1,
   },
+  alert: {
+    marginBottom: 6,
+  },
 })

src/view/com/util/post-embeds/index.tsx

@@ -14,6 +14,7 @@ import {
   AppBskyEmbedRecordWithMedia,
   AppBskyFeedDefs,
   AppBskyGraphDefs,
+  ModerationUI,
 } from '@atproto/api'
 import {Link} from '../Link'
 import {ImageLayoutGrid} from '../images/ImageLayoutGrid'
@@ -28,6 +29,7 @@ import {AutoSizedImage} from '../images/AutoSizedImage'
 import {CustomFeedEmbed} from './CustomFeedEmbed'
 import {ListEmbed} from './ListEmbed'
 import {isDesktopWeb} from 'platform/detection'
+import {isCauseALabelOnUri} from 'lib/moderation'
 
 type Embed =
   | AppBskyEmbedRecord.View
@@ -38,9 +40,11 @@ type Embed =
 
 export function PostEmbeds({
   embed,
+  moderation,
   style,
 }: {
   embed?: Embed
+  moderation: ModerationUI
   style?: StyleProp<ViewStyle>
 }) {
   const pal = usePalette('default')
@@ -49,10 +53,15 @@ export function PostEmbeds({
   // quote post with media
   // =
   if (AppBskyEmbedRecordWithMedia.isView(embed)) {
+    const isModOnQuote =
+      AppBskyEmbedRecord.isViewRecord(embed.record.record) &&
+      isCauseALabelOnUri(moderation.cause, embed.record.record.uri)
+    const mediaModeration = isModOnQuote ? {} : moderation
+    const quoteModeration = isModOnQuote ? moderation : {}
     return (
       <View style={[styles.stackContainer, style]}>
-        <PostEmbeds embed={embed.media} />
-        <MaybeQuoteEmbed embed={embed.record} />
+        <PostEmbeds embed={embed.media} moderation={mediaModeration} />
+        <MaybeQuoteEmbed embed={embed.record} moderation={quoteModeration} />
       </View>
     )
   }
@@ -71,7 +80,9 @@ export function PostEmbeds({
 
     // quote post
     // =
-    return <MaybeQuoteEmbed embed={embed} style={style} />
+    return (
+      <MaybeQuoteEmbed embed={embed} style={style} moderation={moderation} />
+    )
   }
 
   // image embed