From 9f5f92f714a1305ce71fab78be5d962c3918d0d4 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Wed, 19 Jun 2024 18:50:24 +0200 Subject: [PATCH] feat: add spoiler image --- public/assets/spoiler.png | Bin 0 -> 9275 bytes .../catalog-row/catalog-row.module.css | 12 ------------ src/components/catalog-row/catalog-row.tsx | 4 +--- .../comment-media/comment-media.module.css | 11 ++++------- src/components/comment-media/comment-media.tsx | 8 +++----- src/components/post-desktop/post-desktop.tsx | 5 +++-- src/themes.css | 5 +++++ 7 files changed, 16 insertions(+), 29 deletions(-) create mode 100644 public/assets/spoiler.png diff --git a/public/assets/spoiler.png b/public/assets/spoiler.png new file mode 100644 index 0000000000000000000000000000000000000000..db8f4347f56ec391e8c701bee391c46f81ae9cc9 GIT binary patch literal 9275 zcmeHrXH-+`*6yMsRS*QEN)eUbI}t&uh#*ph2mv7k5;_4X3P>*k0%D;^m15`}B7zhF zL5fHxRA~}=Xvr5n`|NYZ_v_yK_wFYd@0ywGnRCr&uCc~DR|r1{bHI6hZ9Q#(gaiP> zi64M~0pe~Up^pH-&=9x|001>WK|%?T5iJscl(<|1DE`<0pijd2w{1dl^*@|QC_w%f z$BKCT4Ps_u{J)Q6*(86liN0*ozu6AiWdE^$hY>I|;?CaQ?#dDpa4&H?2ZX(&I0WG) zfwXg%kP?@a08~LpcRL8o(VNfS(FqDyu-Pux#N9O3CCA*H0GBq1p+AuTONWQckB z!@cd0VsI~ke`nBg^n!Ro-Myg*IN$G#cJ>G#Z#916mH(8a=k5)WC02P0Np${|p2&v$ zN$%zCAn{)W328}5MKMWfF=?gWmH&x%fczci?&InDC(HpN;ppn<<_P!pBDPP8$o;P* z${L>Deh5#PDb(B5QH}pT-21oT!1tH?ci9dQqm{e4wsS39_q8b4CZ z!SRuukE=Jo`u|R%D)C#XE0h@a$NE(6_ z2ma~6KOOj|1ONYZ;6J0EBb+$z`4I;@fUpTXxa*AYMtC_R-1%h0B>}~odWPh`r%?b9 z`xQKHsDL~3aN&%ez-xJCozR(~3dC)n=CK_4#mM$_n`o)j+N`#L96E)xf zIFOO>1EfqOWK1N44uF?9*;0`F!JjbVLPAPLPC-dUeU65fNT@jvkdly*k&=^9Q2Z{1 zB#3w(AZMarzAU9ddBNC@ir<4p`e{-QwZP4aHdd2wSV0+k&(L!;7unc3E(u)`zIyGt ztem`pqLQ+v)-7!vT|NDKruWUvEiA1d#7WD^8S3KY?c?i*^bZINe-;rL6&;hD@**`Y z{bk0hce#1_1%*ZLiz}hAe6G(0l;eeB2h1ZI9=acOzw=jz(_ z&hFm+!6EMG__r?NjQ%fK#Pwgw{+BK$qApT$ax!wN-?~Uh{eBB)BB!`4MaisTOl9YB zfnWM5HOtMUoQk${0x~98R(sEHG#3SBF+$tFrTtO%eQE6T06H?_ixm?Y6959vaHy3?Jk7O}hk*gx5}OROm8g$p`iD0oJ}vheAvSvA%MJ?P z&*Z@?&azn?qHh;J)x0W}=BYi69^4PSFh7eEKKzu$jsFh9j__Q|v`*oYm${O{V;@}u z6{1_g-f3eXC9ssu*aaTvJcu|eZ)L;(;NifX+ve?f)mkK86SWr)(f%&} zHJe|L(pGoTF9oKJZZ?a@e)LLJM6Hpc-w=S9tjfBMtZ~1C=S;@o`uGpd(kZYS$stF1M5=?4Z6ajHa=eGvHlsJhLJ$M`B`?@gm0C624=nN7GL

I<idTBF2AXO&@Z*e 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 literal 0 HcmV?d00001 diff --git a/src/components/catalog-row/catalog-row.module.css b/src/components/catalog-row/catalog-row.module.css index 230de8c8..3b6da2a8 100644 --- a/src/components/catalog-row/catalog-row.module.css +++ b/src/components/catalog-row/catalog-row.module.css @@ -31,18 +31,6 @@ display: inline-block; } -.spoilerThumbnail { - width: var(--maxWidth); - height: var(--maxHeight); - display: inline-block; - background-color: black; - color: white !important; - display: flex; - cursor: pointer; - justify-content: center; - align-items: center; -} - .mediaPaddingWrapper { padding-bottom: 5px; display: inline-flex; diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx index bc0ea06c..15037c28 100644 --- a/src/components/catalog-row/catalog-row.tsx +++ b/src/components/catalog-row/catalog-row.tsx @@ -223,9 +223,7 @@ const CatalogPost = ({ post }: { post: Comment }) => { > {threadIcons} {spoiler ? ( - - {t('spoiler')} - + ) : ( )} diff --git a/src/components/comment-media/comment-media.module.css b/src/components/comment-media/comment-media.module.css index 749db0a5..c5e8a92c 100644 --- a/src/components/comment-media/comment-media.module.css +++ b/src/components/comment-media/comment-media.module.css @@ -22,14 +22,7 @@ } .spoiler { - display: inline-block; margin: 3px 20px 5px 20px; - background-color: black; - color: white; - display: flex; - cursor: pointer; - justify-content: center; - align-items: center; } @media (max-width: 640px) { @@ -39,6 +32,10 @@ margin: 3px 10px 5px 5px; display: inline-block; } + + .spoiler { + margin: 3px 10px 5px 5px; + } } .thumbnailSmall { diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx index 25cea054..ba6fd9b7 100644 --- a/src/components/comment-media/comment-media.tsx +++ b/src/components/comment-media/comment-media.tsx @@ -7,6 +7,7 @@ import { getHostname } from '../../lib/utils/url-utils'; import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; import useIsMobile from '../../hooks/use-is-mobile'; import Embed, { canEmbed } from '../embed'; +import _ from 'lodash'; interface MediaProps { commentMediaInfo?: CommentMediaInfo; @@ -20,7 +21,6 @@ interface MediaProps { } const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }: MediaProps) => { - const { t } = useTranslation(); const { deleted, linkHeight, linkWidth, parentCid, removed, spoiler } = post || {}; const { isDescription, isRules } = post || {}; // custom properties, not from api const isOutOfFeed = isDescription || isRules || isFloatingEmbed; // virtuoso wrapper unneeded @@ -81,9 +81,7 @@ const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail } return hasError || isDeleted ? ( File deleted ) : spoiler ? ( - setShowThumbnail(false)}> - [{t('view_spoiler')}] - + setShowThumbnail(false)} /> ) : isOutOfFeed ? ( {thumbnailComponent} ) : isMobile || isReply ? ( @@ -154,7 +152,7 @@ const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail, {url && } - {isMobile && type &&

{getDisplayMediaInfoType(type, t)}
} + {isMobile && type &&
{`${post?.spoiler && `${t('spoiler')} - `} ${getDisplayMediaInfoType(type, t)}`}
} {!showThumbnail && } diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index 97c4fcc8..2d07539c 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/src/components/post-desktop/post-desktop.tsx @@ -116,10 +116,11 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => { const PostMedia = ({ post }: PostProps) => { const { t } = useTranslation(); + const { link, spoiler } = post || {}; const commentMediaInfo = getCommentMediaInfo(post); const { type, url } = commentMediaInfo || {}; const embedUrl = url && new URL(url); - const hasThumbnail = getHasThumbnail(commentMediaInfo, post?.link); + const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const [showThumbnail, setShowThumbnail] = useState(true); return ( @@ -127,7 +128,7 @@ const PostMedia = ({ post }: PostProps) => {
{t('link')}:{' '} - {url && url.length > 30 ? url.slice(0, 30) + '...' : url} + {spoiler ? _.capitalize(t('spoiler')) : url && url.length > 30 ? url.slice(0, 30) + '...' : url} {' '} ({type && _.lowerCase(getDisplayMediaInfoType(type, t))}) {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && ( diff --git a/src/themes.css b/src/themes.css index 54c95b97..6c1fd225 100644 --- a/src/themes.css +++ b/src/themes.css @@ -354,6 +354,7 @@ --post-mobile-link-border-top: 1px solid #b7c5d9; --post-mobile-link-info-text-color: #34345c; --post-mobile-abbr-text-color: #707070; + --post-mobile-file-info-text-color: #707070; --post-mobile-abbr-font-size: 10pt; --post-mobile-content-font-size: 11pt; @@ -530,6 +531,7 @@ --post-mobile-link-border-top: 1px solid #d9bfb7; --post-mobile-link-info-text-color: #800; --post-mobile-abbr-text-color: #707070; + --post-mobile-file-info-text-color: #707070; --post-mobile-abbr-font-size: 12pt; --post-mobile-content-font-size: 13pt; @@ -714,6 +716,7 @@ --post-mobile-link-border-top: 1px solid #b7c5d9; --post-mobile-link-info-text-color: #34345c; --post-mobile-abbr-text-color: #707070; + --post-mobile-file-info-text-color: #707070; --post-mobile-abbr-font-size: 12pt; --post-mobile-content-font-size: 13pt; @@ -910,6 +913,7 @@ --post-mobile-link-border-bottom: 1px solid #2D2F33; --post-mobile-link-info-text-color: #707070; --post-mobile-abbr-text-color: #707070; + --post-mobile-file-info-text-color: #707070; --post-mobile-abbr-font-size: 10pt; --post-mobile-content-font-size: 11pt; @@ -1071,6 +1075,7 @@ --post-mobile-link-border-bottom: 1px solid #ccc; --post-mobile-link-info-text-color: #333; --post-mobile-abbr-text-color: #333; + --post-mobile-file-info-text-color: #333; --post-mobile-abbr-font-size: 10pt; --post-mobile-content-font-size: 11pt;