@bytebrand/fe-ui-core-autobahn 1.0.114 → 1.0.115

package/vdp/VdpViewer.tsx

@@ -104,30 +104,38 @@ export interface VdpViewerProps {
   /** "request this car" action (mirrors the legacy slider's envelope button) — omit to hide the
    *  "Jetzt Anfragen" CTA (mobile) / envelope button (desktop). */
   onEmail?: () => void;
-  /** 360°-view toggle (mobile layout only) — presentational only for now (no vehicle in the
-   *  current DTO ships a 360 image set), wired here so a real spin viewer can hang off it once
-   *  that data exists. */
+  /** whether this vehicle has a valid 360° image set to view — the ONLY thing that gates showing
+   *  the 360° control at all (mobile layouts only). Default false: no vehicle in the current DTO
+   *  ships 360 media, so there is no reliable metadata to show it FOR today — this must come from
+   *  real backend media metadata once that exists, never inferred (e.g. "gallery has N+ photos"
+   *  is not evidence of a 360 set). */
+  has360?: boolean;
+  /** 360°-view toggle (mobile layout only, only rendered when `has360`) — wired here so a real
+   *  spin viewer can hang off it once 360 data exists; presentational only until then. */
   on360?: () => void;
 }
 
 /** Figma "360 / Icon" (node 424:8093) — two counter-rotating arcs; not part of the lucide set
- *  used elsewhere in this file, so it's inlined verbatim from the design's exported SVG. */
-const Icon360: React.FunctionComponent = () => (
+ *  used elsewhere in this file, so it's inlined verbatim from the design's exported SVG. `color`
+ *  defaults to the original hardcoded white (portrait/landscape's pill sits on a dark translucent
+ *  background) — the desktop header's `.icon-btn` is light, so that usage passes `currentColor`
+ *  to inherit the same `--md-on-surface-variant` grey the zoom/close lucide icons already use. */
+const Icon360: React.FunctionComponent<{ color?: string }> = ({ color = 'white' }) => (
   <svg width={18} height={18} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path
       d="M5.25 6.3579C5.5593 5.55736 6.06014 4.84485 6.70866 4.28275C7.35719 3.72066 8.13362 3.32612 8.96998 3.13368C9.80634 2.94125 10.6771 2.95678 11.5061 3.17892C12.3351 3.40106 13.0969 3.82303 13.725 4.4079"
-      stroke="white"
+      stroke={color}
       strokeWidth={1.5}
       strokeLinecap="round"
     />
-    <path d="M14.2754 2.17499V5.17499H11.2754" stroke="white" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M14.2754 2.17499V5.17499H11.2754" stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
     <path
       d="M14.7504 11.75C14.4411 12.5505 13.9403 13.2631 13.2917 13.8251C12.6432 14.3872 11.8668 14.7818 11.0304 14.9742C10.194 15.1666 9.32326 15.1511 8.49429 14.929C7.66533 14.7068 6.90346 14.2849 6.27539 13.7"
-      stroke="white"
+      stroke={color}
       strokeWidth={1.5}
       strokeLinecap="round"
     />
-    <path d="M5.72461 16V13H8.72461" stroke="white" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5.72461 16V13H8.72461" stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 );
 
@@ -527,7 +535,7 @@ const PhotoSheet: React.FunctionComponent<{
   );
 };
 
-const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0, onClose, t, phone, onCall, onEmail, on360 }) => {
+const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0, onClose, t, phone, onCall, onEmail, has360 = false, on360 }) => {
   const [i, setI] = useState(start);
   const [zoom, setZoom] = useState(ZOOM_MIN);
   const [pan, setPan] = useState({ x: 0, y: 0 });
@@ -635,20 +643,65 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
   // around instead (that's the whole point of zooming in — being able to look at every part of
   // it, not just the centered crop). Pointer Events cover mouse + touch + pen in one handler set.
   const dragRef = useRef<{ x: number; y: number; panStart: { x: number; y: number } } | null>(null);
+  // Pinch-to-zoom: every active pointer is tracked by id so a genuine 2nd finger landing can be
+  // told apart from the single-pointer pan/swipe drag above and switch into pinch mode instead.
+  // The ratio between the CURRENT and STARTING distance between the two touch points scales zoom
+  // directly — no attempt to keep the pinch midpoint visually fixed, matching the +/- buttons' own
+  // un-anchored `scale(zoom)` model; pan re-clamps itself automatically (the zoom-driven clampPan
+  // effect above already runs on every zoom change). The stage already has touch-action:none (see
+  // render below), so the browser's own native pinch/pan never competes with this.
+  const pointersRef = useRef<Map<number, { x: number; y: number }>>(new Map());
+  const pinchRef = useRef<{ startDist: number; startZoom: number } | null>(null);
   const onStagePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
     // Don't hijack clicks on the buttons layered over the stage (arrows, counter, 360°, zoom).
     if ((e.target as HTMLElement).closest('button')) return;
-    dragRef.current = { x: e.clientX, y: e.clientY, panStart: pan };
+    pointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
     try {
       e.currentTarget.setPointerCapture(e.pointerId);
     } catch {
-      // Capture is a "nice to have" (keeps the drag alive if the pointer strays outside the
+      // Capture is a "nice to have" (keeps the gesture alive if a pointer strays outside the
       // stage) — some browser/input combinations reject it for a pointerId that isn't tracked
-      // as active. The drag still works via normal bubbling as long as the pointer stays over
+      // as active. The gesture still works via normal bubbling as long as the pointer stays over
       // the stage, so this is safe to swallow rather than let it surface as an uncaught error.
     }
+    if (pointersRef.current.size === 2) {
+      // 2nd finger just landed — hand off from any single-pointer pan/swipe in progress to pinch.
+      dragRef.current = null;
+      const [a, b] = [...pointersRef.current.values()];
+      pinchRef.current = { startDist: Math.hypot(a.x - b.x, a.y - b.y), startZoom: zoom };
+      return;
+    }
+    if (pointersRef.current.size === 1) {
+      dragRef.current = { x: e.clientX, y: e.clientY, panStart: pan };
+    }
   };
   const onStagePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (pointersRef.current.has(e.pointerId)) pointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (pointersRef.current.size === 2 && pinchRef.current) {
+      const [a, b] = [...pointersRef.current.values()];
+      const dist = Math.hypot(a.x - b.x, a.y - b.y);
+      const el = stageRef.current;
+      if (pinchRef.current.startDist > 0 && el) {
+        const nextZoom = Math.min(
+          ZOOM_MAX,
+          Math.max(ZOOM_MIN, +((pinchRef.current.startZoom * dist) / pinchRef.current.startDist).toFixed(2)),
+        );
+        // Zoom around the pinch MIDPOINT, not the stage's fixed center: solve for the pan that
+        // keeps whatever image content is currently under the midpoint visually fixed there as
+        // zoom changes — the standard "zoom toward a point" transform math (an un-anchored
+        // scale(zoom) always re-centers, leaving the user to manually pan back to what they were
+        // actually pinching). rect.width/2, rect.height/2 is the origin scale() already uses
+        // (CSS default transform-origin, untouched), so dx/dy is the midpoint's offset from it.
+        const rect = el.getBoundingClientRect();
+        const dx = (a.x + b.x) / 2 - rect.left - rect.width / 2;
+        const dy = (a.y + b.y) / 2 - rect.top - rect.height / 2;
+        const ratio = nextZoom / zoom;
+        const nextPan = { x: dx * (1 - ratio) + ratio * pan.x, y: dy * (1 - ratio) + ratio * pan.y };
+        setZoom(nextZoom);
+        setPan(clampPan(nextPan, nextZoom));
+      }
+      return;
+    }
     const start = dragRef.current;
     if (!start || zoom <= ZOOM_MIN) return;
     const dx = e.clientX - start.x;
