add click to enlarge media on desktop

2026-08-03 07:41:04 +02:00 · 2024-04-01 14:24:10 +02:00
parent 857e6850b6
commit 6cc9a6fa33
41 changed files with 197 additions and 66 deletions
@@ -35,5 +35,6 @@
  "sticky": "مثبت",
  "closed": "مغلق",
  "reply": "رد",
-  "link": "رابط"
+  "link": "رابط",
+  "close": "إغلاق"
 }
@@ -35,5 +35,6 @@
  "sticky": "স্টিকি",
  "closed": "বন্ধ",
  "reply": "উত্তর",
-  "link": "লিংক"
+  "link": "লিংক",
+  "close": "বন্ধ করুন"
 }
@@ -35,5 +35,6 @@
  "sticky": "Připnutý",
  "closed": "Zavřeno",
  "reply": "Odpovědět",
-  "link": "Odkaz"
+  "link": "Odkaz",
+  "close": "Zavřít"
 }
@@ -35,5 +35,6 @@
  "sticky": "Fikseret",
  "closed": "Lukket",
  "reply": "Svar",
-  "link": "Link"
+  "link": "Link",
+  "close": "Luk"
 }
@@ -35,5 +35,6 @@
  "sticky": "Angeheftet",
  "closed": "Geschlossen",
  "reply": "Antworten",
-  "link": "Link"
+  "link": "Link",
+  "close": "Schließen"
 }
@@ -35,5 +35,6 @@
  "sticky": "Κολλημένος",
  "closed": "Κλειστό",
  "reply": "Απάντηση",
-  "link": "Σύνδεσμος"
+  "link": "Σύνδεσμος",
+  "close": "Κλείσιμο"
 }
@@ -35,5 +35,6 @@
  "sticky": "Sticky",
  "closed": "Closed",
  "reply": "Reply",
-  "link": "Link"
+  "link": "Link",
+  "close": "Close"
 }
@@ -35,5 +35,6 @@
  "sticky": "Fijado",
  "closed": "Cerrado",
  "reply": "Responder",
-  "link": "Enlace"
+  "link": "Enlace",
+  "close": "Cerrar"
 }
@@ -35,5 +35,6 @@
  "sticky": "چسبیده",
  "closed": "بسته",
  "reply": "پاسخ",
-  "link": "لینک"
+  "link": "لینک",
+  "close": "بستن"
 }
@@ -35,5 +35,6 @@
  "sticky": "Tikki",
  "closed": "Suljettu",
  "reply": "Vastaa",
-  "link": "Linkki"
+  "link": "Linkki",
+  "close": "Sulje"
 }
@@ -35,5 +35,6 @@
  "sticky": "Malagkit",
  "closed": "Sarado",
  "reply": "Tumugon",
-  "link": "Link"
+  "link": "Link",
+  "close": "Isara"
 }
@@ -35,5 +35,6 @@
  "sticky": "Épinglé",
  "closed": "Fermé",
  "reply": "Répondre",
-  "link": "Lien"
+  "link": "Lien",
+  "close": "Fermer"
 }
@@ -35,5 +35,6 @@
  "sticky": "מדבקה",
  "closed": "סגור",
  "reply": "הגב",
-  "link": "קישור"
+  "link": "קישור",
+  "close": "סגור"
 }
@@ -35,5 +35,6 @@
  "sticky": "चिपकाया",
  "closed": "बंद",
  "reply": "जवाब दें",
-  "link": "लिंक"
+  "link": "लिंक",
+  "close": "बंद करें"
 }
@@ -35,5 +35,6 @@
  "sticky": "Rögzített",
  "closed": "Zárt",
  "reply": "Válaszolás",
-  "link": "Hivatkozás"
+  "link": "Hivatkozás",
+  "close": "Bezárás"
 }
@@ -35,5 +35,6 @@
  "sticky": "Menempel",
  "closed": "Tutup",
  "reply": "Balas",
-  "link": "Tautan"
+  "link": "Tautan",
+  "close": "Tutup"
 }
@@ -35,5 +35,6 @@
  "sticky": "Incollato",
  "closed": "Chiuso",
  "reply": "Commenta",
-  "link": "Link"
+  "link": "Link",
+  "close": "Chiudi"
 }
@@ -35,5 +35,6 @@
  "sticky": "固定",
  "closed": "閉鎖",
  "reply": "返信",
