External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

added media to desktop board view

Browse Source
This commit is contained in:
plebbitor
2023-03-23 14:05:59 +01:00
parent 1cb69a75a5
commit 86a6672838
2 changed files with 72 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+34 -7
View File
@@ -10,10 +10,11 @@ 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';
import onError from '../../utils/onError';
import onSuccess from '../../utils/onSuccess';
import getDate from '../../utils/getDate';
import renderComments from '../../utils/renderComments';
import useClickForm from '../../hooks/useClickForm';
@@ -49,6 +50,7 @@ const Board = () => {
const handleClickForm = useClickForm();
// temporary title from JSON, gets subplebbitAddress from URL
useEffect(() => {
setSelectedAddress(subplebbitAddress);
@@ -393,6 +395,8 @@ const Board = () => {
{renderedFeed.map(thread => {
const { replies: { pages: { topAll: { comments } } } } = thread;
const { renderedComments, omittedCount } = renderComments(comments);
const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "/assets/filedeleted-res.gif";
return (
<Fragment key={`fragment1-${thread.cid}`}>
<div key={`t-${thread.cid}`} className="thread">
@@ -400,15 +404,38 @@ const Board = () => {
<div key={`po-${thread.cid}`} className="post op">
<hr key={`hr-${thread.cid}`} />
<div key={`pi-${thread.cid}`} className="post-info">
<div key={`f-${thread.cid}`} className="file">
{commentMediaInfo?.url ? (
<div key={`f-${thread.cid}`} className="file" style={{marginBottom: "5px"}}>
<div key={`ft-${thread.cid}`} className="file-text">
File:&nbsp;
<a key={`fa-${thread.cid}`} href={`${thread.link}`} target="_blank">filename.something</a>&nbsp;(metadata)
Link:&nbsp;
<a key={`fa-${thread.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-${thread.cid}`} onClick={handleVoidClick} className="file-thumb">
<img key={`fti-${thread.cid}`} src="/assets/plebchan-psycho.png" alt="filename.something" />
</Link>
{commentMediaInfo?.type === "webpage" ? (
<span key={`fta-${thread.cid}`} className="file-thumb">
<img key={`fti-${thread.cid}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{commentMediaInfo?.type === "image" ? (
<span key={`fta-${thread.cid}`} className="file-thumb">
<img key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{commentMediaInfo?.type === "video" ? (
<span key={`fta-${thread.cid}`} className="file-thumb">
<video 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} />
</span>
) : null}
</div>
) : null}
<span key={`nb-${thread.cid}`} className="name-block">
{thread.title ? (
thread.title.length > 75 ?