From 98d3fbba95c03cdba4ccc6376309d846974b48e5 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Thu, 23 Mar 2023 15:49:57 +0100
Subject: [PATCH] added media to thread and catalog

---
 src/components/views/Board.jsx   |  7 +++--
 src/components/views/Catalog.jsx | 34 ++++++++++++++++++------
 src/components/views/Thread.jsx  | 45 +++++++++++++++++++++++++-------
 3 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index ed6bcf31..ceb8ccd8 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -1,5 +1,8 @@
 import React, { useState, useEffect, Fragment } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
+import InfiniteScroll from 'react-infinite-scroller';
+import { Tooltip } from 'react-tooltip';
+import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import useAppStore from '../../useAppStore';
 import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
 import CaptchaModal from '../CaptchaModal';
@@ -7,9 +10,6 @@ import ImageBanner from '../ImageBanner';
 import PostLoader from '../PostLoader';
 import ReplyModal from '../ReplyModal';
 import SettingsModal from '../SettingsModal';
-import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
-import InfiniteScroll from 'react-infinite-scroller';
-import { Tooltip } from 'react-tooltip';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import getDate from '../../utils/getDate';
 import handleStyleChange from '../../utils/handleStyleChange';
@@ -50,7 +50,6 @@ const Board = () => {
   const handleClickForm = useClickForm();
 
 
-
   // temporary title from JSON, gets subplebbitAddress from URL
   useEffect(() => {
     setSelectedAddress(subplebbitAddress);
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index a17e5bd9..fad17eaa 100644
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -1,18 +1,19 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Fragment } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
+import InfiniteScroll from 'react-infinite-scroller';
+import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import useAppStore from '../../useAppStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from './styles/Board.styled';
-import { TopBar } from './styles/Thread.styled';
 import { Threads } from './styles/Catalog.styled';
-import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
-import ImageBanner from '../ImageBanner';
+import { TopBar } from './styles/Thread.styled';
 import CaptchaModal from '../CaptchaModal';
 import CatalogLoader from '../CatalogLoader';
+import ImageBanner from '../ImageBanner';
 import SettingsModal from '../SettingsModal';
+import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import handleStyleChange from '../../utils/handleStyleChange';
 import onError from '../../utils/onError';
 import onSuccess from '../../utils/onSuccess';
-import InfiniteScroll from 'react-infinite-scroller';
 import useClickForm from '../../hooks/useClickForm';
 
 
@@ -334,14 +335,31 @@ const Catalog = () => {
           loader={<CatalogLoader key="loader" />}
         >
           {feed.map(thread => {
+            const commentMediaInfo = getCommentMediaInfo(thread);
+            const fallbackImgUrl = "/assets/plebchan-thumbdown.png";
             return (
               <div key={`thread-${thread.cid}`} className="thread">
                 <Link key={`a-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)}>
-                  <img key={`img-${thread.cid}`} alt="" src="/assets/plebchan-psycho.png" />
+                  {commentMediaInfo?.url ? (
+                    <Fragment key="f-catalog">
+                      {commentMediaInfo?.type === "webpage" ? (
+                        <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} 
+                        onError={(e) => {
+                          e.target.src = fallbackImgUrl
+                          e.target.onerror = null;}}  />
+                      ) : null}
+                    </Fragment>
+                  ) : (<img key={`img-${thread.cid}`} alt="thread" src={fallbackImgUrl} />)}
                 </Link>
-                <div key={`ti-${thread.cid}`} className="thread-icons" >
+                {/* <div key={`ti-${thread.cid}`} className="thread-icons" >
                   <span key={`si-${thread.cid}`} className="thread-icon sticky-icon" title="Sticky"></span>
-                </div>
+                </div> */}
                 <div key={`meta-${thread.cid}`} className="meta" title="(R)eplies / (I)mage Replies" >
                   R:
                   <b key={`b-${thread.cid}`}>{thread.replyCount}</b>
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index d6549deb..3265604e 100644
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -1,19 +1,20 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Tooltip } from 'react-tooltip';
+import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import useAppStore from '../../useAppStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm } from './styles/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
-import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks';
-import { Tooltip } from 'react-tooltip';
 import CaptchaModal from '../CaptchaModal';
 import ImageBanner from '../ImageBanner';
 import PostLoader from '../PostLoader';
 import ReplyModal from '../ReplyModal';
 import SettingsModal from '../SettingsModal';
+import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
+import getDate from '../../utils/getDate';
 import handleStyleChange from '../../utils/handleStyleChange';
 import onError from '../../utils/onError';
 import onSuccess from '../../utils/onSuccess';
-import getDate from '../../utils/getDate';
 import renderThreadComments from '../../utils/renderThreadComments';
 import useClickForm from '../../hooks/useClickForm';
 
@@ -46,6 +47,9 @@ const Thread = () => {
   const { subplebbitAddress, threadCid } = useParams();
   const handleClickForm = useClickForm();
 
+  const commentMediaInfo = getCommentMediaInfo(comment);
+  const fallbackImgUrl = "/assets/filedeleted-res.gif";
+
 
   // temporary title from JSON, gets subplebbitAddress and threadCid from URL
   useEffect(() => {
@@ -392,15 +396,38 @@ const Thread = () => {
               <div className="op-container">
                 <div className="post op">
                   <div className="post-info">
-                    <div key={`f-${comment.cid}`} className="file">
+                  {commentMediaInfo?.url ? (
+                      <div key={`f-${comment.cid}`} className="file" style={{marginBottom: "5px"}}>
                         <div key={`ft-${comment.cid}`} className="file-text">
-                          File:&nbsp;
-                          <a key={`fa-${comment.cid}`} href={`${comment.link}`} target="_blank">filename.something</a>&nbsp;(metadata)
+                          Link:&nbsp;
+                          <a key={`fa-${comment.cid}`} href={commentMediaInfo.url} target="_blank">{
+                          commentMediaInfo?.url.length > 30 ?
+                          commentMediaInfo?.url.slice(0, 30) + "(...)" :
+                          commentMediaInfo?.url
+                          }</a>&nbsp;({commentMediaInfo?.type})
                         </div>
-                        <Link to="" key={`fta-${comment.cid}`} onClick={handleVoidClick} className="file-thumb">
-                          <img key={`fti-${comment.cid}`} src="/assets/plebchan-psycho.png" alt="filename.something" />
-                        </Link>
+                        {commentMediaInfo?.type === "webpage" ? (
+                          <span key={`fta-${comment.cid}`} className="file-thumb">
+                            <img key={`fti-${comment.cid}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
+                          </span>
+                        ) : null}
+                        {commentMediaInfo?.type === "image" ? (
+                          <span key={`fta-${comment.cid}`} className="file-thumb">
+                            <img key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                          </span>
+                        ) : 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} />
+                          </span>
+                        ) : null}
+                        {commentMediaInfo?.type === "audio" ? (
+                          <span key={`fta-${comment.cid}`} className="file-thumb">
+                            <audio key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                          </span>
+                        ) : null}
                       </div>
+                    ) : null}
                     <span className="name-block">
                         {comment.title ? (
                           comment.title.length > 75 ?