Show media links previews under the comments

Author: davidmz

CHANGELOG.md

@@ -8,6 +8,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.142.0] - Not released
 ### Added
 - Show found users and groups on the search results page.
+- Show previews of media links in comments (disabled by default). Supported link
+  types: FreeFeed images and videos, external images, YouTube videos and shorts.
 
 ## [1.141.3] - 2025-10-28
 ### Fixed

src/components/link-preview/video.jsx

@@ -174,7 +174,7 @@ export function getVideoType(url) {
   return null;
 }
 
-function getVideoId(url) {
+export function getVideoId(url) {
   let m;
   if ((m = YOUTUBE_VIDEO_RE.exec(url))) {
     return m[1];
@@ -200,7 +200,7 @@ function getVideoId(url) {
   return null;
 }
 
-function getDefaultAspectRatio(url) {
+export function getDefaultAspectRatio(url) {
   if (YOUTUBE_VIDEO_RE.test(url)) {
     return isYoutubeShort(url) ? 16 / 9 : 9 / 16;
   }

src/components/media-links/helpers.jsx

@@ -105,7 +105,7 @@ export function createErrorItem(error) {
 
 const freefeedPathRegex = /^\/attachments\/(?:\w+\/)?([\da-f]{8}(?:-[\da-f]{4}){3}-[\da-f]{12})/;
 
-function freefeedAttachmentId(url) {
+export function freefeedAttachmentId(url) {
   try {
     const urlObj = new URL(url);
     if (!CONFIG.attachmentDomains.includes(urlObj.hostname)) {

src/components/media-links/media-link-preview.jsx

@@ -0,0 +1,92 @@
+import { useEffect, useState } from 'react';
+import { freefeedAttachmentId, IMAGE, useMediaLink, VIDEO } from './helpers';
+import { getAttachmentInfo } from '../../services/batch-attachments-info';
+import { attachmentPreviewUrl } from '../../services/api';
+import { getDefaultAspectRatio, getVideoId, T_YOUTUBE_VIDEO } from '../link-preview/video';
+import styles from './media-link-preview.module.scss';
+
+export function MediaLinkPreview({ href: url }) {
+  const [mediaType, handleClick] = useMediaLink(url);
+
+  if (mediaType !== IMAGE && mediaType !== VIDEO && mediaType !== T_YOUTUBE_VIDEO) {
+    return null;
+  }
+
+  // Freefeed attachment?
+  const attId = freefeedAttachmentId(url);
+  if (attId) {
+    return (
+      <a href={url} target="_blank" rel="noreferrer" onClick={handleClick}>
+        <FreeFeedMediaPreview id={attId} />
+      </a>
+    );
+  }
+
+  if (mediaType === T_YOUTUBE_VIDEO) {
+    return (
+      <a href={url} target="_blank" rel="noreferrer" onClick={handleClick}>
+        <YouTubeMediaPreview url={url} />
+      </a>
+    );
+  }
+
+  if (mediaType === VIDEO) {
+    return null;
+  }
+
+  return (
+    <a href={url} target="_blank" rel="noreferrer" onClick={handleClick}>
+      <img src={url} alt="" width={60} height={60} className={styles.preview} loading="lazy" />
+    </a>
+  );
+}
+
+function FreeFeedMediaPreview({ id }) {
+  const [attrs, setAttrs] = useState(null);
+
+  useEffect(() => {
+    getAttachmentInfo(id)
+      .then((info) => {
+        if (info?.mediaType === 'image' || info?.mediaType === 'video') {
+          const height = 120;
+          const width = Math.max(90, (info.width / info.height) * height);
+          setAttrs({
+            src: attachmentPreviewUrl(id, 'image', width, height),
+            width,
+            height,
+          });
+        }
+        return null;
+      })
+      .catch((err) => {
+        // Just ignore
+        // eslint-disable-next-line no-console
+        console.error('Failed to get attachment info', id, err);
+      });
+  }, [id]);
+
+  return attrs ? (
+    <img
+      src={attrs.src}
+      alt=""
+      width={attrs.width}
+      height={attrs.height}
+      className={styles.preview}
+      loading="lazy"
+    />
+  ) : null;
+}
+
+function YouTubeMediaPreview({ url }) {
+  const aspectRatio = getDefaultAspectRatio(url);
+  return (
+    <img
+      src={`https://img.youtube.com/vi/${getVideoId(url)}/default.jpg`}
+      alt=""
+      width={60 / aspectRatio}
+      height={60}
+      className={styles.preview}
+      loading="lazy"
+    />
+  );
+}

src/components/media-links/media-link-preview.module.scss

@@ -0,0 +1,18 @@
+.preview {
+  height: 4em;
+  width: auto;
+  object-fit: cover;
+  box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.2);
+
+  &:hover {
+    box-shadow: 0 0 0 1px rgb(0, 0, 0, 1);
+  }
+
+  :global(.dark-theme) & {
+    box-shadow: 0 0 0 1px rgb(255, 255, 255, 0.2);
+
+    &:hover {
+      box-shadow: 0 0 0 1px rgb(255, 255, 255, 0.8);
+    }
+  }
+}

src/components/post/comment-media-previews.jsx

@@ -0,0 +1,41 @@
+import { isLocalLink, parseText } from '../../utils/parse-text';
+import ErrorBoundary from '../error-boundary';
+import { T_YOUTUBE_VIDEO } from '../link-preview/video';
+import { getMediaType, IMAGE, VIDEO } from '../media-links/helpers';
+import { MediaLinkPreview } from '../media-links/media-link-preview';
+import { MediaLinksProvider } from '../media-links/provider';
+import styles from './comment-media-previews.module.scss';
+
+export function CommentMediaPreviews({ text }) {
+  const result = [];
+
+  const tokens = text ? parseText(text) : [];
+
+  let inSpoiler = false;
+  for (const [index, token] of tokens.entries()) {
+    if (token.type === 'SPOILER_START') {
+      inSpoiler = true;
+    } else if (token.type === 'SPOILER_END') {
+      inSpoiler = false;
+    } else if (token.type === 'LINK' && !inSpoiler) {
+      if (
+        !isLocalLink(token.text) &&
+        /^https?:\/\//i.test(token.text) &&
+        text.charAt(token.offset - 1) !== '!'
+      ) {
+        const type = getMediaType(token.text);
+        if (type === IMAGE || type === VIDEO || type === T_YOUTUBE_VIDEO) {
+          result.push(<MediaLinkPreview key={index} href={token.text} />);
+        }
+      }
+    }
+  }
+
+  return (
+    <div className={styles.previews}>
+      <ErrorBoundary>
+        <MediaLinksProvider>{result}</MediaLinksProvider>
+      </ErrorBoundary>
+    </div>
+  );
+}

src/components/post/comment-media-previews.module.scss

@@ -0,0 +1,9 @@
+@use '../../../styles/shared/mixins';
+
+.previews {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.33em;
+  margin-left: mixins.rem(19px);
+  margin-top: 0.25em;
+}

src/components/post/post-comment.jsx

@@ -29,6 +29,7 @@ import { PostCommentMore } from './post-comment-more';
 import { PostCommentPreview } from './post-comment-preview';
 import { CommentProvider } from './post-comment-provider';
 import { DraftIndicator } from './draft-indicator';
+import { CommentMediaPreviews } from './comment-media-previews';
 
 class PostComment extends Component {
   commentContainer;
@@ -380,6 +381,10 @@ class PostComment extends Component {
     );
   }
 
+  renderMediaPreviews() {
+    return this.props.showMediaPreviews ? <CommentMediaPreviews text={this.props.body} /> : null;
+  }
+
   render() {
     const className = classnames({
       comment: true,
@@ -403,6 +408,7 @@ class PostComment extends Component {
       >
         {this.renderCommentIcon()}
         {this.renderBody()}
+        {this.renderMediaPreviews()}
         {this.renderPreview()}
       </div>
     );
@@ -415,6 +421,9 @@ function selectState(state, ownProps) {
   const showTimestamps =
     state.user.frontendPreferences?.comments?.showTimestamps ||
     CONFIG.frontendPreferences.defaultValues.comments.showTimestamps;
+  const showMediaPreviews =
+    state.user.frontendPreferences?.comments?.showMediaPreviews ||
+    CONFIG.frontendPreferences.defaultValues.comments.showMediaPreviews;
   const { highlightComments } = state.user.frontendPreferences.comments;
   const isReplyToBanned = (() => {
     if (
@@ -435,6 +444,7 @@ function selectState(state, ownProps) {
   return {
     ...editState,
     showTimestamps,
+    showMediaPreviews,
     highlightComments,
     isEditing: ownProps.isEditing || editState.isEditing,
     submitMode: state.submitMode,