From cf0bd8e5730fb13270abfc728eabb7778636b05e Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Sun, 26 Mar 2023 14:39:09 +0200
Subject: [PATCH] enabled media

---
 src/components/views/Board.jsx               | 22 +++-----------------
 src/components/views/Catalog.jsx             |  5 +----
 src/components/views/Thread.jsx              |  4 ++--
 src/components/views/styles/Board.styled.jsx | 11 +++++++++-
 4 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index b3c92e5a..44387ebe 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -413,20 +413,12 @@ const Board = () => {
                           ) : null}
                           {commentMediaInfo?.type === "video" ? (
                             <span key={`fta-${thread.cid}`} className="file-thumb">
-                              <VideoThumbnail
-                                videoUrl={commentMediaInfo.url}
-                                thumbnailHandler={(thumbnail) => {
-                                  const img = document.querySelector(`img[key="img-${thread.cid}"]`);
-                                  if (img) {
-                                    img.src = thumbnail;
-                                  }
-                                }}
-                              />
+                              <video controls width="" key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
                             </span>
                           ) : null}
                           {commentMediaInfo?.type === "audio" ? (
                             <span key={`fta-${thread.cid}`} className="file-thumb">
-                              <audio key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                              <audio controls key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
                             </span>
                           ) : null}
                         </div>
@@ -700,15 +692,7 @@ const Board = () => {
                         ) : commentMediaInfo.type === "video" ? (
                           <div key={`mob-f-${thread.cid}`} className="file-mobile">
                             <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                              <VideoThumbnail
-                                videoUrl={commentMediaInfo.url}
-                                thumbnailHandler={(thumbnail) => {
-                                  const img = document.querySelector(`img[key="img-${thread.cid}"]`);
-                                  if (img) {
-                                    img.src = thumbnail;
-                                  }
-                                }}
-                              />
+                              <video controls width="" key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
                               <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
                             </span>
                           </div>
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index a7b9e6fe..956b688d 100644
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -370,10 +370,7 @@ const Catalog = () => {
                           />
                         ) : null}
                         {commentMediaInfo?.type === "audio" ? (
-                          <img key={`img-${thread.cid}`} alt="thread" src={commentMediaInfo.url} 
-                          onError={(e) => {
-                            e.target.src = fallbackImgUrl
-                            e.target.onerror = null;}}  />
+                          <audio controls key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
                         ) : null}
                       </Fragment>
                     ) : null}
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 94383837..9fd30307 100644
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -423,7 +423,7 @@ const Thread = () => {
                         ) : null}
                         {commentMediaInfo?.type === "video" ? (
                           <span key={`fta-${comment.cid}`} className="file-thumb">
-                            <video key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                            <video controls key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
                           </span>
                         ) : null}
                         {commentMediaInfo?.type === "audio" ? (
@@ -666,7 +666,7 @@ const Thread = () => {
                       ) : commentMediaInfo.type === "video" ? (
                         <div key={`mob-f-${comment.cid}`} className="file-mobile">
                           <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
-                            <video key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                            <video controls key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
                             <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
                           </span>
                         </div>
diff --git a/src/components/views/styles/Board.styled.jsx b/src/components/views/styles/Board.styled.jsx
index 04ad3771..66d78449 100644
--- a/src/components/views/styles/Board.styled.jsx
+++ b/src/components/views/styles/Board.styled.jsx
@@ -2306,10 +2306,14 @@ export const BoardForm = styled.div`
   
     .file-thumb img {
       border: none;
-      float: left;
       max-width: 250px;
       max-height: 250px;
     }
+
+    .file-thumb video {
+      max-width: 400px;
+      max-height: 400px;
+    }
   }
 
   .thread-mobile {
@@ -2389,6 +2393,11 @@ export const BoardForm = styled.div`
           display: block !important;
           clear: left !important;
         }
+
+        video {
+          max-width: 100%;
+          max-height: 250px;
+        }
       }
   
       img {