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

fix(comment media): only show link if valid, show webpage links on mobile

Browse Source
This commit is contained in:
plebeius.eth
2024-04-16 21:37:42 +02:00
parent 2804b22196
commit b778b88708
2 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/post.tsx
+12 -8
View File
@@ -12,6 +12,7 @@ import useWindowWidth from '../../hooks/use-window-width';
import styles from './post.module.css';
import Markdown from '../markdown';
import CommentMedia from '../comment-media';
import { canEmbed } from '../embed';
interface PostProps {
index?: number;
@@ -35,6 +36,7 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
const commentMediaInfo = getCommentMediaInfo(post);
const { type, url } = commentMediaInfo || {};
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true);
@@ -56,15 +58,15 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
<span className={`${styles.hideButton} ${styles.hideThread}`} />
</span>
)}
{commentMediaInfo?.url && (
{url && (
<div className={styles.file}>
<div className={styles.fileText}>
{t('link')}:{' '}
<a href={commentMediaInfo?.url} target='_blank' rel='noopener noreferrer'>
{commentMediaInfo.url.length > 30 ? commentMediaInfo?.url?.slice(0, 30) + '...' : commentMediaInfo?.url}
<a href={url} target='_blank' rel='noopener noreferrer'>
{url.length > 30 ? url.slice(0, 30) + '...' : url}
</a>{' '}
({commentMediaInfo?.type})
{!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video' || commentMediaInfo?.type === 'audio') && (
({type})
{!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
<span>
{' '}
[
@@ -191,6 +193,8 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
const authorRole = roles?.[address]?.role;
const commentMediaInfo = getCommentMediaInfo(reply);
const { type, url } = commentMediaInfo || {};
const embedUrl = url && new URL(url);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true);
@@ -240,14 +244,14 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
</span>
</span>
</div>
{link && (
{url && (
<div className={styles.file}>
<div className={styles.fileText}>
{t('link')}:{' '}
<a href={link} target='_blank' rel='noopener noreferrer'>
{link.length > 30 ? link?.slice(0, 30) + '...' : link}
</a>
{!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video' || commentMediaInfo?.type === 'audio') && (
{!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
<span>
{' '}
[
@@ -257,7 +261,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
]
</span>
)}
{showThumbnail && !hasThumbnail && (
{showThumbnail && !hasThumbnail && embedUrl && canEmbed(embedUrl) && (
<span>
{' '}
[