feat(post): add floating preview of media from link in post content

2026-08-03 07:41:04 +02:00 · 2024-06-08 16:41:05 +02:00
parent ddd063fdef
commit 39a48c9515
40 changed files with 192 additions and 74 deletions
@@ -158,5 +158,6 @@
  "time_1_month_ago": "منذ شهر واحد",
  "time_x_months_ago": "منذ {{count}} شهور",
  "time_1_year_ago": "منذ عام واحد",
-  "time_x_years_ago": "منذ {{count}} سنوات"
+  "time_x_years_ago": "منذ {{count}} سنوات",
+  "open": "فتح"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "১ মাস আগে",
  "time_x_months_ago": "{{count}} মাস আগে",
  "time_1_year_ago": "১ বছর আগে",
-  "time_x_years_ago": "{{count}} বছর আগে"
+  "time_x_years_ago": "{{count}} বছর আগে",
+  "open": "খুলুন"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "Před 1 měsícem",
  "time_x_months_ago": "Před {{count}} měsíci",
  "time_1_year_ago": "Před 1 rokem",
-  "time_x_years_ago": "Před {{count}} roky"
+  "time_x_years_ago": "Před {{count}} roky",
+  "open": "otevřít"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 måned siden",
  "time_x_months_ago": "{{count}} måneder siden",
  "time_1_year_ago": "1 år siden",
-  "time_x_years_ago": "{{count}} år siden"
+  "time_x_years_ago": "{{count}} år siden",
+  "open": "åben"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "vor 1 Monat",
  "time_x_months_ago": "vor {{count}} Monaten",
  "time_1_year_ago": "vor 1 Jahr",
-  "time_x_years_ago": "vor {{count}} Jahren"
+  "time_x_years_ago": "vor {{count}} Jahren",
+  "open": "öffnen"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "Πριν από 1 μήνα",
  "time_x_months_ago": "Πριν από {{count}} μήνες",
  "time_1_year_ago": "Πριν από 1 έτος",
-  "time_x_years_ago": "Πριν από {{count}} έτη"
+  "time_x_years_ago": "Πριν από {{count}} έτη",
+  "open": "ανοικτό"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 month ago",
  "time_x_months_ago": "{{count}} months ago",
  "time_1_year_ago": "1 year ago",
-  "time_x_years_ago": "{{count}} years ago"
+  "time_x_years_ago": "{{count}} years ago",
+  "open": "open"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "hace 1 mes",
  "time_x_months_ago": "hace {{count}} meses",
  "time_1_year_ago": "hace 1 año",
-  "time_x_years_ago": "hace {{count}} años"
+  "time_x_years_ago": "hace {{count}} años",
+  "open": "abrir"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 ماه پیش",
  "time_x_months_ago": "{{count}} ماه پیش",
  "time_1_year_ago": "1 سال پیش",
-  "time_x_years_ago": "{{count}} سال پیش"
+  "time_x_years_ago": "{{count}} سال پیش",
+  "open": "باز کردن"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 kuukausi sitten",
  "time_x_months_ago": "{{count}} kuukautta sitten",
  "time_1_year_ago": "1 vuosi sitten",
-  "time_x_years_ago": "{{count}} vuotta sitten"
+  "time_x_years_ago": "{{count}} vuotta sitten",
+  "open": "avata"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 buwan ang nakalipas",
  "time_x_months_ago": "{{count}} buwan ang nakalipas",
  "time_1_year_ago": "1 taon ang nakalipas",
-  "time_x_years_ago": "{{count}} taon ang nakalipas"
+  "time_x_years_ago": "{{count}} taon ang nakalipas",
+  "open": "buksan"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "il y a 1 mois",
  "time_x_months_ago": "il y a {{count}} mois",
  "time_1_year_ago": "il y a 1 an",
-  "time_x_years_ago": "il y a {{count}} ans"
+  "time_x_years_ago": "il y a {{count}} ans",
+  "open": "ouvrir"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "לפני חודש",
  "time_x_months_ago": "לפני {{count}} חודשים",
  "time_1_year_ago": "לפני שנה",
