fix: item page carousel

src/components/modals/main/marketplace/EmblaCarouselButtons.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+export const PrevButton = ({ enabled, onClick }) => (
+  <button
+    className="embla__button embla__button--prev"
+    onClick={onClick}
+    disabled={!enabled}
+  >
+    <svg className="embla__button__svg" viewBox="137.718 -1.001 366.563 644">
+      <path d="M428.36 12.5c16.67-16.67 43.76-16.67 60.42 0 16.67 16.67 16.67 43.76 0 60.42L241.7 320c148.25 148.24 230.61 230.6 247.08 247.08 16.67 16.66 16.67 43.75 0 60.42-16.67 16.66-43.76 16.67-60.42 0-27.72-27.71-249.45-249.37-277.16-277.08a42.308 42.308 0 0 1-12.48-30.34c0-11.1 4.1-22.05 12.48-30.42C206.63 234.23 400.64 40.21 428.36 12.5z" />
+    </svg>
+  </button>
+);
+
+export const NextButton = ({ enabled, onClick }) => (
+  <button
+    className="embla__button embla__button--next"
+    onClick={onClick}
+    disabled={!enabled}
+  >
+    <svg className="embla__button__svg" viewBox="0 0 238.003 238.003">
+      <path d="M181.776 107.719L78.705 4.648c-6.198-6.198-16.273-6.198-22.47 0s-6.198 16.273 0 22.47l91.883 91.883-91.883 91.883c-6.198 6.198-6.198 16.273 0 22.47s16.273 6.198 22.47 0l103.071-103.039a15.741 15.741 0 0 0 4.64-11.283c0-4.13-1.526-8.199-4.64-11.313z" />
+    </svg>
+  </button>
+);

src/components/modals/main/marketplace/Item.jsx

@@ -163,9 +163,9 @@ export default class Item extends PureComponent {
               {getMessage('modals.main.marketplace.product.description')}
             </span>
             <span
-              className={this.state.showMore ? 'description' : 'description truncate'}
               dangerouslySetInnerHTML={{ __html: this.props.data.description }}
             />
+            {/*
             {this.props.data.description.length > 100 ? (
               <div className="showMore" onClick={() => this.toggleShowMore()}>
                 {this.state.showMore === true ? (
@@ -180,7 +180,7 @@ export default class Item extends PureComponent {
                   </>
                 )}
               </div>
-            ) : null}
+                ) : null}*/}
             <div className="moreInfo">
               <div className="infoItem">
                 <MdBugReport />

src/components/modals/main/marketplace/imageCarousel.jsx

@@ -1,19 +1,66 @@
-import React, { useEffect } from 'react';
-import useEmblaCarousel from 'embla-carousel-react';
-import Autoplay from 'embla-carousel-autoplay';
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { PrevButton, NextButton } from "./EmblaCarouselButtons";
+import useEmblaCarousel from "embla-carousel-react";
+import Autoplay from "embla-carousel-autoplay";
+import { FaPhotoVideo } from "react-icons/fa";
 
-export default function EmbaleCarousel({ data }) {
-  const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay()]);
+const EmblaCarousel = ({ data, options = { loop: false } }) => {
+  const autoplay = useRef(
+    Autoplay(
+      { delay: 3000, stopOnInteraction: false },
+      (emblaRoot) => emblaRoot.parentElement
+    )
+  );
+
+  const [emblaRef, emblaApi] = useEmblaCarousel(options, [autoplay.current]);
+  const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
+  const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
+
+  const scrollNext = useCallback(() => {
+    if (!emblaApi) return;
+    emblaApi.scrollNext();
+    autoplay.current.reset();
+  }, [emblaApi]);
+
+  const scrollPrev = useCallback(() => {
+    if (!emblaApi) return;
+    emblaApi.scrollPrev();
+    autoplay.current.reset();
+  }, [emblaApi]);
+
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return;
+    setPrevBtnEnabled(emblaApi.canScrollPrev());
+    setNextBtnEnabled(emblaApi.canScrollNext());
+  }, [emblaApi]);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+    onSelect();
+    emblaApi.on("select", onSelect);
+  }, [emblaApi, onSelect]);
 
   return (
-    <div className="embla" ref={emblaRef}>
-      <div className="embla__container">
-        {data.map((photo, index) => (
-          <div className="embla__slide" key={index}>
-            <img src={photo.url.default} />
-          </div>
-        ))}
+    <div className="embla">
+      <div className="embla__viewport" ref={emblaRef}>
+        <div className="embla__container">
+          {data.map((photo, index) => (
+            <div className="embla__slide" key={index}>
+              <div className="embla__slide__inner">
+                <img
+                  className="embla__slide__img"
+                  src={photo.url.default}
+                  alt="A cool cat."
+                />
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
+      <PrevButton onClick={scrollPrev} enabled={prevBtnEnabled} />
+      <NextButton onClick={scrollNext} enabled={nextBtnEnabled} />
     </div>
   );
-}
+};
+
+export default EmblaCarousel;

src/components/modals/main/scss/marketplace/_main.scss

@@ -477,21 +477,91 @@ p.author {
     font-size: 30px;
   }
 }
-
 .embla {
-  overflow: hidden;
+  position: relative;
+  width: 350px;
+  margin-left: 5px;
 }
+
+.embla__viewport {
+  overflow: hidden;
+  width: 100%;
+}
+
+.embla__viewport.is-draggable {
+  cursor: move;
+  cursor: grab;
+}
+
+.embla__viewport.is-dragging {
+  cursor: grabbing;
+}
+
 .embla__container {
   display: flex;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -khtml-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  margin-left: -10px;
 }
+
 .embla__slide {
-  flex: 0 0 100%;
-  height: 350px;
-  width: 100px;
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: 80% 100%;
-  }
-}
+  position: relative;
+  min-width: 100%;
+  padding-left: 10px;
+}
+
+.embla__slide__inner {
+  position: relative;
+  overflow: hidden;
+  height: 190px;
+}
+
+.embla__slide__img {
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  width: auto;
+  min-height: 100%;
+  min-width: 100%;
+  max-width: none;
+  transform: translate(-50%, -50%);
+}
+
+.embla__button {
+  outline: 0;
+  cursor: pointer;
+  background-color: transparent;
+  touch-action: manipulation;
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 0;
+  width: 30px;
+  height: 30px;
+  justify-content: center;
+  align-items: center;
+  fill: #1bcacd;
+  padding: 0;
+}
+
+.embla__button:disabled {
+  cursor: default;
+  opacity: 0.3;
+}
+
+.embla__button__svg {
+  width: 100%;
+  height: 100%;
+}
+
+.embla__button--prev {
+  left: 27px;
+}
+
+.embla__button--next {
+  right: 27px;
+}