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

fix virtuoso media glitch in all feed views

Browse Source
This commit is contained in:
plebeius.eth
2023-07-23 14:52:47 +02:00
parent e82e32129a
commit e486b702da
3 changed files with 295 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/All.jsx
+98 -55
View File
@@ -108,8 +108,10 @@ const All = () => {
const [moderatorPermissions, setModeratorPermissions] = useState({}); const [moderatorPermissions, setModeratorPermissions] = useState({});
const [executeAnonMode, setExecuteAnonMode] = useState(false); const [executeAnonMode, setExecuteAnonMode] = useState(false);
const [cidTracker, setCidTracker] = useState({}); const [cidTracker, setCidTracker] = useState({});
const [isThumbnailClicked, setIsThumbnailClicked] = useState({}); const [isThreadThumbnailClicked, setIsThreadThumbnailClicked] = useState({});
const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({}); const [isReplyThumbnailClicked, setIsReplyThumbnailClicked] = useState({});
const [isMobileThreadThumbnailClicked, setIsMobileThreadThumbnailClicked] = useState({});
const [isMobileReplyThumbnailClicked, setIsMobileReplyThumbnailClicked] = useState({});
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid }; const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid };
@@ -132,17 +134,34 @@ const All = () => {
}, [feed, setFeedCacheState]); }, [feed, setFeedCacheState]);
const handleThumbnailClick = (index, isMobile=false) => { const handleThumbnailClick = (index, type) => {
if (isMobile) { switch(type) {
setIsMobileThumbnailClicked(prevState => ({ case 'thread':
...prevState, setIsThreadThumbnailClicked(prevState => ({
[index]: !prevState[index], ...prevState,
})); [index]: !prevState[index],
} else { }));
setIsThumbnailClicked(prevState => ({ break;
...prevState, case 'reply':
[index]: !prevState[index], setIsReplyThumbnailClicked(prevState => ({
})); ...prevState,
[index]: !prevState[index],
}));
break;
case 'mobileThread':
setIsMobileThreadThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
break;
case 'mobileReply':
setIsMobileReplyThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
break;
default:
break;
} }
}; };
@@ -665,6 +684,21 @@ const All = () => {
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const isModerator = moderatorPermissions[thread.subplebbitAddress]; const isModerator = moderatorPermissions[thread.subplebbitAddress];
let displayWidth, displayHeight, displayWidthMobile, displayHeightMobile;
if (thread.linkWidth && thread.linkHeight) {
let scale = Math.min(1, 250 / Math.max(thread.linkWidth, thread.linkHeight));
displayWidth = `${thread.linkWidth * scale}px`;
displayHeight = `${thread.linkHeight * scale}px`;
scale = Math.min(1, 100 / Math.max(thread.linkWidth, thread.linkHeight));
displayWidthMobile = `${thread.linkWidth * scale}px`;
displayHeightMobile = `${thread.linkHeight * scale}px`;
} else {
displayWidth = '250px';
displayHeight = '250px';
displayWidthMobile = '100px';
displayHeightMobile = '100px';
}
return ( return (
<Fragment key={`fr-${index}`}> <Fragment key={`fr-${index}`}>
<div key={`t-${index}`} className="thread"> <div key={`t-${index}`} className="thread">
@@ -682,21 +716,21 @@ const All = () => {
commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type}) }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
{isThumbnailClicked[index] ? ( {isThreadThumbnailClicked[index] ? (
<span> <span>
-[ -[
<span className='reply-link' <span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}} style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index)}}>Close</span> onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span>
] ]
</span> </span>
) : null} ) : null}
</div> </div>
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-${index}`} <div key={`enlarge-${index}`}
className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}> className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
{(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<iframe <iframe
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
@@ -712,7 +746,7 @@ const All = () => {
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index)}} onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} )}
@@ -721,11 +755,11 @@ const All = () => {
)} )}
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
<div key={`enlarge-${index}`} className="img-container"> <div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
{thread.thumbnailUrl ? ( {thread.thumbnailUrl ? (
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -734,19 +768,19 @@ const All = () => {
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<div key={`enlarge-${index}`} className="img-container"> <div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
</div> </div>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}> <div key={`enlarge-${index}`} className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
{isThumbnailClicked[index] ? ( {isThreadThumbnailClicked[index] ? (
<video <video
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
@@ -760,7 +794,7 @@ const All = () => {
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index)}} onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
@@ -769,7 +803,7 @@ const All = () => {
</div> </div>
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {commentMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
<audio controls key={`fti-${index}`} <audio controls key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
@@ -1063,6 +1097,15 @@ const All = () => {
const replyMediaInfo = getCommentMediaInfo(reply); const replyMediaInfo = getCommentMediaInfo(reply);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed); const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
let replyDisplayWidth, replyDisplayHeight;
if (reply.linkWidth && reply.linkHeight) {
const scale = Math.min(1, 125 / Math.max(reply.linkWidth, reply.linkHeight));
replyDisplayWidth = `${reply.linkWidth * scale}px`;
replyDisplayHeight = `${reply.linkHeight * scale}px`;
} else {
replyDisplayWidth = '125px';
replyDisplayHeight = '125px';
}
return ( return (
<div key={`rc-${index}`} className="reply-container"> <div key={`rc-${index}`} className="reply-container">
<div key={`sa-${index}`} className="side-arrows">{'>>'}</div> <div key={`sa-${index}`} className="side-arrows">{'>>'}</div>
@@ -1324,11 +1367,11 @@ const All = () => {
</div> </div>
{replyMediaInfo?.type === "webpage" ? ( {replyMediaInfo?.type === "webpage" ? (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-reply-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type} src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -1337,17 +1380,17 @@ const All = () => {
) : null} ) : null}
{replyMediaInfo?.type === "image" ? ( {replyMediaInfo?.type === "image" ? (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-reply-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
</div> </div>
) : null} ) : null}
{replyMediaInfo?.type === "video" ? ( {replyMediaInfo?.type === "video" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<video controls <video controls
key={`fti-${index}`} key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
@@ -1355,7 +1398,7 @@ const All = () => {
</span> </span>
) : null} ) : null}
{replyMediaInfo?.type === "audio" ? ( {replyMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<audio controls <audio controls
key={`fti-${index}`} key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
@@ -1682,8 +1725,8 @@ const All = () => {
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className="file-mobile">
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-fta-${index}`} className="file-thumb-mobile"> <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<div style={{width: "92vw"}}> <div style={{width: "92vw"}}>
<iframe <iframe
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
@@ -1698,15 +1741,15 @@ const All = () => {
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} )}
{commentMediaInfo?.type === "video" || "iframe" ? ( {commentMediaInfo?.type === "video" || "iframe" ? (
isMobileThumbnailClicked[index] ? ( isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}> <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}} <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
>Close</span> >Close</span>
</div> </div>
) : ( ) : (
@@ -1718,11 +1761,11 @@ const All = () => {
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? ( commentMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
{thread.thumbnailUrl ? ( {thread.thumbnailUrl ? (
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={commentMediaInfo.thumbnail} alt="thumbnail" src={commentMediaInfo.thumbnail} alt="thumbnail"
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -1731,18 +1774,18 @@ const All = () => {
</div> </div>
) : commentMediaInfo.type === "image" ? ( ) : commentMediaInfo.type === "image" ? (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span> </span>
</div> </div>
) : commentMediaInfo.type === "video" ? ( ) : commentMediaInfo.type === "video" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{isMobileThumbnailClicked[index] ? ( {isMobileThreadThumbnailClicked[index] ? (
<video key={`fti-${index}`} <video key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
controls controls
@@ -1753,17 +1796,17 @@ const All = () => {
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
id="video-thumbnail-mobile" id="video-thumbnail-mobile"
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
)} )}
{commentMediaInfo?.type === "video" || "iframe" ? ( {commentMediaInfo?.type === "video" || "iframe" ? (
isMobileThumbnailClicked[index] ? ( isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}> <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}} <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
>Close</span> >Close</span>
</div> </div>
) : ( ) : (
@@ -1771,7 +1814,7 @@ const All = () => {
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>} )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
</span> </span>
) : commentMediaInfo.type === "audio" ? ( ) : commentMediaInfo.type === "audio" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
<audio key={`mob-img-${index}`} <audio key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
@@ -1924,11 +1967,11 @@ const All = () => {
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? ( replyMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container"> <div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={replyMediaInfo.thumbnail} alt="thumbnail" src={replyMediaInfo.thumbnail} alt="thumbnail"
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileReply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -1937,17 +1980,17 @@ const All = () => {
</div> </div>
) : replyMediaInfo.type === "image" ? ( ) : replyMediaInfo.type === "image" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container"> <div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileReply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span> </span>
</div> </div>
) : replyMediaInfo.type === "video" ? ( ) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
<video key={`fti-${index}`} <video key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
style={{ pointerEvents: "none" }} style={{ pointerEvents: "none" }}
@@ -1955,7 +1998,7 @@ const All = () => {
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span> </span>
) : replyMediaInfo.type === "audio" ? ( ) : replyMediaInfo.type === "audio" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
<audio key={`mob-img-${index}`} <audio key={`mob-img-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
src/components/views/Board.jsx
+98 -55
View File
@@ -134,8 +134,10 @@ const Board = () => {
const [postOnHoverHeight, setPostOnHoverHeight] = useState(0); const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
const [executeAnonMode, setExecuteAnonMode] = useState(false); const [executeAnonMode, setExecuteAnonMode] = useState(false);
const [cidTracker, setCidTracker] = useState({}); const [cidTracker, setCidTracker] = useState({});
const [isThumbnailClicked, setIsThumbnailClicked] = useState({}); const [isThreadThumbnailClicked, setIsThreadThumbnailClicked] = useState({});
const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({}); const [isReplyThumbnailClicked, setIsReplyThumbnailClicked] = useState({});
const [isMobileThreadThumbnailClicked, setIsMobileThreadThumbnailClicked] = useState({});
const [isMobileReplyThumbnailClicked, setIsMobileReplyThumbnailClicked] = useState({});
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid }; const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid };
@@ -164,17 +166,34 @@ const Board = () => {
}, [account?.author.address, subplebbit.roles]); }, [account?.author.address, subplebbit.roles]);
const handleThumbnailClick = (index, isMobile=false) => { const handleThumbnailClick = (index, type) => {
if (isMobile) { switch(type) {
setIsMobileThumbnailClicked(prevState => ({ case 'thread':
...prevState, setIsThreadThumbnailClicked(prevState => ({
[index]: !prevState[index], ...prevState,
})); [index]: !prevState[index],
} else { }));
setIsThumbnailClicked(prevState => ({ break;
...prevState, case 'reply':
[index]: !prevState[index], setIsReplyThumbnailClicked(prevState => ({
})); ...prevState,
[index]: !prevState[index],
}));
break;
case 'mobileThread':
setIsMobileThreadThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
break;
case 'mobileReply':
setIsMobileReplyThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
break;
default:
break;
} }
}; };
@@ -1318,6 +1337,21 @@ const Board = () => {
const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {}; const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {};
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
let displayWidth, displayHeight, displayWidthMobile, displayHeightMobile;
if (thread.linkWidth && thread.linkHeight) {
let scale = Math.min(1, 250 / Math.max(thread.linkWidth, thread.linkHeight));
displayWidth = `${thread.linkWidth * scale}px`;
displayHeight = `${thread.linkHeight * scale}px`;
scale = Math.min(1, 100 / Math.max(thread.linkWidth, thread.linkHeight));
displayWidthMobile = `${thread.linkWidth * scale}px`;
displayHeightMobile = `${thread.linkHeight * scale}px`;
} else {
displayWidth = '250px';
displayHeight = '250px';
displayWidthMobile = '100px';
displayHeightMobile = '100px';
}
return ( return (
<Fragment key={`fr-${index}`}> <Fragment key={`fr-${index}`}>
<div key={`t-${index}`} className="thread"> <div key={`t-${index}`} className="thread">
@@ -1335,21 +1369,21 @@ const Board = () => {
commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type}) }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
{isThumbnailClicked[index] ? ( {isThreadThumbnailClicked[index] ? (
<span> <span>
-[ -[
<span className='reply-link' <span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}} style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index)}}>Close</span> onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span>
] ]
</span> </span>
) : null} ) : null}
</div> </div>
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-${index}`} <div key={`enlarge-${index}`}
className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}> className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
{(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<iframe <iframe
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
@@ -1365,7 +1399,7 @@ const Board = () => {
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index)}} onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} )}
@@ -1374,11 +1408,11 @@ const Board = () => {
)} )}
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
<div key={`enlarge-${index}`} className="img-container"> <div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
{thread.thumbnailUrl ? ( {thread.thumbnailUrl ? (
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -1387,19 +1421,19 @@ const Board = () => {
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<div key={`enlarge-${index}`} className="img-container"> <div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
</div> </div>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}> <div key={`enlarge-${index}`} className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
{isThumbnailClicked[index] ? ( {isThreadThumbnailClicked[index] ? (
<video <video
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
@@ -1413,7 +1447,7 @@ const Board = () => {
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index)}} onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
@@ -1422,7 +1456,7 @@ const Board = () => {
</div> </div>
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {commentMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
<audio controls key={`fti-${index}`} <audio controls key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
@@ -1727,6 +1761,15 @@ const Board = () => {
if (storedSigners[reply.parentCid]) { if (storedSigners[reply.parentCid]) {
signerAddress = storedSigners[reply.parentCid].address; signerAddress = storedSigners[reply.parentCid].address;
} }
let replyDisplayWidth, replyDisplayHeight;
if (reply.linkWidth && reply.linkHeight) {
const scale = Math.min(1, 125 / Math.max(reply.linkWidth, reply.linkHeight));
replyDisplayWidth = `${reply.linkWidth * scale}px`;
replyDisplayHeight = `${reply.linkHeight * scale}px`;
} else {
replyDisplayWidth = '125px';
replyDisplayHeight = '125px';
}
return ( return (
<Fragment key={`fr-reply-${index}`}> <Fragment key={`fr-reply-${index}`}>
<div key={`rc-${index}`} className="reply-container"> <div key={`rc-${index}`} className="reply-container">
@@ -1972,11 +2015,11 @@ const Board = () => {
</div> </div>
{replyMediaInfo?.type === "webpage" ? ( {replyMediaInfo?.type === "webpage" ? (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-reply-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type} src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -1985,17 +2028,17 @@ const Board = () => {
) : null} ) : null}
{replyMediaInfo?.type === "image" ? ( {replyMediaInfo?.type === "image" ? (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-reply-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
</div> </div>
) : null} ) : null}
{replyMediaInfo?.type === "video" ? ( {replyMediaInfo?.type === "video" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<video controls <video controls
key={`fti-${index}`} key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
@@ -2003,7 +2046,7 @@ const Board = () => {
</span> </span>
) : null} ) : null}
{replyMediaInfo?.type === "audio" ? ( {replyMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<audio controls <audio controls
key={`fti-${index}`} key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
@@ -2323,8 +2366,8 @@ const Board = () => {
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className="file-mobile">
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-fta-${index}`} className="file-thumb-mobile"> <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<div style={{width: "92vw"}}> <div style={{width: "92vw"}}>
<iframe <iframe
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
@@ -2339,15 +2382,15 @@ const Board = () => {
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} )}
{commentMediaInfo?.type === "video" || "iframe" ? ( {commentMediaInfo?.type === "video" || "iframe" ? (
isMobileThumbnailClicked[index] ? ( isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}> <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}} <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
>Close</span> >Close</span>
</div> </div>
) : ( ) : (
@@ -2359,11 +2402,11 @@ const Board = () => {
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? ( commentMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
{thread.thumbnailUrl ? ( {thread.thumbnailUrl ? (
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={commentMediaInfo.thumbnail} alt="thumbnail" src={commentMediaInfo.thumbnail} alt="thumbnail"
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -2372,18 +2415,18 @@ const Board = () => {
</div> </div>
) : commentMediaInfo.type === "image" ? ( ) : commentMediaInfo.type === "image" ? (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span> </span>
</div> </div>
) : commentMediaInfo.type === "video" ? ( ) : commentMediaInfo.type === "video" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{isMobileThumbnailClicked[index] ? ( {isMobileThreadThumbnailClicked[index] ? (
<video key={`fti-${index}`} <video key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
controls controls
@@ -2394,17 +2437,17 @@ const Board = () => {
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
id="video-thumbnail-mobile" id="video-thumbnail-mobile"
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
)} )}
{commentMediaInfo?.type === "video" || "iframe" ? ( {commentMediaInfo?.type === "video" || "iframe" ? (
isMobileThumbnailClicked[index] ? ( isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}> <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}} <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
>Close</span> >Close</span>
</div> </div>
) : ( ) : (
@@ -2412,7 +2455,7 @@ const Board = () => {
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>} )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
</span> </span>
) : commentMediaInfo.type === "audio" ? ( ) : commentMediaInfo.type === "audio" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
<audio key={`mob-img-${index}`} <audio key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
@@ -2554,11 +2597,11 @@ const Board = () => {
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? ( replyMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container"> <div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={replyMediaInfo.thumbnail} alt="thumbnail" src={replyMediaInfo.thumbnail} alt="thumbnail"
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileReply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -2567,17 +2610,17 @@ const Board = () => {
</div> </div>
) : replyMediaInfo.type === "image" ? ( ) : replyMediaInfo.type === "image" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container"> <div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileReply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span> </span>
</div> </div>
) : replyMediaInfo.type === "video" ? ( ) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
<video key={`fti-${index}`} <video key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
style={{ pointerEvents: "none" }} style={{ pointerEvents: "none" }}
@@ -2585,7 +2628,7 @@ const Board = () => {
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span> </span>
) : replyMediaInfo.type === "audio" ? ( ) : replyMediaInfo.type === "audio" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
<audio key={`mob-img-${index}`} <audio key={`mob-img-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
src/components/views/Subscriptions.jsx
+99 -55
View File
@@ -108,8 +108,10 @@ const Subscriptions = () => {
const [moderatorPermissions, setModeratorPermissions] = useState({}); const [moderatorPermissions, setModeratorPermissions] = useState({});
const [executeAnonMode, setExecuteAnonMode] = useState(false); const [executeAnonMode, setExecuteAnonMode] = useState(false);
const [cidTracker, setCidTracker] = useState({}); const [cidTracker, setCidTracker] = useState({});
const [isThumbnailClicked, setIsThumbnailClicked] = useState({}); const [isThreadThumbnailClicked, setIsThreadThumbnailClicked] = useState({});
const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({}); const [isReplyThumbnailClicked, setIsReplyThumbnailClicked] = useState({});
const [isMobileThreadThumbnailClicked, setIsMobileThreadThumbnailClicked] = useState({});
const [isMobileReplyThumbnailClicked, setIsMobileReplyThumbnailClicked] = useState({});
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid }; const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid };
@@ -130,17 +132,35 @@ const Subscriptions = () => {
} }
}, [feed, setFeedCacheState]); }, [feed, setFeedCacheState]);
const handleThumbnailClick = (index, isMobile=false) => {
if (isMobile) { const handleThumbnailClick = (index, type) => {
setIsMobileThumbnailClicked(prevState => ({ switch(type) {
...prevState, case 'thread':
[index]: !prevState[index], setIsThreadThumbnailClicked(prevState => ({
})); ...prevState,
} else { [index]: !prevState[index],
setIsThumbnailClicked(prevState => ({ }));
...prevState, break;
[index]: !prevState[index], case 'reply':
})); setIsReplyThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
break;
case 'mobileThread':
setIsMobileThreadThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
break;
case 'mobileReply':
setIsMobileReplyThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
break;
default:
break;
} }
}; };
@@ -675,6 +695,21 @@ const Subscriptions = () => {
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const isModerator = moderatorPermissions[thread.subplebbitAddress]; const isModerator = moderatorPermissions[thread.subplebbitAddress];
let displayWidth, displayHeight, displayWidthMobile, displayHeightMobile;
if (thread.linkWidth && thread.linkHeight) {
let scale = Math.min(1, 250 / Math.max(thread.linkWidth, thread.linkHeight));
displayWidth = `${thread.linkWidth * scale}px`;
displayHeight = `${thread.linkHeight * scale}px`;
scale = Math.min(1, 100 / Math.max(thread.linkWidth, thread.linkHeight));
displayWidthMobile = `${thread.linkWidth * scale}px`;
displayHeightMobile = `${thread.linkHeight * scale}px`;
} else {
displayWidth = '250px';
displayHeight = '250px';
displayWidthMobile = '100px';
displayHeightMobile = '100px';
}
return ( return (
<Fragment key={`fr-${index}`}> <Fragment key={`fr-${index}`}>
<div key={`t-${index}`} className="thread"> <div key={`t-${index}`} className="thread">
@@ -692,21 +727,21 @@ const Subscriptions = () => {
commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type}) }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
{isThumbnailClicked[index] ? ( {isThreadThumbnailClicked[index] ? (
<span> <span>
-[ -[
<span className='reply-link' <span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}} style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index)}}>Close</span> onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span>
] ]
</span> </span>
) : null} ) : null}
</div> </div>
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-${index}`} <div key={`enlarge-${index}`}
className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}> className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
{(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<iframe <iframe
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
@@ -722,7 +757,7 @@ const Subscriptions = () => {
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index)}} onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} )}
@@ -731,11 +766,11 @@ const Subscriptions = () => {
)} )}
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
<div key={`enlarge-${index}`} className="img-container"> <div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
{thread.thumbnailUrl ? ( {thread.thumbnailUrl ? (
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -744,19 +779,19 @@ const Subscriptions = () => {
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<div key={`enlarge-${index}`} className="img-container"> <div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
</div> </div>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}> <div key={`enlarge-${index}`} className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
{isThumbnailClicked[index] ? ( {isThreadThumbnailClicked[index] ? (
<video <video
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
@@ -770,7 +805,7 @@ const Subscriptions = () => {
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index)}} onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
@@ -779,7 +814,7 @@ const Subscriptions = () => {
</div> </div>
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {commentMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
<audio controls key={`fti-${index}`} <audio controls key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
@@ -1073,6 +1108,15 @@ const Subscriptions = () => {
const replyMediaInfo = getCommentMediaInfo(reply); const replyMediaInfo = getCommentMediaInfo(reply);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed); const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
let replyDisplayWidth, replyDisplayHeight;
if (reply.linkWidth && reply.linkHeight) {
const scale = Math.min(1, 125 / Math.max(reply.linkWidth, reply.linkHeight));
replyDisplayWidth = `${reply.linkWidth * scale}px`;
replyDisplayHeight = `${reply.linkHeight * scale}px`;
} else {
replyDisplayWidth = '125px';
replyDisplayHeight = '125px';
}
return ( return (
<div key={`rc-${index}`} className="reply-container"> <div key={`rc-${index}`} className="reply-container">
<div key={`sa-${index}`} className="side-arrows">{'>>'}</div> <div key={`sa-${index}`} className="side-arrows">{'>>'}</div>
@@ -1334,11 +1378,11 @@ const Subscriptions = () => {
</div> </div>
{replyMediaInfo?.type === "webpage" ? ( {replyMediaInfo?.type === "webpage" ? (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-reply-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type} src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -1347,17 +1391,17 @@ const Subscriptions = () => {
) : null} ) : null}
{replyMediaInfo?.type === "image" ? ( {replyMediaInfo?.type === "image" ? (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-reply-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
</div> </div>
) : null} ) : null}
{replyMediaInfo?.type === "video" ? ( {replyMediaInfo?.type === "video" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<video controls <video controls
key={`fti-${index}`} key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
@@ -1365,7 +1409,7 @@ const Subscriptions = () => {
</span> </span>
) : null} ) : null}
{replyMediaInfo?.type === "audio" ? ( {replyMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<audio controls <audio controls
key={`fti-${index}`} key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
@@ -1692,8 +1736,8 @@ const Subscriptions = () => {
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className="file-mobile">
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-fta-${index}`} className="file-thumb-mobile"> <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<div style={{width: "92vw"}}> <div style={{width: "92vw"}}>
<iframe <iframe
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
@@ -1708,15 +1752,15 @@ const Subscriptions = () => {
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} )}
{commentMediaInfo?.type === "video" || "iframe" ? ( {commentMediaInfo?.type === "video" || "iframe" ? (
isMobileThumbnailClicked[index] ? ( isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}> <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}} <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
>Close</span> >Close</span>
</div> </div>
) : ( ) : (
@@ -1728,11 +1772,11 @@ const Subscriptions = () => {
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? ( commentMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
{thread.thumbnailUrl ? ( {thread.thumbnailUrl ? (
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={commentMediaInfo.thumbnail} alt="thumbnail" src={commentMediaInfo.thumbnail} alt="thumbnail"
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -1741,18 +1785,18 @@ const Subscriptions = () => {
</div> </div>
) : commentMediaInfo.type === "image" ? ( ) : commentMediaInfo.type === "image" ? (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span> </span>
</div> </div>
) : commentMediaInfo.type === "video" ? ( ) : commentMediaInfo.type === "video" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{isMobileThumbnailClicked[index] ? ( {isMobileThreadThumbnailClicked[index] ? (
<video key={`fti-${index}`} <video key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
controls controls
@@ -1763,17 +1807,17 @@ const Subscriptions = () => {
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
id="video-thumbnail-mobile" id="video-thumbnail-mobile"
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
)} )}
{commentMediaInfo?.type === "video" || "iframe" ? ( {commentMediaInfo?.type === "video" || "iframe" ? (
isMobileThumbnailClicked[index] ? ( isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}> <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}} <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
>Close</span> >Close</span>
</div> </div>
) : ( ) : (
@@ -1781,7 +1825,7 @@ const Subscriptions = () => {
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>} )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
</span> </span>
) : commentMediaInfo.type === "audio" ? ( ) : commentMediaInfo.type === "audio" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
<audio key={`mob-img-${index}`} <audio key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
@@ -1934,11 +1978,11 @@ const Subscriptions = () => {
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? ( replyMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container"> <div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={replyMediaInfo.thumbnail} alt="thumbnail" src={replyMediaInfo.thumbnail} alt="thumbnail"
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileReply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -1947,17 +1991,17 @@ const Subscriptions = () => {
</div> </div>
) : replyMediaInfo.type === "image" ? ( ) : replyMediaInfo.type === "image" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container"> <div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileReply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span> </span>
</div> </div>
) : replyMediaInfo.type === "video" ? ( ) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
<video key={`fti-${index}`} <video key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
style={{ pointerEvents: "none" }} style={{ pointerEvents: "none" }}
@@ -1965,7 +2009,7 @@ const Subscriptions = () => {
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span> </span>
) : replyMediaInfo.type === "audio" ? ( ) : replyMediaInfo.type === "audio" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
<audio key={`mob-img-${index}`} <audio key={`mob-img-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />