muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36: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 { Icon } from '~/components/input/Icon';
import { useResizeHandler } from '~/utils/hooks/useResizeHandler';
import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
interface IProps {
file: IFile;
color?: string;
onLoad?: () => void;
onClick?: MouseEventHandler;
className?: string;
@ -18,7 +20,7 @@ interface IProps {
const DEFAULT_WIDTH = 1920;
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 [loaded, setLoaded] = useState(false);
const [hasError, setHasError] = useState(false);
@ -48,6 +50,7 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
useResizeHandler(onResize);
const estimatedWidth = (width * maxHeight) / height;
const fill = color && color !== DEFAULT_DOMINANT_COLOR ? color : '#222222';
return (
<>
@ -67,7 +70,7 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
</defs>
<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 && (
<image

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

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

1
src/redux/types.ts
View file

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