From 7f3630e28907c9dbd75d593f6b02910d6d128175 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Mon, 17 Jun 2024 21:16:31 +0200 Subject: [PATCH] feat(catalog): add 'image size' and 'show OP comment' options --- .../board-buttons/board-buttons.module.css | 4 ++ .../board-buttons/board-buttons.tsx | 46 ++++++++++++++++++- .../catalog-row/catalog-row.module.css | 20 ++++---- src/components/catalog-row/catalog-row.tsx | 20 ++++++-- src/index.css | 1 + src/stores/use-catalog-style-store.ts | 23 ++++++++++ src/views/catalog/catalog.tsx | 6 ++- 7 files changed, 104 insertions(+), 16 deletions(-) create mode 100644 src/stores/use-catalog-style-store.ts diff --git a/src/components/board-buttons/board-buttons.module.css b/src/components/board-buttons/board-buttons.module.css index 973cd5b5..36444c74 100644 --- a/src/components/board-buttons/board-buttons.module.css +++ b/src/components/board-buttons/board-buttons.module.css @@ -47,6 +47,10 @@ margin-right: 5px; } +.mobileCatalogOptionsPadding { + padding-top: 15px; +} + @media (max-width: 640px) { .desktopBoardButtons { display: none; diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 3a83ccb9..48b6c8ba 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -7,6 +7,8 @@ import useFeedResetStore from '../../stores/use-feed-reset-store'; import useTimeFilter from '../../hooks/use-time-filter'; import CatalogFilters from '../../views/catalog/catalog-filters/'; import styles from './board-buttons.module.css'; +import useCatalogFiltersStore from '../../stores/use-catalog-filters-store'; +import useCatalogStyleStore from '../../stores/use-catalog-style-store'; interface BoardButtonsProps { address?: string | undefined; @@ -100,6 +102,35 @@ const SortOptions = () => { ); }; +const ImageSizeOptions = () => { + const { imageSize, setImageSize } = useCatalogStyleStore(); + + return ( + <> + Image Size:  + + + ); +}; + +const ShowOPCommentOption = () => { + const { showOPComment, setShowOPComment } = useCatalogStyleStore(); + const { showTextOnlyThreads } = useCatalogFiltersStore(); + + return ( + <> + Show OP Comment:  + + + ); +}; + export const TimeFilter = ({ isInAllView, isInCatalogView, isInSubscriptionsView, isTopbar = false }: BoardButtonsProps) => { const { t } = useTranslation(); const params = useParams(); @@ -174,7 +205,12 @@ export const MobileBoardButtons = () => { <>
- +
+ +
+
+ +
)} @@ -227,7 +263,13 @@ export const DesktopBoardButtons = () => { )} [] - {isInCatalogView && } + {isInCatalogView && ( + <> + + + + + )} {(isInAllView || isInSubscriptionsView) && ( )} diff --git a/src/components/catalog-row/catalog-row.module.css b/src/components/catalog-row/catalog-row.module.css index 4686ce04..230de8c8 100644 --- a/src/components/catalog-row/catalog-row.module.css +++ b/src/components/catalog-row/catalog-row.module.css @@ -16,20 +16,24 @@ overflow: hidden; } +.large { + width: 270px !important; +} + .hidden { opacity: 0.5; } .hiddenThumbnail { - width: 150px; - height: 150px; + width: var(--maxWidth); + height: var(--maxHeight); background-color: var(--media-thumbnail-background-color); display: inline-block; } .spoilerThumbnail { - width: 150px; - height: 150px; + width: var(--maxWidth); + height: var(--maxHeight); display: inline-block; background-color: black; color: white !important; @@ -80,8 +84,8 @@ .post img, .post video, .post audio { box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); - max-width: 150px; - max-height: 150px; + max-width: var(--maxWidth); + max-height: var(--maxHeight); } .meta { @@ -111,8 +115,8 @@ } .loadingSkeleton { - width: 150px; - height: 150px; + width: var(--maxWidth); + height: var(--maxHeight); display: inline-block; } diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx index 5dacf149..04bd06e7 100644 --- a/src/components/catalog-row/catalog-row.tsx +++ b/src/components/catalog-row/catalog-row.tsx @@ -7,6 +7,7 @@ import { useFloating, offset, shift, size, autoUpdate, Placement } from '@floati import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; import { getFormattedTimeAgo } from '../../lib/utils/time-utils'; import { isAllView } from '../../lib/utils/view-utils'; +import useCatalogStyleStore from '../../stores/use-catalog-style-store'; import useEditCommentPrivileges from '../../hooks/use-author-privileges'; import useCountLinksInReplies from '../../hooks/use-count-links-in-replies'; import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; @@ -50,7 +51,16 @@ export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, lin displayHeight = 'unset'; } - const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties; + const { imageSize } = useCatalogStyleStore(); + const maxWidth = imageSize === 'Large' ? '250px' : '150px'; + const maxHeight = imageSize === 'Large' ? '250px' : '150px'; + + const CSSProperties = { + '--width': displayWidth, + '--height': displayHeight, + '--maxWidth': maxWidth, + '--maxHeight': maxHeight, + } as React.CSSProperties; let thumbnailComponent: React.ReactNode = null; @@ -74,7 +84,7 @@ export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, lin } return ( -
+
{!isLoaded && !hasError && type !== 'video' && type !== 'audio' && } {hasError ? : thumbnailComponent}
@@ -179,9 +189,11 @@ const CatalogPost = ({ post }: { post: Comment }) => {
); + const { imageSize, showOPComment } = useCatalogStyleStore(); + return ( <> -
+
setHoveredCid(isDescription ? 'd' : isRules ? 'r' : cid)} onMouseLeave={() => setHoveredCid(null)}> {hidden ? ( @@ -226,7 +238,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
- {hasThumbnail ? postContent : {postContent}} + {showOPComment && (hasThumbnail ? postContent : {postContent})}
{hoveredCid === cid && diff --git a/src/index.css b/src/index.css index d62858cd..7b8c1295 100644 --- a/src/index.css +++ b/src/index.css @@ -77,6 +77,7 @@ hr { text-decoration: var(--button-text-decoration-mobile); user-select: none; display: inline-block; + cursor: pointer; } select { diff --git a/src/stores/use-catalog-style-store.ts b/src/stores/use-catalog-style-store.ts new file mode 100644 index 00000000..ac3cfacb --- /dev/null +++ b/src/stores/use-catalog-style-store.ts @@ -0,0 +1,23 @@ +import { create } from 'zustand'; + +interface CatalogStyleStore { + imageSize: 'Small' | 'Large'; + setImageSize: (size: 'Small' | 'Large') => void; + showOPComment: boolean; + setShowOPComment: (value: boolean) => void; +} + +const useCatalogStyleStore = create((set) => ({ + imageSize: (localStorage.getItem('imageSize') as 'Small' | 'Large') || 'Small', + setImageSize: (size: 'Small' | 'Large') => { + set({ imageSize: size }); + localStorage.setItem('imageSize', size); + }, + showOPComment: localStorage.getItem('showOPComment') === 'false' ? false : true, + setShowOPComment: (value: boolean) => { + set({ showOPComment: value }); + localStorage.setItem('showOPComment', value.toString()); + }, +})); + +export default useCatalogStyleStore; diff --git a/src/views/catalog/catalog.tsx b/src/views/catalog/catalog.tsx index 818a98ae..64ebb255 100644 --- a/src/views/catalog/catalog.tsx +++ b/src/views/catalog/catalog.tsx @@ -18,6 +18,7 @@ import SettingsModal from '../../components/settings-modal'; import styles from './catalog.module.css'; import _ from 'lodash'; import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; +import useCatalogStyleStore from '../../stores/use-catalog-style-store'; const lastVirtuosoStates: { [key: string]: StateSnapshot } = {}; @@ -77,8 +78,6 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp return rows; }; -const columnWidth = 180; - const catalogFilter = (comment: Comment) => { const commentMediaInfo = getCommentMediaInfo(comment); const hasThumbnail = getHasThumbnail(commentMediaInfo, comment?.link); @@ -121,6 +120,9 @@ const Catalog = () => { return [subplebbitAddress]; }, [isInAllView, isInSubscriptionsView, subplebbitAddress, defaultSubplebbits, subscriptions, showAdultBoards, showGoreBoards]); + const { imageSize } = useCatalogStyleStore(); + const columnWidth = imageSize === 'Large' ? 270 : 180; + const columnCount = Math.floor(useWindowWidth() / columnWidth); // postPerPage based on columnCount for optimized feed, dont change value after first render // eslint-disable-next-line