feat: display flagged objkts by the Teia content moderation team (#378)

* feat: Display OBJKTs that were flagged by the Teia content moderation team as NSFW or photosensitive. * style 💎: stripes proposal * fix 🐛: only yourself * feat ⚡: add corner "moderation" label --------- Co-authored-by: melMass <[email protected]> Co-authored-by: Mel Massadian <[email protected]>
teia-community · Feb 25, 2024 · 1dbff3e · 1dbff3e
1 parent 0efa21d
commit 1dbff3e
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 2 deletions.
diff --git a/src/atoms/token-collection/index.jsx b/src/atoms/token-collection/index.jsx
@@ -19,6 +19,7 @@ import {
 } from '@constants'
 import { IconCache } from '@utils/with-icon'
 import { shallow } from 'zustand/shallow'
+import { useUserStore } from '@context/userStore'
 
 /**
  * Single view, vertical feed
@@ -100,6 +101,7 @@ function TokenCollection({
     )
   },
 }) {
+  const [user_address] = useUserStore((state) => [state.address])
   const [searchParams, setSearchParams] = useSearchParams()
   const { walletBlockMap, nsfwMap, photosensitiveMap, objktBlockMap } =
     useSettings()
@@ -188,6 +190,11 @@ function TokenCollection({
             token.teia_meta?.accessibility?.hazards.includes(
               METADATA_ACCESSIBILITY_HAZARDS_PHOTOSENS
             )),
+
+        isModerated:
+          (photosensitiveMap.get(token.token_id) === 1 ||
+            nsfwMap.get(token.token_id) === 1) &&
+          token.artist_address === user_address, // true (testing it in dev is not trivial)
       }
     })
 

diff --git a/src/components/feed-item/index.module.scss b/src/components/feed-item/index.module.scss
@@ -14,6 +14,67 @@
   pointer-events: none;
 }
 
+.moderated {
+  background: repeating-linear-gradient(
+    45deg,
+    #f43d00,
+    #ef0000 10px,
+    #621307 10px,
+    #d9240c 20px
+  );
+}
+
+.moderation_corner {
+  position: absolute;
+  right: -5px;
+  top: -5px;
+  z-index: 1;
+  overflow: hidden;
+  width: 75px;
+  height: 75px;
+  text-align: right;
+  z-index: 300;
+}
+.moderation_corner span {
+  font-size: $font-xsmall;
+  font-weight: bold;
+  color: #fff;
+  text-transform: uppercase;
+  text-align: center;
+  line-height: 20px;
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  width: 100px;
+  display: block;
+  background: linear-gradient(#f70505 0%, #8f0808 100%);
+  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.5);
+  position: absolute;
+  top: 19px;
+  right: -21px;
+}
+.moderation_corner span::before {
+  content: '';
+  position: absolute;
+  left: 0px;
+  top: 100%;
+  z-index: -1;
+  border-left: 3px solid #8f0808;
+  border-right: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  border-top: 3px solid #8f0808;
+}
+.moderation_corner span::after {
+  content: '';
+  position: absolute;
+  right: 0px;
+  top: 100%;
+  z-index: -1;
+  border-left: 3px solid transparent;
+  border-right: 3px solid #8f0808;
+  border-bottom: 3px solid transparent;
+  border-top: 3px solid #8f0808;
+}
+
 .container {
   position: relative;
   max-width: 600px;

diff --git a/src/components/feed-item/index.tsx b/src/components/feed-item/index.tsx
@@ -57,6 +57,7 @@ export const FeedItem = ({ nft }: { nft: NFT }) => {
     [styles.blur]: nft.isNSFW && !nsfwFriendly,
     [styles.photo_protect]: nft.isPhotosensitive && !photosensitiveFriendly,
     [styles.masonry]: viewMode === 'masonry',
+    [styles.moderated]: nft.isModerated,
   })
 
   return (
@@ -69,6 +70,11 @@ export const FeedItem = ({ nft }: { nft: NFT }) => {
       // onMouseLeave={() => setHover(false)}
       className={containerClasses}
     >
+      {nft.isModerated && (
+        <div className={styles.moderation_corner}>
+          <span>MODERATED</span>
+        </div>
+      )}
       {nft.mime_type?.startsWith('audio') ? (
         <RenderMediaType
           details={<TokenHover nft={nft} visible={hover && !zen} />}

diff --git a/src/pages/objkt-display/index.tsx b/src/pages/objkt-display/index.tsx
@@ -89,21 +89,27 @@ export const ObjktDisplay = () => {
           )
         }
 
+        const isNSFW = (nsfwMap.get(objkt.token_id) === 1)
+        const isPhotosensitive = (photosensitiveMap.get(objkt.token_id) === 1)
         if (
-          nsfwMap.get(objkt.token_id) === 1 ||
+          isNSFW ||
           objkt.teia_meta?.content_rating === METADATA_CONTENT_RATING_MATURE
         ) {
           objkt.isNSFW = true
         }
         if (
-          photosensitiveMap.get(objkt.token_id) === 1 ||
+          isPhotosensitive ||
           objkt.teia_meta?.accessibility?.hazards.includes(
             METADATA_ACCESSIBILITY_HAZARDS_PHOTOSENS
           )
         ) {
           objkt.isPhotosensitive = true
         }
 
+        if(isNSFW || isPhotosensitive) {
+          objkt.isModerated = true
+        }
+
         objkt.restricted = walletBlockMap.get(objkt.artist_address) === 1
         objkt.underReview = underReviewMap.get(objkt.artist_address) === 1
 

diff --git a/src/pages/objkt-display/tabs/Info.jsx b/src/pages/objkt-display/tabs/Info.jsx
@@ -58,6 +58,14 @@ export const Info = () => {
                 value={'Photo Sensitive'}
               />
             )}
+            {nft.isModerated && nft.artist_address === viewer_address && (
+              <Attribute
+                label="Moderation"
+                value={
+                  'The TEIA content moderation team has overridden the NSFW or Photosensitive attributes on this token'
+                }
+              />
+            )}
 
             <div className={styles.info_attributes}>
               Rights:

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -214,6 +214,7 @@ export interface TxWithIndex extends Tx {
 export type NFTFiltered = {
   isNSFW?: boolean
   isPhotosensitive?: boolean
+  isModerated?: boolean
 }
 
 export type NFT = NFTBase &