Merge pull request #613 from plebbit/development

Development
plebbit · Dec 4, 2024 · 789c542 · 789c542
2 parents 6b0209d + 09505a6
commit 789c542
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 70 deletions.
diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
@@ -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>
   );
 };

diff --git a/src/components/loading-ellipsis/loading-ellipsis.module.css b/src/components/loading-ellipsis/loading-ellipsis.module.css
@@ -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: "";
   }
 }
diff --git a/src/components/loading-ellipsis/loading-ellipsis.tsx b/src/components/loading-ellipsis/loading-ellipsis.tsx
@@ -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;
diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
@@ -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>

diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
@@ -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>
     )