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 avatars

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-07-12 22:06:14 +02:00
parent f2e4f14a33
commit 1e16068c3a
3 changed files with 29 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-desktop.tsx
+9 -1
View File
@@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { Comment, useAccount, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
@@ -54,6 +54,7 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
const stateString = useStateString(post);
const isReply = parentCid;
const { showOmittedReplies } = useShowOmittedReplies();
const { imageUrl: avatarImageUrl } = useAuthorAvatar({ author });
const params = useParams();
const location = useLocation();
@@ -99,6 +100,13 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
</span>
{!(isDescription || isRules) && (
<>
{isReply && author?.avatar && (
<Tooltip
children={<span className={styles.authorAvatar} style={{ backgroundImage: `url(${avatarImageUrl})` }} />}
content={avatarImageUrl?.toString() || ''}
showTooltip={!!avatarImageUrl}
/>
)}
(u/
<Tooltip
children={
src/components/post-mobile/post-mobile.tsx
+9 -1
View File
@@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { Comment, useAccount, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
@@ -29,6 +29,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
const { address, shortAddress } = author || {};
const displayName = author?.displayName?.trim();
const authorRole = roles?.[address]?.role;
const { imageUrl: avatarImageUrl } = useAuthorAvatar({ author });
const params = useParams();
const location = useLocation();
@@ -73,6 +74,13 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
</span>
{!(isDescription || isRules) && (
<>
{isReply && author?.avatar && (
<Tooltip
children={<span className={styles.authorAvatar} style={{ backgroundImage: `url(${avatarImageUrl})` }} />}
content={avatarImageUrl?.toString() || ''}
showTooltip={!!avatarImageUrl}
/>
)}
(u/
<Tooltip
children={
src/views/post/post.module.css
+11
View File
@@ -504,6 +504,17 @@
text-decoration: var(--post-content-link-text-decoration-hover);
}
.authorAvatar {
width: 32px;
height: 32px;
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
border-radius: 16px;
}
@media (max-width: 640px) {
.replyQuotePreview {
margin-right: 10px;