feat(embed): add support for soundcloud embeds, show webpage links on mobile, adjust audio embeds

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;
 }

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';
+    displayWidth = '100%';
-    displayHeight = '75px';
+    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 = <img src={url} alt='' onClick={() => 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 ? (
     <ThumbnailSmall style={thumbnailDimensions} thumbnailSmallPadding={thumbnailSmallPadding}>
       {thumbnailComponent}
+      {isMobile && !hasThumbnail && linkWithoutThumbnail ? (
+        canEmbed(linkWithoutThumbnail) ? (
+          <span onClick={() => setShowThumbnail(false)}>{getHostname(url)}</span>
+        ) : (
+          <a href={url} target='_blank' rel='noreferrer'>
+            {getHostname(url)}
+          </a>
+        )
+      ) : null}
     </ThumbnailSmall>
   ) : (
     <ThumbnailBig style={thumbnailDimensions}>{thumbnailComponent}</ThumbnailBig>

src/components/embed/embed.module.css

@@ -68,3 +68,9 @@
     height: 50vh !important;
   }
 }
+
+.soundcloudEmbed {
+  height: 166px; /* default height of soundcloud embeds */
+  width: 100%;
+  max-width: 640px;
+}

src/components/embed/embed.tsx

@@ -37,6 +37,9 @@ const Embed = ({ url }: EmbedProps) => {
   if (spotifyHosts.has(parsedUrl.host)) {
     return <SpotifyEmbed parsedUrl={parsedUrl} />;
   }
+  if (soundcloudHosts.has(parsedUrl.host)) {
+    return <SoundcloudEmbed parsedUrl={parsedUrl} />;
+  }
 };
 
 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 (
+    <iframe
+      className={styles.soundcloudEmbed}
+      height='100%'
+      width='100%'
+      referrerPolicy='no-referrer'
+      allow='accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share'
+      allowFullScreen
+      title={parsedUrl.href}
+      src={`https://w.soundcloud.com/player/?url=${parsedUrl.href}`}
+    />
+  );
+};
+
 const canEmbedHosts = new Set<string>([
   ...youtubeHosts,
   ...xHosts,
@@ -267,6 +288,7 @@ const canEmbedHosts = new Set<string>([
   ...instagramHosts,
   ...odyseeHosts,
   ...bitchuteHosts,
+  ...soundcloudHosts,
   ...streamableHosts,
   ...spotifyHosts,
 ]);

src/components/post/post.tsx

@@ -74,8 +74,18 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
                 ]
               </span>
             )}
+            {showThumbnail && !hasThumbnail && (
+              <span>
+                {' '}
+                [
+                <span className={styles.closeMedia} onClick={() => setShowThumbnail(false)}>
+                  {t('open')}
+                </span>
+                ]
+              </span>
+            )}
           </div>
-          {hasThumbnail && (
+          {(hasThumbnail || (!hasThumbnail && !showThumbnail)) && (
             <CommentMedia
               commentMediaInfo={commentMediaInfo}
               isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
@@ -247,8 +257,18 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
                   ]
                 </span>
               )}
+              {showThumbnail && !hasThumbnail && (
+                <span>
+                  {' '}
+                  [
+                  <span className={styles.closeMedia} onClick={() => setShowThumbnail(false)}>
+                    {t('open')}
+                  </span>
+                  ]
+                </span>
+              )}
             </div>
-            {hasThumbnail && (
+            {(hasThumbnail || (!hasThumbnail && !showThumbnail)) && (
               <CommentMedia
                 commentMediaInfo={commentMediaInfo}
                 isReply={true}
@@ -342,7 +362,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
                 )}
               </span>
             </div>
-            {hasThumbnail && (
+            {(hasThumbnail || link) && (
               <CommentMedia
                 commentMediaInfo={commentMediaInfo}
                 isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
@@ -424,7 +444,7 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
               <span className={styles.replyToPost}>{shortCid}</span>
             </span>
           </div>
-          {hasThumbnail && (
+          {(hasThumbnail || link) && (
             <CommentMedia
               commentMediaInfo={commentMediaInfo}
               isReply={false}

src/views/catalog/catalog.tsx

@@ -24,7 +24,7 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp
       return feed;
     }
     const _feed = [...feed];
-    if (subplebbit?.description && subplebbit?.description.length > 0) {
+    if (description && description.length > 0) {
       _feed.unshift({
         isDescription: true,
         subplebbitAddress: address,