-  "link": "リンク"
+  "link": "リンク",
+  "close": "閉じる"
 }
@@ -35,5 +35,6 @@
  "sticky": "고정된",
  "closed": "닫힘",
  "reply": "답장",
-  "link": "링크"
+  "link": "링크",
+  "close": "닫기"
 }
@@ -35,5 +35,6 @@
  "sticky": "स्टिकी",
  "closed": "बंद",
  "reply": "प्रतिसाद",
-  "link": "लिंक"
+  "link": "लिंक",
+  "close": "बंद करा"
 }
@@ -35,5 +35,6 @@
  "sticky": "Vastgemaakt",
  "closed": "Gesloten",
  "reply": "Antwoord",
-  "link": "Link"
+  "link": "Link",
+  "close": "Sluiten"
 }
@@ -35,5 +35,6 @@
  "sticky": "Klistret",
  "closed": "Stengt",
  "reply": "Svar",
-  "link": "Lenke"
+  "link": "Lenke",
+  "close": "Lukk"
 }
@@ -35,5 +35,6 @@
  "sticky": "Przyklejony",
  "closed": "Zamknięty",
  "reply": "Odpowiedz",
-  "link": "Link"
+  "link": "Link",
+  "close": "Zamknij"
 }
@@ -35,5 +35,6 @@
  "sticky": "Fixado",
  "closed": "Fechado",
  "reply": "Responder",
-  "link": "Link"
+  "link": "Link",
+  "close": "Fechar"
 }
@@ -35,5 +35,6 @@
  "sticky": "Lipit",
  "closed": "Închis",
  "reply": "Răspunde",
-  "link": "Legătură"
+  "link": "Legătură",
+  "close": "Închide"
 }
@@ -35,5 +35,6 @@
  "sticky": "Прикреплено",
  "closed": "Закрыто",
  "reply": "Ответить",
-  "link": "Ссылка"
+  "link": "Ссылка",
+  "close": "Закрыть"
 }
@@ -35,5 +35,6 @@
  "sticky": "Ngjitës",
  "closed": "Mbyllur",
  "reply": "Përgjigju",
-  "link": "Lidhje"
+  "link": "Lidhje",
+  "close": "Mbylle"
 }
@@ -35,5 +35,6 @@
  "sticky": "Klistrad",
  "closed": "Stängd",
  "reply": "Svara",
-  "link": "Länk"
+  "link": "Länk",
+  "close": "Stäng"
 }
@@ -35,5 +35,6 @@
  "sticky": "స్టికీ",
  "closed": "మూసివేయబడినది",
  "reply": "స్పందించు",
-  "link": "లింక్"
+  "link": "లింక్",
+  "close": "మూసి"
 }
@@ -35,5 +35,6 @@
  "sticky": "ปักหมุด",
  "closed": "ปิด",
  "reply": "ตอบ",
-  "link": "ลิงก์"
+  "link": "ลิงก์",
+  "close": "ปิด"
 }
@@ -35,5 +35,6 @@
  "sticky": "Yapışkan",
  "closed": "Kapalı",
  "reply": "Yanıtla",
-  "link": "Bağlantı"
+  "link": "Bağlantı",
+  "close": "Kapat"
 }
@@ -35,5 +35,6 @@
  "sticky": "Прикріплений",
  "closed": "Закрито",
  "reply": "Відповісти",
-  "link": "Посилання"
+  "link": "Посилання",
+  "close": "Закрити"
 }
@@ -35,5 +35,6 @@
  "sticky": "چسپی",
  "closed": "بند",
  "reply": "جواب دیں",
-  "link": "لنک"
+  "link": "لنک",
+  "close": "بند کریں"
 }
@@ -35,5 +35,6 @@
  "sticky": "Dán",
  "closed": "Đóng",
  "reply": "Trả lời",
-  "link": "Liên kết"
+  "link": "Liên kết",
+  "close": "Đóng"
 }
@@ -35,5 +35,6 @@
  "sticky": "置顶",
  "closed": "关闭",
  "reply": "回复",
-  "link": "链接"
+  "link": "链接",
+  "close": "关闭"
 }
@@ -1 +1 @@
-export { Thumbnail, Media } from './media';
+export { default } from './media';
@@ -3,6 +3,7 @@
  width: var(--width);
  height: var(--height);
  margin: 3px 20px 5px 0;
