Solved 2 cloud project issues

src/utils/auto-play/is-completed-one-cycle.js

@@ -1,26 +1,70 @@
+import { useState } from 'react';
 import { AUTOPLAY_BEHAVIOR } from '../../constants/auto-play-behavior';
 
 export const isCompletedOneCycle = (autoplayBehavior, activeImageX, activeImageY, amountX, amountY, isReversed) => {
   switch (autoplayBehavior) {
     case AUTOPLAY_BEHAVIOR.SPIN_XY:
     case AUTOPLAY_BEHAVIOR.SPIN_Y: {
-      const isReachedTheEdge = isReversed ? (activeImageY === 1)
-        : (activeImageY === amountY);
-
+      const isReachedTheEdge = isReversed ? (activeImageY === 1) : (activeImageY === amountY);
       if (isReachedTheEdge) return true;
-
       return false;
     }
 
     case AUTOPLAY_BEHAVIOR.SPIN_X:
     case AUTOPLAY_BEHAVIOR.SPIN_YX:
     default: {
-      const isReachedTheEdge = isReversed ? (activeImageX === 1)
-        : (activeImageX === amountX);
-
+      const isReachedTheEdge = isReversed ? (activeImageX === 1) : (activeImageX === amountX);
       if (isReachedTheEdge) return true;
-
       return false;
     }
   }
 };
+
+// Adding play/pause button control
+
+const AutoplayComponent = ({ autoplayBehavior, activeImageX, activeImageY, amountX, amountY, isReversed }) => {
+  const [isPaused, setIsPaused] = useState(false); // State to track whether autoplay is paused or not
+
+  const handleImageClick = () => {
+    setIsPaused(true); // Pause autoplay when image is clicked
+  };
+
+  const handlePlayClick = () => {
+    setIsPaused(false); // Resume autoplay when "Play" button is clicked
+  };
+
+  const handleAutoplay = () => {
+    if (isPaused) return; // Skip autoplay logic if paused
+
+    // Existing autoplay logic
+    const completedCycle = isCompletedOneCycle(autoplayBehavior, activeImageX, activeImageY, amountX, amountY, isReversed);
+
+    if (completedCycle) {
+      // Handle behavior when one cycle is completed
+      console.log("Completed one cycle");
+    } else {
+      // Handle behavior when cycle is ongoing
+      console.log("Autoplay is ongoing");
+    }
+  };
+
+  // Call handleAutoplay as part of component's behavior (simulating autoplay behavior here)
+  handleAutoplay();
+
+  return (
+    <div>
+      {/* Image area */}
+      <div onClick={handleImageClick} style={{ pointerEvents: isPaused ? 'none' : 'auto' }}>
+        {/* Placeholder for image content */}
+        <img src="activeImage.jpg" alt="Autoplay Image" />
+      </div>
+
+      {/* Play button appears when paused */}
+      {isPaused && (
+        <button onClick={handlePlayClick} style={{ marginTop: '20px' }}>
+          Play
+        </button>
+      )}
+    </div>
+  );
+};

src/utils/load-images/load-images-relative-to-container-size.js

@@ -1,18 +1,25 @@
 import { loadImageAsPromise } from './load-image-as-promise';
 
-
 export const loadImagesRelativeToContainerSize = (imagesSrcs, cb, index = 0) => {
   const imageSrc = imagesSrcs[index];
 
+  // If index exceeds the number of images, exit the recursion
   if (index > (imagesSrcs.length - 1)) return;
 
   const imageLoadCallback = (image) => {
     const _index = index + 1;
 
+    // Apply lazyload class and data-src for lazysizes
+    image.classList.add('lazyload'); // Add lazysizes class
+    image.setAttribute('data-src', imageSrc); // Use data-src instead of src
 
+    // Callback to process the image
     cb(image, index);
+
+    // Recursively load the next image
     loadImagesRelativeToContainerSize(imagesSrcs, cb, _index);
-  }
+  };
 
+  // Load the image with a promise and apply the callback
   loadImageAsPromise(imageSrc, imageLoadCallback);
 };