@nok-integration/storefront-react 0.19.44 → 0.19.46

package/dist/index.d.ts

@@ -5971,18 +5971,28 @@ export declare type ShopTone = 'dark' | 'light';
 /**
  * Full-bleed background video: muted, looping, inline, and never showing a control.
  *
- * The four attributes below are not stylistic. `muted` and `playsInline` together are the
- * only combination iOS will start without a gesture — a video that is unmuted, or that is
+ * The attributes below are not stylistic. `muted` and `playsInline` together are the only
+ * combination iOS will start without a gesture — a video that is unmuted, or that is
  * allowed to go fullscreen, simply does not play, and the panel shows its poster forever.
  * `loop` is the brief. `controls` is absent because this is artwork behind copy, not a
  * player: a tap belongs to the CTA stretched over the panel, and a play button in the
  * middle of a category slide would sit directly on that hit area.
  *
- * **Playback follows visibility.** The shop entry is five full-screen panels, so a naive
- * page decodes five simultaneous streams for four panels nobody is looking at. Each clip
- * starts when its panel comes into view and pauses when it leaves, which keeps one video
- * decoding at a time. Fetching is deferred the same way: `preload="none"` until the
- * observer fires, so a fan who never scrolls past the hero pays for the hero alone.
+ * **There is no `autoplay` attribute, and its absence is what makes `preload` mean
+ * anything.** A `<video autoplay preload="none">` is a contradiction the browser resolves
+ * in favour of autoplay: WebKit ignores the `preload` hint and begins fetching at once,
+ * because it has been told the clip is going to play regardless. On the shop entry that is
+ * five full-screen clips, several megabytes, all pulling against each other on a phone from
+ * the moment the screen opens — which is slowest for the one panel a fan is actually
+ * looking at. Playback is driven from the observer below instead, so the clips still start
+ * by themselves and still loop, and `preload` is honoured.
+ *
+ * **Playback follows visibility; fetching runs one screen ahead of it.** Each clip plays
+ * when its panel comes into view and pauses when it leaves, which keeps one video decoding
+ * at a time. Downloading cannot wait that long: a clip that only starts arriving once its
+ * panel is on screen shows its poster for as long as the file takes. So `preload` flips to
+ * `auto` a screen out — the panel being approached is buffered before it is reached, and a
+ * fan who never scrolls past the hero pays for the hero and its neighbour, not for all five.
  *
  * **Reduced motion is honoured by not playing at all.** Autoplaying background video is
  * exactly what the preference is about, and there is a good still to fall back to — the

package/dist/index.mjs

@@ -5431,6 +5431,7 @@ function ShopImage({ src, alt, fill: fill2 = false, width, height, sizes, classN
     fetchPriority: priority ? "high" : void 0
   });
 }
+const WARM_MARGIN = "100%";
 function ShopVideo({ src, poster, fill: fill2 = false, className, style, priority = false }) {
   const assetUrl = useAssetUrl();
   const ref = useRef(null);
@@ -5438,6 +5439,9 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
     const el = ref.current;
     if (!el || typeof IntersectionObserver === "undefined") return;
     const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    const fetchNow = () => {
+      if (el.preload === "none") el.preload = "auto";
+    };
     const play = () => {
       if (reduced?.matches) {
         el.pause();
@@ -5446,10 +5450,18 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
       void el.play().catch(() => {
       });
     };
-    const observer = new IntersectionObserver((entries) => {
+    const warm = new IntersectionObserver((entries) => {
+      if (!entries.some((entry) => entry.isIntersecting)) return;
+      if (!reduced?.matches) fetchNow();
+      warm.disconnect();
+    }, {
+      rootMargin: WARM_MARGIN
+    });
+    warm.observe(el);
+    const playback = new IntersectionObserver((entries) => {
       for (const entry of entries) {
         if (entry.isIntersecting) {
-          if (el.preload === "none") el.preload = "auto";
+          fetchNow();
           play();
         } else {
           el.pause();
@@ -5458,10 +5470,11 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
     }, {
       threshold: 0.25
     });
-    observer.observe(el);
+    playback.observe(el);
     reduced?.addEventListener("change", play);
     return () => {
-      observer.disconnect();
+      warm.disconnect();
+      playback.disconnect();
       reduced?.removeEventListener("change", play);
     };
   }, []);
@@ -5480,7 +5493,6 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
       ...fillStyle,
       ...style
     },
-    autoPlay: true,
     loop: true,
     muted: true,
     playsInline: true,
@@ -11004,7 +11016,13 @@ function useDocumentSnap(ref, enabled = true) {
     const previousPadding = root2.style.scrollPaddingTop;
     root2.style.scrollSnapType = "y mandatory";
     root2.style.scrollPaddingTop = "0px";
+    const top2 = () => window.scrollTo(0, 0);
+    top2();
+    const frame2 = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(top2) : null;
     return () => {
+      if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
+        window.cancelAnimationFrame(frame2);
+      }
       root2.style.scrollSnapType = previousType;
       root2.style.scrollPaddingTop = previousPadding;
     };

package/dist/standalone/storefront.mjs

@@ -5431,6 +5431,7 @@ function ShopImage({ src, alt, fill: fill2 = false, width, height, sizes, classN
     fetchPriority: priority ? "high" : void 0
   });
 }
+const WARM_MARGIN = "100%";
 function ShopVideo({ src, poster, fill: fill2 = false, className, style, priority = false }) {
   const assetUrl = useAssetUrl();
   const ref = useRef(null);
@@ -5438,6 +5439,9 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
     const el = ref.current;
     if (!el || typeof IntersectionObserver === "undefined") return;
     const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    const fetchNow = () => {
+      if (el.preload === "none") el.preload = "auto";
+    };
     const play = () => {
       if (reduced?.matches) {
         el.pause();
@@ -5446,10 +5450,18 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
       void el.play().catch(() => {
       });
     };
-    const observer = new IntersectionObserver((entries) => {
+    const warm = new IntersectionObserver((entries) => {
+      if (!entries.some((entry) => entry.isIntersecting)) return;
+      if (!reduced?.matches) fetchNow();
+      warm.disconnect();
+    }, {
+      rootMargin: WARM_MARGIN
+    });
+    warm.observe(el);
+    const playback = new IntersectionObserver((entries) => {
       for (const entry of entries) {
         if (entry.isIntersecting) {
-          if (el.preload === "none") el.preload = "auto";
+          fetchNow();
           play();
         } else {
           el.pause();
@@ -5458,10 +5470,11 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
     }, {
       threshold: 0.25
     });
-    observer.observe(el);
+    playback.observe(el);
     reduced?.addEventListener("change", play);
     return () => {
-      observer.disconnect();
+      warm.disconnect();
+      playback.disconnect();
       reduced?.removeEventListener("change", play);
     };
   }, []);
@@ -5480,7 +5493,6 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
       ...fillStyle,
       ...style
     },
-    autoPlay: true,
     loop: true,
     muted: true,
     playsInline: true,
@@ -11004,7 +11016,13 @@ function useDocumentSnap(ref, enabled = true) {
     const previousPadding = root2.style.scrollPaddingTop;
     root2.style.scrollSnapType = "y mandatory";
     root2.style.scrollPaddingTop = "0px";
+    const top2 = () => window.scrollTo(0, 0);
+    top2();
+    const frame2 = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(top2) : null;
     return () => {
+      if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
+        window.cancelAnimationFrame(frame2);
+      }
       root2.style.scrollSnapType = previousType;
       root2.style.scrollPaddingTop = previousPadding;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.19.44",
+  "version": "0.19.46",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "type": "module",