mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
update embeds p/all, p/subscriptions
This commit is contained in:
plebeius.eth
+123
-63
@@ -16,6 +16,7 @@ import EditModal from '../modals/EditModal';
|
||||
import EditLabel from '../EditLabel';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import ModerationModal from '../modals/ModerationModal';
|
||||
import Embed from '../Embed';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import PendingLabel from '../PendingLabel';
|
||||
import Post from '../Post';
|
||||
@@ -717,33 +718,29 @@ const All = () => {
|
||||
commentMediaInfo?.url.length > 30 ?
|
||||
commentMediaInfo?.url.slice(0, 30) + "(...)" :
|
||||
commentMediaInfo?.url
|
||||
}</a> ({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
|
||||
{isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
|
||||
}</a> {commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
|
||||
{((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
|
||||
<span>
|
||||
-[
|
||||
[
|
||||
<span className='reply-link'
|
||||
style={{textDecoration: 'underline', cursor: 'pointer'}}
|
||||
onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span>
|
||||
onClick={() => {handleThumbnailClick(index, 'thread')}}>
|
||||
{isThreadThumbnailClicked[index] ? 'Close' : 'Embed'}
|
||||
</span>
|
||||
]
|
||||
</span>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
{commentMediaInfo?.type === 'iframe' && (
|
||||
<div key={`enlarge-${index}`}
|
||||
className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
|
||||
<span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
|
||||
{(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
|
||||
<iframe
|
||||
className='enlarged'
|
||||
key={`fti-${index}`}
|
||||
src={commentMediaInfo.embedUrl}
|
||||
width={commentMediaInfo.thumbnail ? "560" : "250"}
|
||||
height="315"
|
||||
style={{border: "none"}}
|
||||
title="Embedded content"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen />
|
||||
) : (
|
||||
<span key={`fta-${index}`} className="file-thumb" style={
|
||||
isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail ?
|
||||
{} : {width: displayWidth, height: displayHeight
|
||||
}}>
|
||||
{isThreadThumbnailClicked[index] && commentMediaInfo.url ? (
|
||||
<Embed url={commentMediaInfo.url} key={`fti-${index}`} />
|
||||
) : commentMediaInfo.thumbnail ? (
|
||||
<img
|
||||
key={`fti-${index}`}
|
||||
src={commentMediaInfo.thumbnail}
|
||||
@@ -751,7 +748,7 @@ const All = () => {
|
||||
onClick={() => {handleThumbnailClick(index, 'thread')}}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
)}
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -805,7 +802,7 @@ const All = () => {
|
||||
</div>
|
||||
) : null}
|
||||
{commentMediaInfo?.type === "audio" ? (
|
||||
<span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
|
||||
<span key={`fta-${index}`} className="file-thumb">
|
||||
<audio controls key={`fti-${index}`}
|
||||
src={commentMediaInfo.url} alt={commentMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
@@ -1420,30 +1417,50 @@ const All = () => {
|
||||
</div>
|
||||
</div>
|
||||
{replyMediaInfo?.url ? (
|
||||
<div key={`f-${index}`} className="file"
|
||||
style={{marginBottom: "5px"}}>
|
||||
<div key={`ft-${index}`} className="reply-file-text">
|
||||
<div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
|
||||
<div key={`ft-${index}`} className="file-text">
|
||||
Link:
|
||||
<a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
|
||||
rel="noopener noreferrer">{
|
||||
replyMediaInfo?.url.length > 30 ?
|
||||
replyMediaInfo?.url.slice(0, 30) + "(...)" :
|
||||
replyMediaInfo?.url
|
||||
}</a> ({replyMediaInfo?.type})
|
||||
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
|
||||
isReplyThumbnailClicked[index] ? (
|
||||
}</a> {replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
|
||||
{ ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
|
||||
<span>
|
||||
-[
|
||||
[
|
||||
<span className='reply-link'
|
||||
style={{textDecoration: 'underline', cursor: 'pointer'}}
|
||||
onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span>
|
||||
onClick={() => {handleThumbnailClick(index, 'reply')}}>
|
||||
{isReplyThumbnailClicked[index] ? 'Close' : 'Embed'}
|
||||
</span>
|
||||
]
|
||||
</span>)
|
||||
: null)
|
||||
: null}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{replyMediaInfo?.type === "webpage" ? (
|
||||
<div key={`enlarge-reply-${index}`} className="img-container">
|
||||
{replyMediaInfo?.type === 'iframe' && (
|
||||
<div key={`enlarge-${index}`}
|
||||
className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
|
||||
<span key={`fta-${index}`} className="file-thumb-reply" style={
|
||||
isReplyThumbnailClicked[index] || !replyMediaInfo.thumbnail ?
|
||||
{} : {width: replyDisplayWidth, height: replyDisplayHeight
|
||||
}}>
|
||||
{isReplyThumbnailClicked[index] && replyMediaInfo.url ? (
|
||||
<Embed url={replyMediaInfo.url} key={`fti-${index}`} />
|
||||
) : replyMediaInfo.thumbnail ? (
|
||||
<img
|
||||
key={`fti-${index}`}
|
||||
src={replyMediaInfo.thumbnail}
|
||||
alt="thumbnail"
|
||||
onClick={() => {handleThumbnailClick(index, 'reply')}}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{replyMediaInfo?.type === "webpage" && (
|
||||
<div key={`enlarge-${index}`} className="img-container">
|
||||
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
|
||||
{reply.thumbnailUrl ? (
|
||||
<img key={`fti-${index}`}
|
||||
@@ -1454,9 +1471,9 @@ const All = () => {
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "image" ? (
|
||||
<div key={`enlarge-reply-${index}`} className="img-container">
|
||||
)}
|
||||
{replyMediaInfo?.type === "image" && (
|
||||
<div key={`enlarge-${index}`} className="img-container">
|
||||
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
|
||||
<img key={`fti-${index}`}
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
@@ -1465,16 +1482,16 @@ const All = () => {
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "video" ? (
|
||||
<div key={`enlarge-reply-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
|
||||
)}
|
||||
{replyMediaInfo?.type === "video" && (
|
||||
<div key={`enlarge-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
|
||||
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
|
||||
{isReplyThumbnailClicked[index] ? (
|
||||
<video controls
|
||||
<video
|
||||
className='enlarged'
|
||||
key={`fti-${index}`}
|
||||
src={replyMediaInfo.url}
|
||||
alt={replyMediaInfo.type}
|
||||
controls
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl}
|
||||
/>
|
||||
@@ -1490,15 +1507,14 @@ const All = () => {
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "audio" ? (
|
||||
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
|
||||
<audio controls
|
||||
key={`fti-${index}`}
|
||||
)}
|
||||
{replyMediaInfo?.type === "audio" && (
|
||||
<span key={`fta-${index}`} className="file-thumb-reply">
|
||||
<audio controls key={`fti-${index}`}
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
{reply.content ? (
|
||||
@@ -1823,17 +1839,11 @@ const All = () => {
|
||||
{commentMediaInfo?.type === 'iframe' && (
|
||||
<div key={`enlarge-mob-${index}`} className="img-container">
|
||||
<span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
|
||||
{(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
|
||||
{(isMobileThreadThumbnailClicked[index] && commentMediaInfo.url ? (
|
||||
<div style={{width: "92vw"}}>
|
||||
<iframe
|
||||
key={`mob-fti-${index}`}
|
||||
src={commentMediaInfo.embedUrl}
|
||||
style={{border: "none", height: "250px"}}
|
||||
title="Embedded content"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen />
|
||||
<Embed url={commentMediaInfo.url} key={`fti-mobile-${index}`} />
|
||||
</div>
|
||||
) : (
|
||||
) : commentMediaInfo.thumbnail ? (
|
||||
<img
|
||||
key={`mob-fti-${index}`}
|
||||
src={commentMediaInfo.thumbnail}
|
||||
@@ -1841,7 +1851,7 @@ const All = () => {
|
||||
onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
)}
|
||||
) : <span onClick={() => {handleThumbnailClick(index, 'mobileThread')}}>Embed</span>)}
|
||||
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
|
||||
isMobileThreadThumbnailClicked[index] ? (
|
||||
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
|
||||
@@ -1850,8 +1860,8 @@ const All = () => {
|
||||
>Close</span>
|
||||
</div>
|
||||
) : (
|
||||
<div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
|
||||
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
|
||||
<div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
|
||||
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -2065,7 +2075,35 @@ const All = () => {
|
||||
{reply.link ? (
|
||||
<div key={`mob-f-${index}`} className="file-mobile">
|
||||
{replyMediaInfo?.url ? (
|
||||
replyMediaInfo.type === "webpage" ? (
|
||||
replyMediaInfo.type === "iframe" ? (
|
||||
<div key={`enlarge-mob-${index}`} className="img-container">
|
||||
<span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
|
||||
{(isMobileReplyThumbnailClicked[index] && replyMediaInfo.url ? (
|
||||
<div style={{width: "92vw"}}>
|
||||
<Embed url={replyMediaInfo.url} key={`fti-mobile-reply-${index}`} />
|
||||
</div>
|
||||
) : replyMediaInfo.thumbnail ? (
|
||||
<img
|
||||
key={`mob-fti-${index}`}
|
||||
src={replyMediaInfo.thumbnail}
|
||||
alt="thumbnail"
|
||||
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
) : <span onClick={() => {handleThumbnailClick(index, 'mobileReply')}}>Embed</span>)}
|
||||
{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"}}
|
||||
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
|
||||
>Close</span>
|
||||
</div>
|
||||
) : (
|
||||
<div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
|
||||
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
|
||||
</span>
|
||||
</div>
|
||||
) : replyMediaInfo.type === "webpage" ? (
|
||||
<div key={`enlarge-mob-reply-${index}`} className="img-container">
|
||||
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
|
||||
{reply.thumbnailUrl ? (
|
||||
@@ -2090,12 +2128,34 @@ const All = () => {
|
||||
</span>
|
||||
</div>
|
||||
) : replyMediaInfo.type === "video" ? (
|
||||
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
|
||||
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
|
||||
{isMobileReplyThumbnailClicked[index] ? (
|
||||
<video key={`fti-${index}`}
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
style={{ pointerEvents: "none" }}
|
||||
controls
|
||||
style={{ all: 'unset', width: '100%', height: '100%', cursor: 'pointer'}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
|
||||
) : (
|
||||
<video
|
||||
key={`fti-${index}`}
|
||||
src={replyMediaInfo.url}
|
||||
alt="thumbnail"
|
||||
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
|
||||
style={{cursor: "pointer"}}
|
||||
id="video-thumbnail-mobile"
|
||||
onError={(e) => e.target.src = fallbackImgUrl}
|
||||
/>
|
||||
)}
|
||||
{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"}}
|
||||
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
|
||||
>Close</span>
|
||||
</div>
|
||||
) : (
|
||||
<div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
|
||||
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
|
||||
</span>
|
||||
) : replyMediaInfo.type === "audio" ? (
|
||||
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
|
||||
|
||||
@@ -1415,7 +1415,7 @@ const Board = () => {
|
||||
commentMediaInfo?.url.slice(0, 30) + "(...)" :
|
||||
commentMediaInfo?.url
|
||||
}</a> {commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
|
||||
{ (isThreadThumbnailClicked[index] || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
|
||||
{((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
|
||||
<span>
|
||||
[
|
||||
<span className='reply-link'
|
||||
@@ -2119,7 +2119,7 @@ const Board = () => {
|
||||
replyMediaInfo?.url.slice(0, 30) + "(...)" :
|
||||
replyMediaInfo?.url
|
||||
}</a> {replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
|
||||
{ (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
|
||||
{ ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
|
||||
<span>
|
||||
[
|
||||
<span className='reply-link'
|
||||
|
||||
@@ -17,6 +17,7 @@ import EditModal from '../modals/EditModal';
|
||||
import EditLabel from '../EditLabel';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import ModerationModal from '../modals/ModerationModal';
|
||||
import Embed from '../Embed';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import PendingLabel from '../PendingLabel';
|
||||
import Post from '../Post';
|
||||
@@ -728,33 +729,29 @@ const Subscriptions = () => {
|
||||
commentMediaInfo?.url.length > 30 ?
|
||||
commentMediaInfo?.url.slice(0, 30) + "(...)" :
|
||||
commentMediaInfo?.url
|
||||
}</a> ({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
|
||||
{isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
|
||||
}</a> {commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
|
||||
{((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
|
||||
<span>
|
||||
-[
|
||||
[
|
||||
<span className='reply-link'
|
||||
style={{textDecoration: 'underline', cursor: 'pointer'}}
|
||||
onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span>
|
||||
onClick={() => {handleThumbnailClick(index, 'thread')}}>
|
||||
{isThreadThumbnailClicked[index] ? 'Close' : 'Embed'}
|
||||
</span>
|
||||
]
|
||||
</span>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
{commentMediaInfo?.type === 'iframe' && (
|
||||
<div key={`enlarge-${index}`}
|
||||
className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
|
||||
<span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
|
||||
{(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
|
||||
<iframe
|
||||
className='enlarged'
|
||||
key={`fti-${index}`}
|
||||
src={commentMediaInfo.embedUrl}
|
||||
width={commentMediaInfo.thumbnail ? "560" : "250"}
|
||||
height="315"
|
||||
style={{border: "none"}}
|
||||
title="Embedded content"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen />
|
||||
) : (
|
||||
<span key={`fta-${index}`} className="file-thumb" style={
|
||||
isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail ?
|
||||
{} : {width: displayWidth, height: displayHeight
|
||||
}}>
|
||||
{isThreadThumbnailClicked[index] && commentMediaInfo.url ? (
|
||||
<Embed url={commentMediaInfo.url} key={`fti-${index}`} />
|
||||
) : commentMediaInfo.thumbnail ? (
|
||||
<img
|
||||
key={`fti-${index}`}
|
||||
src={commentMediaInfo.thumbnail}
|
||||
@@ -762,7 +759,7 @@ const Subscriptions = () => {
|
||||
onClick={() => {handleThumbnailClick(index, 'thread')}}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
)}
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -816,7 +813,7 @@ const Subscriptions = () => {
|
||||
</div>
|
||||
) : null}
|
||||
{commentMediaInfo?.type === "audio" ? (
|
||||
<span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
|
||||
<span key={`fta-${index}`} className="file-thumb">
|
||||
<audio controls key={`fti-${index}`}
|
||||
src={commentMediaInfo.url} alt={commentMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
@@ -1431,30 +1428,50 @@ const Subscriptions = () => {
|
||||
</div>
|
||||
</div>
|
||||
{replyMediaInfo?.url ? (
|
||||
<div key={`f-${index}`} className="file"
|
||||
style={{marginBottom: "5px"}}>
|
||||
<div key={`ft-${index}`} className="reply-file-text">
|
||||
<div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
|
||||
<div key={`ft-${index}`} className="file-text">
|
||||
Link:
|
||||
<a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
|
||||
rel="noopener noreferrer">{
|
||||
replyMediaInfo?.url.length > 30 ?
|
||||
replyMediaInfo?.url.slice(0, 30) + "(...)" :
|
||||
replyMediaInfo?.url
|
||||
}</a> ({replyMediaInfo?.type})
|
||||
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
|
||||
isReplyThumbnailClicked[index] ? (
|
||||
}</a> {replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
|
||||
{ ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
|
||||
<span>
|
||||
-[
|
||||
[
|
||||
<span className='reply-link'
|
||||
style={{textDecoration: 'underline', cursor: 'pointer'}}
|
||||
onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span>
|
||||
onClick={() => {handleThumbnailClick(index, 'reply')}}>
|
||||
{isReplyThumbnailClicked[index] ? 'Close' : 'Embed'}
|
||||
</span>
|
||||
]
|
||||
</span>)
|
||||
: null)
|
||||
: null}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{replyMediaInfo?.type === "webpage" ? (
|
||||
<div key={`enlarge-reply-${index}`} className="img-container">
|
||||
{replyMediaInfo?.type === 'iframe' && (
|
||||
<div key={`enlarge-${index}`}
|
||||
className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
|
||||
<span key={`fta-${index}`} className="file-thumb-reply" style={
|
||||
isReplyThumbnailClicked[index] || !replyMediaInfo.thumbnail ?
|
||||
{} : {width: replyDisplayWidth, height: replyDisplayHeight
|
||||
}}>
|
||||
{isReplyThumbnailClicked[index] && replyMediaInfo.url ? (
|
||||
<Embed url={replyMediaInfo.url} key={`fti-${index}`} />
|
||||
) : replyMediaInfo.thumbnail ? (
|
||||
<img
|
||||
key={`fti-${index}`}
|
||||
src={replyMediaInfo.thumbnail}
|
||||
alt="thumbnail"
|
||||
onClick={() => {handleThumbnailClick(index, 'reply')}}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{replyMediaInfo?.type === "webpage" && (
|
||||
<div key={`enlarge-${index}`} className="img-container">
|
||||
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
|
||||
{reply.thumbnailUrl ? (
|
||||
<img key={`fti-${index}`}
|
||||
@@ -1465,9 +1482,9 @@ const Subscriptions = () => {
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "image" ? (
|
||||
<div key={`enlarge-reply-${index}`} className="img-container">
|
||||
)}
|
||||
{replyMediaInfo?.type === "image" && (
|
||||
<div key={`enlarge-${index}`} className="img-container">
|
||||
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
|
||||
<img key={`fti-${index}`}
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
@@ -1476,16 +1493,16 @@ const Subscriptions = () => {
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "video" ? (
|
||||
<div key={`enlarge-reply-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
|
||||
)}
|
||||
{replyMediaInfo?.type === "video" && (
|
||||
<div key={`enlarge-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
|
||||
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
|
||||
{isReplyThumbnailClicked[index] ? (
|
||||
<video controls
|
||||
<video
|
||||
className='enlarged'
|
||||
key={`fti-${index}`}
|
||||
src={replyMediaInfo.url}
|
||||
alt={replyMediaInfo.type}
|
||||
controls
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl}
|
||||
/>
|
||||
@@ -1501,15 +1518,14 @@ const Subscriptions = () => {
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "audio" ? (
|
||||
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
|
||||
<audio controls
|
||||
key={`fti-${index}`}
|
||||
)}
|
||||
{replyMediaInfo?.type === "audio" && (
|
||||
<span key={`fta-${index}`} className="file-thumb-reply">
|
||||
<audio controls key={`fti-${index}`}
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
{reply.content ? (
|
||||
@@ -1834,17 +1850,11 @@ const Subscriptions = () => {
|
||||
{commentMediaInfo?.type === 'iframe' && (
|
||||
<div key={`enlarge-mob-${index}`} className="img-container">
|
||||
<span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
|
||||
{(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
|
||||
{(isMobileThreadThumbnailClicked[index] && commentMediaInfo.url ? (
|
||||
<div style={{width: "92vw"}}>
|
||||
<iframe
|
||||
key={`mob-fti-${index}`}
|
||||
src={commentMediaInfo.embedUrl}
|
||||
style={{border: "none", height: "250px"}}
|
||||
title="Embedded content"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen />
|
||||
<Embed url={commentMediaInfo.url} key={`fti-mobile-${index}`} />
|
||||
</div>
|
||||
) : (
|
||||
) : commentMediaInfo.thumbnail ? (
|
||||
<img
|
||||
key={`mob-fti-${index}`}
|
||||
src={commentMediaInfo.thumbnail}
|
||||
@@ -1852,7 +1862,7 @@ const Subscriptions = () => {
|
||||
onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
)}
|
||||
) : <span onClick={() => {handleThumbnailClick(index, 'mobileThread')}}>Embed</span>)}
|
||||
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
|
||||
isMobileThreadThumbnailClicked[index] ? (
|
||||
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
|
||||
@@ -1861,8 +1871,8 @@ const Subscriptions = () => {
|
||||
>Close</span>
|
||||
</div>
|
||||
) : (
|
||||
<div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
|
||||
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
|
||||
<div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
|
||||
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -2076,7 +2086,35 @@ const Subscriptions = () => {
|
||||
{reply.link ? (
|
||||
<div key={`mob-f-${index}`} className="file-mobile">
|
||||
{replyMediaInfo?.url ? (
|
||||
replyMediaInfo.type === "webpage" ? (
|
||||
replyMediaInfo.type === "iframe" ? (
|
||||
<div key={`enlarge-mob-${index}`} className="img-container">
|
||||
<span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
|
||||
{(isMobileReplyThumbnailClicked[index] && replyMediaInfo.url ? (
|
||||
<div style={{width: "92vw"}}>
|
||||
<Embed url={replyMediaInfo.url} key={`fti-mobile-reply-${index}`} />
|
||||
</div>
|
||||
) : replyMediaInfo.thumbnail ? (
|
||||
<img
|
||||
key={`mob-fti-${index}`}
|
||||
src={replyMediaInfo.thumbnail}
|
||||
alt="thumbnail"
|
||||
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
) : <span onClick={() => {handleThumbnailClick(index, 'mobileReply')}}>Embed</span>)}
|
||||
{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"}}
|
||||
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
|
||||
>Close</span>
|
||||
</div>
|
||||
) : (
|
||||
<div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
|
||||
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
|
||||
</span>
|
||||
</div>
|
||||
) : replyMediaInfo.type === "webpage" ? (
|
||||
<div key={`enlarge-mob-reply-${index}`} className="img-container">
|
||||
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
|
||||
{reply.thumbnailUrl ? (
|
||||
@@ -2101,12 +2139,34 @@ const Subscriptions = () => {
|
||||
</span>
|
||||
</div>
|
||||
) : replyMediaInfo.type === "video" ? (
|
||||
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
|
||||
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
|
||||
{isMobileReplyThumbnailClicked[index] ? (
|
||||
<video key={`fti-${index}`}
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
style={{ pointerEvents: "none" }}
|
||||
controls
|
||||
style={{ all: 'unset', width: '100%', height: '100%', cursor: 'pointer'}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
|
||||
) : (
|
||||
<video
|
||||
key={`fti-${index}`}
|
||||
src={replyMediaInfo.url}
|
||||
alt="thumbnail"
|
||||
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
|
||||
style={{cursor: "pointer"}}
|
||||
id="video-thumbnail-mobile"
|
||||
onError={(e) => e.target.src = fallbackImgUrl}
|
||||
/>
|
||||
)}
|
||||
{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"}}
|
||||
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
|
||||
>Close</span>
|
||||
</div>
|
||||
) : (
|
||||
<div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
|
||||
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
|
||||
</span>
|
||||
) : replyMediaInfo.type === "audio" ? (
|
||||
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
|
||||
|
||||
@@ -871,7 +871,7 @@ const Thread = () => {
|
||||
commentMediaInfo?.url.slice(0, 30) + "(...)" :
|
||||
commentMediaInfo?.url
|
||||
}</a> {commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
|
||||
{ (isThreadThumbnailClicked[index] || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
|
||||
{((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
|
||||
<span>
|
||||
[
|
||||
<span className='reply-link'
|
||||
@@ -1531,7 +1531,7 @@ const Thread = () => {
|
||||
replyMediaInfo?.url.slice(0, 30) + "(...)" :
|
||||
replyMediaInfo?.url
|
||||
}</a> {replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
|
||||
{ (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
|
||||
{ ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
|
||||
<span>
|
||||
[
|
||||
<span className='reply-link'
|
||||
|
||||
Reference in New Issue
Block a user