diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx index 69f1ab07..dbaec5e5 100644 --- a/src/components/comment/CommentContent/index.tsx +++ b/src/components/comment/CommentContent/index.tsx @@ -8,7 +8,7 @@ import { Group } from '~/components/containers/Group'; import { AudioPlayer } from '~/components/media/AudioPlayer'; import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment'; import { UploadType } from '~/constants/uploads'; -import { PRESETS } from '~/constants/urls'; +import { ImagePresets } from '~/constants/urls'; import { IComment, IFile } from '~/types'; import { formatCommentText, getPrettyDate, getURL } from '~/utils/dom'; import { append, assocPath, path, reduce } from '~/utils/ramda'; @@ -101,7 +101,7 @@ const CommentContent: FC = memo( > {groupped.image.map((file, index) => (
onShowImageModal(groupped.image, index)}> - {file.name} + {file.name}
))} diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx index 12fe68ac..ca7e8b30 100644 --- a/src/components/common/Avatar/index.tsx +++ b/src/components/common/Avatar/index.tsx @@ -3,24 +3,22 @@ import React, { forwardRef, useCallback } from 'react'; import classNames from 'classnames'; import { Square } from '~/components/common/Square'; -import { PRESETS } from '~/constants/urls'; +import { ImagePresets } from '~/constants/urls'; import { getURLFromString } from '~/utils/dom'; import { DivProps } from '~/utils/types'; import { openUserProfile } from '~/utils/user'; import styles from './styles.module.scss'; - - interface Props extends DivProps { url?: string; username?: string; size?: number; - preset?: typeof PRESETS[keyof typeof PRESETS]; + preset?: typeof ImagePresets[keyof typeof ImagePresets]; } const Avatar = forwardRef( - ({ url, username, size, className, preset = PRESETS.avatar, ...rest }, ref) => { + ({ url, username, size, className, preset = ImagePresets.avatar, ...rest }, ref) => { const onOpenProfile = useCallback(() => openUserProfile(username), [username]); return ( diff --git a/src/components/containers/CoverBackdrop/index.tsx b/src/components/containers/CoverBackdrop/index.tsx index 87afff3b..33aaa823 100644 --- a/src/components/containers/CoverBackdrop/index.tsx +++ b/src/components/containers/CoverBackdrop/index.tsx @@ -2,7 +2,7 @@ import React, { FC, useCallback, useEffect, useRef, useState } from 'react'; import classNames from 'classnames'; -import { PRESETS } from '~/constants/urls'; +import { ImagePresets } from '~/constants/urls'; import { IUser } from '~/types/auth'; import { getURL } from '~/utils/dom'; @@ -19,14 +19,14 @@ const CoverBackdrop: FC = ({ cover }) => { const onLoad = useCallback(() => setIsLoaded(true), [setIsLoaded]); - const image = getURL(cover, PRESETS.cover); + const image = getURL(cover, ImagePresets.cover); useEffect(() => { if (!cover || !cover.url || !ref || !ref.current) return; ref.current.src = ''; setIsLoaded(false); - ref.current.src = getURL(cover, PRESETS.cover); + ref.current.src = getURL(cover, ImagePresets.cover); }, [cover]); if (!cover) return null; diff --git a/src/components/containers/PageCoverProvider/index.tsx b/src/components/containers/PageCoverProvider/index.tsx index 064ab3d4..68c6c288 100644 --- a/src/components/containers/PageCoverProvider/index.tsx +++ b/src/components/containers/PageCoverProvider/index.tsx @@ -2,7 +2,7 @@ import React, { createContext, FC, useContext, useState } from 'react'; import { createPortal } from 'react-dom'; -import { PRESETS } from '~/constants/urls'; +import { ImagePresets } from '~/constants/urls'; import { IFile } from '~/types'; import { getURL } from '~/utils/dom'; @@ -27,7 +27,7 @@ const PageCoverProvider: FC = ({ children }) => { createPortal(
, document.body )} diff --git a/src/components/editors/EditorUploadCoverButton/index.tsx b/src/components/editors/EditorUploadCoverButton/index.tsx index 460890ba..cb792f88 100644 --- a/src/components/editors/EditorUploadCoverButton/index.tsx +++ b/src/components/editors/EditorUploadCoverButton/index.tsx @@ -2,7 +2,7 @@ import React, { ChangeEvent, FC, useCallback, useEffect } from 'react'; import { Icon } from '~/components/input/Icon'; import { UploadSubject, UploadTarget, UploadType } from '~/constants/uploads'; -import { PRESETS } from '~/constants/urls'; +import { ImagePresets } from '~/constants/urls'; import { useUploader } from '~/hooks/data/useUploader'; import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik'; import { IEditorComponentProps } from '~/types/node'; @@ -21,7 +21,7 @@ const EditorUploadCoverButton: FC = () => { values.cover ? [values.cover] : [] ); - const background = values.cover ? getURL(values.cover, PRESETS['300']) : null; + const background = values.cover ? getURL(values.cover, ImagePresets['300']) : null; const preview = pendingImages?.[0]?.thumbnail || ''; const onDropCover = useCallback(() => { diff --git a/src/components/editors/SortableImageGrid/index.tsx b/src/components/editors/SortableImageGrid/index.tsx index ed47c9d5..e8a44cde 100644 --- a/src/components/editors/SortableImageGrid/index.tsx +++ b/src/components/editors/SortableImageGrid/index.tsx @@ -5,7 +5,7 @@ import { SortableContainer } from 'react-sortable-hoc'; import { SortableImageGridItem } from '~/components/editors/SortableImageGridItem'; import { ImageUpload } from '~/components/upload/ImageUpload'; -import { PRESETS } from '~/constants/urls'; +import { ImagePresets } from '~/constants/urls'; import { UploadStatus } from '~/store/uploader/UploaderStore'; import { IFile } from '~/types'; import { getURL } from '~/utils/dom'; @@ -33,7 +33,11 @@ const SortableImageGrid = SortableContainer( .filter(file => file && file.id) .map((file, index) => ( - + ))} diff --git a/src/components/flow/FlowGrid/index.tsx b/src/components/flow/FlowGrid/index.tsx index 87b9c79c..5184ce0c 100644 --- a/src/components/flow/FlowGrid/index.tsx +++ b/src/components/flow/FlowGrid/index.tsx @@ -3,7 +3,7 @@ import React, { FC, Fragment } from 'react'; import classNames from 'classnames'; import { FlowCell } from '~/components/flow/FlowCell'; -import { PRESETS, URLS } from '~/constants/urls'; +import { flowDisplayToPreset, ImagePresets, URLS } from '~/constants/urls'; import { FlowDisplay, IFlowNode, INode } from '~/types'; import { IUser } from '~/types/auth'; import { getURLFromString } from '~/utils/dom'; @@ -30,7 +30,7 @@ export const FlowGrid: FC = ({ user, nodes, onChangeCellView }) => { id={node.id} color={node.flow.dominant_color} to={URLS.NODE_URL(node.id)} - image={getURLFromString(node.thumbnail, PRESETS.cover)} + image={getURLFromString(node.thumbnail, flowDisplayToPreset[node.flow.display])} flow={node.flow} text={node.description} title={node.title} diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx index 1edd7e76..3a6b99af 100644 --- a/src/components/flow/FlowSwiperHero/index.tsx +++ b/src/components/flow/FlowSwiperHero/index.tsx @@ -7,7 +7,7 @@ import SwiperClass from 'swiper/types/swiper-class'; import { Icon } from '~/components/input/Icon'; import { LoaderCircle } from '~/components/input/LoaderCircle'; -import { PRESETS, URLS } from '~/constants/urls'; +import { ImagePresets, URLS } from '~/constants/urls'; import { useWindowSize } from '~/hooks/dom/useWindowSize'; import { useNavigation } from '~/hooks/navigation/useNavigation'; import { IFlowNode } from '~/types'; @@ -39,7 +39,7 @@ export const FlowSwiperHero: FC = ({ heroes }) => { const [controlledSwiper, setControlledSwiper] = useState(undefined); const [currentIndex, setCurrentIndex] = useState(heroes.length); - const preset = useMemo(() => (innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), [ + const preset = useMemo(() => (innerWidth <= 768 ? ImagePresets.cover : ImagePresets.small_hero), [ innerWidth, ]); diff --git a/src/components/main/UserButton/index.tsx b/src/components/main/UserButton/index.tsx index 0bda7848..77bbc4de 100644 --- a/src/components/main/UserButton/index.tsx +++ b/src/components/main/UserButton/index.tsx @@ -2,7 +2,7 @@ import React, { FC, useCallback } from 'react'; import { Group } from '~/components/containers/Group'; import { Icon } from '~/components/input/Icon'; -import { PRESETS } from '~/constants/urls'; +import { ImagePresets } from '~/constants/urls'; import { IUser } from '~/types/auth'; import { getURL } from '~/utils/dom'; @@ -30,7 +30,7 @@ const UserButton: FC = ({ user: { username, photo }, authOpenProfile, on
{(!photo || !photo.id) && }
diff --git a/src/components/media/ImagePreloader/index.tsx b/src/components/media/ImagePreloader/index.tsx index 3205997c..e650a8aa 100644 --- a/src/components/media/ImagePreloader/index.tsx +++ b/src/components/media/ImagePreloader/index.tsx @@ -6,7 +6,7 @@ import { ImageWithSSRLoad } from '~/components/common/ImageWithSSRLoad'; import { Icon } from '~/components/input/Icon'; import { LoaderCircle } from '~/components/input/LoaderCircle'; import { DEFAULT_DOMINANT_COLOR } from '~/constants/node'; -import { PRESETS } from '~/constants/urls'; +import { ImagePresets } from '~/constants/urls'; import { useResizeHandler } from '~/hooks/dom/useResizeHandler'; import { IFile } from '~/types'; import { getURL } from '~/utils/dom'; @@ -78,7 +78,7 @@ const ImagePreloader: FC = ({ file, color, onLoad, onClick, className }) {!hasError && ( = ({ file, color, onLoad, onClick, className }) = ({ node }) => {
); diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx index f5326f29..4167acf0 100644 --- a/src/components/node/NodeRelatedItem/index.tsx +++ b/src/components/node/NodeRelatedItem/index.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { ImageWithSSRLoad } from '~/components/common/ImageWithSSRLoad'; import { Square } from '~/components/common/Square'; -import { PRESETS } from '~/constants/urls'; +import { ImagePresets } from '~/constants/urls'; import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString'; import { useGotoNode } from '~/hooks/node/useGotoNode'; import { INode } from '~/types'; @@ -39,7 +39,7 @@ const NodeRelatedItem: FC = memo(({ item }) => { const ref = useRef(null); const thumb = useMemo( - () => (item.thumbnail ? getURL({ url: item.thumbnail }, PRESETS.avatar) : ''), + () => (item.thumbnail ? getURL({ url: item.thumbnail }, ImagePresets.avatar) : ''), [item] ); @@ -63,7 +63,9 @@ const NodeRelatedItem: FC = memo(({ item }) => { return 'small'; }, [width]); - const image = useMemo(() => getURL({ url: item.thumbnail }, PRESETS.avatar), [item.thumbnail]); + const image = useMemo(() => getURL({ url: item.thumbnail }, ImagePresets.avatar), [ + item.thumbnail, + ]); return (
= ({ message, incoming }) => {
{getPrettyDate(message.created_at)}
diff --git a/src/components/profile/ProfileAvatar/index.tsx b/src/components/profile/ProfileAvatar/index.tsx index c2cf424d..ce158077 100644 --- a/src/components/profile/ProfileAvatar/index.tsx +++ b/src/components/profile/ProfileAvatar/index.tsx @@ -1,7 +1,7 @@ import React, { ChangeEvent, FC, useCallback } from 'react'; import { Button } from '~/components/input/Button'; -import { PRESETS } from '~/constants/urls'; +import { ImagePresets } from '~/constants/urls'; import { IFile } from '~/types'; import { getURL } from '~/utils/dom'; @@ -26,7 +26,7 @@ const ProfileAvatar: FC = ({ photo, onChangePhoto, canEdit, [onChangePhoto] ); - const backgroundImage = photo ? `url("${getURL(photo, PRESETS.avatar)}")` : undefined; + const backgroundImage = photo ? `url("${getURL(photo, ImagePresets.avatar)}")` : undefined; return (
`/profile/${username}`, }; -export const PRESETS = { +export const ImagePresets = { '1600': '1600', '600': '600', '300': '300', cover: 'cover', small_hero: 'small_hero', avatar: 'avatar', + flow_square: 'flow_square', + flow_vertical: 'flow_vertical', + flow_horizontal: 'flow_horizontal', +} as const; + +export const flowDisplayToPreset: Record< + FlowDisplayVariant, + typeof ImagePresets[keyof typeof ImagePresets] +> = { + single: 'flow_square', + quadro: 'flow_square', + vertical: 'flow_vertical', + horizontal: 'flow_horizontal', }; diff --git a/src/containers/dialogs/PhotoSwipe/index.tsx b/src/containers/dialogs/PhotoSwipe/index.tsx index 696a35ab..4d89022d 100644 --- a/src/containers/dialogs/PhotoSwipe/index.tsx +++ b/src/containers/dialogs/PhotoSwipe/index.tsx @@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite'; import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.js'; import PhotoSwipeJs from 'photoswipe/dist/photoswipe.js'; -import { PRESETS } from '~/constants/urls'; +import { ImagePresets } from '~/constants/urls'; import { useModal } from '~/hooks/modal/useModal'; import { IFile } from '~/types'; import { DialogComponentProps } from '~/types/modal'; @@ -32,7 +32,10 @@ const PhotoSwipe: VFC = observer(({ index, items }) => { img.onload = () => { resolveImage({ - src: getURL(image, window.innerWidth < 768 ? PRESETS[900] : PRESETS[1600]), + src: getURL( + image, + window.innerWidth < 768 ? ImagePresets[900] : ImagePresets[1600] + ), h: img.naturalHeight, w: img.naturalWidth, }); @@ -42,7 +45,7 @@ const PhotoSwipe: VFC = observer(({ index, items }) => { resolveImage({}); }; - img.src = getURL(image, PRESETS[1600]); + img.src = getURL(image, ImagePresets[1600]); }) ) ); diff --git a/src/containers/profile/ProfilePageLeft/index.tsx b/src/containers/profile/ProfilePageLeft/index.tsx index 98ce55af..f67b4240 100644 --- a/src/containers/profile/ProfilePageLeft/index.tsx +++ b/src/containers/profile/ProfilePageLeft/index.tsx @@ -3,13 +3,12 @@ import React, { FC } from 'react'; import { Avatar } from '~/components/common/Avatar'; import { Markdown } from '~/components/containers/Markdown'; import { Placeholder } from '~/components/placeholders/Placeholder'; -import { PRESETS } from '~/constants/urls'; +import { ImagePresets } from '~/constants/urls'; import { IUser } from '~/types/auth'; import { formatText } from '~/utils/dom'; import styles from './styles.module.scss'; - interface IProps { profile: IUser; isLoading: boolean; @@ -23,7 +22,7 @@ const ProfilePageLeft: FC = ({ username, profile, isLoading }) => { username={username} url={profile?.photo?.url} className={styles.avatar} - preset={PRESETS['600']} + preset={ImagePresets['600']} />
diff --git a/src/utils/dom.ts b/src/utils/dom.ts index d2f2a104..8e93e4e5 100644 --- a/src/utils/dom.ts +++ b/src/utils/dom.ts @@ -6,7 +6,7 @@ import isAfter from 'date-fns/isAfter'; import ru from 'date-fns/locale/ru'; import { COMMENT_BLOCK_DETECTORS, COMMENT_BLOCK_TYPES, ICommentBlock } from '~/constants/comment'; -import { PRESETS } from '~/constants/urls'; +import { ImagePresets } from '~/constants/urls'; import { IFile, ValueOf } from '~/types'; import { CONFIG } from '~/utils/config'; import { @@ -66,7 +66,7 @@ export const describeArc = ( export const getURLFromString = ( url?: string, - size?: typeof PRESETS[keyof typeof PRESETS] + size?: typeof ImagePresets[keyof typeof ImagePresets] ): string => { if (size) { return (url || '').replace('REMOTE_CURRENT://', `${CONFIG.remoteCurrent}cache/${size}/`); @@ -77,7 +77,7 @@ export const getURLFromString = ( export const getURL = ( file: Partial | undefined, - size?: typeof PRESETS[keyof typeof PRESETS] + size?: typeof ImagePresets[keyof typeof ImagePresets] ) => { return file?.url ? getURLFromString(file.url, size) : ''; };