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

Merge branch 'feature/8-image-preloader' into develop

Browse source
This commit is contained in:
Fedor Katurov 2020-11-06 22:17:34 +07:00
commit 2c1adc384e
232 changed files with 342 additions and 278 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/components/node/NodeImageSlideBlock/index.tsx
View file

@ -1,5 +1,5 @@
import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
import * as styles from './styles.scss';
import styles from './styles.module.scss';
import classNames from 'classnames';
import { UPLOAD_TYPES } from '~/redux/uploads/constants';
import { INodeComponentProps } from '~/redux/node/constants';
@ -78,8 +78,8 @@ const NodeImageSlideBlock: FC<IProps> = ({
]);
// update outside hooks
useEffect(() => updateLayout(), [loaded, height, images]);
useEffect(() => updateSizes(), [refs, current, loaded, images]);
useEffect(updateLayout, [loaded, height, images]);
useEffect(updateSizes, [refs, current, loaded, images]);
useEffect(() => {
const timeout = setTimeout(updateLayout, 300);
@ -251,7 +251,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
<div className={classNames(styles.cutter, { [styles.is_loading]: is_loading })} ref={wrap}>
<div
className={classNames(styles.placeholder, {
[styles.is_loading]: is_loading || !loaded[current],
[styles.is_loading]: is_loading,
})}
>
<div>
@ -274,13 +274,57 @@ const NodeImageSlideBlock: FC<IProps> = ({
images.map((file, index) => (
<div
className={classNames(styles.image_wrap, {
is_active: index === current && loaded[index],
[styles.is_active]: index === current,
})}
ref={setRef(index)}
key={node.updated_at + file.id}
>
<svg
viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`}
className={classNames(styles.preview, { [styles.is_loaded]: loaded[index] })}
style={{
maxHeight: max_height,
width: '100%',
}}
>
<defs>
<filter id="f1" x="0" y="0">
<feBlend
mode="multiply"
x="0%"
y="0%"
width="100%"
height="100%"
in="SourceGraphic"
in2="SourceGraphic"
result="blend"
/>
<feGaussianBlur
stdDeviation="15 15"
x="0%"
y="0%"
width="100%"
height="100%"
in="blend"
edgeMode="none"
result="blur2"
/>
</filter>
</defs>
<rect fill="#242222" width="100%" height="100%" stroke="none" rx="8" ry="8" />
<image
xlinkHref={getURL(file, PRESETS['300'])}
width="100%"
height="100%"
filter="url(#f1)"
/>
</svg>
<img
className={styles.image}
className={classNames(styles.image, { [styles.is_loaded]: loaded[index] })}
src={getURL(file, PRESETS['1600'])}
alt=""
key={file.id}