mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
301 lines
12 KiB
TypeScript
301 lines
12 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Link, useLocation, useParams } from 'react-router-dom';
|
|
import { Comment, useComment } from '@plebbit/plebbit-react-hooks';
|
|
import { useFloating, offset, shift, size, autoUpdate, Placement } from '@floating-ui/react';
|
|
import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
|
|
import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
|
|
import { isAllView } from '../../lib/utils/view-utils';
|
|
import useCatalogStyleStore from '../../stores/use-catalog-style-store';
|
|
import useEditCommentPrivileges from '../../hooks/use-author-privileges';
|
|
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
|
|
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
|
|
import useHide from '../../hooks/use-hide';
|
|
import useWindowWidth from '../../hooks/use-window-width';
|
|
import PostMenuDesktop from '../post-desktop/post-menu-desktop';
|
|
import styles from './catalog-row.module.css';
|
|
import Markdown from '../markdown';
|
|
import _ from 'lodash';
|
|
|
|
interface CatalogPostMediaProps {
|
|
commentMediaInfo: any;
|
|
isOutOfFeed?: boolean;
|
|
linkWidth?: number;
|
|
linkHeight?: number;
|
|
}
|
|
|
|
export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, linkHeight }: CatalogPostMediaProps) => {
|
|
const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
|
|
const iframeThumbnail = patternThumbnailUrl || thumbnail;
|
|
const gifFrameUrl = useFetchGifFirstFrame(type === 'gif' ? url : undefined);
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
const [hasError, setHasError] = useState(false);
|
|
const handleLoad = () => setIsLoaded(true);
|
|
const handleError = () => setHasError(true);
|
|
const loadingStyle = { display: isLoaded ? 'block' : 'none' };
|
|
|
|
const { imageSize } = useCatalogStyleStore();
|
|
|
|
let displayWidth, displayHeight;
|
|
const maxThumbnailSize = imageSize === 'Large' ? 250 : 150;
|
|
|
|
if (linkWidth && linkHeight) {
|
|
let scale = Math.min(1, maxThumbnailSize / Math.max(linkWidth, linkHeight));
|
|
displayWidth = `${linkWidth * scale}px`;
|
|
displayHeight = `${linkHeight * scale}px`;
|
|
} else {
|
|
displayWidth = `${maxThumbnailSize}px`;
|
|
displayHeight = `${maxThumbnailSize}px`;
|
|
}
|
|
|
|
if (type === 'audio' || isOutOfFeed) {
|
|
displayWidth = 'unset';
|
|
displayHeight = 'unset';
|
|
}
|
|
|
|
const maxWidth = imageSize === 'Large' ? '250px' : '150px';
|
|
const maxHeight = imageSize === 'Large' ? '250px' : '150px';
|
|
|
|
const CSSProperties = {
|
|
'--width': displayWidth,
|
|
'--height': displayHeight,
|
|
'--maxWidth': maxWidth,
|
|
'--maxHeight': maxHeight,
|
|
} as React.CSSProperties;
|
|
|
|
let thumbnailComponent: React.ReactNode = null;
|
|
|
|
if (type === 'image' && !hasError) {
|
|
thumbnailComponent = <img src={url} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
|
|
} else if (type === 'video' && !hasError) {
|
|
thumbnailComponent = thumbnail ? (
|
|
<img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />
|
|
) : (
|
|
// show first frame of the video, as a workaround for Safari not loading thumbnails
|
|
<video src={`${url}#t=0.001`} onError={handleError} />
|
|
);
|
|
} else if (type === 'webpage' && !hasError) {
|
|
thumbnailComponent = <img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
|
|
} else if (type === 'iframe' && iframeThumbnail && !hasError) {
|
|
thumbnailComponent = <img src={iframeThumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
|
|
} else if (type === 'gif' && gifFrameUrl && !hasError) {
|
|
thumbnailComponent = <img src={gifFrameUrl} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
|
|
} else if (type === 'audio') {
|
|
thumbnailComponent = <audio src={url} controls />;
|
|
}
|
|
|
|
return (
|
|
<div className={hasError ? '' : styles.mediaWrapper} style={CSSProperties}>
|
|
{!isLoaded && !hasError && type !== 'video' && type !== 'audio' && <span className={styles.loadingSkeleton} />}
|
|
{hasError ? <img className={styles.fileDeleted} src='assets/filedeleted-res.gif' alt='' /> : thumbnailComponent}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const CatalogPost = ({ post }: { post: Comment }) => {
|
|
const { t } = useTranslation();
|
|
const {
|
|
author,
|
|
cid,
|
|
content,
|
|
isDescription,
|
|
isRules,
|
|
lastChildCid,
|
|
link,
|
|
linkHeight,
|
|
linkWidth,
|
|
locked,
|
|
pinned,
|
|
replyCount,
|
|
spoiler,
|
|
subplebbitAddress,
|
|
timestamp,
|
|
title,
|
|
} = post || {};
|
|
const linkCount = useCountLinksInReplies(post);
|
|
const commentMediaInfo = getCommentMediaInfo(post);
|
|
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
|
|
const { hidden } = useHide({ cid });
|
|
|
|
const location = useLocation();
|
|
const isInAllView = isAllView(location.pathname, useParams());
|
|
|
|
const postLink = isInAllView && isDescription ? `/p/all/description` : `/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${cid}`}`;
|
|
|
|
const threadIcons = (
|
|
<div className={styles.threadIcons}>
|
|
{pinned && <span className={styles.stickyIcon} title={t('sticky')} />}
|
|
{locked && <span className={styles.closedIcon} title={t('closed')} />}
|
|
</div>
|
|
);
|
|
|
|
const [hoveredCid, setHoveredCid] = useState<string | null>(null);
|
|
const [showPortal, setShowPortal] = useState<boolean>(false);
|
|
const placementRef = useRef<Placement>('right-start');
|
|
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
const windowWidth = useWindowWidth();
|
|
|
|
const { refs, floatingStyles, update } = useFloating({
|
|
open: showPortal,
|
|
placement: placementRef.current,
|
|
middleware: [
|
|
shift({ padding: 10 }),
|
|
offset({ mainAxis: 5 }),
|
|
size({
|
|
apply({ elements }) {
|
|
const referenceElement = refs.reference.current;
|
|
if (referenceElement) {
|
|
const availableWidthToTheRight = windowWidth - (referenceElement.getBoundingClientRect().left + referenceElement.getBoundingClientRect().width);
|
|
const availableWidthToTheLeft = referenceElement.getBoundingClientRect().left;
|
|
const minWidth = windowWidth * 0.25;
|
|
|
|
if (availableWidthToTheRight >= minWidth) {
|
|
placementRef.current = 'right-start';
|
|
elements.floating.style.maxWidth = `${availableWidthToTheRight - 40}px`;
|
|
} else if (availableWidthToTheLeft >= minWidth) {
|
|
placementRef.current = 'left-start';
|
|
elements.floating.style.maxWidth = `${availableWidthToTheLeft - 25}px`;
|
|
} else if (availableWidthToTheRight > availableWidthToTheLeft) {
|
|
placementRef.current = 'right-start';
|
|
elements.floating.style.maxWidth = `${availableWidthToTheRight - 40}px`;
|
|
} else {
|
|
placementRef.current = 'left-start';
|
|
elements.floating.style.maxWidth = `${availableWidthToTheLeft - 25}px`;
|
|
}
|
|
}
|
|
},
|
|
}),
|
|
],
|
|
whileElementsMounted: autoUpdate,
|
|
});
|
|
|
|
useEffect(() => {
|
|
update();
|
|
}, [update, windowWidth]);
|
|
|
|
const lastReply = useComment({ commentCid: lastChildCid });
|
|
|
|
const { isCommentAuthorMod: isCatalogPostAuthorMod, commentAuthorRole: catalogPostAuthorRole } = useEditCommentPrivileges({
|
|
commentAuthorAddress: author?.address,
|
|
subplebbitAddress,
|
|
});
|
|
const { isCommentAuthorMod: isLastReplyAuthorMod, commentAuthorRole: lastReplyAuthorRole } = useEditCommentPrivileges({
|
|
commentAuthorAddress: lastReply?.author?.address,
|
|
subplebbitAddress,
|
|
});
|
|
|
|
const postContent = (
|
|
<div className={`${styles.teaser} ${hidden && styles.hidden}`}>{hidden ? <b>({t('hidden')})</b> : <Markdown title={title} content={content} />}</div>
|
|
);
|
|
|
|
const { imageSize, showOPComment } = useCatalogStyleStore();
|
|
const maxWidth = imageSize === 'Large' ? '250px' : '150px';
|
|
const maxHeight = imageSize === 'Large' ? '250px' : '150px';
|
|
const CSSProperties = {
|
|
'--maxWidth': maxWidth,
|
|
'--maxHeight': maxHeight,
|
|
} as React.CSSProperties;
|
|
|
|
const isTextOnlyThread = !hasThumbnail || isRules;
|
|
|
|
return (
|
|
<>
|
|
<div className={`${styles.post} ${imageSize === 'Large' ? styles.large : ''}`} style={CSSProperties}>
|
|
<div onMouseOver={() => setHoveredCid(isDescription ? 'd' : isRules ? 'r' : cid)} onMouseLeave={() => setHoveredCid(null)}>
|
|
{hidden ? (
|
|
<Link to={postLink}>
|
|
<span className={styles.hiddenThumbnail} />
|
|
</Link>
|
|
) : hasThumbnail ? (
|
|
<Link to={postLink}>
|
|
<div
|
|
className={`${styles.mediaPaddingWrapper} ${hidden && styles.hidden}`}
|
|
ref={refs.setReference}
|
|
onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))}
|
|
onMouseLeave={() => {
|
|
setShowPortal(false);
|
|
if (timeoutRef.current) {
|
|
clearTimeout(timeoutRef.current);
|
|
timeoutRef.current = null;
|
|
}
|
|
}}
|
|
>
|
|
{threadIcons}
|
|
{spoiler ? (
|
|
<img src='assets/spoiler.png' alt='' />
|
|
) : (
|
|
<CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />
|
|
)}
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
threadIcons
|
|
)}
|
|
<div className={styles.meta} title='(R)eplies / (L)ink Replies'>
|
|
R: <b>{replyCount || '0'}</b>
|
|
{linkCount > 0 && (
|
|
<span>
|
|
{' '}
|
|
/ L: <b>{linkCount}</b>
|
|
</span>
|
|
)}
|
|
<span className={`${styles.postMenu} ${hoveredCid && styles.postMenuVisible}`}>
|
|
<PostMenuDesktop post={post} />
|
|
</span>
|
|
</div>
|
|
{(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}
|
|
</div>
|
|
</div>
|
|
{(hoveredCid === cid || isDescription) &&
|
|
showPortal &&
|
|
createPortal(
|
|
<div className={styles.postPreview} ref={refs.setFloating} style={floatingStyles}>
|
|
{title ? (
|
|
<>
|
|
<span className={styles.postSubject}>{title} </span>
|
|
{t('by')}
|
|
</>
|
|
) : (
|
|
t('posted_by')
|
|
)}{' '}
|
|
<span className={`${styles.postAuthor} ${(isCatalogPostAuthorMod || isRules || isDescription) && styles.capcode}`}>
|
|
{author?.displayName || _.capitalize(t('anonymous'))}
|
|
{isCatalogPostAuthorMod && <span className='capitalize'>{` ## Board ${catalogPostAuthorRole}`}</span>}
|
|
</span>
|
|
<span className={styles.postAgo}> {getFormattedTimeAgo(timestamp)}</span>
|
|
{replyCount > 0 && (
|
|
<div className={styles.postLast}>
|
|
{t('last_reply_by')}{' '}
|
|
<span className={`${styles.postAuthor} ${isLastReplyAuthorMod && styles.capcode}`}>
|
|
{lastReply?.author?.displayName || _.capitalize(t('anonymous'))}
|
|
{isLastReplyAuthorMod && ` ## Board ${lastReplyAuthorRole}`}
|
|
</span>
|
|
<span className={styles.postAgo}> {getFormattedTimeAgo(lastReply?.timestamp)}</span>
|
|
</div>
|
|
)}
|
|
</div>,
|
|
document.body,
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
interface CatalogRowProps {
|
|
index?: number;
|
|
row: Comment[];
|
|
}
|
|
|
|
const CatalogRow = ({ row }: CatalogRowProps) => {
|
|
return (
|
|
<div className={styles.row}>
|
|
{row.map((post, index) => (
|
|
<CatalogPost key={index} post={post} />
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CatalogRow;
|