From 6da0790367e75afb4584f41ad11325c0e255fe2d Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Wed, 18 Oct 2023 19:54:23 +0200
Subject: [PATCH] perf(media): use else if statements instead of dynamic jsx
 object

---
 src/components/expando/expando.tsx     | 24 ++++++++++++++----------
 src/components/thumbnail/thumbnail.tsx | 23 ++++++++++++-----------
 src/lib/utils.ts                       |  2 +-
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/components/expando/expando.tsx b/src/components/expando/expando.tsx
index caf5fe6b..f86ceee0 100644
--- a/src/components/expando/expando.tsx
+++ b/src/components/expando/expando.tsx
@@ -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>
       )}
diff --git a/src/components/thumbnail/thumbnail.tsx b/src/components/thumbnail/thumbnail.tsx
index d8b1c788..2f84a4d0 100644
--- a/src/components/thumbnail/thumbnail.tsx
+++ b/src/components/thumbnail/thumbnail.tsx
@@ -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>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index df6779ca..fd431636 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -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;