#35 finally using swiperjs as image slider

src/components/editors/AudioEditor/index.tsx

@@ -8,6 +8,8 @@ import { selectUploads } from '~/redux/uploads/selectors';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import styles from './styles.module.scss';
 import { NodeEditorProps } from '~/redux/node/types';
+import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
+import { useNodeAudios } from '~/utils/hooks/node/useNodeAudios';
 
 const mapStateToProps = selectUploads;
 const mapDispatchToProps = {
@@ -17,10 +19,7 @@ const mapDispatchToProps = {
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & NodeEditorProps;
 
 const AudioEditorUnconnected: FC<IProps> = ({ data, setData, temp, statuses }) => {
-  const images = useMemo(
-    () => data.files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE),
-    [data.files]
-  );
+  const images = useNodeImages(data);
 
   const pending_images = useMemo(
     () =>
@@ -30,10 +29,7 @@ const AudioEditorUnconnected: FC<IProps> = ({ data, setData, temp, statuses }) =
     [temp, statuses]
   );
 
-  const audios = useMemo(
-    () => data.files.filter(file => file && file.type === UPLOAD_TYPES.AUDIO),
-    [data.files]
-  );
+  const audios = useNodeAudios(data);
 
   const pending_audios = useMemo(
     () =>

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -1,7 +1,83 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
+import { INodeComponentProps } from '~/redux/node/constants';
+import SwiperCore, { A11y, Pagination, SwiperOptions } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/swiper.scss';
+import 'swiper/components/navigation/navigation.scss';
+import 'swiper/components/pagination/pagination.scss';
+import 'swiper/components/scrollbar/scrollbar.scss';
 
-interface IProps {}
+import styles from './styles.module.scss';
+import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
+import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import SwiperClass from 'swiper/types/swiper-class';
 
-const NodeImageSwiperBlock: FC<IProps> = () => <div>SWIPER</div>;
+SwiperCore.use([Pagination, A11y]);
+
+interface IProps extends INodeComponentProps {}
+
+const breakpoints: SwiperOptions['breakpoints'] = {
+  599: {
+    spaceBetween: 20,
+  },
+};
+
+const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
+  const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined);
+
+  const images = useNodeImages(node);
+
+  const updateSwiper = useCallback(() => {
+    if (!controlledSwiper) return;
+
+    controlledSwiper.updateSlides();
+    controlledSwiper.updateSize();
+    controlledSwiper.update();
+  }, [controlledSwiper]);
+
+  const resetSwiper = useCallback(() => {
+    if (!controlledSwiper) return;
+    controlledSwiper.slideTo(0);
+  }, [controlledSwiper]);
+
+  useEffect(() => {
+    updateSwiper();
+    resetSwiper();
+  }, [images, updateSwiper, resetSwiper]);
+
+  if (!images?.length) {
+    return null;
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <Swiper
+        slidesPerView="auto"
+        centeredSlides
+        onSwiper={setControlledSwiper}
+        grabCursor
+        autoHeight
+        breakpoints={breakpoints}
+        pagination={{ type: 'fraction' }}
+        observeSlideChildren
+        observeParents
+        resizeObserver
+        watchOverflow
+      >
+        {images.map(file => (
+          <SwiperSlide className={styles.slide} key={file.id}>
+            <img
+              className={styles.image}
+              src={getURL(file, PRESETS['1600'])}
+              alt={node.title}
+              onLoad={updateSwiper}
+            />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+};
 
 export { NodeImageSwiperBlock };

src/components/node/NodeImageSwiperBlock/styles.module.scss

@@ -0,0 +1,66 @@
+@import "~/styles/variables.scss";
+
+.wrapper {
+  border-radius: $radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :global(.swiper-pagination) {
+    left: 50%;
+    bottom: $gap * 2;
+    transform: translate(-50%, 0);
+    background: darken($comment_bg, 4%);
+    width: auto;
+    padding: 5px 10px;
+    border-radius: 10px;
+    font: $font_10_semibold;
+  }
+
+  :global(.swiper-container) {
+    width: 100vw;
+  }
+}
+
+.slide {
+  text-align: center;
+  text-transform: uppercase;
+  font: $font_32_bold;
+  display: flex;
+  border-radius: $radius;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  max-width: 100vw;
+  opacity: 1;
+  filter: brightness(50%) saturate(0.5);
+  transition: opacity 0.5s, filter 1s, transform 1s;
+  padding-bottom: $gap * 1.5;
+  padding-top: $gap;
+
+  &:global(.swiper-slide-active) {
+    opacity: 1;
+    filter: brightness(100%);
+  }
+
+  @include tablet {
+    padding-bottom: 0;
+  }
+}
+
+.image {
+  max-height: calc(100vh - 70px - 70px);
+  max-width: 100%;
+  border-radius: $radius;
+
+  box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
+    transparentize(black, 0.7) 0 5px 5px,
+    transparentize(white, 0.95) 0 -1px 2px,
+    transparentize(white, 0.95) 0 -1px;
+
+  @include tablet {
+    padding-bottom: 0;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+}