Merge pull request #613 from plebbit/development

Development
2026-08-03 07:41:04 +02:00 · 2024-12-04 15:13:38 +01:00
parent 6b0209db03 09505a6231
commit 789c54229a
6 changed files with 193 additions and 70 deletions
@@ -11,44 +11,27 @@ import Embed, { canEmbed } from '../embed';

 interface MediaProps {
  commentMediaInfo?: CommentMediaInfo;
-  post?: Comment;
+  deleted?: boolean;
+  displayHeight?: string;
+  displayWidth?: string;
  isFloatingEmbed?: boolean;
+  isOutOfFeed?: boolean;
  isReply?: boolean;
  linkHeight?: number;
  linkWidth?: number;
+  post?: Comment;
+  removed?: boolean;
+  spoiler?: boolean;
  showThumbnail?: boolean;
  setShowThumbnail: (showThumbnail: boolean) => void;
 }

-const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }: MediaProps) => {
-  const { deleted, linkHeight, linkWidth, parentCid, removed, spoiler } = post || {};
-  const { isDescription, isRules } = post || {}; // custom properties, not from api
-  const isOutOfFeed = isDescription || isRules || isFloatingEmbed; // virtuoso wrapper unneeded
-  const isReply = parentCid;
-  const isDeleted = deleted || removed;
-
+const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isFloatingEmbed, isOutOfFeed, isReply, removed, spoiler, setShowThumbnail }: MediaProps) => {
+  const isMobile = useIsMobile();
  const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
  const [hasError, setHasError] = useState(false);
  const handleError = () => setHasError(true);

-  let displayWidth, displayHeight;
-  const isMobile = useIsMobile();
-  const maxThumbnailSize = isMobile || isReply ? 125 : 250;
-
-  if (linkWidth && linkHeight) {
-    let scale = Math.min(1, maxThumbnailSize / Math.max(linkWidth, linkHeight));
-    displayWidth = `${linkWidth * scale}px`;
-    displayHeight = `${linkHeight * scale}px`;
-  } else {
-    displayWidth = `${maxThumbnailSize}px`;
-    displayHeight = `${maxThumbnailSize}px`;
-  }
-
-  if (type === 'audio') {
-    displayWidth = '100%';
-    displayHeight = '100%';
-  }
-
  let thumbnailComponent: React.ReactNode = null;
  const iframeThumbnail = patternThumbnailUrl || thumbnail;
  const gifFrameUrl = useFetchGifFirstFrame(type === 'gif' ? url : undefined);
@@ -78,7 +61,7 @@ const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }

  const linkWithoutThumbnail = url && new URL(url);

-  return hasError || isDeleted ? (
+  return hasError || deleted || removed ? (
    <img className={styles.fileDeleted} src='assets/filedeleted-res.gif' alt='File deleted' />
  ) : spoiler ? (
    <img className={styles.spoiler} src='assets/spoiler.png' alt='' onClick={() => setShowThumbnail(false)} />
@@ -149,6 +132,8 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
 };

 const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail, setShowThumbnail }: MediaProps) => {
+  const { deleted, linkHeight, linkWidth, parentCid, removed, spoiler } = post || {};
+  const isReply = parentCid;
  const { t } = useTranslation();
  const isMobile = useIsMobile();
  const { url } = commentMediaInfo || {};
@@ -161,13 +146,85 @@ const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail,
    type = 'static gif';
  }

