diff --git a/src/components/comment-media/comment-media.module.css b/src/components/comment-media/comment-media.module.css
index d44259a7..d9298d7f 100644
--- a/src/components/comment-media/comment-media.module.css
+++ b/src/components/comment-media/comment-media.module.css
@@ -22,6 +22,14 @@
align-items: center;
}
+.thumbnailSmall span, .thumbnailSmall a {
+ width: 100%;
+ display: inline-block;
+ word-wrap: break-word;
+ text-align: center;
+ cursor: pointer;
+}
+
.thumbnail {
float: left;
}
diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
index 41baf051..e8519459 100644
--- a/src/components/comment-media/comment-media.tsx
+++ b/src/components/comment-media/comment-media.tsx
@@ -1,10 +1,11 @@
import React from 'react';
import styles from './comment-media.module.css';
-import { CommentMediaInfo } from '../../lib/utils/media-utils';
+import { CommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
-import Embed from '../embed';
+import Embed, { canEmbed } from '../embed';
import { useTranslation } from 'react-i18next';
import useWindowWidth from '../../hooks/use-window-width';
+import { getHostname } from '../../lib/utils/url-utils';
interface MediaProps {
commentMediaInfo?: CommentMediaInfo;
@@ -52,8 +53,8 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid
}
if (type === 'audio') {
- displayWidth = '250px';
- displayHeight = '75px';
+ displayWidth = '100%';
+ displayHeight = '100%';
}
if (isOutOfFeed) {
@@ -64,6 +65,7 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid
let thumbnailComponent: React.ReactNode = null;
const iframeThumbnail = patternThumbnailUrl || thumbnail;
const gifFrameUrl = useFetchGifFirstFrame(type === 'gif' ? url : undefined);
+ const hasThumbnail = getHasThumbnail(commentMediaInfo, url);
if (type === 'image') {
thumbnailComponent =
setShowThumbnail(false)} />;
@@ -82,9 +84,20 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid
const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
+ const linkWithoutThumbnail = url && new URL(url);
+
return isMobile || isReply ? (
{thumbnailComponent}
+ {isMobile && !hasThumbnail && linkWithoutThumbnail ? (
+ canEmbed(linkWithoutThumbnail) ? (
+ setShowThumbnail(false)}>{getHostname(url)}
+ ) : (
+
+ {getHostname(url)}
+
+ )
+ ) : null}
) : (
{thumbnailComponent}
diff --git a/src/components/embed/embed.module.css b/src/components/embed/embed.module.css
index 692d13bf..0f7cfbd6 100644
--- a/src/components/embed/embed.module.css
+++ b/src/components/embed/embed.module.css
@@ -67,4 +67,10 @@
width: 100% !important;
height: 50vh !important;
}
+}
+
+.soundcloudEmbed {
+ height: 166px; /* default height of soundcloud embeds */
+ width: 100%;
+ max-width: 640px;
}
\ No newline at end of file
diff --git a/src/components/embed/embed.tsx b/src/components/embed/embed.tsx
index c589cf4b..5f8b8e96 100644
--- a/src/components/embed/embed.tsx
+++ b/src/components/embed/embed.tsx
@@ -37,6 +37,9 @@ const Embed = ({ url }: EmbedProps) => {
if (spotifyHosts.has(parsedUrl.host)) {
return ;
}
+ if (soundcloudHosts.has(parsedUrl.host)) {
+ return ;
+ }
};
interface EmbedComponentProps {
@@ -258,6 +261,24 @@ const SpotifyEmbed = ({ parsedUrl }: EmbedComponentProps) => {
);
};
+const soundcloudHosts = new Set(['soundcloud.com', 'www.soundcloud.com', 'on.soundcloud.com', 'api.soundcloud.com', 'w.soundcloud.com']);
+
+// not officially documented https://stackoverflow.com/questions/20870270/how-to-get-soundcloud-embed-code-by-soundcloud-com-url
+const SoundcloudEmbed = ({ parsedUrl }: EmbedComponentProps) => {
+ return (
+
+ );
+};
+
const canEmbedHosts = new Set([
...youtubeHosts,
...xHosts,
@@ -267,6 +288,7 @@ const canEmbedHosts = new Set([
...instagramHosts,
...odyseeHosts,
...bitchuteHosts,
+ ...soundcloudHosts,
...streamableHosts,
...spotifyHosts,
]);
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index ad629069..1cac57a9 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -74,8 +74,18 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
]
)}
+ {showThumbnail && !hasThumbnail && (
+
+ {' '}
+ [
+ setShowThumbnail(false)}>
+ {t('open')}
+
+ ]
+
+ )}
- {hasThumbnail && (
+ {(hasThumbnail || (!hasThumbnail && !showThumbnail)) && (
{
]
)}
+ {showThumbnail && !hasThumbnail && (
+
+ {' '}
+ [
+ setShowThumbnail(false)}>
+ {t('open')}
+
+ ]
+
+ )}
- {hasThumbnail && (
+ {(hasThumbnail || (!hasThumbnail && !showThumbnail)) && (
{
)}
- {hasThumbnail && (
+ {(hasThumbnail || link) && (
{
{shortCid}
- {hasThumbnail && (
+ {(hasThumbnail || link) && (
0) {
+ if (description && description.length > 0) {
_feed.unshift({
isDescription: true,
subplebbitAddress: address,