diff --git a/src/components/media/AudioPlayer/index.tsx b/src/components/common/AudioPlayer/index.tsx similarity index 100% rename from src/components/media/AudioPlayer/index.tsx rename to src/components/common/AudioPlayer/index.tsx diff --git a/src/components/media/AudioPlayer/styles.module.scss b/src/components/common/AudioPlayer/styles.module.scss similarity index 100% rename from src/components/media/AudioPlayer/styles.module.scss rename to src/components/common/AudioPlayer/styles.module.scss diff --git a/src/components/media/PinchZoom/index.tsx b/src/components/common/PinchZoom/index.tsx similarity index 100% rename from src/components/media/PinchZoom/index.tsx rename to src/components/common/PinchZoom/index.tsx diff --git a/src/components/media/ImagePreloader/index.tsx b/src/components/media/ImagePreloader/index.tsx deleted file mode 100644 index 212bba54..00000000 --- a/src/components/media/ImagePreloader/index.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { FC, MouseEventHandler, useCallback, useMemo, useState } from 'react'; - -import classNames from 'classnames'; - -import { Icon } from '~/components/common/Icon'; -import { ImageWithSSRLoad } from '~/components/common/ImageWithSSRLoad'; -import { LoaderCircle } from '~/components/common/LoaderCircle'; -import { DEFAULT_DOMINANT_COLOR } from '~/constants/node'; -import { imagePresets } from '~/constants/urls'; -import { useResizeHandler } from '~/hooks/dom/useResizeHandler'; -import { IFile } from '~/types'; -import { getURL } from '~/utils/dom'; - -import styles from './styles.module.scss'; - -interface IProps { - file: IFile; - color?: string; - onLoad?: () => void; - onClick?: MouseEventHandler; - className?: string; -} - -const DEFAULT_WIDTH = 1920; -const DEFAULT_HEIGHT = 1020; - -const ImagePreloader: FC = ({ - file, - color, - onLoad, - onClick, - className, -}) => { - const [maxHeight, setMaxHeight] = useState(0); - const [loaded, setLoaded] = useState(false); - const [hasError, setHasError] = useState(false); - - const onImageLoad = useCallback(() => { - setLoaded(true); - setHasError(false); - - if (onLoad) { - onLoad(); - } - }, [setLoaded, onLoad]); - - const onResize = useCallback(() => { - setMaxHeight(window.innerHeight - 140); - }, [setMaxHeight]); - - const onError = useCallback(() => { - setHasError(true); - }, [setHasError]); - - const [width, height] = useMemo( - () => [ - file?.metadata?.width || DEFAULT_WIDTH, - file?.metadata?.height || DEFAULT_HEIGHT, - ], - [file], - ); - - useResizeHandler(onResize); - - const estimatedWidth = (width * maxHeight) / height; - const fill = color && color !== DEFAULT_DOMINANT_COLOR ? color : '#222222'; - - return ( - <> - - - - - - - - - - - {!hasError && ( - - )} - - - - - - {!loaded && !hasError && ( - - )} - - {hasError && ( -
-
Не удалось получить картинку
- -
- )} - - ); -}; - -export { ImagePreloader }; diff --git a/src/components/media/ImagePreloader/styles.module.scss b/src/components/media/ImagePreloader/styles.module.scss deleted file mode 100644 index b1e53091..00000000 --- a/src/components/media/ImagePreloader/styles.module.scss +++ /dev/null @@ -1,67 +0,0 @@ -@import 'src/styles/variables.scss'; - -img.image { - position: absolute; - opacity: 0; - width: 0; - height: 0; - - &.is_loaded { - width: auto; - height: auto; - opacity: 1; - position: static; - } -} - -.preview { - border-radius: $radius; - - &.is_loaded { - display: none; - } -} - -.icon { - position: absolute; - right: 30px; - bottom: 40px; - opacity: 0.4; - - @include tablet { - right: 5px; - bottom: 5px; - } - - svg { - fill: currentColor; - - @include tablet { - transform: scale(0.6); - } - } -} - -.error { - position: absolute; - right: 30px; - bottom: 40px; - opacity: 0.4; - color: $color_offline; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - - svg { - fill: currentColor; - } - - &__text { - max-width: 200px; - text-align: right; - margin-right: $gap; - font: $font_16_semibold; - line-height: 24px; - } -} diff --git a/src/components/node/NodeAudioBlock/index.tsx b/src/components/node/NodeAudioBlock/index.tsx index 853eb34c..b3e325ba 100644 --- a/src/components/node/NodeAudioBlock/index.tsx +++ b/src/components/node/NodeAudioBlock/index.tsx @@ -1,6 +1,6 @@ import { FC } from 'react'; -import { AudioPlayer } from '~/components/media/AudioPlayer'; +import { AudioPlayer } from '~/components/common/AudioPlayer'; import { NodeComponentProps } from '~/constants/node'; import { useNodeAudios } from '~/hooks/node/useNodeAudios'; diff --git a/src/components/settings/SettingsMenu/index.tsx b/src/components/settings/SettingsMenu/index.tsx index 675e5faf..8ab9d6e9 100644 --- a/src/components/settings/SettingsMenu/index.tsx +++ b/src/components/settings/SettingsMenu/index.tsx @@ -20,17 +20,15 @@ const SettingsMenu: VFC = () => ( - Настройки + Настройки - Заметки + Заметки - - Удалённые посты - + Удалённые посты diff --git a/src/components/sortable/SortableAudioGrid/index.tsx b/src/components/sortable/SortableAudioGrid/index.tsx index ebf5ac87..2fb67205 100644 --- a/src/components/sortable/SortableAudioGrid/index.tsx +++ b/src/components/sortable/SortableAudioGrid/index.tsx @@ -1,6 +1,6 @@ import { FC, useMemo } from 'react'; -import { AudioPlayer } from '~/components/media/AudioPlayer'; +import { AudioPlayer } from '~/components/common/AudioPlayer'; import { AudioUpload } from '~/components/upload/AudioUpload'; import { UploadStatus } from '~/store/uploader/UploaderStore'; import { IFile } from '~/types'; diff --git a/src/containers/node/NodeComments/components/Comment/components/CommentContent/index.tsx b/src/containers/node/NodeComments/components/Comment/components/CommentContent/index.tsx index 1aa8d06a..4c513702 100644 --- a/src/containers/node/NodeComments/components/Comment/components/CommentContent/index.tsx +++ b/src/containers/node/NodeComments/components/Comment/components/CommentContent/index.tsx @@ -10,8 +10,8 @@ import { import classnames from 'classnames'; +import { AudioPlayer } from '~/components/common/AudioPlayer'; import { Group } from '~/components/common/Group'; -import { AudioPlayer } from '~/components/media/AudioPlayer'; import { UploadType } from '~/constants/uploads'; import { IComment, IFile } from '~/types'; import { formatCommentText, getPrettyDate } from '~/utils/dom';