feat: show file/image labels instead of link when requirePostLinkIsMedia is truthy

public/translations/en/default.json

@@ -174,6 +174,7 @@
   "user_banned": "User was banned for this post",
   "replies": "replies",
   "links": "links",
+  "images": "images",
   "animated_gif": "Animated GIF",
   "pending": "Pending",
   "failed": "Failed",

src/components/board-buttons/board-buttons.tsx

@@ -3,7 +3,7 @@ import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useAccountComment, useComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import { isAllView, isCatalogView, isModView, isModQueueView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import { usePostPageNumber } from '../../hooks/use-post-page-number';
-import { useDirectories } from '../../hooks/use-directories';
+import { useDirectories, useDirectoryByAddress } from '../../hooks/use-directories';
 import { getBoardPath, isDirectoryBoard } from '../../lib/utils/route-utils';
 import { useResolvedSubplebbitAddress } from '../../hooks/use-resolved-subplebbit-address';
 import useCatalogFiltersStore from '../../stores/use-catalog-filters-store';
@@ -470,6 +470,8 @@ export const PostPageStats = () => {
 
   const { closed, pinned, replyCount } = post || {};
   const linkCount = useCountLinksInReplies(post);
+  const directoryEntry = useDirectoryByAddress(subplebbitAddress);
+  const requirePostLinkIsMedia = directoryEntry?.features?.requirePostLinkIsMedia === true;
 
   const isThreadView = isPostPageView(location.pathname, params);
   const pageNumber = usePostPageNumber({
@@ -485,7 +487,8 @@ export const PostPageStats = () => {
     <span>
       {pinned && `${capitalize(t('sticky'))} / `}
       {closed && `${capitalize(t('closed'))} / `}
-      <Tooltip content={replyCountTooltip}>{displayReplyCount}</Tooltip> / <Tooltip content={capitalize(t('links'))}>{linkCount?.toString()}</Tooltip>
+      <Tooltip content={replyCountTooltip}>{displayReplyCount}</Tooltip> /{' '}
+      <Tooltip content={capitalize(requirePostLinkIsMedia ? t('images') : t('links'))}>{linkCount?.toString()}</Tooltip>
       {isThreadView && (
         <>
           {' '}

src/components/catalog-row/catalog-row.tsx

@@ -128,6 +128,8 @@ const CatalogPost = memo(
     const isInAllView = isAllView(location.pathname);
     const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
     const directories = useDirectories();
+    const directoryEntry = directories?.find((c) => c.address === subplebbitAddress);
+    const requirePostLinkIsMedia = directoryEntry?.features?.requirePostLinkIsMedia === true;
     const boardPath = subplebbitAddress ? getBoardPath(subplebbitAddress, directories) : '';
     const postMenuProps = useMemo(() => selectPostMenuProps(post), [post]);
 
@@ -257,12 +259,12 @@ const CatalogPost = memo(
             ) : (
               threadIcons
             )}
-            <div className={styles.meta} title='(R)eplies / (L)ink Replies'>
+            <div className={styles.meta} title={requirePostLinkIsMedia ? '(R)eplies / (I)mage Replies' : '(R)eplies / (L)ink Replies'}>
               R: <b>{replyCount || '0'}</b>
               {linkCount > 0 && (
                 <span>
                   {' '}
-                  / L: <b>{linkCount}</b>
+                  / {requirePostLinkIsMedia ? 'I' : 'L'}: <b>{linkCount}</b>
                 </span>
               )}
               <span className={`${styles.postMenu} ${hoveredCid && styles.postMenuVisible}`}>

src/components/post-desktop/post-desktop.tsx

@@ -556,6 +556,8 @@ const PostMedia = ({
   const [showThumbnail, setShowThumbnail] = useState(true);
 
   const mediaDimensions = getMediaDimensions(commentMediaInfo);
+  const directoryEntry = directories?.find((c) => c.address === subplebbitAddress);
+  const requirePostLinkIsMedia = directoryEntry?.features?.requirePostLinkIsMedia === true;
   const boardPath = getBoardPath(subplebbitAddress, directories);
   const displayBoardPath =
     boardPath !== subplebbitAddress
@@ -572,7 +574,7 @@ const PostMedia = ({
             {t('board')}: <Link to={`/${boardPath}`}>{displayBoardPath}</Link>{' '}
           </>
         )}
-        {t('link')}:{' '}
+        {requirePostLinkIsMedia ? t('file') : t('link')}:{' '}
         <a href={url} target='_blank' rel='noopener noreferrer'>
           {spoiler ? capitalize(t('spoiler')) : url && url.length > 30 ? url.slice(0, 30) + '...' : url}
         </a>{' '}

src/components/post-mobile/post-mobile.tsx

@@ -537,6 +537,8 @@ const PostMobile = ({
   const isInPendingPostView = isPendingPostView(location.pathname, params);
   const isInPostView = isPostPageView(location.pathname, params);
   const directories = useDirectories();
+  const directoryEntry = directories?.find((c) => c.address === subplebbitAddress);
+  const requirePostLinkIsMedia = directoryEntry?.features?.requirePostLinkIsMedia === true;
   const boardPath = subplebbitAddress ? getBoardPath(subplebbitAddress, directories) : undefined;
   const linksCount = useCountLinksInReplies(post);
   const shouldFetchReplies = showReplies && !isModQueue;
@@ -695,7 +697,7 @@ const PostMobile = ({
                 <div className={styles.postLink}>
                   <span className={styles.info}>
                     {replyCount > 0 && `${replyCount} Replies`}
-                    {linksCount > 0 && ` / ${linksCount} Links`}
+                    {linksCount > 0 && ` / ${linksCount} ${requirePostLinkIsMedia ? 'Images' : 'Links'}`}
                   </span>
                   {isModQueue ? (
                     <div className={styles.modQueueActions}>