+  let displayWidth, displayHeight;
+  const maxThumbnailSize = isMobile || isReply ? 125 : 250;
+
+  if (linkWidth && linkHeight) {
+    let scale = Math.min(1, maxThumbnailSize / Math.max(linkWidth, linkHeight));
+    displayWidth = `${linkWidth * scale}px`;
+    displayHeight = `${linkHeight * scale}px`;
+  } else {
+    displayWidth = `${maxThumbnailSize}px`;
+    displayHeight = `${maxThumbnailSize}px`;
+  }
+
+  if (type === 'audio') {
+    displayWidth = '100%';
+    displayHeight = '100%';
+  }
+  const { isDescription, isRules } = post || {}; // custom properties, not from api
+  const isOutOfFeed = isDescription || isRules || isFloatingEmbed; // virtuoso wrapper unneeded
+
+  const [isImageExpanded, setIsImageExpanded] = useState(false);
+  const { fitExpandedImagesToScreen } = useExpandedMediaStore();
+  const mediaDimensions = getMediaDimensions(commentMediaInfo);
+  const mediaClass = `${isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp} ${
+    fitExpandedImagesToScreen ? styles.fitToScreen : ''
+  }`;
+  const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
+  const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
+
  return (
    <span className={styles.content}>
-      <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
-        {url && <Thumbnail commentMediaInfo={commentMediaInfo} isFloatingEmbed={isFloatingEmbed} post={post} setShowThumbnail={setShowThumbnail} />}
-        {isMobile && type && <div className={styles.fileInfo}>{`${post?.spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`}</div>}
-      </span>
-      {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={post?.parentCid} setShowThumbnail={setShowThumbnail} />}
+      {commentMediaInfo?.type === 'image' ? (
+        isMobile ? (
+          <span className={styles.thumbnail}>
+            <span
+              className={isImageExpanded ? mediaClass : `${isOutOfFeed ? styles.subplebbitAvatar : styles.thumbnailSmall} ${thumbnailSmallPadding}`}
+              style={isImageExpanded ? {} : thumbnailDimensions}
+            >
+              <img src={url} alt='' onClick={() => setIsImageExpanded(!isImageExpanded)} />
+            </span>
+            {isImageExpanded && type && (
+              <div className={styles.fileInfo}>
+                <a href={url} target='_blank' rel='noopener noreferrer'>
+                  {url && url.length > 30 ? url.slice(0, 30) + '...' : url}
+                </a>{' '}
+                ({getDisplayMediaInfoType(type, t)}
+                {mediaDimensions && `, ${mediaDimensions}`})
+              </div>
+            )}
+            {type && !isImageExpanded && <div className={styles.fileInfo}>{`${post?.spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`}</div>}
+          </span>
+        ) : (
+          <span
+            className={isImageExpanded ? mediaClass : `${isOutOfFeed ? styles.subplebbitAvatar : styles.thumbnailBig} ${styles.thumbnail}`}
+            style={isImageExpanded ? {} : thumbnailDimensions}
+          >
+            <img src={url} alt='' onClick={() => setIsImageExpanded(!isImageExpanded)} />
+          </span>
+        )
+      ) : (
+        <>
+          <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
+            {url && (
+              <Thumbnail
+                commentMediaInfo={commentMediaInfo}
+                displayHeight={displayHeight}
+                displayWidth={displayWidth}
+                isFloatingEmbed={isFloatingEmbed}
+                isOutOfFeed={isOutOfFeed}
+                deleted={deleted}
+                removed={removed}
+                spoiler={spoiler}
+                setShowThumbnail={setShowThumbnail}
+              />
+            )}
+            {isMobile && type && <div className={styles.fileInfo}>{`${post?.spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`}</div>}
+          </span>
+          {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={post?.parentCid} setShowThumbnail={setShowThumbnail} />}
+        </>
+      )}
    </span>
  );
 };
@@ -1,22 +1,52 @@
+.nowrap {
+  white-space: nowrap;
+}
+
+.ellipsis {
+  display: inline-block;
+  width: 4ch;
+}
+
 .ellipsis:after {
-  overflow: hidden;
  display: inline-block;
-  position: absolute;
  vertical-align: bottom;
-  -webkit-animation: ellipsis steps(4,end) 1500ms infinite;      
-  animation: ellipsis steps(4,end) 1500ms infinite;
-  content: "\2026"; /* ascii code for the ellipsis character */
-  width: 0px;
+  -webkit-animation: ellipsis 1500ms steps(4, end) infinite;
+  animation: ellipsis 1500ms steps(4, end) infinite;
+  content: "";
 }