+  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
@@ -13,6 +14,7 @@
  width: var(--width);
  height: var(--height);
  margin: 3px 10px 5px 5px;
+  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
@@ -27,3 +29,33 @@
  max-width: 125px;
  max-height: 125px;
 }
+
+.hide {
+  display: none !important;
+}
+
+.thumbnail .show {
+  display: block;
+}
+
+.content img {
+  cursor: pointer;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.content iframe {
+  border: none;
+}
+
+@media (min-width: 640px) {
+  .media img, .media iframe, .media video, .media audio {
+    margin: 3px 20px 5px 0;
+  }
+}
+
+@media (max-width: 640px) {
+  .media img, .media iframe, .media video, .media audio {
+    margin: 3px 10px 5px 5px;
+  }
+}
@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './media.module.css';
 import { CommentMediaInfo } from '../../lib/utils/media-utils';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
+import Embed from '../embed';

-interface ThumbnailProps {
+interface MediaProps {
  commentMediaInfo?: CommentMediaInfo;
  isMobile: boolean;
  isReply: boolean;
  linkHeight?: number;
  linkWidth?: number;
+  showThumbnail: boolean;
+  setShowThumbnail: (showThumbnail: boolean) => void;
  toggleExpanded?: () => void;
 }

@@ -24,7 +27,7 @@ const ThumbnailSmall = ({ style, children }: { style: React.CSSProperties; child
  </span>
 );

-export const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth }: ThumbnailProps) => {
+const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth }: MediaProps) => {
  let displayWidth, displayHeight;
  const maxThumbnailSize = isMobile || isReply ? 125 : 250;
  if (linkWidth && linkHeight) {
@@ -60,6 +63,35 @@ export const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, lin
  );
 };