-  "time_x_years_ago": "לפני {{count}} שנים"
+  "time_x_years_ago": "לפני {{count}} שנים",
+  "open": "לפתוח"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 महीना पहले",
  "time_x_months_ago": "{{count}} महीने पहले",
  "time_1_year_ago": "1 साल पहले",
-  "time_x_years_ago": "{{count}} साल पहले"
+  "time_x_years_ago": "{{count}} साल पहले",
+  "open": "खोलें"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 hónapja",
  "time_x_months_ago": "{{count}} hónapja",
  "time_1_year_ago": "1 éve",
-  "time_x_years_ago": "{{count}} éve"
+  "time_x_years_ago": "{{count}} éve",
+  "open": "nyit"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 bulan yang lalu",
  "time_x_months_ago": "{{count}} bulan yang lalu",
  "time_1_year_ago": "1 tahun yang lalu",
-  "time_x_years_ago": "{{count}} tahun yang lalu"
+  "time_x_years_ago": "{{count}} tahun yang lalu",
+  "open": "buka"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 mese fa",
  "time_x_months_ago": "{{count}} mesi fa",
  "time_1_year_ago": "1 anno fa",
-  "time_x_years_ago": "{{count}} anni fa"
+  "time_x_years_ago": "{{count}} anni fa",
+  "open": "apri"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1ヶ月前",
  "time_x_months_ago": "{{count}}ヶ月前",
  "time_1_year_ago": "1年前",
-  "time_x_years_ago": "{{count}}年前"
+  "time_x_years_ago": "{{count}}年前",
+  "open": "開く"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1개월 전",
  "time_x_months_ago": "{{count}}개월 전",
  "time_1_year_ago": "1년 전",
-  "time_x_years_ago": "{{count}}년 전"
+  "time_x_years_ago": "{{count}}년 전",
+  "open": "열기"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "१ महिन्यांपूर्वी",
  "time_x_months_ago": "{{count}} महिन्यांपूर्वी",
  "time_1_year_ago": "१ वर्षांपूर्वी",
-  "time_x_years_ago": "{{count}} वर्षांपूर्वी"
+  "time_x_years_ago": "{{count}} वर्षांपूर्वी",
+  "open": "उघडा"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 maand geleden",
  "time_x_months_ago": "{{count}} maanden geleden",
  "time_1_year_ago": "1 jaar geleden",
-  "time_x_years_ago": "{{count}} jaar geleden"
+  "time_x_years_ago": "{{count}} jaar geleden",
+  "open": "openen"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 måned siden",
  "time_x_months_ago": "{{count}} måneder siden",
  "time_1_year_ago": "1 år siden",
-  "time_x_years_ago": "{{count}} år siden"
+  "time_x_years_ago": "{{count}} år siden",
+  "open": "åpne"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 miesiąc temu",
  "time_x_months_ago": "{{count}} miesięcy temu",
  "time_1_year_ago": "1 rok temu",
-  "time_x_years_ago": "{{count}} lat temu"
+  "time_x_years_ago": "{{count}} lat temu",
+  "open": "otwórz"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "há 1 mês",
  "time_x_months_ago": "há {{count}} meses",
  "time_1_year_ago": "há 1 ano",
-  "time_x_years_ago": "há {{count}} anos"
+  "time_x_years_ago": "há {{count}} anos",
+  "open": "abrir"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "Acum 1 lună",
  "time_x_months_ago": "Acum {{count}} luni",
  "time_1_year_ago": "Acum 1 an",
-  "time_x_years_ago": "Acum {{count}} ani"
+  "time_x_years_ago": "Acum {{count}} ani",
+  "open": "deschis"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 месяц назад",
  "time_x_months_ago": "{{count}} месяцев назад",
  "time_1_year_ago": "1 год назад",
-  "time_x_years_ago": "{{count}} лет назад"
+  "time_x_years_ago": "{{count}} лет назад",
+  "open": "открыть"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 muaj më parë",
  "time_x_months_ago": "{{count}} muaj më parë",
  "time_1_year_ago": "1 vit më parë",
