From 2829e50d06155b37c2f762ec6030eb31dcca2bf2 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Wed, 18 Dec 2024 16:40:45 +0100 Subject: [PATCH] feat: add blur for nsfw media or spoilers --- src/components/header/header.module.css | 1 + .../post/expando/expando.module.css | 120 +++++++++++++++--- src/components/post/expando/expando.tsx | 103 ++++++++------- src/components/post/post.tsx | 84 ++++++++---- src/views/home/home.module.css | 7 + 5 files changed, 226 insertions(+), 89 deletions(-) diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css index e8760a4f..80d49af6 100644 --- a/src/components/header/header.module.css +++ b/src/components/header/header.module.css @@ -178,6 +178,7 @@ .joinButton { order: 3; margin-bottom: 3px; + margin-left: 5px; } } diff --git a/src/components/post/expando/expando.module.css b/src/components/post/expando/expando.module.css index 56a15b0c..28d1fc66 100644 --- a/src/components/post/expando/expando.module.css +++ b/src/components/post/expando/expando.module.css @@ -4,8 +4,7 @@ .expando { display: block; - padding: 5px; - padding-right: 0; + padding-top: 5px; clear: left; position: relative; } @@ -17,19 +16,6 @@ .usertext { unicode-bidi: isolate; font-size: small; - width: 862px; -} - -@media (max-width: 1200px) { - .usertext { - width: calc(100vw - 335px); - } -} - -@media (max-width: 640px) { - .usertext { - width: 100%; - } } .markdown { @@ -59,13 +45,16 @@ .mediaPreview { display: inline-block; + position: relative; + max-width: 100%; + margin-bottom: 5px; } @media (max-width: 1200px) { .mediaPreview img, .mediaPreview video, .mediaPreview iframe { - max-width: calc(100vw - 335px) !important; + max-width: calc(100vw - 435px) !important; } } @@ -136,3 +125,102 @@ padding-right: 5px; } } + +.blurContent { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 1; + cursor: pointer; + background-color: rgba(0, 0, 0, 0.25); + backdrop-filter: blur(40px); +} + +.unblurButton { + color: white; + position: absolute; + font-size: 13px; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + cursor: pointer; + border: 1px solid #ffffff; + padding: 10px; + text-transform: uppercase; +} + +.alwaysShowNsfwButton { + color: white; + position: absolute; + font-size: 12px; + z-index: 1; + top: calc(50% + 45px); + left: 50%; + transform: translate(-50%, -50%); + cursor: pointer; +} + +.alwaysShowNsfwButton:hover { + text-decoration: underline; +} + +.alwaysShowNsfwNotice { + background: #fafaf8; + border: 1px solid #e5e3da; + clear: left; + margin-top: 5px; + padding: 5px 10px; + position: relative; + unicode-bidi: isolate; + font-size: small; + margin-bottom: 10px; +} + +.alwaysShowNsfwNotice p { + color: #222222; + font-weight: 400; + word-wrap: break-word; + line-height: 15px; + margin: 5px 0; + font-size: 12px; +} + +.alwaysShowNsfwNotice button { + background-color: #4f86b5; + color: #ffffff; + margin-bottom: 0; + display: inline-block; + text-align: center; + text-transform: uppercase; + font-weight: bold; + cursor: pointer; + background-image: none; + border: 1px solid transparent; + white-space: nowrap; + padding: 4px 12px 3px; + font-size: 12px; + line-height: 20px; + border-radius: 3px; + margin-left: auto; + display: block; + border-bottom: 2px solid #4270a2; +} + +.alwaysShowNsfwNotice button:hover { + background-color: #4980ae; +} + +@media (max-width: 770px) { + .mediaPreview { + width: 100%; + } +} + +@media (max-width: 640px) { + .expando { + padding-left: 5px; + } +} \ No newline at end of file diff --git a/src/components/post/expando/expando.tsx b/src/components/post/expando/expando.tsx index 425439c9..085e8ec9 100644 --- a/src/components/post/expando/expando.tsx +++ b/src/components/post/expando/expando.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import styles from './expando.module.css'; import Embed from '../embed'; @@ -14,6 +14,7 @@ interface ExpandoProps { expanded: boolean; link?: string; modEditReason?: string; + nsfw?: boolean; removed?: boolean; showContent: boolean; spoiler?: boolean; @@ -28,6 +29,7 @@ const Expando = ({ expanded, link, modEditReason, + nsfw, removed, showContent, spoiler = false, @@ -35,7 +37,14 @@ const Expando = ({ }: ExpandoProps) => { const { t } = useTranslation(); - const [showSpoiler, setShowSpoiler] = useState(false); + const [hideContent, setHideContent] = useState(true); + const [alwaysShowNsfw, setAlwaysShowNsfw] = useState(false); + + useEffect(() => { + if (!expanded) { + setHideContent(true); + } + }, [expanded]); let mediaComponent = null; @@ -53,51 +62,55 @@ const Expando = ({ return (
-
{ - spoiler && !showSpoiler && setShowSpoiler(true); - }} - > - {spoiler && !showSpoiler && !(deleted || removed) && ( - <> -
- {t('view_spoiler')} - - )} - {link && !removed && commentMediaInfo?.type !== 'webpage' && ( -
- { - if (e.button === 0) { - e.preventDefault(); - toggleExpanded && toggleExpanded(); - } - }} - > - {mediaComponent} - -
- )} - {content && showContent && ( -
-
- - {modEditReason && ( -

- {t('mod_reason')}: {modEditReason} -

+ {link && !removed && commentMediaInfo?.type !== 'webpage' && ( +
setHideContent(false)}> + {(nsfw || spoiler) && hideContent && link && commentMediaInfo?.type !== 'webpage' && !(deleted || removed) && ( + <> +
+ {nsfw && spoiler ? 'CLICK TO SEE NSFW SPOILER' : spoiler ? t('view_spoiler') : nsfw ? 'CLICK TO SEE NSFW' : ''} + {nsfw && ( + setAlwaysShowNsfw(!alwaysShowNsfw)}> + Always show NSFW media? + )} - {authorEditReason && !(removed || deleted) && ( -

- {t('edit')}: {authorEditReason} -

- )} -
+ + )} + { + if (e.button === 0) { + e.preventDefault(); + toggleExpanded && toggleExpanded(); + } + }} + > + {mediaComponent} + +
+ )} + {alwaysShowNsfw && ( +
+

Ok, we changed your preferences to always show NSFW media.

+ +
+ )} + {content && showContent && ( +
+
+ + {modEditReason && ( +

+ {t('mod_reason')}: {modEditReason} +

+ )} + {authorEditReason && !(removed || deleted) && ( +

+ {t('edit')}: {authorEditReason} +

+ )}
- )} -
+
+ )}
); }; diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 9d3f23ed..c751d53e 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -3,7 +3,7 @@ import styles from './post.module.css'; import { Link, useLocation, useParams } from 'react-router-dom'; import { Comment, useAuthorAddress, useBlock, useComment, useEditedComment, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks'; import { useTranslation } from 'react-i18next'; -import { isAllView, isHomeView, isPostPageView, isProfileHiddenView, isSubplebbitView } from '../../lib/utils/view-utils'; +import { isAllView, isPostPageView, isProfileHiddenView, isSubplebbitView } from '../../lib/utils/view-utils'; import { getHasThumbnail } from '../../lib/utils/media-utils'; import { getPostScore, formatScore } from '../../lib/utils/post-utils'; import { getHostname } from '../../lib/utils/url-utils'; @@ -20,6 +20,7 @@ import useUpvote from '../../hooks/use-upvote'; import _ from 'lodash'; import useIsMobile from '../../hooks/use-is-mobile'; import { usePinnedPostsStore } from '../../stores/use-pinned-posts-store'; +import useWindowWidth from '../../hooks/use-window-width'; interface PostAuthorProps { authorAddress: string; @@ -122,7 +123,6 @@ const Post = ({ index, post = {} }: PostProps) => { const isInAllView = isAllView(location.pathname); const isInPostPageView = isPostPageView(location.pathname, params); const isInProfileHiddenView = isProfileHiddenView(location.pathname); - const isInHomeView = isHomeView(location.pathname); const isInSubplebbitView = isSubplebbitView(location.pathname, params); const commentMediaInfo = useCommentMediaInfo(post); @@ -161,9 +161,10 @@ const Post = ({ index, post = {} }: PostProps) => { }; const isMobile = useIsMobile(); + const windowWidth = useWindowWidth(); const pinnedPostsCount = usePinnedPostsStore((state) => state.pinnedPostsCount); let rank = (index ?? 0) + 1; - if (!isInHomeView) { + if (isInSubplebbitView) { rank = rank - pinnedPostsCount; } @@ -233,16 +234,17 @@ const Post = ({ index, post = {} }: PostProps) => { )}

- {(!(commentMediaInfo?.type === 'webpage') || (commentMediaInfo?.type === 'webpage' && content?.trim().length > 0)) && ( - - )} + {(!(commentMediaInfo?.type === 'webpage') || (commentMediaInfo?.type === 'webpage' && content?.trim().length > 0)) && + !(isInPostPageView && !link && content?.trim().length > 0) && ( + + )}
{t('submitted')} {getFormattedTimeAgo(timestamp)}{' '} {edit && isInPostPageView && {t('last_edited', { timestamp: getFormattedTimeAgo(edit.timestamp) })}}{' '} @@ -295,23 +297,49 @@ const Post = ({ index, post = {} }: PostProps) => { subplebbitAddress={subplebbitAddress} />
+ {!(windowWidth < 770) && ( + <> + {isEditing ? ( + + ) : ( + + )} + + )}
- {isEditing ? ( - - ) : ( - + {windowWidth < 770 && ( + <> + {isEditing ? ( + + ) : ( + + )} + )}
diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css index 50cbb925..9de76656 100644 --- a/src/views/home/home.module.css +++ b/src/views/home/home.module.css @@ -11,6 +11,13 @@ padding-bottom: 15px; } +@media (max-width: 640px) { + .morePostsSuggestion { + font-size: 11px; + padding-bottom: 10px; + } +} + .morePostsSuggestion a, .link { color: var(--text-primary); text-decoration: none;