External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add spoiler image

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-19 18:50:24 +02:00
parent be2cd521a3
commit 9f5f92f714
7 changed files with 16 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/spoiler.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

src/components/catalog-row/catalog-row.module.css
-12
View File
@@ -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;
src/components/catalog-row/catalog-row.tsx
+1 -3
View File
@@ -223,9 +223,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
>
{threadIcons}
{spoiler ? (
<span className={styles.spoilerThumbnail}>
<span className={styles.spoilerText}>{t('spoiler')}</span>
</span>
<img src='/assets/spoiler.png' alt='' />
) : (
<CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />
)}
src/components/comment-media/comment-media.module.css
+4 -7
View File
@@ -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 {
src/components/comment-media/comment-media.tsx
+3 -5
View File
@@ -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 ? (
<img className={styles.fileDeleted} src='/assets/filedeleted-res.gif' alt='File deleted' />
) : spoiler ? (
<span className={styles.spoiler} style={{ width: maxThumbnailSize, height: maxThumbnailSize }} onClick={() => setShowThumbnail(false)}>
<span className={styles.spoilerText}>[{t('view_spoiler')}]</span>
</span>
<img className={styles.spoiler} src='/assets/spoiler.png' alt='' onClick={() => setShowThumbnail(false)} />
) : isOutOfFeed ? (
<span className={`${isFloatingEmbed ? styles.floatingEmbed : styles.subplebbitAvatar}`}>{thumbnailComponent}</span>
) : isMobile || isReply ? (
@@ -154,7 +152,7 @@ const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail,
<span className={styles.content}>
<span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
{url && <Thumbnail commentMediaInfo={commentMediaInfo} isFloatingEmbed={isFloatingEmbed} post={post} setShowThumbnail={setShowThumbnail} />}
{isMobile && type && <div className={styles.fileInfo}>{getDisplayMediaInfoType(type, t)}</div>}
{isMobile && type && <div className={styles.fileInfo}>{`${post?.spoiler && `${t('spoiler')} - `} ${getDisplayMediaInfoType(type, t)}`}</div>}
</span>
{!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={post?.parentCid} setShowThumbnail={setShowThumbnail} />}
</span>
src/components/post-desktop/post-desktop.tsx
+3 -2
View File
@@ -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) => {
<div className={styles.fileText}>
{t('link')}:{' '}
<a href={url} target='_blank' rel='noopener noreferrer'>
{url && url.length > 30 ? url.slice(0, 30) + '...' : url}
{spoiler ? _.capitalize(t('spoiler')) : url && url.length > 30 ? url.slice(0, 30) + '...' : url}
</a>{' '}
({type && _.lowerCase(getDisplayMediaInfoType(type, t))})
{!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
src/themes.css
+5
View File
@@ -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;