styled media elements

package.json

@@ -34,7 +34,6 @@
     "react-scripts": "5.0.1",
     "react-toastify": "^9.1.1",
     "react-tooltip": "^5.10.0",
-    "react-video-thumbnail": "^0.1.3",
     "styled-components": "^5.3.9",
     "web-vitals": "^3.3.0",
     "zustand": "^4.3.6"

src/components/views/Catalog.jsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect, Fragment } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import InfiniteScroll from 'react-infinite-scroller';
 import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
-import VideoThumbnail from 'react-video-thumbnail';
 import { debounce } from 'lodash';
 import useAppStore from '../../useAppStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from './styles/Board.styled';
@@ -347,30 +346,33 @@ const Catalog = () => {
                       {commentMediaInfo?.url ? (
                         <Fragment key="f-catalog">
                           {commentMediaInfo?.type === "webpage" ? (
-                            <img key={`img-${thread.cid}`} alt="thread" src={commentMediaInfo.url} 
+                            <img key={`img-${thread.cid}`} alt="thread" 
+                            src={commentMediaInfo.url} 
                             onError={(e) => {
                               e.target.src = fallbackImgUrl
                               e.target.onerror = null;}}  />
                           ) : null}
                           {commentMediaInfo?.type === "image" ? (
-                            <img key={`img-${thread.cid}`} alt="thread" src={commentMediaInfo.url} 
+                            <img key={`img-${thread.cid}`} alt="thread" 
+                            src={commentMediaInfo.url} 
                             onError={(e) => {
                               e.target.src = fallbackImgUrl
                               e.target.onerror = null;}}  />
                           ) : null}
                           {commentMediaInfo?.type === "video" ? (
-                            <VideoThumbnail
+                            <video key={`fti-${thread.cid}`} 
-                              videoUrl={commentMediaInfo.url}
+                            src={commentMediaInfo.url} 
-                              thumbnailHandler={(thumbnail) => {
+                            alt={commentMediaInfo.type} 
-                                const img = document.querySelector(`img[key="img-${thread.cid}"]`);
+                            style={{ pointerEvents: "none" }}
-                                if (img) {
+                            onError={(e) => e.target.src = fallbackImgUrl} /> 
-                                  img.src = thumbnail;
-                                }
-                              }}
-                            />
                           ) : null}
                           {commentMediaInfo?.type === "audio" ? (
-                            <audio controls 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} 
+                            style={{ pointerEvents: "none" }}
+                            onError={(e) => e.target.src = fallbackImgUrl} />
                           ) : null}
                         </Fragment>
                       ) : null}

src/components/views/styles/Board.styled.jsx

@@ -2304,16 +2304,11 @@ export const BoardForm = styled.div`
       margin: 3px 20px 5px 20px;
     }
   
-    .file-thumb img {
+    .file-thumb img, video, audio {
       border: none;
       max-width: 250px;
       max-height: 250px;
     }
-
-    .file-thumb video {
-      max-width: 400px;
-      max-height: 400px;
-    }
   }
 
   .thread-mobile {

src/components/views/styles/Catalog.styled.jsx

@@ -18,9 +18,12 @@ export const Threads = styled.div`
     position: relative;
   }
 
-  img {
+  video, audio, img {
     max-width: 150px;
     max-height: 150px;
+  }
+
+  img {
     display: inline;
     margin: auto;
     box-shadow: 0 0 5px rgba(0, 0, 0, .25);

yarn.lock

@@ -2468,21 +2468,6 @@
   dependencies:
     debug "4.3.3"
 
-"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#ce2bec5b474ce70cc57b4cfe4438516f55fc355b":
-  version "0.0.1"
-  resolved "https://github.com/plebbit/plebbit-react-hooks.git#ce2bec5b474ce70cc57b4cfe4438516f55fc355b"
-  dependencies:
-    "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#7e6f4d7d90f628e474e02c51a89e2723fb71a73d"
-    "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
-    assert "2.0.0"
-    ethers "5.6.9"
-    localforage "1.10.0"
-    lodash.isequal "4.5.0"
-    memoizee "0.4.15"
-    quick-lru "5.1.1"
-    uuid "8.3.2"
-    zustand "4.0.0"
-
 "@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#e47cb245b8af0ae0fdf1ad3170d5097918d1349e":
   version "0.0.1"
   resolved "https://github.com/plebbit/plebbit-react-hooks.git#e47cb245b8af0ae0fdf1ad3170d5097918d1349e"
@@ -10903,11 +10888,6 @@ react-tooltip@^5.10.0:
     "@floating-ui/dom" "1.2.3"
     classnames "^2.3.2"
 
-react-video-thumbnail@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/react-video-thumbnail/-/react-video-thumbnail-0.1.3.tgz#698dc4f4e7bebcb598425929db231a78cbcdbdcd"
-  integrity sha512-ZakEVv9RNFcziAnHHtwod5tf0yMVv4aLZ8/QsCxt1HTnKRHrlylvolPKv1hr63GCwnPu6tgPjUTDKRqfl30lOQ==
-
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"