DBC22-6536: Remove few old unmaintained packages

Replace React-Good-Carousel with Embla which is much more used and maintained
Remove React-Outside-Click-Handler as we can do it natively.

Author: wmuldergov

src/frontend/package-lock.json

@@ -31,6 +31,7 @@
     "@vaadin/time-picker": "^24.6.2",
     "@vladyoslav/drawer": "^0.1.0",
     "bootstrap": "^5.3.0",
+    "embla-carousel-react": "^8.6.0",
     "env-cmd": "^10.1.0",
     "flatbush": "^4.4.0",
     "html-react-parser": "^4.2.1",
@@ -50,11 +51,9 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-multi-backend": "^8.0.0",
     "react-dom": "^18.2.0",
-    "react-good-carousel": "^1.0.3",
     "react-image-gallery": "^1.2.12",
     "react-infinite-scroll-component": "^6.1.0",
     "react-loading-skeleton": "^3.4.0",
-    "react-outside-click-handler": "^1.3.0",
     "react-redux": "^8.1.2",
     "react-router-bootstrap": "^0.26.2",
     "react-router-dom": "^6.11.2",

src/frontend/package.json

@@ -3,13 +3,10 @@ import React, { useEffect, useState } from 'react';
 
 // External imports
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faChevronRight,
-  faChevronLeft
-} from '@fortawesome/pro-solid-svg-icons';
+import { faChevronRight, faChevronLeft } from '@fortawesome/pro-solid-svg-icons';
 import { useMediaQuery } from '@uidotdev/usehooks';
 import Button from 'react-bootstrap/Button';
-import GoodCarousel from 'react-good-carousel';
+import useEmblaCarousel from 'embla-carousel-react'; 
 
 // Internal imports
 import colocatedCamIcon from '../../../images/colocated-camera.svg';
@@ -42,7 +39,17 @@ export default function CameraOrientations(props) {
   const [currentCamIndex, setCurrentCamIndex] = useState(0);
   const [currentPane, setCurrentPane] = useState(0);
 
-  // Effects
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    align: 'start',
+    slidesToScroll: perPane,
+    duration: 25,
+    containScroll: 'trimSnaps',
+  });
+
+  useEffect(() => {
+    if (emblaApi) emblaApi.scrollTo(currentPane);
+  }, [currentPane, emblaApi]);
+
   useEffect(() => {
     const nextCam = camData.camGroup[currentCamIndex];
     loadCamDetails(nextCam);
@@ -62,52 +69,54 @@ export default function CameraOrientations(props) {
   const rotateCameraOrientation = () => {
     const currentIndex = camData.camGroup.findIndex(cam => cam.id === camData.id);
     const nextIndex = (currentIndex + 1) % camData.camGroup.length;
-
     const nextCamera = camData.camGroup[nextIndex];
     switchOrientation(nextIndex);
     loadCamDetails(nextCamera);
     trackEvent("click", "camera-details", "camera-rotate", nextCamera.name);
   };
 
-  // Switch orientation for mobile carousel
   const switchOrientation = (index) => {
     setCurrentCamIndex(index);
     setCurrentPane(Math.floor(index / perPane));
   }
 
-  /* Rendering */
-  // Main component
+  const slideWidth = `calc((100% - ${(perPane - 1) * 16}px - 12px) / ${perPane})`;
+
   return (
     <div className="camera-orientations-container">
       <div className="header">
-        <button className="rotate-direction-btn"
-          onClick={rotateCameraOrientation}>
-
+        <button className="rotate-direction-btn" onClick={rotateCameraOrientation}>
           <img
             className="colocated-camera-icon"
             src={colocatedCamIcon}
             role="presentation"
             alt="colocated cameras icon"
           />
-
           <span className="title">Direction</span>
         </button>
       </div>
 
       {(showCompactLayout || showReducedLayout) &&
         <div className="main-content carousel-container--camera-orientations">
-          <GoodCarousel
-            className="camera-orientations-carousel"
-            currentPane={currentPane}
-            itemsPerPane={perPane}
-            gap={16}
-            itemPeek={12}
-            animationDuration={0.4}>
-
-            {camData.camGroup.map((cam, index) => (
-              <CameraThumbnail key={cam.id} thumbnailCamera={cam} mainCamera={camData.camGroup[currentCamIndex]} index={index} switchOrientation={switchOrientation} />
-            ))}
-          </GoodCarousel>
+
+          <div className="camera-orientations-carousel embla" ref={emblaRef}>
+            <div className="embla__container">
+              {camData.camGroup.map((cam, index) => (
+                <div
+                  key={cam.id}
+                  className="embla__slide"
+                  style={{ flex: `0 0 ${slideWidth}` }}
+                >
+                  <CameraThumbnail
+                    thumbnailCamera={cam}
+                    mainCamera={camData.camGroup[currentCamIndex]}
+                    index={index}
+                    switchOrientation={switchOrientation}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
 
           {currentCamIndex < (camData.camGroup.length - 1) && (
             <Button
@@ -130,10 +139,16 @@ export default function CameraOrientations(props) {
       {showFullLayout &&
         <div className={'main-content' + ' camCount' + camData.camGroup.length}>
           {camData.camGroup.map((cam, index) => (
-            <CameraThumbnail key={cam.id} thumbnailCamera={cam} mainCamera={camData.camGroup[currentCamIndex]} index={index} switchOrientation={switchOrientation} />
+            <CameraThumbnail
+              key={cam.id}
+              thumbnailCamera={cam}
+              mainCamera={camData.camGroup[currentCamIndex]}
+              index={index}
+              switchOrientation={switchOrientation}
+            />
           ))}
         </div>
       }
     </div>
   );
-}
+}

src/frontend/src/Components/cameras/directions/CameraOrientations.js

@@ -1,5 +1,21 @@
 @import "../../../styles/variables";
 
+
+.embla {
+  overflow: hidden;
+  padding-right: 20px;
+}
+
+.embla__container {
+  display: flex;
+  gap: 16px;
+}
+
+.embla__slide {
+  flex: 0 0 85%;
+  min-width: 0;
+}
+
 .camera-orientations-container {
   display: flex;
   flex-direction: column;
@@ -157,9 +173,12 @@
         position: absolute;
         top: calc(50% - (35px / 2));
 
-        border: 1px solid $Input-border;
-        border-radius: 2rem;
+        width: 35px;
+        height: 35px;
+        padding: 0;
+        border-radius: 50%; // ← circle
 
+        border: 1px solid $Input-border;
         background: #FFFFFF;
         color: $Type-Primary;
         box-shadow: 0px 3.2px 7.2px 0px #00000021, 0px 0.6px 1.8px 0px #0000001A;
@@ -182,4 +201,4 @@
       }
     }
   }
-}
+}