muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

added image preloading color for swiper

Browse source
This commit is contained in:
Fedor Katurov 2021-10-05 18:25:40 +07:00
parent 59ca076287
commit 71b94ce585
3 changed files with 7 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/media/ImagePreloader/index.tsx
View file

@ -7,9 +7,11 @@ import { IFile } from '~/redux/types';
import { LoaderCircle } from '~/components/input/LoaderCircle'; import { LoaderCircle } from '~/components/input/LoaderCircle';
import { Icon } from '~/components/input/Icon'; import { Icon } from '~/components/input/Icon';
import { useResizeHandler } from '~/utils/hooks/useResizeHandler'; import { useResizeHandler } from '~/utils/hooks/useResizeHandler';
import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
interface IProps { interface IProps {
file: IFile; file: IFile;
color?: string;
onLoad?: () => void; onLoad?: () => void;
onClick?: MouseEventHandler; onClick?: MouseEventHandler;
className?: string; className?: string;
@ -18,7 +20,7 @@ interface IProps {
const DEFAULT_WIDTH = 1920; const DEFAULT_WIDTH = 1920;
const DEFAULT_HEIGHT = 1020; const DEFAULT_HEIGHT = 1020;
const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => { const ImagePreloader: FC<IProps> = ({ file, color, onLoad, onClick, className }) => {
const [maxHeight, setMaxHeight] = useState(window.innerHeight - 140); const [maxHeight, setMaxHeight] = useState(window.innerHeight - 140);
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
const [hasError, setHasError] = useState(false); const [hasError, setHasError] = useState(false);
@ -48,6 +50,7 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
useResizeHandler(onResize); useResizeHandler(onResize);
const estimatedWidth = (width * maxHeight) / height; const estimatedWidth = (width * maxHeight) / height;
const fill = color && color !== DEFAULT_DOMINANT_COLOR ? color : '#222222';
return ( return (
<> <>
@ -67,7 +70,7 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
</defs> </defs>
<g filter="url(#f1)"> <g filter="url(#f1)">
<rect fill="#222222" width="100%" height="100%" stroke="none" rx="8" ry="8" /> <rect fill={fill} width="100%" height="100%" stroke="none" rx="8" ry="8" />
{!hasError && ( {!hasError && (
<image <image

1
src/components/node/NodeImageSwiperBlock/index.tsx
View file

@ -97,6 +97,7 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
onLoad={updateSwiper} onLoad={updateSwiper}
onClick={() => onOpenPhotoSwipe(i)} onClick={() => onOpenPhotoSwipe(i)}
className={styles.image} className={styles.image}
color={file?.metadata?.dominant_color}
/> />
</SwiperSlide> </SwiperSlide>
))} ))}

1
src/redux/types.ts
View file

@ -83,6 +83,7 @@ export interface IFile {
duration?: number; duration?: number;
width?: number; width?: number;
height?: number; height?: number;
dominant_color?: string;
}; };
createdAt?: string; createdAt?: string;