@loafmarkets/ui 0.1.402 → 0.1.403

package/dist/index.mjs

@@ -18881,13 +18881,14 @@ var CloseButton3 = styled10.button`
 var MainImageContainer = styled10.div`
   position: relative;
   flex: 1;
+  min-height: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 80px 20px 140px;
+  padding: 20px 20px 160px;
 
   @media (max-width: 768px) {
-    padding: 60px 0 110px;
+    padding: 10px 0 130px;
   }
 `;
 var MainImage = styled10.img`
@@ -18899,8 +18900,11 @@ var MainImage = styled10.img`
   opacity: ${(p) => p.$visible ? 1 : 0};
   pointer-events: ${(p) => p.$visible ? "auto" : "none"};
   transition: opacity 300ms ease;
-  /* Inset box excludes the bottom thumbnail strip so margin:auto centres the image in the
-     space ABOVE the thumbnails (absolute ignores the parent's padding). */
+  /* All slides share the same absolute box so switching only crossfades opacity —
+     no relative↔absolute size jump (the "grow then shrink" on navigation).
+     The inset box excludes the bottom thumbnail strip so margin:auto centres the image
+     in the space ABOVE the thumbnails (absolute positioning ignores the parent's padding,
+     which otherwise let the image sink behind the thumbnails / "lean down"). */
   position: absolute;
   top: 24px;
   left: 24px;
@@ -19094,9 +19098,11 @@ function PropertyPhotoGallery({
   isOpen,
   onClose,
   startIndex = 0,
+  startWithVideo = false,
   title = "28 Derby Street, Vaucluse",
   subtitle = "Elara \u2014 Luxury Harbour Residence",
-  images
+  images,
+  videoUrl
 }) {
   const galleryImages = images?.length ? images : DEFAULT_IMAGES;
   if (!isOpen) return null;
@@ -19105,16 +19111,19 @@ function PropertyPhotoGallery({
     {
       galleryImages,
       startIndex,
+      startWithVideo,
       title,
       subtitle,
-      onClose
+      onClose,
+      videoUrl
     },
-    `${startIndex}-${galleryImages.length}`
+    `${startIndex}-${galleryImages.length}-${startWithVideo}`
   );
 }
-function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose }) {
+function GalleryContent({ galleryImages, startIndex, startWithVideo, title, subtitle, onClose, videoUrl }) {
   const [currentIndex, setCurrentIndex] = useState(() => clampIndex(startIndex, galleryImages.length));
   const [activeHotspotId, setActiveHotspotId] = useState(null);
+  const [showVideo, setShowVideo] = useState(startWithVideo ?? false);
   const sliderRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
   const wasDraggingRef = useRef(false);
@@ -19164,7 +19173,7 @@ function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose })
           ] }),
           /* @__PURE__ */ jsx(CloseButton3, { onClick: onClose, "aria-label": "Close gallery", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "22", height: "22", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M6 18L18 6" }) }) })
         ] }),
-        /* @__PURE__ */ jsxs(SliderContainer, { onClick: (event) => event.stopPropagation(), children: [
+        !showVideo && /* @__PURE__ */ jsxs(SliderContainer, { onClick: (event) => event.stopPropagation(), children: [
           /* @__PURE__ */ jsxs(
             SliderTrack,
             {
@@ -19227,7 +19236,21 @@ function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose })
                   children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "22", height: "22", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" }) })
                 }
               ),
-              galleryImages.map((image, idx) => /* @__PURE__ */ jsx(MainImage, { src: image.src, alt: image.alt, $visible: idx === currentIndex }, image.alt)),
+              showVideo && videoUrl ? /* @__PURE__ */ jsx(GalleryVideoWrap, { children: /* @__PURE__ */ jsx(
+                "video",
+                {
+                  autoPlay: true,
+                  loop: true,
+                  playsInline: true,
+                  muted: true,
+                  controls: true,
+                  onVolumeChange: (e) => {
+                    if (!e.currentTarget.muted) e.currentTarget.muted = true;
+                  },
+                  style: { objectFit: "contain", borderRadius: 12, boxShadow: "0 30px 80px rgba(0,0,0,0.55)" },
+                  children: /* @__PURE__ */ jsx("source", { src: videoUrl, type: "video/mp4" })
+                }
+              ) }) : galleryImages.map((image, idx) => /* @__PURE__ */ jsx(MainImage, { src: image.src, alt: image.alt, $visible: idx === currentIndex }, image.alt)),
               galleryImages[currentIndex]?.hotspots?.map((hotspot) => /* @__PURE__ */ jsx(
                 Hotspot,
                 {
@@ -19272,11 +19295,83 @@ function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose })
             ]
           }
         ),
-        /* @__PURE__ */ jsx(ThumbnailStrip, { onClick: (event) => event.stopPropagation(), children: galleryImages.map((image, idx) => /* @__PURE__ */ jsx(Thumbnail3, { $active: idx === currentIndex, onClick: () => setCurrentIndex(idx), "aria-label": `Preview ${image.label}`, children: /* @__PURE__ */ jsx("img", { src: image.src, alt: image.alt }) }, image.alt)) })
+        /* @__PURE__ */ jsxs(ThumbnailStrip, { onClick: (event) => event.stopPropagation(), children: [
+          galleryImages.map((image, idx) => /* @__PURE__ */ jsx(Thumbnail3, { $active: !showVideo && idx === currentIndex, onClick: () => {
+            setShowVideo(false);
+            setCurrentIndex(idx);
+          }, "aria-label": `Preview ${image.label}`, children: /* @__PURE__ */ jsx("img", { src: image.src, alt: image.alt }) }, image.alt)),
+          videoUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ThumbnailDivider, {}),
+            /* @__PURE__ */ jsxs(VideoBtn, { $active: showVideo, onClick: () => setShowVideo(true), children: [
+              /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "14", height: "16", rx: "2" }),
+                /* @__PURE__ */ jsx("path", { d: "M16 8l6-4v16l-6-4z" })
+              ] }),
+              "Video"
+            ] })
+          ] })
+        ] })
       ]
     }
   );
 }
+var GalleryVideoWrap = styled10.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 20px 160px;
+
+  video {
+    max-width: 90%;
+    max-height: 100%;
+  }
+
+  /* Property videos stay permanently muted — remove the volume + mute buttons
+     from the native player (Chrome/Edge/Safari/iOS/Android). Firefox ignores
+     these and is covered by the onVolumeChange force-mute fallback. */
+  video::-webkit-media-controls-mute-button,
+  video::-webkit-media-controls-volume-slider,
+  video::-webkit-media-controls-volume-control-container {
+    display: none !important;
+  }
+
+  @media (max-width: 768px) {
+    padding: 10px 0 130px;
+
+    video {
+      max-width: 100%;
+    }
+  }
+`;
+var ThumbnailDivider = styled10.div`
+  width: 1px;
+  height: 48px;
+  background: rgba(255, 255, 255, 0.15);
+  flex-shrink: 0;
+  align-self: center;
+`;
+var VideoBtn = styled10.button`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  border: 1px solid ${(p) => p.$active ? "var(--color-accent, #E6C87E)" : "rgba(255, 255, 255, 0.2)"};
+  background: ${(p) => p.$active ? "rgba(240, 185, 11, 0.15)" : "rgba(255, 255, 255, 0.08)"};
+  color: ${(p) => p.$active ? "var(--color-accent, #E6C87E)" : "#fff"};
+  font-size: 0.82rem;
+  font-weight: 500;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+`;
 var slideIn2 = keyframes`
   from { transform: translateX(110%); opacity: 0; }
   to   { transform: translateX(0);    opacity: 1; }