fix: webcam scale ratio

src/features/slop/hooks/useMapPinch.ts

@@ -1,12 +1,13 @@
 import { useSpring } from '@react-spring/web';
 import { createUseGesture, dragAction, pinchAction } from '@use-gesture/react';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { getBoundedPositions } from '@/shared/lib';
 
 const useGesture = createUseGesture([pinchAction, dragAction]);
 
 const useMapPinch = () => {
   const [style, api] = useSpring(() => ({ scale: 1, x: 0, y: 0 }));
+  const [scale, setScale] = useState(1);
   const ref = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLElement>(null);
 
@@ -23,12 +24,16 @@ const useMapPinch = () => {
         const x = memo[0] - (ms - 1) * memo[2];
         const y = memo[1] - (ms - 1) * memo[3];
         api.start({ scale: s, x, y });
+        setScale(s);
         return memo;
       },
-      onPinchEnd: () => {
+      onPinchEnd: ({offset: [s]}) => {
         if (style.scale.get() < 1) {
           api.start({ scale: 1, x: 0, y: 0 });
+          setScale(1);
+          return;
         }
+        setScale(s);
       },
       onDrag: ({ pinching, cancel, offset: [x, y] }) => {
         if (pinching) return cancel();
@@ -58,7 +63,7 @@ const useMapPinch = () => {
     }
   );
 
-  return { ref, style, api, containerRef };
+  return { ref, style, api, containerRef, scale };
 };
 
 export default useMapPinch;

src/features/slop/lib/calculateWebcamScale.ts

@@ -0,0 +1,5 @@
+const calculateWebcamScaleRatio = (scale: number) => {
+  return 1 / (1 + 0.6 * (scale - 1));
+}
+
+export default calculateWebcamScaleRatio;

src/features/slop/ui/slop-camera.tsx

@@ -8,10 +8,12 @@ import { cn } from '@/shared/lib';
 import CameraButton from '@/shared/ui/cam-button';
 import { Tooltip } from '@/shared/ui/tooltip';
 import useSlopStore from '../hooks/useSlopStore';
+import calculateWebcamScaleRatio from '../lib/calculateWebcamScale';
 import SlopVideo from './slop-video';
 
 interface SlopWebcamProps {
   webcam: Webcam;
+  webcamScale: number;
   isOpen: boolean;
   containerRef: React.RefObject<HTMLElement>;
   onCameraClick: ({ scale, id }: { scale: number; id: string }) => void;
@@ -20,6 +22,7 @@ interface SlopWebcamProps {
 
 const SlopCamera = ({
   webcam: { scale, name, position, src, id },
+  webcamScale,
   isOpen,
   containerRef,
   onCameraClick,
@@ -57,6 +60,10 @@ const SlopCamera = ({
           <Tooltip
             trigger={
               <CameraButton
+                className={cn('scale-[calc(var(--v-scale))]')}
+                style={
+                  { '--v-scale': calculateWebcamScaleRatio(webcamScale) } as React.CSSProperties
+                }
                 onClick={() => {
                   setSelectedSlop(null);
                   setSelectedCamera(id);

src/widgets/webcam/ui/webcam-map.tsx

@@ -35,6 +35,7 @@ const WebcamMap = forwardRef<HTMLDivElement, WebcamMapProps>(
               <SlopCamera
                 key={webcam.id}
                 webcam={webcam}
+                webcamScale={style.scale.animation.to as number}
                 isOpen={slop.some((item) => item.id === selectedSlop)}
                 containerRef={containerRef}
                 onCameraClick={onCameraClick}