diff --git a/src/atoms/token-collection/index.jsx b/src/atoms/token-collection/index.jsx index cb7b4be13..e39443a74 100644 --- 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 index f33670ce8..89e85f525 100644 --- 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 index 1a6ef6250..250fb664c 100644 --- 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 && ( +
+ MODERATED +
+ )} {nft.mime_type?.startsWith('audio') ? ( } diff --git a/src/pages/objkt-display/index.tsx b/src/pages/objkt-display/index.tsx index cf721f369..d9dc4acaa 100644 --- a/src/pages/objkt-display/index.tsx +++ b/src/pages/objkt-display/index.tsx @@ -89,14 +89,16 @@ 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 ) @@ -104,6 +106,10 @@ export const ObjktDisplay = () => { 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 index 966a0aa88..7074fb153 100644 --- 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 && ( + + )}
Rights: diff --git a/src/types.d.ts b/src/types.d.ts index 4861c09a1..ac9d4ca8b 100644 --- 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 &