Merge pull request #2700 from daostack/CW-placeholder-for-images

Placeholder appears instead of images upon discussion creation

Author: MeyerPV

src/shared/ui-kit/ImageGallery/ChatImageGallery.tsx

@@ -24,14 +24,26 @@ const ChatImageGallery: FC<ChatImageGalleryProps> = (props) => {
   const isTabletView = useIsTabletView();
   const { isShowing, onOpen, onClose } = useModal(false);
   const [initialSlide, setInitialSlide] = useState(0);
-  const images = (gallery || []).map(({ value }) =>
+  const images = (gallery || []).map(({ value }) => value);
+
+  const imagesWithSrcSets = (gallery || []).map(({ value }) =>
     useResizedFile
-      ? getResizedFileUrl(value, ResizeType.Images, FilePrefix.Image)
+      ? `${getResizedFileUrl(
+          value,
+          ResizeType.Images,
+          FilePrefix.Image,
+        )} 1x, ${value} 2x`
       : value,
   );
 
   const [leftImage, rightImage, secondRowLeftImage, secondRowRightImage] =
     images;
+  const [
+    leftImageSrcSet,
+    rightImageSrcSet,
+    secondRowLeftImageSrcSet,
+    secondRowRightImageSrcSet,
+  ] = imagesWithSrcSets;
 
   const hasOneImage = Boolean(leftImage && !rightImage);
   const singleImageWithoutVideo = hasOneImage && !videoSrc;
@@ -61,6 +73,7 @@ const ChatImageGallery: FC<ChatImageGalleryProps> = (props) => {
             <GalleryMainContent
               videoSrc={videoSrc}
               mainImage={secondRowLeftImage}
+              srcSet={secondRowLeftImageSrcSet}
               hasOneImage={hasOneImage}
             />
           </div>
@@ -79,6 +92,7 @@ const ChatImageGallery: FC<ChatImageGalleryProps> = (props) => {
                 [styles.leftItem]: !hasOneImage,
               })}
               src={leftImage}
+              srcSet={leftImageSrcSet}
               imageOverlayClassName={styles.imageOverlay}
               alt="1st Image"
               onClick={() => handleOpenSlide(0)}
@@ -88,6 +102,7 @@ const ChatImageGallery: FC<ChatImageGalleryProps> = (props) => {
             <Image
               className={styles.image}
               src={rightImage}
+              srcSet={rightImageSrcSet}
               imageContainerClassName={styles.rightItem}
               imageOverlayClassName={styles.imageOverlay}
               alt="2nd Image"
@@ -113,13 +128,15 @@ const ChatImageGallery: FC<ChatImageGalleryProps> = (props) => {
               })}
               imageOverlayClassName={styles.imageOverlay}
               src={secondRowLeftImage}
+              srcSet={secondRowLeftImageSrcSet}
               alt="3st Image"
               onClick={() => handleOpenSlide(2)}
             />
             <Image
               className={styles.image}
               imageContainerClassName={styles.rightItem}
               src={secondRowRightImage}
+              srcSet={secondRowRightImageSrcSet}
               imageOverlayClassName={styles.imageOverlay}
               alt="4nd Image"
               onClick={() => handleOpenSlide(3)}

src/shared/ui-kit/ImageGallery/ImageGallery.tsx

@@ -18,13 +18,21 @@ const ImageGallery: FC<ImageGalleryProps> = (props) => {
   const { gallery, videoSrc, useResizedFile = true } = props;
   const [videoContainerRef, { width: videoContainerWidth }] = useMeasure();
   const { isShowing, onOpen, onClose } = useModal(false);
-  const images = (gallery || []).map(({ value }) =>
+  const images = (gallery || []).map(({ value }) => value);
+
+  const imagesWithSrcSets = (gallery || []).map(({ value }) =>
     useResizedFile
-      ? getResizedFileUrl(value, ResizeType.Images, FilePrefix.Image)
+      ? `${getResizedFileUrl(
+          value,
+          ResizeType.Images,
+          FilePrefix.Image,
+        )} 1x, ${value} 2x`
       : value,
   );
 
   const [leftImage, rightImage, mainImage] = images;
+  const [leftImageSrcSet, rightImageSrcSet, mainImageSrcSet] =
+    imagesWithSrcSets;
 
   const hasOneImage = Boolean(leftImage && !rightImage);
   const singleImageWithoutVideo = hasOneImage && !videoSrc;
@@ -56,6 +64,7 @@ const ImageGallery: FC<ImageGalleryProps> = (props) => {
           <GalleryMainContent
             videoSrc={videoSrc}
             mainImage={mainImage}
+            srcSet={mainImageSrcSet}
             hasOneImage={hasOneImage}
             imagePreviewStyle={imagePreviewStyle}
           />
@@ -73,6 +82,7 @@ const ImageGallery: FC<ImageGalleryProps> = (props) => {
               })}
               style={singleImageWithoutVideo ? {} : imagePreviewStyle}
               src={leftImage}
+              srcSet={leftImageSrcSet}
               alt="1st Image"
             />
           )}
@@ -81,6 +91,7 @@ const ImageGallery: FC<ImageGalleryProps> = (props) => {
               className={classNames(styles.image, styles.rightItem)}
               style={imagePreviewStyle}
               src={rightImage}
+              srcSet={rightImageSrcSet}
               alt="2nd Image"
             />
           )}

src/shared/ui-kit/ImageGallery/components/GalleryMainContent/GalleryMainContent.tsx

@@ -7,12 +7,13 @@ import styles from "./GalleryMainContent.module.scss";
 interface GalleryMainContentProps {
   videoSrc?: string;
   mainImage: string;
+  srcSet?: string;
   hasOneImage: boolean;
   imagePreviewStyle?: React.CSSProperties;
 }
 
 const GalleryMainContent: FC<GalleryMainContentProps> = (props) => {
-  const { mainImage, videoSrc, hasOneImage, imagePreviewStyle } = props;
+  const { mainImage, srcSet, videoSrc, hasOneImage, imagePreviewStyle } = props;
 
   if (!videoSrc && !mainImage) {
     return null;
@@ -34,6 +35,7 @@ const GalleryMainContent: FC<GalleryMainContentProps> = (props) => {
     <Image
       className={styles.mainContent}
       src={mainImage}
+      srcSet={srcSet}
       imageContainerClassName={styles.imageContainer}
       imageOverlayClassName={styles.imageOverlay}
       alt="3rd Image"

src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss

@@ -48,9 +48,11 @@
 
 .arrow-wrapper {
   position: absolute;
-  bottom: 2.125rem;
+  top: 50%;
+  transform: translate(0%, -50%);
   z-index: 2;
   color: var(--primary-text);
+  height: 10rem;
 
   &:disabled {
     color: $gray;
@@ -59,7 +61,7 @@
 
 .arrow-wrapper-left {
   @extend .arrow-wrapper;
-  left: 19rem;
+  left: 1rem;
 
   @include tablet {
     left: 18rem;
@@ -69,7 +71,7 @@
 .arrow-wrapper-right {
   @extend .arrow-wrapper;
 
-  right: 19rem;
+  right: 1rem;
 
   @include tablet {
     right: 18rem;