@@ -656,8 +709,13 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
     setPan(clampPan({ x: start.panStart.x + dx, y: start.panStart.y + dy }, zoom));
   };
   const onStagePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    pointersRef.current.delete(e.pointerId);
+    if (pointersRef.current.size < 2) pinchRef.current = null;
     const start = dragRef.current;
     dragRef.current = null;
+    // a finger is still down (pinch ending back down to 1, not a full release) — don't read this
+    // as a tap/swipe.
+    if (pointersRef.current.size > 0) return;
     if (!start) return;
     if (zoom <= ZOOM_MIN) {
       const dx = e.clientX - start.x;
@@ -792,7 +850,11 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                   height: '100%',
                   objectFit: 'contain',
                   transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
-                  transition: dragRef.current ? 'none' : 'transform var(--dur-2, 200ms) var(--ease-standard, ease)',
+                  // pinchRef too, not just dragRef — without it every pinch pointermove still
+                  // kicked off a 200ms eased transition toward a target that moves again before
+                  // it finishes, which reads as the image flickering/jittering bigger-smaller
+                  // instead of tracking the fingers 1:1 (drag already had this right).
+                  transition: (dragRef.current || pinchRef.current) ? 'none' : 'transform var(--dur-2, 200ms) var(--ease-standard, ease)',
                   cursor: zoom > ZOOM_MIN ? 'grab' : undefined,
                 }}
               />
@@ -803,15 +865,17 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 </span>
               </div>
 
