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
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
{isThreadThumbnailClicked[index] ? (
{isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
<span>
-[
<span className='reply-link'
@@ -1432,7 +1432,7 @@ const All = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? (
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isReplyThumbnailClicked[index] ? (
<span>
-[
@@ -1844,7 +1844,7 @@ const All = () => {
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -1901,7 +1901,7 @@ const All = () => {
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<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 (
<div key={`thread-`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}
<div key={`thread-`} className="thread"
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{isHoveringOnThread === thread.cid ?
<div ref={popupRef}
onMouseOver={() => handleMouseOnLeaveThread()}
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
}}
className="thread_popup">
<p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
&& !isEnoughSpaceOnRight
?
{overflow:"visible",whiteSpace:"normal"}
: null
}
className="thread_popup_content">
<span className="thread_popup_title" >
{thread.title ? `${thread.title} ` : "Posted "}
</span>
by
<span className="thread_popup_author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</p>
<div>
{thread.replyCount > 0 ?
<p className="thread_popup_lastReply">
Last reply by <span className="thread_popup_author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)}</p>
: null}</div>
</div> : null }
<div ref={popupRef}
onMouseOver={() => handleMouseOnLeaveThread()}
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
}}
className="thread_popup">
<p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
&& !isEnoughSpaceOnRight
?
{overflow:"visible",whiteSpace:"normal"}
: null}
className="thread_popup_content">
<span className="thread_popup_title" >
{thread.title ? `${thread.title} ` : "Posted "}
</span>
by
<span className="thread_popup_author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}
</p>
<div>
{thread.replyCount > 0 ?
<p className="thread_popup_lastReply">
Last reply by <span className="thread_popup_author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)}
</p>
: null}
</div>
</div>
: null }
{commentMediaInfo?.url ? (
<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" ? (
thread.thumbnailUrl ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
@@ -398,6 +400,13 @@ const CatalogPost = ({post}) => {
</span>
) : 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" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`}
@@ -425,11 +434,7 @@ const CatalogPost = ({post}) => {
</Link>
) : null}
<div key={`ti-`} className="thread-icons" >
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
{isMediaShowed ? (
<OfflineIndicator
address={thread.subplebbitAddress}
className="thread-icon offline-icon"
@@ -441,7 +446,7 @@ const CatalogPost = ({post}) => {
tooltipPlace="top" />
)}
</div>
<BoardForm selectedStyle={selectedStyle}
<BoardForm selectedStyle={selectedStyle} onMouseOver={() => handleMouseOnLeaveThread()}
style={{ all: "unset"}}>
<div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
@@ -594,7 +599,7 @@ const CatalogPost = ({post}) => {
onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}
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>
{thread.content ? `: ${thread.content}` : null}
</span>
src/components/views/Board.jsx
+6 -6
View File
@@ -1416,7 +1416,7 @@ const Board = () => {
commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
{isThreadThumbnailClicked[index] ? (
{isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
<span>
-[
<span className='reply-link'
@@ -2125,8 +2125,8 @@ const Board = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? (
isReplyThumbnailClicked[index] ? (
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isReplyThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
<span>
-[
<span className='reply-link'
@@ -2532,7 +2532,7 @@ const Board = () => {
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -2589,7 +2589,7 @@ const Board = () => {
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -2789,7 +2789,7 @@ const Board = () => {
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{replyMediaInfo?.type === "video" || "iframe" ? (
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isMobileReplyThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<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 {
return (
<div key={`thread-`} className="thread"
onMouseLeave={()=>{handleMouseOnLeaveThread()}} onMouseOver={() => setIsHoveringOnThread(thread.cid)}>
{isHoveringOnThread === thread.cid ?
<div ref={popupRef}
onMouseOver={() => handleMouseOnLeaveThread()}
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
}}
className="thread_popup">
<p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
&& !isEnoughSpaceOnRight
?
{overflow:"visible",whiteSpace:"normal"}
: null
}
className="thread_popup_content">
<span className="thread_popup_title" >
{thread.title ? `${thread.title} ` : "Posted "}
</span>
by
<span className="thread_popup_author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</p>
<div>
{thread.replyCount > 0 ?
<p className="thread_popup_lastReply">
Last reply by <span className="thread_popup_author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)}</p>
: null}</div>
</div> : null }
onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
{isHoveringOnThread === thread.cid ?
<div ref={popupRef}
onMouseOver={() => handleMouseOnLeaveThread()}
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
}}
className="thread_popup">
<p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
&& !isEnoughSpaceOnRight
?
{overflow:"visible",whiteSpace:"normal"}
: null
}
className="thread_popup_content">
<span className="thread_popup_title" >
{thread.title ? `${thread.title} ` : "Posted "}
</span>
by
<span className="thread_popup_author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</p>
<div>
{thread.replyCount > 0 ?
<p className="thread_popup_lastReply">
Last reply by <span className="thread_popup_author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)}</p>
: null}
</div>
</div>
: null }
{commentMediaInfo?.url ? (
<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" ? (
thread.thumbnailUrl ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
@@ -648,6 +650,13 @@ const CatalogPost = ({post}) => {
</span>
) : 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" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`}
@@ -674,11 +683,7 @@ const CatalogPost = ({post}) => {
) : null}
</Link>
) : null}
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
{isMediaShowed ? (
<div key={`ti-`} className="thread-icons" >
{thread.pinned ? (
<span key={`si-`} className="thread-icon sticky-icon" title="Sticky"
@@ -692,7 +697,7 @@ const CatalogPost = ({post}) => {
) : null}
</div>
) : null}
<BoardForm selectedStyle={selectedStyle}
<BoardForm selectedStyle={selectedStyle} onMouseOver={() => handleMouseOnLeaveThread()}
style={{ all: "unset"}}>
<div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
@@ -702,11 +707,7 @@ const CatalogPost = ({post}) => {
L:&nbsp;<b key={`i-`}>{linkCount}</b>
</>
) : null}
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? null : (
{isMediaShowed ? null : (
<div className='thread-icons'
style={{position: 'absolute', top: '-2px', right: '15px'}}>
{thread.pinned ? (
@@ -795,10 +796,7 @@ const CatalogPost = ({post}) => {
) : null}
</>
)}</VerifiedAuthor>
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
{isMediaShowed ? (
<li
onMouseOver={() => {setIsImageSearchOpen(true)}}
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
@@ -863,7 +861,7 @@ const CatalogPost = ({post}) => {
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
<div style={{cursor:"text"}}
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>
{thread.content ? `: ${thread.content}` : null}
</span>
src/components/views/Pending.jsx
+2 -2
View File
@@ -496,7 +496,7 @@ const Pending = () => {
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -553,7 +553,7 @@ const Pending = () => {
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<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
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
{isThreadThumbnailClicked[index] ? (
{isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
<span>
-[
<span className='reply-link'
@@ -1443,7 +1443,7 @@ const Subscriptions = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? (
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isReplyThumbnailClicked[index] ? (
<span>
-[
@@ -1855,7 +1855,7 @@ const Subscriptions = () => {
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -1912,7 +1912,7 @@ const Subscriptions = () => {
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<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 (
<div key={`thread-`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{isHoveringOnThread === thread.cid ?
<div ref={popupRef}
onMouseOver={() => handleMouseOnLeaveThread()}
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
}}
className="thread_popup">
<p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
&& !isEnoughSpaceOnRight
?
{overflow:"visible",whiteSpace:"normal"}
: null
}
className="thread_popup_content">
<span className="thread_popup_title" >
{thread.title ? `${thread.title} ` : "Posted "}
</span>
by
<span className="thread_popup_author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</p>
<div>
{thread.replyCount > 0 ?
<p className="thread_popup_lastReply">
Last reply by <span className="thread_popup_author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)}</p>
: null}</div>
</div> : null }
<div ref={popupRef}
onMouseOver={() => handleMouseOnLeaveThread()}
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
}}
className="thread_popup">
<p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
&& !isEnoughSpaceOnRight
?
{overflow:"visible",whiteSpace:"normal"}
: null
}
className="thread_popup_content">
<span className="thread_popup_title" >
{thread.title ? `${thread.title} ` : "Posted "}
</span>
by
<span className="thread_popup_author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}
</p>
<div>
{thread.replyCount > 0 ?
<p className="thread_popup_lastReply">
Last reply by <span className="thread_popup_author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)}
</p>
: null}
</div>
</div>
: null }
{commentMediaInfo?.url ? (
<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" ? (
thread.thumbnailUrl ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
@@ -398,6 +401,13 @@ const CatalogPost = ({post}) => {
</span>
) : 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" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`}
@@ -425,11 +435,7 @@ const CatalogPost = ({post}) => {
</Link>
) : null}
<div key={`ti-`} className="thread-icons" >
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
{isMediaShowed ? (
<OfflineIndicator
address={thread.subplebbitAddress}
className="thread-icon offline-icon"
@@ -441,7 +447,7 @@ const CatalogPost = ({post}) => {
tooltipPlace="top" />
)}
</div>
<BoardForm selectedStyle={selectedStyle}
<BoardForm selectedStyle={selectedStyle} onMouseOver={() => handleMouseOnLeaveThread()}
style={{ all: "unset"}}>
<div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
@@ -594,7 +600,7 @@ const CatalogPost = ({post}) => {
onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}
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>
{thread.content ? `: ${thread.content}` : null}
</span>
src/components/views/Thread.jsx
+3 -3
View File
@@ -1534,7 +1534,7 @@ const Thread = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? (
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isReplyThumbnailClicked[index] ? (
<span>
-[
@@ -1819,7 +1819,7 @@ const Thread = () => {
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -1876,7 +1876,7 @@ const Thread = () => {
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<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)) {
const videoId = host === 'youtu.be' ? url.pathname.slice(1) : url.searchParams.get('v');
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')) {
const pathComponents = url.pathname.split('/');
const channelAndId = pathComponents[1];