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 ( +