-export const Media = () => {
-  return <></>;
+const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
+  return (
+    <span className={styles.content}>
+      <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`} onClick={() => setShowThumbnail(false)}>
+        <Thumbnail
+          commentMediaInfo={commentMediaInfo}
+          isMobile={isMobile}
+          isReply={isReply}
+          linkHeight={linkHeight}
+          linkWidth={linkWidth}
+          showThumbnail={showThumbnail}
+          setShowThumbnail={setShowThumbnail}
+        />
+      </span>
+      <span className={`${showThumbnail ? styles.hide : styles.show} ${styles.media}`}>
+        {commentMediaInfo?.type === 'iframe' ? (
+          <Embed url={commentMediaInfo.url} />
+        ) : commentMediaInfo?.type === 'gif' ? (
+          <img src={commentMediaInfo.url} alt='' onClick={() => setShowThumbnail(true)} />
+        ) : commentMediaInfo?.type === 'video' ? (
+          <video src={commentMediaInfo.url} controls autoPlay loop muted />
+        ) : commentMediaInfo?.type === 'image' ? (
+          <img src={commentMediaInfo.url} alt='' onClick={() => setShowThumbnail(true)} />
+        ) : commentMediaInfo?.type === 'webpage' ? (
+          <img src={commentMediaInfo.url} alt='' />
+        ) : null}
+      </span>
+    </span>
+  );
 };
+
+export default Media;
@@ -40,10 +40,6 @@
  background-image: var(--post-unhide-button-background-image);
 }

-.postDesktop .fileThumb {
-  float: left;
-}
-
 .postDesktop .fileText a {
  color: var(--post-link-text-color);
  text-decoration: var(--post-link-text-decoration);
@@ -97,6 +93,17 @@
  image-rendering: pixelated;
 }

+.postDesktop .closeMedia {
+  color: var(--button-desktop-text-color);
+  text-decoration: underline;
+  text-transform: capitalize;
+}
+
+.postDesktop .closeMedia:hover {
+  cursor: pointer;
+  color: var(--button-desktop-text-color-hover);
+}
+
 .postDesktop .replyButton {
  padding-left: 10px;
 }
@@ -210,10 +217,6 @@
  text-align: right;
 }

-.postMobile .fileThumb {
-  float: left;
-}
-
 .postMobile .fileThumb .fileInfo {
  padding-bottom: 5px;
  text-align: center;
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
@@ -6,7 +7,7 @@ import { getFormattedDate } from '../../lib/utils/time-utils';
 import useReplies from '../../hooks/use-replies';
 import styles from './post.module.css';
 import Markdown from '../markdown';
-import { Thumbnail } from '../media';
+import Media from '../media';

 import { countLinksInCommentReplies } from '../../lib/utils/comment-utils';

@@ -69,6 +70,8 @@ const PostDesktop = ({ post }: Comment) => {

  const replies = useReplies(post);

+  const [showThumbnail, setShowThumbnail] = useState(true);
+
  return (
    <div className={styles.postDesktop}>
      <div className={styles.hrWrapper}>
@@ -85,11 +88,27 @@ const PostDesktop = ({ post }: Comment) => {
              {commentMediaInfo.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + '...' : commentMediaInfo?.url}
            </a>{' '}
            ({commentMediaInfo?.type})
+            {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && (
+              <span>
+                {' '}
+                [
+                <span className={styles.closeMedia} onClick={() => setShowThumbnail(true)}>
+                  {t('close')}
+                </span>
+                ]
+              </span>
+            )}
          </div>
          {hasThumbnail && (
-            <span className={styles.fileThumb}>
-              <Thumbnail commentMediaInfo={commentMediaInfo} isMobile={false} isReply={false} linkHeight={linkHeight} linkWidth={linkWidth} />
-            </span>
+            <Media
+              commentMediaInfo={commentMediaInfo}
+              isMobile={false}
+              isReply={false}
+              linkHeight={linkHeight}
+              linkWidth={linkWidth}
+              showThumbnail={showThumbnail}
+              setShowThumbnail={setShowThumbnail}
+            />
          )}
        </div>
      )}
@@ -128,7 +147,7 @@ const PostDesktop = ({ post }: Comment) => {
        </span>
        <span className={styles.postMenuBtn}>▶</span>
      </div>
-      {!content && !link && <div className={styles.spacer} />}
+      {!content && <div className={styles.spacer} />}
      {content && (
        <blockquote className={styles.postMessage}>
          <Markdown content={displayContent} />
@@ -190,6 +209,8 @@ const PostMobile = ({ post }: Comment) => {

  const replies = useReplies(post);

+  const [showThumbnail, setShowThumbnail] = useState(true);
+
  return (
    <div className={styles.postMobile}>
      <div className={styles.hrWrapper}>
@@ -218,10 +239,18 @@ const PostMobile = ({ post }: Comment) => {
              </span>
            </div>
            {hasThumbnail && (
-              <span className={styles.fileThumb}>
-                <Thumbnail commentMediaInfo={commentMediaInfo} isMobile={true} isReply={false} linkHeight={linkHeight} linkWidth={linkWidth} />
+              <>
+                <Media
+                  commentMediaInfo={commentMediaInfo}
+                  isMobile={true}
+                  isReply={false}
+                  linkHeight={linkHeight}
+                  linkWidth={linkWidth}
+                  showThumbnail={showThumbnail}
+                  setShowThumbnail={setShowThumbnail}
+                />
                {commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>}
-              </span>
+              </>
            )}
            {content && (
              <blockquote className={`${styles.postMessage} ${styles.clampLines}`}>
@@ -15,22 +15,17 @@ interface SubplebbitProps {

 const Subplebbit = ({ subplebbits }: SubplebbitProps) => {
  const { t } = useTranslation();
-
  const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
-  const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
  const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
-  const { shortAddress, state, title } = subplebbit || {};
-
  const sortType = 'active';
  const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
+
+  const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
+  const { shortAddress, state, title } = subplebbit || {};
+
  const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
-
  const loadingString = <div className={styles.stateString}>{state === 'failed' ? state : <LoadingEllipsis string={loadingStateString} />}</div>;

-  useEffect(() => {
-    document.title = title ? title : shortAddress;
-  }, [title, shortAddress]);
-
  const Footer = () => {
    let footerContent;
    if (feed.length === 0) {
@@ -57,6 +52,11 @@ const Subplebbit = ({ subplebbits }: SubplebbitProps) => {
  }, [subplebbitAddress, sortType]);

  const lastVirtuosoState = lastVirtuosoStates?.[subplebbitAddress + sortType];
+
+  useEffect(() => {
+    document.title = title ? title : shortAddress;
+  }, [title, shortAddress]);
+
  return (
    <div className={styles.content}>
      <Virtuoso