-  "time_x_years_ago": "{{count}} vite më parë"
+  "time_x_years_ago": "{{count}} vite më parë",
+  "open": "hap"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "För 1 månad sedan",
  "time_x_months_ago": "För {{count}} månader sedan",
  "time_1_year_ago": "För 1 år sedan",
-  "time_x_years_ago": "För {{count}} år sedan"
+  "time_x_years_ago": "För {{count}} år sedan",
+  "open": "öppna"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 నెల క్రితం",
  "time_x_months_ago": "{{count}} నెలల క్రితం",
  "time_1_year_ago": "1 సంవత్సరం క్రితం",
-  "time_x_years_ago": "{{count}} సంవత్సరాల క్రితం"
+  "time_x_years_ago": "{{count}} సంవత్సరాల క్రితం",
+  "open": "తెరవండి"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 เดือนที่ผ่านมา",
  "time_x_months_ago": "{{count}} เดือนที่ผ่านมา",
  "time_1_year_ago": "1 ปีที่ผ่านมา",
-  "time_x_years_ago": "{{count}} ปีที่ผ่านมา"
+  "time_x_years_ago": "{{count}} ปีที่ผ่านมา",
+  "open": "เปิด"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 ay önce",
  "time_x_months_ago": "{{count}} ay önce",
  "time_1_year_ago": "1 yıl önce",
-  "time_x_years_ago": "{{count}} yıl önce"
+  "time_x_years_ago": "{{count}} yıl önce",
+  "open": "aç"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 місяць тому",
  "time_x_months_ago": "{{count}} місяців тому",
  "time_1_year_ago": "1 рік тому",
-  "time_x_years_ago": "{{count}} років тому"
+  "time_x_years_ago": "{{count}} років тому",
+  "open": "відкрити"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 مہینہ پہلے",
  "time_x_months_ago": "{{count}} مہینے پہلے",
  "time_1_year_ago": "1 سال پہلے",
-  "time_x_years_ago": "{{count}} سال پہلے"
+  "time_x_years_ago": "{{count}} سال پہلے",
+  "open": "کھولیں"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1 tháng trước",
  "time_x_months_ago": "{{count}} tháng trước",
  "time_1_year_ago": "1 năm trước",
-  "time_x_years_ago": "{{count}} năm trước"
+  "time_x_years_ago": "{{count}} năm trước",
+  "open": "mở"
 }
@@ -158,5 +158,6 @@
  "time_1_month_ago": "1个月前",
  "time_x_months_ago": "{{count}}个月前",
  "time_1_year_ago": "1年前",
-  "time_x_years_ago": "{{count}}年前"
+  "time_x_years_ago": "{{count}}年前",
+  "open": "打开"
 }
@@ -1,4 +1,5 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 import { Comment, useComment } from '@plebbit/plebbit-react-hooks';
@@ -13,9 +14,6 @@ import PostMenuDesktop from '../post/post-desktop/post-menu-desktop/';
 import styles from './catalog-row.module.css';
 import _ from 'lodash';

