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

fixed default width and height for file loader

Browse source
This commit is contained in:
Fedor Katurov 2021-06-23 14:55:37 +07:00
parent b64ddcf5ce
commit 4853143d26
2 changed files with 21 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,12 @@
import React, { FC, MouseEventHandler, useCallback, useEffect, useState } from 'react';
import React, { FC, MouseEventHandler, useCallback, useMemo, useState } from 'react';
import classNames from 'classnames';
import { describeArc, getURL } from '~/utils/dom';
import { getURL } from '~/utils/dom';
import { PRESETS } from '~/constants/urls';
import styles from './styles.module.scss';
import { IFile } from '~/redux/types';
import { LoaderCircleInner } from '~/components/input/LoaderCircleInner';
import { LoaderCircle } from '~/components/input/LoaderCircle';
import { Icon } from '~/components/input/Icon';
import { useResizeHandler } from '~/utils/hooks/useResizeHandler';
interface IProps {
file: IFile;
@ -15,6 +15,9 @@ interface IProps {
className?: string;
}
const DEFAULT_WIDTH = 1920;
const DEFAULT_HEIGHT = 1020;
const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
const [maxHeight, setMaxHeight] = useState(window.innerHeight - 140);
const [loaded, setLoaded] = useState(false);
@ -37,20 +40,21 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
setHasError(true);
}, [setHasError]);
useEffect(() => {
window.addEventListener('resize', onResize);
const [width, height] = useMemo(
() => [file?.metadata?.width || DEFAULT_WIDTH, file?.metadata?.height || DEFAULT_HEIGHT],
[file?.metadata]
);
return () => window.removeEventListener('resize', onResize);
}, [onResize]);
useResizeHandler(onResize);
return (
<>
<svg
viewBox={`0 0 ${file?.metadata?.width || 0} ${file?.metadata?.height || 0}`}
viewBox={`0 0 ${width} ${height}`}
className={classNames(styles.preview, { [styles.is_loaded]: loaded })}
style={{
maxHeight,
height: file?.metadata?.height || 'auto',
height: height,
}}
onClick={onClick}
>

8
src/utils/hooks/useResizeHandler.ts Normal file
View file

@ -0,0 +1,8 @@
import { useEffect } from 'react';
export const useResizeHandler = (onResize: () => any) => {
useEffect(() => {
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, [onResize]);
};