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 thumbnails, add youtube preview

Browse Source
This commit is contained in:
plebeius.eth
2023-09-01 21:43:36 +02:00
parent 5c2a4e3b08
commit 27a5f46bb4
9 changed files with 193 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/All.jsx
+4 -4
View File
@@ -720,7 +720,7 @@ 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})
{isThreadThumbnailClicked[index] ? ( {isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
<span> <span>
-[ -[
<span className='reply-link' <span className='reply-link'
@@ -1432,7 +1432,7 @@ const All = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type}) }</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? ( {replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isReplyThumbnailClicked[index] ? ( isReplyThumbnailClicked[index] ? (
<span> <span>
-[ -[
@@ -1844,7 +1844,7 @@ const All = () => {
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" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[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"}}
@@ -1901,7 +1901,7 @@ const All = () => {
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
)} )}
{commentMediaInfo?.type === "video" || "iframe" ? ( {commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[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"}}
src/components/views/AllCatalog.jsx
+55 -50
View File
@@ -339,53 +339,55 @@ const CatalogPost = ({post}) => {
return ( return (
<div key={`thread-`} className="thread" <div key={`thread-`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}
onMouseLeave={() => {handleMouseOnLeaveThread()}}> onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{isHoveringOnThread === thread.cid ? {isHoveringOnThread === thread.cid ?
<div ref={popupRef} <div ref={popupRef}
onMouseOver={() => handleMouseOnLeaveThread()} onMouseOver={() => handleMouseOnLeaveThread()}
style={{ style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0, opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden', visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight
? isMediaShowed ? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)` ? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)` : `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto', : 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight
? isMediaShowed ? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)` ? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)` : `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto', : 'auto',
}} }}
className="thread_popup"> className="thread_popup">
<p <p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
&& !isEnoughSpaceOnRight && !isEnoughSpaceOnRight
? ?
{overflow:"visible",whiteSpace:"normal"} {overflow:"visible",whiteSpace:"normal"}
: null : null}
} className="thread_popup_content">
className="thread_popup_content"> <span className="thread_popup_title" >
<span className="thread_popup_title" > {thread.title ? `${thread.title} ` : "Posted "}
{thread.title ? `${thread.title} ` : "Posted "} </span>
</span> by
by <span className="thread_popup_author">
<span className="thread_popup_author"> {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} </span>
</span> {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</p> </p>
<div> <div>
{thread.replyCount > 0 ? {thread.replyCount > 0 ?
<p className="thread_popup_lastReply"> <p className="thread_popup_lastReply">
Last reply by <span className="thread_popup_author"> Anonymous </span> Last reply by <span className="thread_popup_author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)}</p> {getFormattedTime(thread.lastReplyTimestamp)}
: null}</div> </p>
</div> : null } : null}
</div>
</div>
: null }
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)} onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? ( thread.thumbnailUrl ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
@@ -398,6 +400,13 @@ const CatalogPost = ({post}) => {
</span> </span>
) : null ) : null
) : null} ) : null}
{commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => { e.target.src = fallbackImgUrl }} />
</span>
) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`} <img className="card" ref={imageRef} key={`img-`}
@@ -425,11 +434,7 @@ const CatalogPost = ({post}) => {
</Link> </Link>
) : null} ) : null}
<div key={`ti-`} className="thread-icons" > <div key={`ti-`} className="thread-icons" >
{(commentMediaInfo && ( {isMediaShowed ? (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<OfflineIndicator <OfflineIndicator
address={thread.subplebbitAddress} address={thread.subplebbitAddress}
className="thread-icon offline-icon" className="thread-icon offline-icon"
@@ -441,7 +446,7 @@ const CatalogPost = ({post}) => {
tooltipPlace="top" /> tooltipPlace="top" />
)} )}
</div> </div>
<BoardForm selectedStyle={selectedStyle} <BoardForm selectedStyle={selectedStyle} onMouseOver={() => handleMouseOnLeaveThread()}
style={{ all: "unset"}}> style={{ all: "unset"}}>
<div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" > <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-`}>{thread.replyCount}</b> R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
@@ -594,7 +599,7 @@ const CatalogPost = ({post}) => {
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}} <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}
ref={(el) => (threadRefs.current[thread.cid] = el)}> ref={(el) => (threadRefs.current[thread.cid] = el)}>
<span key={`teaser-width${thread.cid}`} ref={textRef}> <span key={`teaser-width${thread.cid}`} ref={textRef} onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b> <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null} {thread.content ? `: ${thread.content}` : null}
</span> </span>
src/components/views/Board.jsx
+6 -6
View File
@@ -1416,7 +1416,7 @@ 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})
{isThreadThumbnailClicked[index] ? ( {isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
<span> <span>
-[ -[
<span className='reply-link' <span className='reply-link'
@@ -2125,8 +2125,8 @@ const Board = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type}) }</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? ( {replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isReplyThumbnailClicked[index] ? ( isReplyThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
<span> <span>
-[ -[
<span className='reply-link' <span className='reply-link'
@@ -2532,7 +2532,7 @@ const Board = () => {
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" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[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"}}
@@ -2589,7 +2589,7 @@ const Board = () => {
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
)} )}
{commentMediaInfo?.type === "video" || "iframe" ? ( {commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[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"}}
@@ -2789,7 +2789,7 @@ const Board = () => {
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
)} )}
{replyMediaInfo?.type === "video" || "iframe" ? ( {replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isMobileReplyThumbnailClicked[index] ? ( isMobileReplyThumbnailClicked[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"}}
src/components/views/Catalog.jsx
+57 -59
View File
@@ -591,51 +591,53 @@ const CatalogPost = ({post}) => {
} else { } else {
return ( return (
<div key={`thread-`} className="thread" <div key={`thread-`} className="thread"
onMouseLeave={()=>{handleMouseOnLeaveThread()}} onMouseOver={() => setIsHoveringOnThread(thread.cid)}> onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
{isHoveringOnThread === thread.cid ? {isHoveringOnThread === thread.cid ?
<div ref={popupRef} <div ref={popupRef}
onMouseOver={() => handleMouseOnLeaveThread()} onMouseOver={() => handleMouseOnLeaveThread()}
style={{ style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0, opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden', visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight
? isMediaShowed ? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)` ? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)` : `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto', : 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight
? isMediaShowed ? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)` ? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)` : `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto', : 'auto',
}} }}
className="thread_popup"> className="thread_popup">
<p <p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
&& !isEnoughSpaceOnRight && !isEnoughSpaceOnRight
? ?
{overflow:"visible",whiteSpace:"normal"} {overflow:"visible",whiteSpace:"normal"}
: null : null
} }
className="thread_popup_content"> className="thread_popup_content">
<span className="thread_popup_title" > <span className="thread_popup_title" >
{thread.title ? `${thread.title} ` : "Posted "} {thread.title ? `${thread.title} ` : "Posted "}
</span> </span>
by by
<span className="thread_popup_author"> <span className="thread_popup_author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span> </span>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</p> {thread.timestamp ? getFormattedTime(thread.timestamp) : null}</p>
<div> <div>
{thread.replyCount > 0 ? {thread.replyCount > 0 ?
<p className="thread_popup_lastReply"> <p className="thread_popup_lastReply">
Last reply by <span className="thread_popup_author"> Anonymous </span> Last reply by <span className="thread_popup_author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)}</p> {getFormattedTime(thread.lastReplyTimestamp)}</p>
: null}</div> : null}
</div> : null } </div>
</div>
: null }
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${selectedAddress}/c/${thread.cid}`} <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)} onMouseOver={() => setIsHoveringOnThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? ( thread.thumbnailUrl ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
@@ -648,6 +650,13 @@ const CatalogPost = ({post}) => {
</span> </span>
) : null ) : null
) : null} ) : null}
{commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => { e.target.src = fallbackImgUrl }} />
</span>
) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`} <img className="card" ref={imageRef} key={`img-`}
@@ -674,11 +683,7 @@ const CatalogPost = ({post}) => {
) : null} ) : null}
</Link> </Link>
) : null} ) : null}
{(commentMediaInfo && ( {isMediaShowed ? (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<div key={`ti-`} className="thread-icons" > <div key={`ti-`} className="thread-icons" >
{thread.pinned ? ( {thread.pinned ? (
<span key={`si-`} className="thread-icon sticky-icon" title="Sticky" <span key={`si-`} className="thread-icon sticky-icon" title="Sticky"
@@ -692,7 +697,7 @@ const CatalogPost = ({post}) => {
) : null} ) : null}
</div> </div>
) : null} ) : null}
<BoardForm selectedStyle={selectedStyle} <BoardForm selectedStyle={selectedStyle} onMouseOver={() => handleMouseOnLeaveThread()}
style={{ all: "unset"}}> style={{ all: "unset"}}>
<div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" > <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-`}>{thread.replyCount}</b> R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
@@ -702,11 +707,7 @@ const CatalogPost = ({post}) => {
L:&nbsp;<b key={`i-`}>{linkCount}</b> L:&nbsp;<b key={`i-`}>{linkCount}</b>
</> </>
) : null} ) : null}
{(commentMediaInfo && ( {isMediaShowed ? null : (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? null : (
<div className='thread-icons' <div className='thread-icons'
style={{position: 'absolute', top: '-2px', right: '15px'}}> style={{position: 'absolute', top: '-2px', right: '15px'}}>
{thread.pinned ? ( {thread.pinned ? (
@@ -795,10 +796,7 @@ const CatalogPost = ({post}) => {
) : null} ) : null}
</> </>
)}</VerifiedAuthor> )}</VerifiedAuthor>
{(commentMediaInfo && ( {isMediaShowed ? (
commentMediaInfo.type === 'image' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<li <li
onMouseOver={() => {setIsImageSearchOpen(true)}} onMouseOver={() => {setIsImageSearchOpen(true)}}
onMouseLeave={() => {setIsImageSearchOpen(false)}}> onMouseLeave={() => {setIsImageSearchOpen(false)}}>
@@ -863,7 +861,7 @@ const CatalogPost = ({post}) => {
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}> <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
<div style={{cursor:"text"}} <div style={{cursor:"text"}}
ref={(el) => (threadRefs.current[thread.cid] = el)}> ref={(el) => (threadRefs.current[thread.cid] = el)}>
<span key={`teaser-width${thread.cid}`} ref={textRef}> <span key={`teaser-width${thread.cid}`} ref={textRef} onMouseOver={() => setIsHoveringOnThread(thread.cid)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b> <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null} {thread.content ? `: ${thread.content}` : null}
</span> </span>
src/components/views/Pending.jsx
+2 -2
View File
@@ -496,7 +496,7 @@ const Pending = () => {
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" || commentMediaInfo?.type === "iframe" ? (
isMobileThumbnailClicked[index] ? ( isMobileThumbnailClicked[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"}}
@@ -553,7 +553,7 @@ const Pending = () => {
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
)} )}
{commentMediaInfo?.type === "video" || "iframe" ? ( {commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThumbnailClicked[index] ? ( isMobileThumbnailClicked[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"}}
src/components/views/Subscriptions.jsx
+4 -4
View File
@@ -731,7 +731,7 @@ 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})
{isThreadThumbnailClicked[index] ? ( {isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
<span> <span>
-[ -[
<span className='reply-link' <span className='reply-link'
@@ -1443,7 +1443,7 @@ const Subscriptions = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type}) }</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? ( {replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isReplyThumbnailClicked[index] ? ( isReplyThumbnailClicked[index] ? (
<span> <span>
-[ -[
@@ -1855,7 +1855,7 @@ const Subscriptions = () => {
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" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[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"}}
@@ -1912,7 +1912,7 @@ const Subscriptions = () => {
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
)} )}
{commentMediaInfo?.type === "video" || "iframe" ? ( {commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[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"}}
src/components/views/SubscriptionsCatalog.jsx
+55 -49
View File
@@ -340,52 +340,55 @@ const CatalogPost = ({post}) => {
return ( return (
<div key={`thread-`} className="thread" <div key={`thread-`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}
onMouseLeave={() => {handleMouseOnLeaveThread()}}> onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{isHoveringOnThread === thread.cid ? {isHoveringOnThread === thread.cid ?
<div ref={popupRef} <div ref={popupRef}
onMouseOver={() => handleMouseOnLeaveThread()} onMouseOver={() => handleMouseOnLeaveThread()}
style={{ style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0, opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden', visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight
? isMediaShowed ? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)` ? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)` : `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto', : 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight
? isMediaShowed ? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)` ? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)` : `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto', : 'auto',
}} }}
className="thread_popup"> className="thread_popup">
<p <p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
&& !isEnoughSpaceOnRight && !isEnoughSpaceOnRight
? ?
{overflow:"visible",whiteSpace:"normal"} {overflow:"visible",whiteSpace:"normal"}
: null : null
} }
className="thread_popup_content"> className="thread_popup_content">
<span className="thread_popup_title" > <span className="thread_popup_title" >
{thread.title ? `${thread.title} ` : "Posted "} {thread.title ? `${thread.title} ` : "Posted "}
</span> </span>
by by
<span className="thread_popup_author"> <span className="thread_popup_author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span> </span>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</p> {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
<div> </p>
{thread.replyCount > 0 ? <div>
<p className="thread_popup_lastReply"> {thread.replyCount > 0 ?
Last reply by <span className="thread_popup_author"> Anonymous </span> <p className="thread_popup_lastReply">
{getFormattedTime(thread.lastReplyTimestamp)}</p> Last reply by <span className="thread_popup_author"> Anonymous </span>
: null}</div> {getFormattedTime(thread.lastReplyTimestamp)}
</div> : null } </p>
: null}
</div>
</div>
: null }
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)} onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? ( thread.thumbnailUrl ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
@@ -398,6 +401,13 @@ const CatalogPost = ({post}) => {
</span> </span>
) : null ) : null
) : null} ) : null}
{commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => { e.target.src = fallbackImgUrl }} />
</span>
) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`} <img className="card" ref={imageRef} key={`img-`}
@@ -425,11 +435,7 @@ const CatalogPost = ({post}) => {
</Link> </Link>
) : null} ) : null}
<div key={`ti-`} className="thread-icons" > <div key={`ti-`} className="thread-icons" >
{(commentMediaInfo && ( {isMediaShowed ? (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<OfflineIndicator <OfflineIndicator
address={thread.subplebbitAddress} address={thread.subplebbitAddress}
className="thread-icon offline-icon" className="thread-icon offline-icon"
@@ -441,7 +447,7 @@ const CatalogPost = ({post}) => {
tooltipPlace="top" /> tooltipPlace="top" />
)} )}
</div> </div>
<BoardForm selectedStyle={selectedStyle} <BoardForm selectedStyle={selectedStyle} onMouseOver={() => handleMouseOnLeaveThread()}
style={{ all: "unset"}}> style={{ all: "unset"}}>
<div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" > <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-`}>{thread.replyCount}</b> R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
@@ -594,7 +600,7 @@ const CatalogPost = ({post}) => {
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}} <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}
ref={(el) => (threadRefs.current[thread.cid] = el)}> ref={(el) => (threadRefs.current[thread.cid] = el)}>
<span key={`teaser-width${thread.cid}`} ref={textRef}> <span key={`teaser-width${thread.cid}`} ref={textRef} onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b> <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null} {thread.content ? `: ${thread.content}` : null}
</span> </span>
src/components/views/Thread.jsx
+3 -3
View File
@@ -1534,7 +1534,7 @@ const Thread = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type}) }</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? ( {replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isReplyThumbnailClicked[index] ? ( isReplyThumbnailClicked[index] ? (
<span> <span>
-[ -[
@@ -1819,7 +1819,7 @@ const Thread = () => {
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" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[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"}}
@@ -1876,7 +1876,7 @@ const Thread = () => {
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
)} )}
{commentMediaInfo?.type === "video" || "iframe" ? ( {commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[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"}}
src/utils/getCommentMediaInfo.js
+7
View File
@@ -14,6 +14,13 @@ const getCommentMediaInfo = (comment) => {
if (['youtube.com', 'www.youtube.com', 'youtu.be'].includes(host)) { if (['youtube.com', 'www.youtube.com', 'youtu.be'].includes(host)) {
const videoId = host === 'youtu.be' ? url.pathname.slice(1) : url.searchParams.get('v'); const videoId = host === 'youtu.be' ? url.pathname.slice(1) : url.searchParams.get('v');
embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}`; embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}`;
const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/sddefault.jpg`;
return {
url: comment.link,
embedUrl,
type: 'iframe',
thumbnail: comment.thumbnailUrl || thumbnailUrl,
};
} else if (host.includes('odysee.com')) { } else if (host.includes('odysee.com')) {
const pathComponents = url.pathname.split('/'); const pathComponents = url.pathname.split('/');
const channelAndId = pathComponents[1]; const channelAndId = pathComponents[1];