-import React, { useState } from 'react';
-import { createPortal } from 'react-dom';
-
 interface CatalogPostMediaProps {
  commentMediaInfo: any;
  isOutOfFeed?: boolean;
@@ -109,6 +107,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  const { refs, floatingStyles, update } = useFloating({
+    open: showPortal,
    placement: placementRef.current,
    middleware: [
      shift({ padding: 10 }),
@@ -11,13 +11,16 @@
  overflow: hidden;
 }

-.subplebbitAvatar {
+.floatingEmbed, .subplebbitAvatar {
  max-width: 250px;
  max-height: 250px;
-  margin: 3px 20px 5px 0;
  display: inline-block;
 }

+.subplebbitAvatar {
+  margin: 3px 20px 5px 0;
+}
+
 .spoiler {
  display: inline-block;
  margin: 3px 20px 5px 20px;
@@ -131,4 +134,11 @@

 .fileDeleted {
  image-rendering: pixelated;
+}
+
+@media (min-width: 640px) {
+  .thumbnail,
+  .content {
+    line-height: 0; /* Ensure no extra space due to line-height */
+  }
 }
@@ -11,6 +11,7 @@ import Embed, { canEmbed } from '../embed';
 interface MediaProps {
  commentMediaInfo?: CommentMediaInfo;
  post?: Comment;
+  isFloatingEmbed?: boolean;
  isReply?: boolean;
  linkHeight?: number;
  linkWidth?: number;
@@ -18,11 +19,11 @@ interface MediaProps {
  setShowThumbnail: (showThumbnail: boolean) => void;
 }

-const Thumbnail = ({ commentMediaInfo, post, setShowThumbnail }: MediaProps) => {
+const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }: MediaProps) => {
  const { t } = useTranslation();
  const { deleted, linkHeight, linkWidth, parentCid, removed, spoiler } = post || {};
  const { isDescription, isRules } = post || {}; // custom properties, not from api
-  const isOutOfFeed = isDescription || isRules; // virtuoso wrapper unneeded
+  const isOutOfFeed = isDescription || isRules || isFloatingEmbed; // virtuoso wrapper unneeded
  const isReply = parentCid;
  const isDeleted = deleted || removed;

@@ -84,7 +85,7 @@ const Thumbnail = ({ commentMediaInfo, post, setShowThumbnail }: MediaProps) =>
      <span className={styles.spoilerText}>[{t('view_spoiler')}]</span>
    </span>
  ) : isOutOfFeed ? (
-    <span className={styles.subplebbitAvatar}>{thumbnailComponent}</span>
+    <span className={`${isFloatingEmbed ? styles.floatingEmbed : styles.subplebbitAvatar}`}>{thumbnailComponent}</span>
  ) : isMobile || isReply ? (
    <span className={`${styles.thumbnailSmall} ${thumbnailSmallPadding}`} style={thumbnailDimensions}>
      {thumbnailComponent}
@@ -135,7 +136,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
      )}
      {isMobile && (type === 'iframe' || type === 'video' || type === 'audio') && (
        <div className={styles.closeButton}>
-          <span className='button' onClick={() => setShowThumbnail(true)}>
+          <span className='button' onClick={() => setShowThumbnail(false)}>
            {t('close')}
          </span>
        </div>
@@ -144,7 +145,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
  );
 };

-const CommentMedia = ({ commentMediaInfo, post, showThumbnail, setShowThumbnail }: MediaProps) => {
+const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail, setShowThumbnail }: MediaProps) => {
  const { t } = useTranslation();
  const isMobile = useIsMobile();
  const { type, url } = commentMediaInfo || {};
@@ -152,7 +153,7 @@ const CommentMedia = ({ commentMediaInfo, post, showThumbnail, setShowThumbnail
  return (
    <span className={styles.content}>
      <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
-        {url && <Thumbnail commentMediaInfo={commentMediaInfo} post={post} setShowThumbnail={setShowThumbnail} />}
+        {url && <Thumbnail commentMediaInfo={commentMediaInfo} isFloatingEmbed={isFloatingEmbed} post={post} setShowThumbnail={setShowThumbnail} />}
        {isMobile && type && <div className={styles.fileInfo}>{getDisplayMediaInfoType(type, t)}</div>}
      </span>
      {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={post?.parentCid} setShowThumbnail={setShowThumbnail} />}
@@ -38,4 +38,10 @@

 .spoiler:hover {
  color: white;
+}
+
+.floatingEmbed {
+  background-color: #d6daf0;
+  border: 1px solid #b7c5d9;
+  padding: 2px;
 }
@@ -1,18 +1,100 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import supersub from 'remark-supersub';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
-import styles from './markdown.module.css';
-import { useTranslation } from 'react-i18next';
+import { useDismiss, useFloating, useFocus, useHover, useInteractions, offset, shift, size, autoUpdate, Placement, FloatingPortal } from '@floating-ui/react';
 import { getLinkMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
+import useIsMobile from '../../hooks/use-is-mobile';
 import CommentMedia from '../comment-media';
+import styles from './markdown.module.css';

-interface MarkdownProps {
-  content: string;
-  spoiler?: boolean;
+interface ContentLinkEmbedProps {
+  children: any;
+  href: string;
+  linkMediaInfo: any;
 }

+const ContentLinkEmbed = ({ children, href, linkMediaInfo }: ContentLinkEmbedProps) => {
+  const { t } = useTranslation();
+  const isMobile = useIsMobile();
+  const [isOpen, setIsOpen] = useState(false);
+  const [showMedia, setShowMedia] = useState(false);
+  const placementRef = useRef<Placement>('right');
+  const availableWidthRef = useRef<number>(0);
+
+  const { refs, floatingStyles, update, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: placementRef.current,
+    middleware: [
+      shift({ padding: 10 }),
+      offset({ mainAxis: 5 }),
+      size({
+        apply({ availableWidth, elements }) {
+          availableWidthRef.current = availableWidth;
+          if (availableWidth >= 250) {
+            elements.floating.style.maxWidth = `${availableWidth - 12}px`;
+          } else if (placementRef.current === 'right') {
+            placementRef.current = 'left';
+          }
+        },
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const hover = useHover(context, { move: false });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const availableWidth = availableWidthRef.current;
+      if (availableWidth >= 250) {
+        placementRef.current = 'right';
+      } else {
+        placementRef.current = 'left';
+      }
+      update();
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [update]);
+
+  return (
+    <>
+      <a href={href} target='_blank' rel='noopener noreferrer'>
+        {children}
+      </a>{' '}
+      [
+      <span className={styles.embedButton} onClick={() => setShowMedia(!showMedia)} ref={refs.setReference} {...getReferenceProps()}>
+        {showMedia ? t('remove') : isMobile ? t('open') : t('embed')}
+      </span>
+      ]
+      {showMedia && (
+        <>
+          <br />
+          <CommentMedia isReply={false} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={false} />
+        </>
+      )}
+      <FloatingPortal>
+        {isOpen && !isMobile && (
+          <div className={styles.floatingEmbed} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
+            <CommentMedia isReply={false} isFloatingEmbed={true} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={true} />
+          </div>
+        )}
+      </FloatingPortal>
+    </>
+  );
+};
+
 const MAX_LENGTH_FOR_GFM = 10000; // remarkGfm lags with large content

 const blockquoteToGreentext = () => (tree: any) => {
@@ -38,6 +120,11 @@ const blockquoteToGreentext = () => (tree: any) => {
  });
 };

+interface MarkdownProps {
+  content: string;
+  spoiler?: boolean;
+}
+
 const Markdown = ({ content, spoiler }: MarkdownProps) => {
  const remarkPlugins: any[] = [[supersub]];

@@ -59,9 +146,6 @@ const Markdown = ({ content, spoiler }: MarkdownProps) => {

  remarkPlugins.push([blockquoteToGreentext]);

-  const { t } = useTranslation();
-  const [showMedia, setShowMedia] = useState(false);
-
  return (
    <span className={styles.markdown}>
      <ReactMarkdown
@@ -83,24 +167,7 @@ const Markdown = ({ content, spoiler }: MarkdownProps) => {
            if (href) {
              const linkMediaInfo = getLinkMediaInfo(href);
              if (getHasThumbnail(linkMediaInfo, href)) {
-                return (
-                  <>
-                    <a href={href} target='_blank' rel='noopener noreferrer'>
-                      {children}
-                    </a>{' '}
-                    [
-                    <span className={styles.embedButton} onClick={() => setShowMedia(!showMedia)}>
-                      {showMedia ? t('remove') : t('embed')}
-                    </span>
-                    ]
-                    {showMedia && (
-                      <>
-                        <br />
-                        <CommentMedia isReply={false} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={false} />
-                      </>
-                    )}
-                  </>
-                );
+                return <ContentLinkEmbed children={children} href={href} linkMediaInfo={linkMediaInfo} />;
              } else {
                return (
                  <a href={href} target='_blank' rel='noopener noreferrer'>