@keyframes ellipsis {
-  to {
-    width: 1.25em;    
+  0% {
+    content: "";
+  }
+  25% {
+    content: ".";
+  }
+  50% {
+    content: "..";
+  }
+  75% {
+    content: "...";
+  }
+  100% {
+    content: "";
  }
 }

@-webkit-keyframes ellipsis {
-  to {
-    width: 1.25em;    
+  0% {
+    content: "";
+  }
+  25% {
+    content: ".";
+  }
+  50% {
+    content: "..";
+  }
+  75% {
+    content: "...";
+  }
+  100% {
+    content: "";
  }
 }
@@ -5,7 +5,20 @@ interface LoadingEllipsisProps {
 }

 const LoadingEllipsis = ({ string }: LoadingEllipsisProps) => {
-  return <span className={styles.ellipsis}>{string}</span>;
+  const words = string.split(' ');
+  const lastWord = words.pop();
+  const restOfString = words.join(' ');
+
+  return (
+    <span>
+      {restOfString}
+      {restOfString && ' '}
+      <span className={styles.nowrap}>
+        {lastWord}
+        <span className={styles.ellipsis} />
+      </span>
+    </span>
+  );
 };

 export default LoadingEllipsis;
@@ -165,7 +165,11 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
                <Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
                  c/
                </Link>
-                <span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={() => openReplyModal && openReplyModal(cid, postCid, subplebbitAddress)}>
+                <span
+                  className={styles.replyToPost}
+                  title={t('reply_to_post')}
+                  onMouseDown={() => openReplyModal && !(deleted || removed) && openReplyModal(cid, postCid, subplebbitAddress)}
+                >
                  {shortCid}
                </span>
              </span>
@@ -205,7 +209,10 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
          parentCid &&
          replies &&
          replies.map(
-            (reply: Comment, index: number) => reply?.parentCid === cid && reply?.cid && <ReplyQuotePreview key={index} isBacklinkReply={true} backlinkReply={reply} />,
+            (reply: Comment, index: number) =>
+              reply?.parentCid === cid &&
+              reply?.cid &&
+              !(reply?.deleted || reply?.removed) && <ReplyQuotePreview key={index} isBacklinkReply={true} backlinkReply={reply} />,
          )}
      </span>
    </div>
@@ -223,6 +230,7 @@ const PostMedia = ({ post }: PostProps) => {
 const PostMediaContent = ({ post, link, spoiler, t }: { post: any; link: string; spoiler: boolean; t: any }) => {
  const initialInfo = getCommentMediaInfo(post);
  const [webpageThumbnail, setWebpageThumbnail] = useState<CommentMediaInfo | undefined>();
+  const { isDescription, isRules } = post || {}; // custom properties, not from api

  useEffect(() => {
    // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
@@ -285,7 +293,13 @@ const PostMediaContent = ({ post, link, spoiler, t }: { post: any; link: string;
      </div>
      {(hasThumbnail || (!hasThumbnail && !showThumbnail) || spoiler) && (
        <div className={styles.fileThumbnail}>
-          <CommentMedia commentMediaInfo={commentMediaInfo} post={post} showThumbnail={showThumbnail} setShowThumbnail={setShowThumbnail} />
+          <CommentMedia
+            commentMediaInfo={commentMediaInfo}
+            post={post}
+            showThumbnail={showThumbnail}
+            setShowThumbnail={setShowThumbnail}
+            isOutOfFeed={isDescription || isRules}
+          />
        </div>
      )}
    </div>
@@ -167,7 +167,11 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
                  <Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
                    c/
                  </Link>
-                  <span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={() => openReplyModal && openReplyModal(cid, postCid, subplebbitAddress)}>
+                  <span
+                    className={styles.replyToPost}
+                    title={t('reply_to_post')}
+                    onMouseDown={() => openReplyModal && !(deleted || removed) && openReplyModal(cid, postCid, subplebbitAddress)}
+                  >
                    {shortCid.slice(0, -4)}
                  </span>
                </span>
@@ -191,7 +195,7 @@ const PostMediaContent = ({ post, link, t }: { post: any; link: string; t: any }
  const initialInfo = getCommentMediaInfo(post);
  const [webpageThumbnail, setWebpageThumbnail] = useState<CommentMediaInfo | undefined>();
  const [showThumbnail, setShowThumbnail] = useState(true);
-
+  const { isDescription, isRules } = post || {}; // custom properties, not from api
  useEffect(() => {
    // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
    const loadThumbnail = async () => {
@@ -206,7 +210,17 @@ const PostMediaContent = ({ post, link, t }: { post: any; link: string; t: any }
  const commentMediaInfo = webpageThumbnail || initialInfo;
  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);

-  return hasThumbnail && <CommentMedia commentMediaInfo={commentMediaInfo} post={post} showThumbnail={showThumbnail} setShowThumbnail={setShowThumbnail} />;
+  return (
+    hasThumbnail && (
+      <CommentMedia
+        commentMediaInfo={commentMediaInfo}
+        post={post}
+        showThumbnail={showThumbnail}
+        setShowThumbnail={setShowThumbnail}
+        isOutOfFeed={isDescription || isRules}
+      />
+    )
+  );
 };

 const ReplyBacklinks = ({ post }: PostProps) => {
@@ -219,7 +233,10 @@ const ReplyBacklinks = ({ post }: PostProps) => {
    replies.length > 0 && (
      <div className={styles.mobileReplyBacklinks}>
        {replies.map(
-          (reply: Comment, index: number) => reply?.parentCid === cid && reply?.cid && <ReplyQuotePreview key={index} isBacklinkReply={true} backlinkReply={reply} />,
+          (reply: Comment, index: number) =>
+            reply?.parentCid === cid &&
+            reply?.cid &&
+            !(reply?.deleted || reply?.removed) && <ReplyQuotePreview key={index} isBacklinkReply={true} backlinkReply={reply} />,
        )}
      </div>
    )
@@ -6,7 +6,6 @@ import styles from './home.module.css';
 import packageJson from '../../../package.json';
 import useDefaultSubplebbits, { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import useSubplebbitsStats from '../../hooks/use-subplebbits-stats';
-import LoadingEllipsis from '../../components/loading-ellipsis';
 import PopularThreadsBox from './popular-threads-box';
 import BoardsBox from './boards-box';

@@ -61,7 +60,7 @@ const InfoBox = () => {
  );
 };

-const Stats = ({ multisub, subplebbitAddresses }: { multisub: any; subplebbitAddresses: string[] }) => {
+const Stats = ({ subplebbitAddresses }: { subplebbitAddresses: string[] }) => {
  const { t } = useTranslation();
  const stats = useSubplebbitsStats({ subplebbitAddresses });

@@ -84,29 +83,22 @@ const Stats = ({ multisub, subplebbitAddresses }: { multisub: any; subplebbitAdd
  }, [stats, allStatsLoaded]);

  const boardsTracked = Object.values(stats).filter((stat: any) => stat && !stat.loading).length;
-  const enoughStats = boardsTracked >= multisub.length / 2;

  return (
    <div className={styles.box}>
      <div className={`${styles.boxBar} ${styles.color2ColorBar}`}>
        <h2 className='capitalize'>{t('stats')}</h2>
      </div>
-      <div className={`${styles.boxContent} ${enoughStats ? styles.stats : ''}`}>
-        {enoughStats ? (
-          <>
-            <div className={styles.stat}>
-              <b>{t('total_posts')}</b> {totalPosts}
-            </div>
-            <div className={styles.stat}>
-              <b>{t('current_users')}</b> {currentUsers}
-            </div>
-            <div className={styles.stat}>
-              <b>{t('boards_tracked')}</b> {boardsTracked}
-            </div>
-          </>
-        ) : (
-          <LoadingEllipsis string={t('loading')} />
-        )}
+      <div className={`${styles.boxContent} ${styles.stats}`}>
+        <div className={styles.stat}>
+          <b>{t('total_posts')}</b> {totalPosts}
+        </div>
+        <div className={styles.stat}>
+          <b>{t('current_users')}</b> {currentUsers}
+        </div>
+        <div className={styles.stat}>
+          <b>{t('boards_tracked')}</b> {boardsTracked}
+        </div>
      </div>
    </div>
  );
@@ -224,7 +216,7 @@ const Home = () => {
      <InfoBox />
      <BoardsBox multisub={defaultSubplebbits} subplebbits={subplebbits} />
      <PopularThreadsBox multisub={defaultSubplebbits} subplebbits={subplebbits} />
-      <Stats multisub={defaultSubplebbits} subplebbitAddresses={subplebbitAddresses} />
+      <Stats subplebbitAddresses={subplebbitAddresses} />
      <Footer />
    </div>
  );