-              <button
-                type="button"
-                onClick={() => on360 && on360()}
-                aria-label={t('autobahn:viewer.threeSixtyLabel')}
-                style={{ ...pillStyle, right: 12, border: '1px solid rgba(255,255,255,0.14)', cursor: 'pointer', gap: 3 }}
-              >
-                <Icon360 />
-                360°
-              </button>
+              {has360 && (
+                <button
+                  type="button"
+                  onClick={() => on360 && on360()}
+                  aria-label={t('autobahn:viewer.threeSixtyLabel')}
+                  style={{ ...pillStyle, right: 12, border: '1px solid rgba(255,255,255,0.14)', cursor: 'pointer', gap: 3 }}
+                >
+                  <Icon360 />
+                  360°
+                </button>
+              )}
 
               {n > 1 && (
                 <>
@@ -1068,7 +1132,11 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                   height: '100%',
                   objectFit: 'cover',
                   transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
-                  transition: dragRef.current ? 'none' : 'transform var(--dur-2, 200ms) var(--ease-standard, ease)',
+                  // pinchRef too, not just dragRef — without it every pinch pointermove still
+                  // kicked off a 200ms eased transition toward a target that moves again before
+                  // it finishes, which reads as the image flickering/jittering bigger-smaller
+                  // instead of tracking the fingers 1:1 (drag already had this right).
+                  transition: (dragRef.current || pinchRef.current) ? 'none' : 'transform var(--dur-2, 200ms) var(--ease-standard, ease)',
                   cursor: zoom > ZOOM_MIN ? 'grab' : undefined,
                 }}
               />
@@ -1137,7 +1205,12 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 right: withInset(12, 'right'),
                 bottom: withInset(12, 'bottom'),
                 width: 48,
-                height: 150,
+                // 150 fits zoom (in/out + divider) AND the 360 toggle below it; without 360 the
+                // column only needs the zoom pair, so it collapses to the plain zoom-only height
+                // (matches portrait's own zoom-only pill, see the Figma node comment above) —
+                // otherwise hiding just the button/divider below would leave dead space at the
+                // bottom of a still-150px-tall pill.
+                height: has360 ? 150 : 110,
                 borderRadius: 'var(--md-r-full)',
                 background: 'rgba(0,0,0,0.5)',
                 border: '1.2px solid rgba(255,255,255,0.18)',
@@ -1166,31 +1239,35 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
               >
                 <IconZoomOut />
               </button>
-              <div style={{ width: 28, height: 1, background: 'rgba(255,255,255,0.16)', margin: '8px 0' }} />
-              <button
-                type="button"
-                onClick={() => on360 && on360()}
-                aria-label={t('autobahn:viewer.threeSixtyLabel')}
-                style={{ position: 'relative', width: 30, height: 30, border: 0, background: 'none', padding: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-              >
-                <Ls360Circle />
-                <span
-                  style={{
-                    position: 'absolute',
-                    top: '50%',
-                    left: '50%',
-                    transform: 'translate(-50%, -50%)',
-                    fontFamily: "'Inter', var(--md-font)",
-                    fontWeight: 700,
-                    fontSize: 8,
-                    lineHeight: '8px',
-                    color: '#fff',
-                    pointerEvents: 'none',
-                  }}
-                >
-                  360°
-                </span>
-              </button>
+              {has360 && (
+                <>
+                  <div style={{ width: 28, height: 1, background: 'rgba(255,255,255,0.16)', margin: '8px 0' }} />
+                  <button
+                    type="button"
+                    onClick={() => on360 && on360()}
+                    aria-label={t('autobahn:viewer.threeSixtyLabel')}
+                    style={{ position: 'relative', width: 30, height: 30, border: 0, background: 'none', padding: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                  >
+                    <Ls360Circle />
+                    <span
+                      style={{
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        fontFamily: "'Inter', var(--md-font)",
+                        fontWeight: 700,
+                        fontSize: 8,
+                        lineHeight: '8px',
+                        color: '#fff',
+                        pointerEvents: 'none',
+                      }}
+                    >
+                      360°
+                    </span>
+                  </button>
+                </>
+              )}
             </div>
 
             {/* bottom band: thumbnails (left, flexible width) + CTA buttons (right, natural width)
@@ -1404,6 +1481,20 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                   onClick={zoomIn}
                   style={{ ...iconBtnStyle, opacity: zoom === ZOOM_MAX ? 0.4 : 1 }}
                 />
+                {has360 && (
+                  // IconButton only takes a lucide `name` — Icon360 is a one-off inlined SVG (see
+                  // its own comment above), so this is IconButton's own markup (.icon-btn + the
+                  // same iconBtnStyle) built by hand instead of a name it can't render.
+                  <button
+                    type="button"
+                    className="icon-btn"
+                    aria-label={t('autobahn:viewer.threeSixtyLabel')}
+                    onClick={() => on360 && on360()}
+                    style={iconBtnStyle}
+                  >
+                    <Icon360 color="currentColor" />
+                  </button>
+                )}
                 {onEmail && (
                   <IconButton name="mail" label={t('autobahn:viewer.emailLabel')} onClick={onEmail} style={contactBtnStyle} color="#fff" />
                 )}