From 00365086623dd05ea5a81be04790a68fba45bb25 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 3 Jun 2024 19:39:10 +0200
Subject: [PATCH] fix: video thumbnails stuck on loading, post page overflow

---
 src/components/catalog-row/catalog-row.tsx | 4 ++--
 src/views/post-page/post-page.module.css   | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index ab1a9bc6..85c92292 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -55,7 +55,7 @@ export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, lin
       <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} />
+      <video src={`${url}#t=0.001`} onError={handleError} />
     );
   } else if (type === 'webpage' && !hasError) {
     thumbnailComponent = <img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
@@ -69,7 +69,7 @@ export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, lin
 
   return (
     <div className={hasError ? '' : styles.mediaWrapper} style={thumbnailDimensions}>
-      {!isLoaded && !hasError && <span className={styles.loadingSkeleton} />}
+      {!isLoaded && !hasError && type !== 'video' && <span className={styles.loadingSkeleton} />}
       {hasError ? <img className={styles.fileDeleted} src='/assets/filedeleted-res.gif' alt='File deleted' /> : thumbnailComponent}
     </div>
   );
diff --git a/src/views/post-page/post-page.module.css b/src/views/post-page/post-page.module.css
index b4afdfd6..fc21cf30 100644
--- a/src/views/post-page/post-page.module.css
+++ b/src/views/post-page/post-page.module.css
@@ -1,3 +1,4 @@
 .content {
   margin-bottom: 150px;
+  overflow-x: hidden;
 }
\ No newline at end of file