enabled media

src/components/views/Board.jsx

@@ -413,20 +413,12 @@ const Board = () => {
                           ) : null}
                           {commentMediaInfo?.type === "video" ? (
                             <span key={`fta-${thread.cid}`} className="file-thumb">
-                              <VideoThumbnail
+                              <video controls width="" key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                                videoUrl={commentMediaInfo.url}
-                                thumbnailHandler={(thumbnail) => {
-                                  const img = document.querySelector(`img[key="img-${thread.cid}"]`);
-                                  if (img) {
-                                    img.src = thumbnail;
-                                  }
-                                }}
-                              />
                             </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
+                              <video controls width="" key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                                videoUrl={commentMediaInfo.url}
-                                thumbnailHandler={(thumbnail) => {
-                                  const img = document.querySelector(`img[key="img-${thread.cid}"]`);
-                                  if (img) {
-                                    img.src = thumbnail;
-                                  }
-                                }}
-                              />
                               <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
                             </span>
                           </div>

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} 
+                          <audio controls key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                          onError={(e) => {
-                            e.target.src = fallbackImgUrl
-                            e.target.onerror = null;}}  />
                         ) : null}
                       </Fragment>
                     ) : null}

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>

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 {