@loafmarkets/ui 0.1.413 → 0.1.414

package/dist/index.mjs

@@ -2550,6 +2550,66 @@ function MobileDepthRow({
     }
   );
 }
+var isHlsManifest = (url) => /\.m3u8(\?|$)/i.test(url);
+var HLS_MIME = "application/vnd.apple.mpegurl";
+var MANIFEST_FAILURES = /* @__PURE__ */ new Set(["manifestLoadError", "manifestLoadTimeOut", "manifestParsingError"]);
+var HlsVideo = React5.forwardRef(
+  ({ src, capLevelToPlayerSize = true, onError, ...videoProps }, ref) => {
+    const videoRef = React5.useRef(null);
+    React5.useImperativeHandle(ref, () => videoRef.current, []);
+    const primary = typeof src === "string" ? src : src.src;
+    const fallbackSrc = typeof src === "string" ? void 0 : src.fallbackSrc;
+    const [failedSrc, setFailedSrc] = React5.useState(null);
+    const usingFallback = fallbackSrc != null && failedSrc === primary;
+    const activeSrc = usingFallback ? fallbackSrc : primary;
+    const failPrimary = React5.useCallback(() => {
+      if (fallbackSrc == null) return;
+      setFailedSrc(primary);
+    }, [fallbackSrc, primary]);
+    React5.useEffect(() => {
+      const video = videoRef.current;
+      if (!video || !activeSrc) return;
+      if (!isHlsManifest(activeSrc) || video.canPlayType(HLS_MIME)) {
+        video.src = activeSrc;
+        return;
+      }
+      let hls = null;
+      let cancelled = false;
+      void import('hls.js').then(({ default: Hls }) => {
+        if (cancelled) return;
+        if (!Hls.isSupported()) {
+          video.src = activeSrc;
+          return;
+        }
+        const instance = new Hls({
+          capLevelToPlayerSize,
+          startLevel: -1,
+          enableWorker: true,
+          startFragPrefetch: true
+        });
+        hls = instance;
+        instance.on(Hls.Events.ERROR, (_evt, data) => {
+          if (data?.fatal && MANIFEST_FAILURES.has(String(data.details))) failPrimary();
+        });
+        instance.loadSource(activeSrc);
+        instance.attachMedia(video);
+      });
+      return () => {
+        cancelled = true;
+        hls?.destroy();
+      };
+    }, [activeSrc, capLevelToPlayerSize, failPrimary]);
+    const handleError = React5.useCallback(
+      (e) => {
+        if (!usingFallback) failPrimary();
+        onError?.(e);
+      },
+      [usingFallback, failPrimary, onError]
+    );
+    return /* @__PURE__ */ jsx("video", { ref: videoRef, onError: handleError, ...videoProps });
+  }
+);
+HlsVideo.displayName = "HlsVideo";
 var PropertyTour = React5.forwardRef(
   ({
     className,
@@ -2564,11 +2624,6 @@ var PropertyTour = React5.forwardRef(
     ...props
   }, ref) => {
     const videoRef = React5.useRef(null);
-    React5.useEffect(() => {
-      if (videoRef.current && src) {
-        videoRef.current.load();
-      }
-    }, [src]);
     React5.useEffect(() => {
       const video = videoRef.current;
       if (!video) return;
@@ -2633,10 +2688,11 @@ var PropertyTour = React5.forwardRef(
                 display: none !important;
               }
             ` }),
-            /* @__PURE__ */ jsxs(
-              "video",
+            /* @__PURE__ */ jsx(
+              HlsVideo,
               {
                 ref: videoRef,
+                src,
                 className: "loaf-muted-video absolute inset-0 h-full w-full object-cover object-center",
                 controls,
                 controlsList: "nodownload noplaybackrate",
@@ -2650,10 +2706,7 @@ var PropertyTour = React5.forwardRef(
                 muted,
                 playsInline,
                 poster,
-                children: [
-                  /* @__PURE__ */ jsx("source", { src }),
-                  "Your browser does not support the video tag."
-                ]
+                children: "Your browser does not support the video tag."
               }
             )
           ] }) })
@@ -9772,8 +9825,9 @@ function GalleryMapSection({
       isMobile ? /* @__PURE__ */ jsx(StackedGallery, { images, onPhotoClick }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(Carousel, { children: [
           showVideo && videoUrl && /* @__PURE__ */ jsx(VideoOverlay, { children: /* @__PURE__ */ jsx(
-            "video",
+            HlsVideo,
             {
+              src: videoUrl,
               autoPlay: true,
               loop: true,
               playsInline: true,
@@ -9782,8 +9836,7 @@ function GalleryMapSection({
               onVolumeChange: (e) => {
                 if (!e.currentTarget.muted) e.currentTarget.muted = true;
               },
-              style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: 8 },
-              children: /* @__PURE__ */ jsx("source", { src: videoUrl, type: "video/mp4" })
+              style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: 8 }
             }
           ) }),
           /* @__PURE__ */ jsx(Track, { style: { transform: `translateX(-${carouselIndex * 100}%)` }, children: images.map((img, idx) => /* @__PURE__ */ jsxs(Slide, { onClick: () => onPhotoClick?.(idx), children: [
@@ -9899,7 +9952,7 @@ function GalleryMapSection({
     showFullVideo && videoUrl && /* @__PURE__ */ jsxs(FullVideoOverlay, { onClick: () => setShowFullVideo(false), children: [
       /* @__PURE__ */ jsx(FullVideoClose, { onClick: () => setShowFullVideo(false), "aria-label": "Close video", children: "\u2715" }),
       /* @__PURE__ */ jsx(
-        "video",
+        HlsVideo,
         {
           src: videoUrl,
           autoPlay: true,
@@ -19629,8 +19682,9 @@ function GalleryContent({ galleryImages, startIndex, startWithVideo, title, subt
                 }
               ),
               showVideo && videoUrl ? /* @__PURE__ */ jsx(GalleryVideoWrap, { children: /* @__PURE__ */ jsx(
-                "video",
+                HlsVideo,
                 {
+                  src: videoUrl,
                   autoPlay: true,
                   loop: true,
                   playsInline: true,
@@ -19639,8 +19693,7 @@ function GalleryContent({ galleryImages, startIndex, startWithVideo, title, subt
                   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" })
+                  style: { objectFit: "contain", borderRadius: 12, boxShadow: "0 30px 80px rgba(0,0,0,0.55)" }
                 }
               ) }) : 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(
@@ -20650,6 +20703,6 @@ var SparklineChart = React5__default.memo(function SparklineChart2({ data, width
   );
 });
 
-export { AssetSelectorBar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ContactPopup, Header, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, OfferingProgressCard, OnboardingGuide, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioActivityPanel, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyMediaRow, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, SiteFooter, Skeleton, SlideDigit, SparklineChart, ToastProvider, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants, extractSparkline, hasPendingActivity, useAdaptivePolling, useToast };
+export { AssetSelectorBar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ContactPopup, Header, HlsVideo, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, OfferingProgressCard, OnboardingGuide, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioActivityPanel, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyMediaRow, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, SiteFooter, Skeleton, SlideDigit, SparklineChart, ToastProvider, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants, extractSparkline, hasPendingActivity, useAdaptivePolling, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map