mirror/seedit
1
0
Fork 0
mirror of https://github.com/plebbit/seedit.git synced 2026-02-15 08:21:19 -05:00
Code Issues Packages Projects Releases Wiki Activity

perf(media): use else if statements instead of dynamic jsx object

Browse Source
This commit is contained in:
plebeius.eth
2023-10-18 19:54:23 +02:00
parent 7d0136152a
commit 6da0790367
3 changed files with 27 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/expando/expando.tsx
View File

@@ -4,7 +4,6 @@ import utils from '../../lib/utils';
import { Link } from 'react-router-dom';
import styles from './expando.module.css';
import Embed from '../embed';
import { CommentMediaInfo } from '../../lib/utils';
interface ExpandoProps {
commentCid: string;
@@ -16,21 +15,26 @@ const Expando: FC<ExpandoProps> = ({ commentCid, expanded }) => {
const { cid, content, link, subplebbitAddress } = comment || {};
const commentMediaInfo = utils.getCommentMediaInfoMemoized(comment);
// prettier-ignore
const mediaComponents: { [key in CommentMediaInfo['type']]?: JSX.Element | null } = {
'image': <img src={commentMediaInfo?.url} alt='' />,
'video': expanded ? <video src={commentMediaInfo?.url} controls /> : null,
'webpage': <img src={commentMediaInfo?.thumbnail} alt='' />,
'audio': expanded ? <audio src={commentMediaInfo?.url} controls /> : null,
'iframe': expanded ? <Embed url={commentMediaInfo?.url} /> : null,
};
let mediaComponent = null;
if (commentMediaInfo?.type === 'image') {
mediaComponent = <img src={commentMediaInfo.url} alt='' />;
} else if (commentMediaInfo?.type === 'video' && expanded) {
mediaComponent = <video src={commentMediaInfo.url} controls />;
} else if (commentMediaInfo?.type === 'webpage') {
mediaComponent = <img src={commentMediaInfo.thumbnail} alt='' />;
} else if (commentMediaInfo?.type === 'audio' && expanded) {
mediaComponent = <audio src={commentMediaInfo.url} controls />;
} else if (commentMediaInfo?.type === 'iframe' && expanded) {
mediaComponent = <Embed url={commentMediaInfo.url} />;
}
return (
<div className={expanded ? styles.expando : styles.expandoHidden}>
{link && (
<div className={styles.mediaPreview}>
<Link to={`p/${subplebbitAddress}/c/${cid}`} onClick={(e) => e.preventDefault()}>
{commentMediaInfo?.type ? mediaComponents[commentMediaInfo.type] : null}
{mediaComponent}
</Link>
</div>
)}

23
src/components/thumbnail/thumbnail.tsx
View File

@@ -3,7 +3,6 @@ import styles from './thumbnail.module.css';
import { useComment } from '@plebbit/plebbit-react-hooks';
import { Link } from 'react-router-dom';
import utils from '../../lib/utils';
import { CommentMediaInfo } from '../../lib/utils';
interface ThumbnailProps {
commentCid: string;
@@ -29,21 +28,23 @@ const Thumbnail: FC<ThumbnailProps> = ({ commentCid }) => {
hasLinkDimensions = false;
}
// prettier-ignore
const mediaComponents: { [key in CommentMediaInfo['type']]?: JSX.Element | null } = {
'image': <img src={commentMediaInfo?.url} alt='thumbnail' onError={(e) => { e.currentTarget.alt = ''; }} />,
'video': commentMediaInfo?.thumbnail ?
<img src={commentMediaInfo.thumbnail} alt='thumbnail' onError={(e) => { e.currentTarget.alt = ''; }} /> :
<video src={commentMediaInfo?.url} />,
'webpage': <img src={commentMediaInfo?.thumbnail} alt='thumbnail' onError={(e) => { e.currentTarget.alt = ''; }} />,
'iframe': iframeThumbnail ? <img src={iframeThumbnail} alt='thumbnail' onError={(e) => { e.currentTarget.alt = ''; }} /> : null,
};
let mediaComponent = null;
if (commentMediaInfo?.type === 'image') {
mediaComponent = <img src={commentMediaInfo.url} alt='' />;
} else if (commentMediaInfo?.type === 'video') {
mediaComponent = commentMediaInfo.thumbnail ? <img src={commentMediaInfo.thumbnail} alt='' /> : <video src={commentMediaInfo.url} />;
} else if (commentMediaInfo?.type === 'webpage') {
mediaComponent = <img src={commentMediaInfo.thumbnail} alt='' />;
} else if (commentMediaInfo?.type === 'iframe') {
mediaComponent = iframeThumbnail ? <img src={iframeThumbnail} alt='' /> : null;
}
return (
<span style={{ width: displayWidth, height: displayHeight }} className={styles.thumbnail}>
<span className={hasLinkDimensions ? styles.transparentThumbnailWrapper : styles.thumbnailWrapper}>
<Link to={`p/${subplebbitAddress}/c/${cid}`} onClick={(e) => e.preventDefault()}>
{commentMediaInfo?.type ? mediaComponents[commentMediaInfo.type] : null}
{mediaComponent}
</Link>
</span>
</span>

2
src/lib/utils.ts
View File

@@ -4,7 +4,7 @@ import extName from 'ext-name';
import { Comment } from '@plebbit/plebbit-react-hooks';
import { canEmbed } from '../components/embed/embed';
export interface CommentMediaInfo {
interface CommentMediaInfo {
url: string;
type: string;
thumbnail?: string;