styling fixes

packages/components/src/api/media_files/GetMediaFile.ts

@@ -22,6 +22,7 @@ export interface MediaFile {
     maybe_cover_image_public_bucket_path: string;
   };
   maybe_text_transcript?: string;
+  maybe_batch_token?: string;
 }
 
 export enum MediaFileLookupError {

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

@@ -120,13 +120,15 @@ export default function MediaPage() {
         );
 
       case MediaFileType.Image:
-        const one = images.length === 1;
-        let sdMediaImage = one ? images[0] : "/images/avatars/default-pfp.png";
+        let sdMediaImage = "/images/avatars/default-pfp.png";
+        if (mediaFile.public_bucket_path) {
+          sdMediaImage = bucketConfig.getGcsUrl(mediaFile.public_bucket_path);
+        }
 
         return (
           <>
-            {!one ? (
-              <SdBatchMediaPanel images={images} />
+            {mediaFile.maybe_batch_token ? (
+              <SdBatchMediaPanel key={images.length} images={images} />
             ) : (
               <SdCoverImagePanel src={sdMediaImage} />
             )}

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

@@ -3,28 +3,38 @@
 .swiper {
   width: 100%;
   height: 300px;
+  margin: 0;
   margin-left: auto;
   margin-right: auto;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
 }
 
 .swiper-slide {
-  background-size: cover;
+  background-size: contain;
   background-position: center;
 }
 
 .secondSwiper {
-  height: 100%;
   width: 100%;
 }
 
-.secondSwiper .swiper-slide {
+.landscape {
   height: 100%;
 }
 
+.portrait {
+  height: 70vh;
+}
+
+// .secondSwiper .swiper-slide {
+//   height: 100%;
+// }
+
 .firstSwiper {
   height: 20%;
   box-sizing: border-box;
-  padding: 10px 0;
 }
 
 .firstSwiper .swiper-slide {
@@ -42,8 +52,10 @@
   display: block;
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   border-radius: 0.5rem;
+  cursor: pointer;
+  transition: 0.2s;
 }
 
 .swiper-button-prev,
@@ -57,22 +69,14 @@
   }
 }
 
-.media-img-container {
-  min-height: 300px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+@media screen and (max-width: 768px) {
+  .portrait {
+    height: 550px;
+  }
+}
 
-  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;
-    }
+@media screen and (max-width: 500px) {
+  .portrait {
+    height: 400px;
   }
 }

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

@@ -1,5 +1,5 @@
 import { Panel } from "components/common";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/free-mode";
@@ -15,27 +15,54 @@ interface SdCoverImagePanelProps {
 
 export default function SdBatchMediaPanel({ images }: SdCoverImagePanelProps) {
   const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
+  const [forceUpdateKey, setForceUpdateKey] = useState(0);
+  const [isPortrait, setIsPortrait] = useState(false);
+
+  useEffect(() => {
+    images.forEach(imgSrc => {
+      const img = new Image();
+      img.onload = () => {
+        // If any image is portrait, update isPortrait to true
+        if (img.height > img.width && !isPortrait) {
+          setIsPortrait(true);
+        }
+      };
+      img.src = imgSrc;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [images]);
+
+  useEffect(() => {
+    if (images.length > 0) {
+      // Force re-render of the Swiper component by updating a key
+      setForceUpdateKey(prevKey => prevKey + 1);
+    }
+  }, [images]);
 
   const handleSwiper = (swiper: SwiperType) => {
     setThumbsSwiper(swiper);
   };
 
+  const secondSwiperClass = `secondSwiper ${
+    isPortrait ? "portrait" : "landscape"
+  }`;
+
   return (
-    <Panel padding={true}>
+    <Panel padding={true} className="d-flex flex-column gap-4">
       <Swiper
+        key={forceUpdateKey}
         loop={true}
         spaceBetween={10}
         navigation={true}
         thumbs={{ swiper: thumbsSwiper }}
         modules={[FreeMode, Navigation, Thumbs]}
-        className="secondSwiper"
+        className={secondSwiperClass}
         slidesPerView={1}
+        initialSlide={0}
       >
         {images.map((imgSrc, index) => (
           <SwiperSlide key={index}>
-            <div className="media-img-container">
-              <img src={imgSrc} alt={`Slide ${index + 1}`} />
-            </div>
+            <img src={imgSrc} alt={`Slide ${index + 1}`} />
           </SwiperSlide>
         ))}
       </Swiper>
@@ -48,6 +75,7 @@ export default function SdBatchMediaPanel({ images }: SdCoverImagePanelProps) {
         watchSlidesProgress={true}
         modules={[FreeMode, Navigation, Thumbs]}
         className="firstSwiper"
+        initialSlide={0}
       >
         {images.map((imgSrc, index) => (
           <SwiperSlide key={index}>