From 856616eeecadd79b5a2f30560f8b073a0432b3fe Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 29 May 2024 21:08:03 +0200
Subject: [PATCH] add comments

---
 src/components/catalog-row/catalog-row.tsx     | 1 +
 src/components/comment-media/comment-media.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index 766cd4ff..ab1a9bc6 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -54,6 +54,7 @@ export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, lin
     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`} onLoad={handleLoad} onError={handleError} style={loadingStyle} />
     );
   } else if (type === 'webpage' && !hasError) {
diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
index 0df99bc7..de48e6b6 100644
--- a/src/components/comment-media/comment-media.tsx
+++ b/src/components/comment-media/comment-media.tsx
@@ -49,7 +49,12 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid
   if (type === 'image') {
     thumbnailComponent = <img src={url} alt='' onError={handleError} onClick={() => setShowThumbnail(false)} />;
   } else if (type === 'video') {
-    thumbnailComponent = thumbnail ? <img src={thumbnail} alt='' /> : <video src={`${url}#t=0.001`} onClick={() => setShowThumbnail(false)} />;
+    thumbnailComponent = thumbnail ? (
+      <img src={thumbnail} alt='' />
+    ) : (
+      // show first frame of the video, as a workaround for Safari not loading thumbnails
+      <video src={`${url}#t=0.001`} onClick={() => setShowThumbnail(false)} />
+    );
   } else if (type === 'webpage') {
     thumbnailComponent = <img src={thumbnail} alt='' onClick={() => setShowThumbnail(false)} />;
   } else if (type === 'iframe') {