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(post): add deleted and removed styling, mod reason, file deleted

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-05-31 10:14:44 +02:00
parent 743bd9b4c8
commit 05a8e91331
4 changed files with 56 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/comment-media/comment-media.tsx
+5 -7
View File
@@ -9,6 +9,7 @@ import Embed, { canEmbed } from '../embed';
interface MediaProps {
commentMediaInfo?: CommentMediaInfo;
isDeleted?: boolean;
isOutOfFeed?: boolean; // virtuoso wrapper unneeded
isReply: boolean;
linkHeight?: number;
@@ -17,7 +18,7 @@ interface MediaProps {
setShowThumbnail: (showThumbnail: boolean) => void;
}
const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, setShowThumbnail }: MediaProps) => {
const Thumbnail = ({ commentMediaInfo, isDeleted, isOutOfFeed, isReply, linkHeight, linkWidth, setShowThumbnail }: MediaProps) => {
const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
const [hasError, setHasError] = useState(false);
const handleError = () => setHasError(true);
@@ -64,16 +65,12 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid
thumbnailComponent = <audio src={url} controls />;
}
if (hasError) {
thumbnailComponent = <img className={styles.fileDeleted} src='/assets/filedeleted-res.gif' alt='File deleted' />;
}
const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
const linkWithoutThumbnail = url && new URL(url);
return hasError ? (
return hasError || isDeleted ? (
<img className={styles.fileDeleted} src='/assets/filedeleted-res.gif' alt='File deleted' />
) : isOutOfFeed ? (
<span className={styles.subplebbitAvatar}>{thumbnailComponent}</span>
@@ -136,7 +133,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
);
};
const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
const CommentMedia = ({ commentMediaInfo, isDeleted, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
const { t } = useTranslation();
const isMobile = useIsMobile();
const { type, url } = commentMediaInfo || {};
@@ -147,6 +144,7 @@ const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, link
{url && (
<Thumbnail
commentMediaInfo={commentMediaInfo}
isDeleted={isDeleted}
isOutOfFeed={isOutOfFeed}
isReply={isReply}
linkHeight={linkHeight}
src/components/post/post-desktop/post-desktop.tsx
+23 -4
View File
@@ -2,7 +2,7 @@ import { useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { useLocation, useParams } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { useAccount, useBlock } from '@plebbit/plebbit-react-hooks';
import { useAccount, useBlock, useEditedComment } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../post.module.css';
import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils';
@@ -111,7 +111,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
const PostMedia = ({ post }: PostProps) => {
const { t } = useTranslation();
const { link, linkHeight, linkWidth, parentCid } = post || {};
const { deleted, link, linkHeight, linkWidth, parentCid, removed } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const commentMediaInfo = getCommentMediaInfo(post);
const { type, url } = commentMediaInfo || {};
@@ -155,6 +155,7 @@ const PostMedia = ({ post }: PostProps) => {
<CommentMedia
commentMediaInfo={commentMediaInfo}
isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
isDeleted={removed || deleted}
isReply={isReply}
linkHeight={linkHeight}
linkWidth={linkWidth}
@@ -168,7 +169,7 @@ const PostMedia = ({ post }: PostProps) => {
};
const PostMessage = ({ post }: PostProps) => {
const { cid, content, parentCid, postCid, state, subplebbitAddress } = post || {};
const { cid, content, deleted, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {};
const params = useParams();
const location = useLocation();
@@ -195,7 +196,20 @@ const PostMessage = ({ post }: PostProps) => {
<br />
</>
)}
<Markdown content={displayContent} />
{removed ? (
<span className={styles.removedContent}>(THIS POST WAS REMOVED)</span>
) : deleted ? (
<span className={styles.removedContent}>User deleted this post.</span>
) : (
<Markdown content={displayContent} />
)}
{(removed || deleted) && reason && (
<span>
<br />
<br />
reason: {reason}
</span>
)}
{!isReply && content.length > 1000 && !isInPostView && (
<span className={styles.abbr}>
<br />
@@ -213,6 +227,11 @@ const PostMessage = ({ post }: PostProps) => {
};
const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => {
// handle pending mod or author edit
const { editedComment } = useEditedComment({ comment: post });
if (editedComment) {
post = editedComment;
}
const { cid, content, link, pinned, replyCount, subplebbitAddress } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
src/components/post/post-mobile/post-mobile.tsx
+23 -4
View File
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { useAccount } from '@plebbit/plebbit-react-hooks';
import { useAccount, useEditedComment } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../post.module.css';
import { getCommentMediaInfo, getHasThumbnail } from '../../../lib/utils/media-utils';
@@ -19,7 +19,7 @@ import _ from 'lodash';
const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
const { t } = useTranslation();
const { author, cid, link, linkHeight, linkWidth, locked, parentCid, pinned, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
const { author, cid, deleted, link, linkHeight, linkWidth, locked, parentCid, pinned, removed, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const { address, displayName, shortAddress } = author || {};
@@ -98,6 +98,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
<CommentMedia
commentMediaInfo={commentMediaInfo}
isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
isDeleted={removed || deleted}
isReply={isReply}
linkHeight={linkHeight}
linkWidth={linkWidth}
@@ -110,7 +111,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
};
const PostMessageMobile = ({ post }: PostProps) => {
const { cid, content, parentCid, postCid, state, subplebbitAddress } = post || {};
const { cid, content, deleted, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {};
const params = useParams();
const location = useLocation();
@@ -138,7 +139,20 @@ const PostMessageMobile = ({ post }: PostProps) => {
<br />
</>
)}
<Markdown content={displayContent} />
{removed ? (
<span className={styles.removedContent}>(THIS POST WAS REMOVED)</span>
) : deleted ? (
<span className={styles.removedContent}>User deleted this post.</span>
) : (
<Markdown content={displayContent} />
)}
{(removed || deleted) && reason && (
<span>
<br />
<br />
reason: {reason}
</span>
)}
{!isReply && content.length > 1000 && !isInPostView && (
<span className={styles.abbr}>
<br />
@@ -157,6 +171,11 @@ const PostMessageMobile = ({ post }: PostProps) => {
};
const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => {
// handle pending mod or author edit
const { editedComment } = useEditedComment({ comment: post });
if (editedComment) {
post = editedComment;
}
const { t } = useTranslation();
const { cid, content, pinned, replyCount, subplebbitAddress } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
src/components/post/post.module.css
+5
View File
@@ -392,6 +392,11 @@
cursor: pointer;
}
.removedContent {
font-weight: 700;
color: red;
}
@media (max-width: 640px) {
.postDesktop {
display: none;