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

enable pitch zoom

Browse source
This commit is contained in:
Fedor Katurov 2023-11-04 20:33:33 +06:00
parent 73225b166f
commit 2d7999d9dc
3 changed files with 153 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperClass from 'swiper/types/swiper-class';
import { ImageLoadingWrapper } from '~/components/common/ImageLoadingWrapper/index';
import { PinchZoom } from '~/components/media/PinchZoom';
import { NodeComponentProps } from '~/constants/node';
import { imagePresets } from '~/constants/urls';
import { useWindowSize } from '~/hooks/dom/useWindowSize';
@ -100,26 +101,37 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
>
{images.map((file, index) => (
<SwiperSlide className={styles.slide} key={file.id}>
<ImageLoadingWrapper
preview={getURL(file, imagePresets['300'])}
color={file.metadata?.dominant_color}
>
{({ loading, onLoad }) => (
<NodeImageLazy
src={getURL(file)}
width={file.metadata?.width}
height={file.metadata?.height}
color={normalizeBrightColor(file?.metadata?.dominant_color)}
onLoad={onLoad}
onClick={() => onOpenPhotoSwipe(index)}
className={classNames(styles.image, 'swiper-lazy', {
[styles.loading]: loading,
})}
sizes={getNodeSwiperImageSizes(file, innerWidth, innerHeight)}
quality={90}
/>
<PinchZoom>
{({ setRef }) => (
<ImageLoadingWrapper
preview={getURL(file, imagePresets['300'])}
color={file.metadata?.dominant_color}
ref={setRef}
>
{({ loading, onLoad }) => (
<NodeImageLazy
src={getURL(file)}
width={file.metadata?.width}
height={file.metadata?.height}
color={normalizeBrightColor(
file?.metadata?.dominant_color,
)}
onLoad={onLoad}
onClick={() => onOpenPhotoSwipe(index)}
className={classNames(styles.image, 'swiper-lazy', {
[styles.loading]: loading,
})}
sizes={getNodeSwiperImageSizes(
file,
innerWidth,
innerHeight,
)}
quality={90}
/>
)}
</ImageLoadingWrapper>
)}
</ImageLoadingWrapper>
</PinchZoom>
</SwiperSlide>
))}
</Swiper>