mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
fix embedded media, add new sites
This commit is contained in:
plebeius.eth
@@ -0,0 +1,259 @@
|
||||
const Embed = ({url}) => {
|
||||
const parsedUrl = new URL(url);
|
||||
|
||||
if (youtubeHosts.has(parsedUrl.host)) {
|
||||
return <YoutubeEmbed parsedUrl={parsedUrl} />;
|
||||
}
|
||||
if (twitterHosts.has(parsedUrl.host)) {
|
||||
return <TwitterEmbed parsedUrl={parsedUrl} />;
|
||||
}
|
||||
if (redditHosts.has(parsedUrl.host)) {
|
||||
return <RedditEmbed parsedUrl={parsedUrl} />;
|
||||
}
|
||||
if (twitchHosts.has(parsedUrl.host)) {
|
||||
return <TwitchEmbed parsedUrl={parsedUrl} />;
|
||||
}
|
||||
if (tiktokHosts.has(parsedUrl.host)) {
|
||||
return <TiktokEmbed parsedUrl={parsedUrl} />;
|
||||
}
|
||||
if (instagramHosts.has(parsedUrl.host)) {
|
||||
return <InstagramEmbed parsedUrl={parsedUrl} />;
|
||||
}
|
||||
if (odyseeHosts.has(parsedUrl.host)) {
|
||||
return <OdyseeEmbed parsedUrl={parsedUrl} />;
|
||||
}
|
||||
if (bitchuteHosts.has(parsedUrl.host)) {
|
||||
return <BitchuteEmbed parsedUrl={parsedUrl} />;
|
||||
}
|
||||
if (streamableHosts.has(parsedUrl.host)) {
|
||||
return <StreamableEmbed parsedUrl={parsedUrl} />;
|
||||
}
|
||||
if (spotifyHosts.has(parsedUrl.host)) {
|
||||
return <SpotifyEmbed parsedUrl={parsedUrl} />;
|
||||
}
|
||||
};
|
||||
|
||||
const youtubeHosts = new Set(['youtube.com', 'www.youtube.com', 'youtu.be', 'www.youtu.be']);
|
||||
|
||||
const YoutubeEmbed = ({parsedUrl}) => {
|
||||
let youtubeId;
|
||||
if (parsedUrl.host.endsWith('youtu.be')) {
|
||||
youtubeId = parsedUrl.pathname.replaceAll('/', '');
|
||||
}
|
||||
else {
|
||||
youtubeId = parsedUrl.searchParams.get('v');
|
||||
}
|
||||
return <iframe
|
||||
className='enlarged youtube-embed'
|
||||
height="100%"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
credentialless
|
||||
referrerpolicy='no-referrer'
|
||||
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
title={parsedUrl.href}
|
||||
src={`https://www.youtube.com/embed/${youtubeId}`}
|
||||
/>;
|
||||
};
|
||||
|
||||
const twitterHosts = new Set(['twitter.com', 'www.twitter.com', 'x.com', 'www.x.com']);
|
||||
|
||||
const TwitterEmbed = ({parsedUrl}) => {
|
||||
return <iframe
|
||||
className='enlarged twitter-embed'
|
||||
height="100%"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
credentialless
|
||||
referrerpolicy='no-referrer'
|
||||
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
title={parsedUrl.href}
|
||||
srcdoc={`
|
||||
<blockquote class="twitter-tweet" data-theme="dark">
|
||||
<a href="${parsedUrl.href}"></a>
|
||||
</blockquote>
|
||||
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
`}
|
||||
/>;
|
||||
};
|
||||
|
||||
const redditHosts = new Set(['reddit.com', 'www.reddit.com', 'old.reddit.com']);
|
||||
|
||||
const RedditEmbed = ({parsedUrl}) => {
|
||||
return <iframe
|
||||
className='enlarged reddit-embed'
|
||||
height="100%"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
credentialless
|
||||
referrerpolicy='no-referrer'
|
||||
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
title={parsedUrl.href}
|
||||
srcdoc={`
|
||||
<style>
|
||||
/* fix reddit iframe being centered */
|
||||
iframe {
|
||||
margin: 0!important;
|
||||
}
|
||||
</style>
|
||||
<blockquote class="reddit-embed-bq" style="height:240px" data-embed-theme="dark">
|
||||
<a href="${parsedUrl.href}"></a>
|
||||
</blockquote>
|
||||
<script async src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>
|
||||
`}
|
||||
/>;
|
||||
};
|
||||
|
||||
const twitchHosts = new Set(['twitch.tv', 'www.twitch.tv']);
|
||||
|
||||
const TwitchEmbed = ({parsedUrl}) => {
|
||||
let iframeUrl;
|
||||
if (parsedUrl.pathname.startsWith('/videos/')) {
|
||||
const videoId = parsedUrl.pathname.replace('/videos/', '');
|
||||
iframeUrl = `https://player.twitch.tv/?video=${videoId}&parent=${window.location.hostname}`;
|
||||
}
|
||||
else {
|
||||
const channel = parsedUrl.pathname.replaceAll('/', '');
|
||||
iframeUrl = `https://player.twitch.tv/?channel=${channel}&parent=${window.location.hostname}`;
|
||||
}
|
||||
return <iframe
|
||||
className='enlarged twitch-embed'
|
||||
height="100%"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
credentialless
|
||||
referrerpolicy='no-referrer'
|
||||
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
title={parsedUrl.href}
|
||||
src={iframeUrl}
|
||||
/>;
|
||||
};
|
||||
|
||||
const tiktokHosts = new Set(['tiktok.com', 'www.tiktok.com']);
|
||||
|
||||
const TiktokEmbed = ({parsedUrl}) => {
|
||||
const videoId = parsedUrl.pathname.replace(/.+\/video\//, '').replaceAll('/', '');
|
||||
return <iframe
|
||||
className='enlarged tiktok-embed'
|
||||
height="100%"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
credentialless
|
||||
referrerpolicy='no-referrer'
|
||||
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
title={parsedUrl.href}
|
||||
srcdoc={`
|
||||
<blockquote class="tiktok-embed" data-video-id="${videoId}">
|
||||
<a></a>
|
||||
</blockquote>
|
||||
<script async src="https://www.tiktok.com/embed.js"></script>
|
||||
`}
|
||||
/>;
|
||||
};
|
||||
|
||||
const instagramHosts = new Set(['instagram.com', 'www.instagram.com']);
|
||||
|
||||
const InstagramEmbed = ({parsedUrl}) => {
|
||||
const pathNames = parsedUrl.pathname.replace(/\/+$/, '').split('/');
|
||||
const id = pathNames[pathNames.length - 1];
|
||||
return <iframe
|
||||
className='enlarged instagram-embed'
|
||||
height="100%"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
credentialless
|
||||
referrerpolicy='no-referrer'
|
||||
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
title={parsedUrl.href}
|
||||
srcdoc={`
|
||||
<blockquote class="instagram-media">
|
||||
<a href="https://www.instagram.com/p/${id}/"></a>
|
||||
</blockquote>
|
||||
<script async src="//www.instagram.com/embed.js"></script>
|
||||
`}
|
||||
/>;
|
||||
};
|
||||
|
||||
const odyseeHosts = new Set(['odysee.com', 'www.odysee.com']);
|
||||
|
||||
const OdyseeEmbed = ({parsedUrl}) => {
|
||||
const iframeUrl = `https://odysee.com/$/embed${parsedUrl.pathname}`;
|
||||
return <iframe
|
||||
className='enlarged odysee-embed'
|
||||
height="100%"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
credentialless
|
||||
referrerpolicy='no-referrer'
|
||||
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
title={parsedUrl.href}
|
||||
src={iframeUrl}
|
||||
/>;
|
||||
};
|
||||
|
||||
const bitchuteHosts = new Set(['bitchute.com', 'www.bitchute.com']);
|
||||
|
||||
const BitchuteEmbed = ({parsedUrl}) => {
|
||||
const videoId = parsedUrl.pathname.replace(/\/video\//, '').replaceAll('/', '');
|
||||
return <iframe
|
||||
className='enlarged bitchute-embed'
|
||||
height="100%"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
credentialless
|
||||
referrerpolicy='no-referrer'
|
||||
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
title={parsedUrl.href}
|
||||
src={`https://www.bitchute.com/embed/${videoId}/`}
|
||||
/>;
|
||||
};
|
||||
|
||||
const streamableHosts = new Set(['streamable.com', 'www.streamable.com']);
|
||||
|
||||
const StreamableEmbed = ({parsedUrl}) => {
|
||||
const videoId = parsedUrl.pathname.replaceAll('/', '');
|
||||
return <iframe
|
||||
className='enlarged streamable-embed'
|
||||
height="100%"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
credentialless
|
||||
referrerpolicy='no-referrer'
|
||||
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
title={parsedUrl.href}
|
||||
src={`https://streamable.com/e/${videoId}`}
|
||||
/>;
|
||||
};
|
||||
|
||||
const spotifyHosts = new Set(['spotify.com', 'www.spotify.com', 'open.spotify.com']);
|
||||
|
||||
const SpotifyEmbed = ({parsedUrl}) => {
|
||||
const iframeUrl = `https://open.spotify.com/embed${parsedUrl.pathname}?theme=0`
|
||||
return <iframe
|
||||
className='enlarged spotify-embed'
|
||||
height="100%"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
credentialless
|
||||
referrerpolicy='no-referrer'
|
||||
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
title={parsedUrl.href}
|
||||
src={iframeUrl}
|
||||
/>;
|
||||
};
|
||||
|
||||
const canEmbedHosts = new Set([
|
||||
...youtubeHosts, ...twitterHosts, ...redditHosts, ...twitchHosts,
|
||||
...tiktokHosts, ...instagramHosts, ...odyseeHosts, ...bitchuteHosts,
|
||||
...streamableHosts, ...spotifyHosts
|
||||
]);
|
||||
|
||||
export const canEmbed = (parsedUrl) => canEmbedHosts.has(parsedUrl.host);
|
||||
|
||||
export default Embed;
|
||||
@@ -42,10 +42,47 @@ export const GlobalStyle = createGlobalStyle`
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.enlarged {
|
||||
display: block;
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
@media (min-width: 480px) {
|
||||
.enlarged {
|
||||
display: block;
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
}
|
||||
|
||||
.instagram-embed {
|
||||
height: 420px;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.streamable-embed,
|
||||
.bitchute-embed,
|
||||
.odysee-embed,
|
||||
.youtube-embed,
|
||||
.rumble-embed,
|
||||
.twitch-embed {
|
||||
height: 450px;
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.spotify-embed {
|
||||
height: 240px;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.tiktok-embed {
|
||||
width: 400px;
|
||||
height: 780px;
|
||||
}
|
||||
|
||||
.twitter-embed {
|
||||
width: 400px;
|
||||
height: 580px;
|
||||
}
|
||||
|
||||
.reddit-embed {
|
||||
width: 500px;
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
@@ -18,6 +18,7 @@ import ModerationModal from '../modals/ModerationModal';
|
||||
import BoardSettings from '../BoardSettings';
|
||||
import BoardStats from '../BoardStats';
|
||||
import EditLabel from '../EditLabel';
|
||||
import Embed from '../Embed';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import PendingLabel from '../PendingLabel';
|
||||
@@ -1415,33 +1416,29 @@ const Board = () => {
|
||||
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.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}
|
||||
@@ -1449,7 +1446,7 @@ const Board = () => {
|
||||
onClick={() => {handleThumbnailClick(index, 'thread')}}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
)}
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -2115,33 +2112,53 @@ const Board = () => {
|
||||
</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] && commentMediaInfo.type !== "image" ? (
|
||||
<span>
|
||||
-[
|
||||
<span className='reply-link'
|
||||
style={{textDecoration: 'underline', cursor: 'pointer'}}
|
||||
onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span>
|
||||
]
|
||||
</span>)
|
||||
: null)
|
||||
: null}
|
||||
}</a> {replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
|
||||
{ (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
|
||||
<span>
|
||||
-[
|
||||
<span className='reply-link'
|
||||
style={{textDecoration: 'underline', cursor: 'pointer'}}
|
||||
onClick={() => {handleThumbnailClick(index, 'reply')}}>
|
||||
{isReplyThumbnailClicked[index] ? 'Close' : 'Embed'}
|
||||
</span>
|
||||
]
|
||||
</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}`}
|
||||
<img key={`fti-${index}`}
|
||||
src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
|
||||
onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
|
||||
style={{cursor: "pointer"}}
|
||||
@@ -2149,51 +2166,50 @@ const Board = () => {
|
||||
) : 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}
|
||||
<img key={`fti-${index}`}
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "video" ? (
|
||||
<div key={`enlarge-reply-${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
|
||||
className='enlarged'
|
||||
key={`fti-${index}`}
|
||||
src={replyMediaInfo.url}
|
||||
alt={replyMediaInfo.type}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl}
|
||||
/>
|
||||
) : (
|
||||
<video
|
||||
key={`fti-${index}`}
|
||||
src={replyMediaInfo.url}
|
||||
alt="thumbnail"
|
||||
onClick={() => {handleThumbnailClick(index, 'reply')}}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl}
|
||||
/>
|
||||
)}
|
||||
</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}`}
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
)}
|
||||
{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
|
||||
className='enlarged'
|
||||
key={`fti-${index}`}
|
||||
src={replyMediaInfo.url}
|
||||
controls
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl}
|
||||
/>
|
||||
) : (
|
||||
<video
|
||||
key={`fti-${index}`}
|
||||
src={replyMediaInfo.url}
|
||||
alt="thumbnail"
|
||||
onClick={() => {handleThumbnailClick(index, 'reply')}}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{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 ? (
|
||||
@@ -2513,17 +2529,11 @@ const Board = () => {
|
||||
{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}
|
||||
@@ -2531,7 +2541,7 @@ const Board = () => {
|
||||
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"}}>
|
||||
@@ -2540,8 +2550,8 @@ const Board = () => {
|
||||
>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>
|
||||
)}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import extName from 'ext-name';
|
||||
import { canEmbed } from '../components/Embed';
|
||||
|
||||
const getCommentMediaInfo = (comment) => {
|
||||
if (!comment?.thumbnailUrl && !comment?.link) {
|
||||
@@ -9,56 +10,26 @@ const getCommentMediaInfo = (comment) => {
|
||||
try {
|
||||
const url = new URL(comment.link);
|
||||
const host = url.hostname;
|
||||
let embedUrl = null;
|
||||
let scrapedThumbnailUrl;
|
||||
|
||||
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];
|
||||
const videoAndId = pathComponents[2];
|
||||
embedUrl = `https://odysee.com/$/embed/${channelAndId}/${videoAndId}`;
|
||||
|
||||
// TODO: add support for Rumble, video id is dynamic
|
||||
|
||||
// } else if (host.includes('rumble.com')) {
|
||||
// const regex = /(\/v.+?)-/;
|
||||
// const match = regex.exec(url.pathname);
|
||||
// if (match) {
|
||||
// const videoId = match[1].slice(1);
|
||||
// embedUrl = `https://rumble.com/embed/${videoId}/?pub=4`;
|
||||
// }
|
||||
|
||||
scrapedThumbnailUrl = `https://img.youtube.com/vi/${videoId}/sddefault.jpg`;
|
||||
|
||||
} else if (host.includes('bitchute.com')) {
|
||||
const videoId = url.pathname.split('/')[2];
|
||||
embedUrl = `https://www.bitchute.com/embed/${videoId}/`;
|
||||
scrapedThumbnailUrl = `https://static-3.bitchute.com/live/cover_images/F61vWF4shy8s/${videoId}_640x360.jpg`;
|
||||
|
||||
} else if (host.includes('streamable.com')) {
|
||||
const videoId = url.pathname.split('/')[1];
|
||||
embedUrl = `https://streamable.com/e/${videoId}?quality=highest`;
|
||||
|
||||
// TODO: Add support for Giphy (doesn't have thumbnails, size is variable)
|
||||
|
||||
// } else if (host.includes('giphy.com')) {
|
||||
// const hyphenComponents = url.pathname.split('-');
|
||||
// const gifId = hyphenComponents[hyphenComponents.length - 1];
|
||||
// embedUrl = `https://giphy.com/embed/${gifId}`;
|
||||
scrapedThumbnailUrl = `https://cdn-cf-east.streamable.com/image/${videoId}.jpg`;
|
||||
}
|
||||
|
||||
if (embedUrl) {
|
||||
if (canEmbed(url)) {
|
||||
return {
|
||||
url: comment.link,
|
||||
embedUrl,
|
||||
type: 'iframe',
|
||||
thumbnail: comment.thumbnailUrl,
|
||||
thumbnail: comment.thumbnailUrl || scrapedThumbnailUrl,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user