Merge branch 'release' into beta

# Conflicts:
#	src/components/footer.jsx

Author: davidmz

.yarn/releases/yarn-4.9.4.cjs renamed to .yarn/releases/yarn-4.11.0.cjs

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.9.4.cjs
+yarnPath: .yarn/releases/yarn-4.11.0.cjs

.yarnrc.yml

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.142.0] - 2025-11-30
+### 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
 - Preserve query parameters and hash when initializing browser history.

CHANGELOG.md

@@ -71,6 +71,7 @@ export default {
         highlightComments: true,
         showTimestamps: false,
         hideRepliesToBanned: false,
+        showMediaPreviews: false,
       },
       allowLinksPreview: false,
       readMoreStyle: 'modern',

config/default.js

@@ -1,6 +1,6 @@
 {
   "name": "reactive-pepyatka",
-  "version": "1.141.3",
+  "version": "1.142.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
@@ -23,15 +23,15 @@
     "keycode-js": "~3.1.0",
     "local-storage-fallback": "~5.0.0",
     "lodash-es": "~4.17.21",
-    "lru-cache": "~11.2.1",
+    "lru-cache": "~11.2.2",
     "memoize-one": "~6.0.0",
     "mousetrap": "~1.6.5",
     "photoswipe": "~5.4.4",
     "photoswipe-video-plugin": "~1.0.2",
     "porter-stemmer": "~0.9.1",
     "prop-types": "~15.8.1",
-    "react": "~19.1.1",
-    "react-dom": "~19.1.1",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
     "react-final-form-hooks": "~2.0.2",
     "react-google-recaptcha": "~3.1.0",
     "react-helmet": "~6.1.0",
@@ -41,31 +41,31 @@
     "react-sortablejs": "~6.1.4",
     "react-textarea-autosize": "~8.5.9",
     "react-use-event-hook": "~0.9.6",
-    "recharts": "~3.2.1",
+    "recharts": "~3.4.1",
     "redux": "~5.0.1",
     "regexparam": "~3.0.0",
     "snarkdown": "~2.0.0",
     "social-text-tokenizer": "~3.2.2",
     "socket.io-client": "~2.3.1",
     "sortablejs": "~1.15.6",
-    "tabbable": "~6.2.0",
-    "ua-parser-js": "~2.0.5",
-    "use-subscription": "~1.11.0",
-    "validator": "~13.15.15",
+    "tabbable": "~6.3.0",
+    "ua-parser-js": "~2.0.6",
+    "use-subscription": "~1.12.0",
+    "validator": "~13.15.23",
     "vazirmatn": "^33.0.3"
   },
   "devDependencies": {
     "@eslint/compat": "~1.3.2",
-    "@eslint/js": "~9.36.0",
+    "@eslint/js": "~9.39.1",
     "@testing-library/dom": "~10.4.1",
-    "@testing-library/jest-dom": "~6.8.0",
+    "@testing-library/jest-dom": "~6.9.1",
     "@testing-library/react": "~16.3.0",
     "@testing-library/user-event": "~14.6.1",
     "@vitejs/plugin-legacy": "~7.2.1",
-    "@vitejs/plugin-react-swc": "^4.1.0",
-    "cross-env": "~10.0.0",
-    "esbuild": "~0.25.10",
-    "eslint": "~9.36.0",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "cross-env": "~10.1.0",
+    "esbuild": "~0.27.0",
+    "eslint": "~9.39.1",
     "eslint-config-prettier": "~10.1.8",
     "eslint-plugin-import-x": "~4.16.1",
     "eslint-plugin-prettier": "~5.5.4",
@@ -75,31 +75,31 @@
     "eslint-plugin-unicorn": "~61.0.2",
     "eslint-plugin-you-dont-need-lodash-underscore": "~6.14.0",
     "glob": "~11.0.3",
-    "globals": "~16.4.0",
+    "globals": "~16.5.0",
     "gray-matter": "~4.0.3",
     "husky": "~9.1.7",
-    "jsdom": "~27.0.0",
-    "lint-staged": "~16.2.0",
+    "jsdom": "~27.2.0",
+    "lint-staged": "~16.2.6",
     "node-html-parser": "~7.0.1",
     "npm-run-all": "~4.1.5",
     "prettier": "~3.6.2",
     "querystring": "~0.2.1",
     "remarkable": "~2.0.1",
-    "rimraf": "~6.0.1",
-    "sass": "^1.93.0",
+    "rimraf": "~6.1.0",
+    "sass": "^1.94.0",
     "sinon": "~21.0.0",
-    "stylelint": "~16.24.0",
+    "stylelint": "~16.25.0",
     "stylelint-config-prettier": "~9.0.5",
     "stylelint-config-standard-scss": "~15.0.1",
     "stylelint-prettier": "~5.0.3",
     "stylelint-scss": "~6.12.1",
-    "terser": "~5.44.0",
+    "terser": "~5.44.1",
     "unexpected": "~13.2.1",
     "unexpected-sinon": "~11.1.0",
     "url": "~0.11.4",
-    "vite": "~7.1.7",
+    "vite": "~7.2.2",
     "vite-plugin-generate-file": "~0.3.1",
-    "vite-plugin-pwa": "^1.0.3",
+    "vite-plugin-pwa": "^1.1.0",
     "vitest": "~3.2.4",
     "workbox-window": "^7.3.0"
   },
