@loafmarkets/ui 0.1.413 → 0.1.415

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."
               }
             )
           ] }) })
@@ -5639,7 +5692,7 @@ var Header = ({
           }
         )
       ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsx(Button2, { className: "signup", onClick: handleSignIn, children: "Join Competition" }),
+        /* @__PURE__ */ jsx(Button2, { className: "signup", onClick: handleSignIn, children: "Access Beta" }),
         /* @__PURE__ */ jsx(
           MobileOnlyButton,
           {
@@ -7184,7 +7237,7 @@ var LoginPopup = ({
       /* @__PURE__ */ jsxs(Title, { children: [
         /* @__PURE__ */ jsxs(LogoContainer3, { children: [
           /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }),
-          /* @__PURE__ */ jsx(LogoBeta, { children: "Private Beta" })
+          /* @__PURE__ */ jsx(LogoBeta, { children: "Beta" })
         ] }),
         /* @__PURE__ */ jsx(TitleText, { children: "Welcome to Loaf" })
       ] }),
@@ -7279,7 +7332,7 @@ var LoginPopup = ({
           /* @__PURE__ */ jsxs(GateBrand, { children: [
             /* @__PURE__ */ jsx(GateLogoLink, { href: "https://loafmarkets.com", "aria-label": "Go to loafmarkets.com", children: /* @__PURE__ */ jsx(GateLogo, { src: logoSrc, alt: logoAlt }) }),
             /* @__PURE__ */ jsx(GateBrandDivider, {}),
-            /* @__PURE__ */ jsx(GateBetaTag, { children: "Private Beta" })
+            /* @__PURE__ */ jsx(GateBetaTag, { children: "Beta" })
           ] }),
           /* @__PURE__ */ jsxs(GateOtpText, { children: [
             "We sent a code to",
@@ -7618,6 +7671,16 @@ var LoginPopup = ({
           ),
           /* @__PURE__ */ jsx(GateSubmit, { type: "submit", "aria-label": "Continue", disabled: loading || !email, children: loading ? /* @__PURE__ */ jsx(GateSpinner, {}) : /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M13 6l6 6-6 6" }) }) })
         ] }),
+        !signInMode && /* @__PURE__ */ jsx(GateHandleRow, { children: /* @__PURE__ */ jsx(
+          GateEmailInput,
+          {
+            type: "text",
+            autoComplete: "username",
+            placeholder: "Claim your username (Optional)",
+            value: handle,
+            onChange: (event) => setHandle(event.target.value)
+          }
+        ) }),
         error && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: error })
       ] }),
       /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -7636,7 +7699,7 @@ var LoginPopup = ({
           /* @__PURE__ */ jsxs(GateBrand, { children: [
             /* @__PURE__ */ jsx(GateLogoLink, { href: "https://loafmarkets.com", "aria-label": "Go to loafmarkets.com", children: /* @__PURE__ */ jsx(GateLogo, { src: logoSrc, alt: logoAlt }) }),
             /* @__PURE__ */ jsx(GateBrandDivider, {}),
-            /* @__PURE__ */ jsx(GateBetaTag, { children: "Private Beta" })
+            /* @__PURE__ */ jsx(GateBetaTag, { children: "Beta" })
           ] }),
           signInMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
             signInStep,
@@ -7688,7 +7751,7 @@ var LoginPopup = ({
       /* @__PURE__ */ jsxs(Title, { children: [
         /* @__PURE__ */ jsxs(LogoContainer3, { children: [
           /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }),
-          /* @__PURE__ */ jsx(LogoBeta, { children: "Private Beta" })
+          /* @__PURE__ */ jsx(LogoBeta, { children: "Beta" })
         ] }),
         /* @__PURE__ */ jsx(TitleText, { children: "Enter your access code" })
       ] }),
@@ -8352,6 +8415,9 @@ var GateSubmit = styled10.button`
     cursor: default;
   }
 `;
+var GateHandleRow = styled10(CodeInputWrapper)`
+  margin-top: 0.6rem;
+`;
 var GateEmailInput = styled10.input`
   flex: 1;
   min-width: 0;
@@ -9772,8 +9838,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 +9849,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 +9965,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 +19695,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 +19706,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 +20716,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