border-radius added - locked zoom when not on fullscreen

juanmanueldaza · Dec 14, 2024 · 7e8dfed · 7e8dfed
1 parent effe079
commit 7e8dfed
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/src/components/Slideshow.tsx b/src/components/Slideshow.tsx
@@ -150,6 +150,7 @@ const Slideshow: React.FC = () => {
               className={styles.imageWrapper}
               style={{
                 transform: `scale(${scale})`,
+                cursor: isFullscreen ? "zoom-in" : "pointer", // Modify cursor based on fullscreen state
               }}
               onClick={toggleFullscreen}
             >

diff --git a/src/hooks/useSlideshow.ts b/src/hooks/useSlideshow.ts
@@ -36,7 +36,7 @@ export const useSlideshow = (
 
   const pauseSlideshow = useCallback(() => {
     setIsPaused(true);
-    if (!isFullscreen) {
+    if (isFullscreen) {
       setScale(baseScale);
     }
   }, [isFullscreen]);
@@ -48,16 +48,17 @@ export const useSlideshow = (
 
   const handleWheel = useCallback(
     (event: WheelEvent) => {
-      if (isPaused) {
+      if (isPaused && isFullscreen) {
+        // Add isFullscreen check here
         event.preventDefault();
         const delta = event.deltaY * -0.002;
         setScale((prevScale) => {
           const newScale = prevScale + delta;
-          return Math.min(Math.max(newScale, baseScale), maxScale); // Using maxScale here
+          return Math.min(Math.max(newScale, baseScale), maxScale);
         });
       }
     },
-    [isPaused],
+    [isPaused, isFullscreen], // Add isFullscreen to dependencies
   );
 
   const handleTouchStart = useCallback(

diff --git a/src/styles/Slideshow.module.css b/src/styles/Slideshow.module.css
@@ -52,11 +52,15 @@
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     width: 100%;
     height: 100%;
-    cursor: zoom-in;
+    cursor: pointer; /* Default cursor */
 }
 
 .fullscreen .imageWrapper {
-    cursor: zoom-out;
+    cursor: zoom-in; /* Only show zoom cursor in fullscreen */
+}
+
+.fullscreen .imageWrapper[style*="scale"] {
+    cursor: zoom-out; /* Show zoom-out cursor when zoomed in fullscreen */
 }
 
 .loading {
@@ -71,6 +75,7 @@
 .mainImage {
     opacity: 0;
     transition: opacity 0.3s ease;
+    border-radius: 20px;
 }
 
 .mainImage.loaded {