batch media view

packages/fakeyou.com/package.json

@@ -75,6 +75,7 @@
     "react-twitch-embed": "^3.0.1",
     "react-wavesurfer.js": "^0.0.8",
     "sass": "^1.57.1",
+    "swiper": "^11.0.5",
     "typescript": "^3.7.5",
     "universal-cookie": "^6.1.1",
     "uuid": "^8.3.2",

packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx

@@ -35,6 +35,7 @@ import { useMedia, useRatings, useSession } from "hooks";
 import SdCoverImagePanel from "../weight/cover_image_panels/SdCoverImagePanel";
 import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory";
 import Iframe from "react-iframe";
+import SdBatchMediaPanel from "./components/SdBatchMediaPanel/SdBatchMediaPanel";
 
 export default function MediaPage() {
   const { user } = useSession();
@@ -91,11 +92,21 @@ export default function MediaPage() {
         );
 
       case MediaFileType.Image:
+        const one = false;
+        const multi = one ? false : true;
         let sdMediaImage = "/images/avatars/default-pfp.png";
         if (mediaFile.public_bucket_path) {
           sdMediaImage = bucketConfig.getGcsUrl(mediaFile.public_bucket_path);
         }
-        return <SdCoverImagePanel src={sdMediaImage} />;
+        return (
+          <>
+            {!multi ? (
+              <SdCoverImagePanel src={sdMediaImage} />
+            ) : (
+              <SdBatchMediaPanel />
+            )}
+          </>
+        );
       case MediaFileType.BVH:
         const bvhUrl = bucketConfig.getGcsUrl(mediaFile.public_bucket_path);
         return (

packages/fakeyou.com/src/v2/view/pages/media/components/SdBatchMediaPanel/SdBatchMediaPanel.scss

@@ -0,0 +1,78 @@
+@import "scss/colours.scss";
+
+.swiper {
+  width: 100%;
+  height: 300px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.swiper-slide {
+  background-size: cover;
+  background-position: center;
+}
+
+.secondSwiper {
+  height: 100%;
+  width: 100%;
+}
+
+.secondSwiper .swiper-slide {
+  height: 100%;
+}
+
+.firstSwiper {
+  height: 20%;
+  box-sizing: border-box;
+  padding: 10px 0;
+}
+
+.firstSwiper .swiper-slide {
+  transition: 0.2s;
+  width: 25%;
+  height: 100%;
+  opacity: 0.4;
+}
+
+.firstSwiper .swiper-slide-thumb-active {
+  opacity: 1;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 0.5rem;
+}
+
+.swiper-button-prev,
+.swiper-button-next {
+  color: $white;
+  opacity: 0.5;
+  transition: 0.2s;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.media-img-container {
+  min-height: 300px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    border-radius: 0.5rem;
+    border: 1px solid rgba($white, 0.04);
+    max-width: 100%;
+    max-height: 100%;
+    aspect-ratio: attr(width) / attr(height);
+
+    &.vertical {
+      max-height: 70vh;
+    }
+  }
+}

packages/fakeyou.com/src/v2/view/pages/media/components/SdBatchMediaPanel/SdBatchMediaPanel.tsx

@@ -0,0 +1,79 @@
+import { Panel } from "components/common";
+import React, { useState } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/thumbs";
+import { FreeMode, Navigation, Thumbs } from "swiper/modules";
+import { Swiper as SwiperType } from "swiper/types";
+import "./SdBatchMediaPanel.scss";
+
+interface SdCoverImagePanelProps {
+  src?: string;
+  alt?: string;
+}
+
+export default function SdBatchMediaPanel({
+  src,
+  alt,
+}: SdCoverImagePanelProps) {
+  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
+
+  const handleSwiper = (swiper: SwiperType) => {
+    setThumbsSwiper(swiper);
+  };
+
+  const images = [
+    "https://swiperjs.com/demos/images/nature-1.jpg",
+    "https://swiperjs.com/demos/images/nature-2.jpg",
+    "https://swiperjs.com/demos/images/nature-3.jpg",
+    "https://swiperjs.com/demos/images/nature-4.jpg",
+    "https://swiperjs.com/demos/images/nature-5.jpg",
+    "https://swiperjs.com/demos/images/nature-6.jpg",
+    "https://swiperjs.com/demos/images/nature-7.jpg",
+    "https://swiperjs.com/demos/images/nature-8.jpg",
+  ];
+
+  return (
+    <Panel padding={true}>
+      <Swiper
+        // style={{
+        //   "--swiper-navigation-color": "#fff",
+        //   "--swiper-pagination-color": "#fff",
+        // }}
+        loop={true}
+        spaceBetween={10}
+        navigation={true}
+        thumbs={{ swiper: thumbsSwiper }}
+        modules={[FreeMode, Navigation, Thumbs]}
+        className="secondSwiper"
+        slidesPerView={1}
+      >
+        {images.map((imgSrc, index) => (
+          <SwiperSlide key={index}>
+            <div className="media-img-container">
+              <img src={imgSrc} alt={`Slide ${index + 1}`} />
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+      <Swiper
+        onSwiper={handleSwiper}
+        loop={true}
+        spaceBetween={10}
+        slidesPerView={5}
+        freeMode={true}
+        watchSlidesProgress={true}
+        modules={[FreeMode, Navigation, Thumbs]}
+        className="firstSwiper"
+      >
+        {images.map((imgSrc, index) => (
+          <SwiperSlide key={index}>
+            <img src={imgSrc} alt={`Thumbnail ${index + 1}`} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </Panel>
+  );
+}

yarn.lock

@@ -4595,6 +4595,7 @@ __metadata:
     moment: ^2.29.4
     prettier: ^3.1.0
     pretty-quick: ^3.1.3
+    swiper: ^11.0.5
     universal-cookie: ^6.1.1
     yarn: ^1.22.19
   languageName: unknown
@@ -20178,6 +20179,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"swiper@npm:^11.0.5":
+  version: 11.0.5
+  resolution: "swiper@npm:11.0.5"
+  checksum: 83b125d16733a66ed5f58627c81263116e39eea5cead92667d2e24692ff94632de9aa05fec1ed80dc352779c0d7525e9a18424fce1c39c5e970823414b212edb
+  languageName: node
+  linkType: hard
+
 "swiper@npm:^8.3.2":
   version: 8.3.2
   resolution: "swiper@npm:8.3.2"