@@ -123,5 +123,5 @@
     "url": "https://github.com/FreeFeed/freefeed-react-client.git"
   },
   "license": "MIT",
-  "packageManager": "yarn@4.9.4"
+  "packageManager": "yarn@4.11.0"
 }

package.json

@@ -7,7 +7,7 @@ export default function Footer({ short }) {
   return (
     <footer className="footer">
       <p role="navigation">
-        &copy; FreeFeed 1.141.3-beta (Oct 28, 2025)
+        &copy; FreeFeed 1.142.0-beta (Nov 30, 2025)
         <br />
         <Link to="/about">About</Link>
         {' | '}

src/components/footer.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/link-preview/video.jsx

@@ -16,7 +16,7 @@ import { pauseVimeoVideo, playVimeoVideo } from './vimeo-api';
 
 export const mediaLinksContext = createContext([]);
 
-export function useMediaLink(url) {
+export function useMediaLink(url, { previewId } = {}) {
   const items = useContext(mediaLinksContext);
   const [mediaType, setMediaType] = useState(() => getMediaType(url));
   const index = useMemo(() => {
@@ -29,14 +29,17 @@ export function useMediaLink(url) {
         } else if (item.mediaType) {
           setMediaType(item.mediaType);
         }
+        if (previewId) {
+          item.pid = previewId;
+        }
         items[index] = item;
         return null;
       })
       .catch((err) => (items[index] = createErrorItem(err)));
     return index;
     // Items are reference-immutable, url is truly immutable
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [previewId]);
 
   const handleClick = useEvent((e) => {
     if (!mediaType || !isLeftClick(e)) {
@@ -105,7 +108,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/helpers.jsx

@@ -0,0 +1,105 @@
+import { useEffect, useId, 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 previewId = useId();
+  const [mediaType, handleClick] = useMediaLink(url, { previewId });
+
+  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} previewId={previewId} />
+      </a>
+    );
+  }
+
+  if (mediaType === T_YOUTUBE_VIDEO) {
+    return (
+      <a href={url} target="_blank" rel="noreferrer" onClick={handleClick}>
+        <YouTubeMediaPreview url={url} previewId={previewId} />
+      </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"
+        id={previewId}
+      />
+    </a>
+  );
+}
+
+function FreeFeedMediaPreview({ id, previewId }) {
+  const [attrs, setAttrs] = useState(null);
+
+  useEffect(() => {
+    getAttachmentInfo(id)
+      .then((info) => {
+        if (info?.mediaType === 'image' || info?.mediaType === 'video') {
+          const height = 120;
+          const width = Math.round((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}
+      style={{ '--ar': attrs.width / attrs.height }}
+      className={styles.preview}
+      loading="lazy"
+      id={previewId}
+    />
+  ) : null;
+}
+
+function YouTubeMediaPreview({ url, previewId }) {
+  const aspectRatio = getDefaultAspectRatio(url);
+  return (
+    <img
+      src={`https://img.youtube.com/vi/${getVideoId(url)}/default.jpg`}
+      alt=""
+      width={Math.round(60 / aspectRatio)}
+      height={60}
+      style={{ '--ar': 1 / aspectRatio }}
+      className={styles.preview}
+      loading="lazy"
+      id={previewId}
+    />
+  );
+}

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

@@ -0,0 +1,19 @@
+.preview {
+  height: 4em;
+  width: auto;
+  aspect-ratio: clamp(0.8, var(--ar, 1), 1.2);
+  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);
+    }
+  }
+}