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

update embeds p/all, p/subscriptions

Browse Source
This commit is contained in:
plebeius.eth
2023-09-10 13:43:33 +02:00
parent e61f395107
commit 935e652211
4 changed files with 624 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/All.jsx
+123 -63
View File
@@ -16,6 +16,7 @@ import EditModal from '../modals/EditModal';
import EditLabel from '../EditLabel'; import EditLabel from '../EditLabel';
import ImageBanner from '../ImageBanner'; import ImageBanner from '../ImageBanner';
import ModerationModal from '../modals/ModerationModal'; import ModerationModal from '../modals/ModerationModal';
import Embed from '../Embed';
import OfflineIndicator from '../OfflineIndicator'; import OfflineIndicator from '../OfflineIndicator';
import PendingLabel from '../PendingLabel'; import PendingLabel from '../PendingLabel';
import Post from '../Post'; import Post from '../Post';
@@ -717,33 +718,29 @@ const All = () => {
commentMediaInfo?.url.length > 30 ? commentMediaInfo?.url.length > 30 ?
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" ? null : `(${commentMediaInfo?.type})`}
{isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? ( {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
<span> <span>
-[ [
<span className='reply-link' <span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}} style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span> onClick={() => {handleThumbnailClick(index, 'thread')}}>
{isThreadThumbnailClicked[index] ? 'Close' : 'Embed'}
</span>
] ]
</span> </span>
) : null} )}
</div> </div>
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-${index}`} <div key={`enlarge-${index}`}
className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}> className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}> <span key={`fta-${index}`} className="file-thumb" style={
{(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail ?
<iframe {} : {width: displayWidth, height: displayHeight
className='enlarged' }}>
key={`fti-${index}`} {isThreadThumbnailClicked[index] && commentMediaInfo.url ? (
src={commentMediaInfo.embedUrl} <Embed url={commentMediaInfo.url} key={`fti-${index}`} />
width={commentMediaInfo.thumbnail ? "560" : "250"} ) : commentMediaInfo.thumbnail ? (
height="315"
style={{border: "none"}}
title="Embedded content"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen />
) : (
<img <img
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
@@ -751,7 +748,7 @@ const All = () => {
onClick={() => {handleThumbnailClick(index, 'thread')}} onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} ) : null}
</span> </span>
</div> </div>
)} )}
@@ -805,7 +802,7 @@ const All = () => {
</div> </div>
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {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}`} <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} />
@@ -1420,30 +1417,50 @@ const All = () => {
</div> </div>
</div> </div>
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
<div key={`f-${index}`} className="file" <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
style={{marginBottom: "5px"}}> <div key={`ft-${index}`} className="file-text">
<div key={`ft-${index}`} className="reply-file-text">
Link:&nbsp; Link:&nbsp;
<a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank" <a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
rel="noopener noreferrer">{ rel="noopener noreferrer">{
replyMediaInfo?.url.length > 30 ? replyMediaInfo?.url.length > 30 ?
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type}) }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? ( { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
isReplyThumbnailClicked[index] ? (
<span> <span>
-[ [
<span className='reply-link' <span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}} style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span> onClick={() => {handleThumbnailClick(index, 'reply')}}>
{isReplyThumbnailClicked[index] ? 'Close' : 'Embed'}
</span>
] ]
</span>) </span>
: null) )}
: null}
</div> </div>
{replyMediaInfo?.type === "webpage" ? ( {replyMediaInfo?.type === 'iframe' && (
<div key={`enlarge-reply-${index}`} className="img-container"> <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}}> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`fti-${index}`} <img key={`fti-${index}`}
@@ -1454,9 +1471,9 @@ const All = () => {
) : null} ) : null}
</span> </span>
</div> </div>
) : null} )}
{replyMediaInfo?.type === "image" ? ( {replyMediaInfo?.type === "image" && (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}> <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}
@@ -1465,16 +1482,16 @@ const All = () => {
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
</div> </div>
) : null} )}
{replyMediaInfo?.type === "video" ? ( {replyMediaInfo?.type === "video" && (
<div key={`enlarge-reply-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}> <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}}> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{isReplyThumbnailClicked[index] ? ( {isReplyThumbnailClicked[index] ? (
<video controls <video
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
src={replyMediaInfo.url} src={replyMediaInfo.url}
alt={replyMediaInfo.type} controls
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
@@ -1490,15 +1507,14 @@ const All = () => {
)} )}
</span> </span>
</div> </div>
) : null} )}
{replyMediaInfo?.type === "audio" ? ( {replyMediaInfo?.type === "audio" && (
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}> <span key={`fta-${index}`} className="file-thumb-reply">
<audio controls <audio controls key={`fti-${index}`}
key={`fti-${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} />
</span> </span>
) : null} )}
</div> </div>
) : null} ) : null}
{reply.content ? ( {reply.content ? (
@@ -1823,17 +1839,11 @@ const All = () => {
{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" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}> <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"}}> <div style={{width: "92vw"}}>
<iframe <Embed url={commentMediaInfo.url} key={`fti-mobile-${index}`} />
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 />
</div> </div>
) : ( ) : commentMediaInfo.thumbnail ? (
<img <img
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
@@ -1841,7 +1851,7 @@ const All = () => {
onClick={() => {handleThumbnailClick(index, 'mobileThread')}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} ) : <span onClick={() => {handleThumbnailClick(index, 'mobileThread')}}>Embed</span>)}
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "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"}}>
@@ -1850,8 +1860,8 @@ const All = () => {
>Close</span> >Close</span>
</div> </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">video</div>} )) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
</span> </span>
</div> </div>
)} )}
@@ -2065,7 +2075,35 @@ const All = () => {
{reply.link ? ( {reply.link ? (
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className="file-mobile">
{replyMediaInfo?.url ? ( {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"> <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}}> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
@@ -2090,12 +2128,34 @@ const All = () => {
</span> </span>
</div> </div>
) : replyMediaInfo.type === "video" ? ( ) : 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}`} <video key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} 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} /> 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> </span>
) : replyMediaInfo.type === "audio" ? ( ) : replyMediaInfo.type === "audio" ? (
<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] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
src/components/views/Board.jsx
+2 -2
View File
@@ -1415,7 +1415,7 @@ const Board = () => {
commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url commentMediaInfo?.url
}</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} }</a>&nbsp;{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>
[ [
<span className='reply-link' <span className='reply-link'
@@ -2119,7 +2119,7 @@ const Board = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} }</a>&nbsp;{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>
[ [
<span className='reply-link' <span className='reply-link'
src/components/views/Subscriptions.jsx
+123 -63
View File
@@ -17,6 +17,7 @@ import EditModal from '../modals/EditModal';
import EditLabel from '../EditLabel'; import EditLabel from '../EditLabel';
import ImageBanner from '../ImageBanner'; import ImageBanner from '../ImageBanner';
import ModerationModal from '../modals/ModerationModal'; import ModerationModal from '../modals/ModerationModal';
import Embed from '../Embed';
import OfflineIndicator from '../OfflineIndicator'; import OfflineIndicator from '../OfflineIndicator';
import PendingLabel from '../PendingLabel'; import PendingLabel from '../PendingLabel';
import Post from '../Post'; import Post from '../Post';
@@ -728,33 +729,29 @@ const Subscriptions = () => {
commentMediaInfo?.url.length > 30 ? commentMediaInfo?.url.length > 30 ?
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" ? null : `(${commentMediaInfo?.type})`}
{isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? ( {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
<span> <span>
-[ [
<span className='reply-link' <span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}} style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span> onClick={() => {handleThumbnailClick(index, 'thread')}}>
{isThreadThumbnailClicked[index] ? 'Close' : 'Embed'}
</span>
] ]
</span> </span>
) : null} )}
</div> </div>
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-${index}`} <div key={`enlarge-${index}`}
className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}> className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}> <span key={`fta-${index}`} className="file-thumb" style={
{(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail ?
<iframe {} : {width: displayWidth, height: displayHeight
className='enlarged' }}>
key={`fti-${index}`} {isThreadThumbnailClicked[index] && commentMediaInfo.url ? (
src={commentMediaInfo.embedUrl} <Embed url={commentMediaInfo.url} key={`fti-${index}`} />
width={commentMediaInfo.thumbnail ? "560" : "250"} ) : commentMediaInfo.thumbnail ? (
height="315"
style={{border: "none"}}
title="Embedded content"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen />
) : (
<img <img
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
@@ -762,7 +759,7 @@ const Subscriptions = () => {
onClick={() => {handleThumbnailClick(index, 'thread')}} onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} ) : null}
</span> </span>
</div> </div>
)} )}
@@ -816,7 +813,7 @@ const Subscriptions = () => {
</div> </div>
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {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}`} <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} />
@@ -1431,30 +1428,50 @@ const Subscriptions = () => {
</div> </div>
</div> </div>
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
<div key={`f-${index}`} className="file" <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
style={{marginBottom: "5px"}}> <div key={`ft-${index}`} className="file-text">
<div key={`ft-${index}`} className="reply-file-text">
Link:&nbsp; Link:&nbsp;
<a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank" <a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
rel="noopener noreferrer">{ rel="noopener noreferrer">{
replyMediaInfo?.url.length > 30 ? replyMediaInfo?.url.length > 30 ?
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type}) }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? ( { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
isReplyThumbnailClicked[index] ? (
<span> <span>
-[ [
<span className='reply-link' <span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}} style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span> onClick={() => {handleThumbnailClick(index, 'reply')}}>
{isReplyThumbnailClicked[index] ? 'Close' : 'Embed'}
</span>
] ]
</span>) </span>
: null) )}
: null}
</div> </div>
{replyMediaInfo?.type === "webpage" ? ( {replyMediaInfo?.type === 'iframe' && (
<div key={`enlarge-reply-${index}`} className="img-container"> <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}}> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`fti-${index}`} <img key={`fti-${index}`}
@@ -1465,9 +1482,9 @@ const Subscriptions = () => {
) : null} ) : null}
</span> </span>
</div> </div>
) : null} )}
{replyMediaInfo?.type === "image" ? ( {replyMediaInfo?.type === "image" && (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}> <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}
@@ -1476,16 +1493,16 @@ const Subscriptions = () => {
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
</div> </div>
) : null} )}
{replyMediaInfo?.type === "video" ? ( {replyMediaInfo?.type === "video" && (
<div key={`enlarge-reply-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}> <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}}> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{isReplyThumbnailClicked[index] ? ( {isReplyThumbnailClicked[index] ? (
<video controls <video
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
src={replyMediaInfo.url} src={replyMediaInfo.url}
alt={replyMediaInfo.type} controls
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
@@ -1501,15 +1518,14 @@ const Subscriptions = () => {
)} )}
</span> </span>
</div> </div>
) : null} )}
{replyMediaInfo?.type === "audio" ? ( {replyMediaInfo?.type === "audio" && (
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}> <span key={`fta-${index}`} className="file-thumb-reply">
<audio controls <audio controls key={`fti-${index}`}
key={`fti-${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} />
</span> </span>
) : null} )}
</div> </div>
) : null} ) : null}
{reply.content ? ( {reply.content ? (
@@ -1834,17 +1850,11 @@ const Subscriptions = () => {
{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" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}> <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"}}> <div style={{width: "92vw"}}>
<iframe <Embed url={commentMediaInfo.url} key={`fti-mobile-${index}`} />
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 />
</div> </div>
) : ( ) : commentMediaInfo.thumbnail ? (
<img <img
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
@@ -1852,7 +1862,7 @@ const Subscriptions = () => {
onClick={() => {handleThumbnailClick(index, 'mobileThread')}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} ) : <span onClick={() => {handleThumbnailClick(index, 'mobileThread')}}>Embed</span>)}
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "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"}}>
@@ -1861,8 +1871,8 @@ const Subscriptions = () => {
>Close</span> >Close</span>
</div> </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">video</div>} )) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
</span> </span>
</div> </div>
)} )}
@@ -2076,7 +2086,35 @@ const Subscriptions = () => {
{reply.link ? ( {reply.link ? (
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className="file-mobile">
{replyMediaInfo?.url ? ( {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"> <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}}> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
@@ -2101,12 +2139,34 @@ const Subscriptions = () => {
</span> </span>
</div> </div>
) : replyMediaInfo.type === "video" ? ( ) : 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}`} <video key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} 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} /> 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> </span>
) : replyMediaInfo.type === "audio" ? ( ) : replyMediaInfo.type === "audio" ? (
<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] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
src/components/views/Thread.jsx
+2 -2
View File
@@ -871,7 +871,7 @@ const Thread = () => {
commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url commentMediaInfo?.url
}</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} }</a>&nbsp;{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>
[ [
<span className='reply-link' <span className='reply-link'
@@ -1531,7 +1531,7 @@ const Thread = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} }</a>&nbsp;{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>
[ [
<span className='reply-link' <span className='reply-link'