@nok-integration/storefront-react 0.26.0 → 0.27.0

package/dist/index.d.ts

@@ -2768,6 +2768,7 @@ declare function createClient(options: ClientOptions): {
                 desktop_image?: string | undefined;
                 target?: string | undefined;
                 video?: string | undefined;
+                desktop_video?: string | undefined;
                 focal_y?: number | undefined;
             }[];
         }>;

package/dist/index.mjs

@@ -4398,6 +4398,7 @@ function requireContent$1() {
       image: zod_1.z.string().min(1).optional(),
       video: zod_1.z.string().min(1).optional(),
       desktop_image: zod_1.z.string().min(1).optional(),
+      desktop_video: zod_1.z.string().min(1).optional(),
       focal_y: zod_1.z.number().int().min(0).max(100).optional()
     });
     exports.HomeContent = zod_1.z.object({
@@ -13498,6 +13499,7 @@ function requireContent() {
       image: zod_1.z.string().min(1).optional(),
       video: zod_1.z.string().min(1).optional(),
       desktop_image: zod_1.z.string().min(1).optional(),
+      desktop_video: zod_1.z.string().min(1).optional(),
       focal_y: zod_1.z.number().int().min(0).max(100).optional()
     });
     exports.HomeContent = zod_1.z.object({
@@ -15214,8 +15216,8 @@ function useDocumentSnap(ref, enabled = true) {
     };
   }, [ref, enabled]);
 }
-const HERO_DESKTOP = "/figma/home/hero-desktop.jpg";
-const BAND_DESKTOP = "/figma/home/band-desktop.jpg";
+const DESKTOP_POSTER = "/figma/home/desktop-poster.jpg";
+const DESKTOP_VIDEO = "/figma/home/desktop.mp4";
 const FALLBACK_PANELS = [{
   key: "hoodies",
   title: "Hoodies",
@@ -15225,7 +15227,8 @@ const FALLBACK_PANELS = [{
   target: "hoodies",
   video: "/figma/home/hoodies.mp4",
   image: "/figma/home/hoodies-poster.jpg",
-  desktopImage: BAND_DESKTOP
+  desktopImage: DESKTOP_POSTER,
+  desktopVideo: DESKTOP_VIDEO
 }, {
   key: "zip-ups",
   title: "Zip Ups",
@@ -15235,7 +15238,8 @@ const FALLBACK_PANELS = [{
   target: "zip-ups",
   video: "/figma/home/zip-ups.mp4",
   image: "/figma/home/zip-ups-poster.jpg",
-  desktopImage: BAND_DESKTOP
+  desktopImage: DESKTOP_POSTER,
+  desktopVideo: DESKTOP_VIDEO
 }, {
   key: "t-shirts",
   title: "T-Shirts",
@@ -15245,7 +15249,8 @@ const FALLBACK_PANELS = [{
   target: "t-shirts",
   video: "/figma/home/tshirts.mp4",
   image: "/figma/home/tshirts-poster.jpg",
-  desktopImage: BAND_DESKTOP
+  desktopImage: DESKTOP_POSTER,
+  desktopVideo: DESKTOP_VIDEO
 }];
 const BAND_LIMIT = 20;
 const WIDE_BAND = 3;
@@ -15308,6 +15313,13 @@ function CategoryPanel({ panel: panel2, wide: wide2 }) {
       fill: true,
       sizes: "(max-width: 480px) 100vw, 480px",
       className: [styles$3.image, panel2.desktopImage ? styles$3.desktopFocal : ""].join(" ")
+    }), wide2 && panel2.desktopVideo && jsx(ShopVideo, {
+      src: panel2.desktopVideo,
+      ...panel2.desktopImage ? {
+        poster: panel2.desktopImage
+      } : {},
+      fill: true,
+      className: [styles$3.image, styles$3.desktopArt].join(" ")
     }), jsxs("div", {
       className: styles$3.overlay,
       children: [jsxs("div", {
@@ -15389,6 +15401,9 @@ function useSlides() {
         ...s.desktop_image === void 0 ? {} : {
           desktopImage: s.desktop_image
         },
+        ...s.desktop_video === void 0 ? {} : {
+          desktopVideo: s.desktop_video
+        },
         ...s.focal_y === void 0 ? {} : {
           focalY: s.focal_y
         }
@@ -15439,11 +15454,17 @@ function HomeShowcase() {
           priority: true,
           className: [styles$3.image, styles$3.phoneArt].join(" ")
         }), jsx(ShopImage, {
-          src: HERO_DESKTOP,
+          src: DESKTOP_POSTER,
           alt: "",
           fill: true,
           sizes: "100vw",
           className: [styles$3.image, styles$3.desktopArt].join(" ")
+        }), wide2 && jsx(ShopVideo, {
+          src: DESKTOP_VIDEO,
+          poster: DESKTOP_POSTER,
+          fill: true,
+          priority: true,
+          className: [styles$3.image, styles$3.desktopArt].join(" ")
         }), jsxs("div", {
           className: styles$3.heroContent,
           children: [jsxs("div", {

package/dist/standalone/storefront.mjs

@@ -4398,6 +4398,7 @@ function requireContent$1() {
       image: zod_1.z.string().min(1).optional(),
       video: zod_1.z.string().min(1).optional(),
       desktop_image: zod_1.z.string().min(1).optional(),
+      desktop_video: zod_1.z.string().min(1).optional(),
       focal_y: zod_1.z.number().int().min(0).max(100).optional()
     });
     exports.HomeContent = zod_1.z.object({
@@ -13498,6 +13499,7 @@ function requireContent() {
       image: zod_1.z.string().min(1).optional(),
       video: zod_1.z.string().min(1).optional(),
       desktop_image: zod_1.z.string().min(1).optional(),
+      desktop_video: zod_1.z.string().min(1).optional(),
       focal_y: zod_1.z.number().int().min(0).max(100).optional()
     });
     exports.HomeContent = zod_1.z.object({
@@ -15214,8 +15216,8 @@ function useDocumentSnap(ref, enabled = true) {
     };
   }, [ref, enabled]);
 }
-const HERO_DESKTOP = "/figma/home/hero-desktop.jpg";
-const BAND_DESKTOP = "/figma/home/band-desktop.jpg";
+const DESKTOP_POSTER = "/figma/home/desktop-poster.jpg";
+const DESKTOP_VIDEO = "/figma/home/desktop.mp4";
 const FALLBACK_PANELS = [{
   key: "hoodies",
   title: "Hoodies",
@@ -15225,7 +15227,8 @@ const FALLBACK_PANELS = [{
   target: "hoodies",
   video: "/figma/home/hoodies.mp4",
   image: "/figma/home/hoodies-poster.jpg",
-  desktopImage: BAND_DESKTOP
+  desktopImage: DESKTOP_POSTER,
+  desktopVideo: DESKTOP_VIDEO
 }, {
   key: "zip-ups",
   title: "Zip Ups",
@@ -15235,7 +15238,8 @@ const FALLBACK_PANELS = [{
   target: "zip-ups",
   video: "/figma/home/zip-ups.mp4",
   image: "/figma/home/zip-ups-poster.jpg",
-  desktopImage: BAND_DESKTOP
+  desktopImage: DESKTOP_POSTER,
+  desktopVideo: DESKTOP_VIDEO
 }, {
   key: "t-shirts",
   title: "T-Shirts",
@@ -15245,7 +15249,8 @@ const FALLBACK_PANELS = [{
   target: "t-shirts",
   video: "/figma/home/tshirts.mp4",
   image: "/figma/home/tshirts-poster.jpg",
-  desktopImage: BAND_DESKTOP
+  desktopImage: DESKTOP_POSTER,
+  desktopVideo: DESKTOP_VIDEO
 }];
 const BAND_LIMIT = 20;
 const WIDE_BAND = 3;
@@ -15308,6 +15313,13 @@ function CategoryPanel({ panel: panel2, wide: wide2 }) {
       fill: true,
       sizes: "(max-width: 480px) 100vw, 480px",
       className: [styles$3.image, panel2.desktopImage ? styles$3.desktopFocal : ""].join(" ")
+    }), wide2 && panel2.desktopVideo && jsx(ShopVideo, {
+      src: panel2.desktopVideo,
+      ...panel2.desktopImage ? {
+        poster: panel2.desktopImage
+      } : {},
+      fill: true,
+      className: [styles$3.image, styles$3.desktopArt].join(" ")
     }), jsxs("div", {
       className: styles$3.overlay,
       children: [jsxs("div", {
@@ -15389,6 +15401,9 @@ function useSlides() {
         ...s.desktop_image === void 0 ? {} : {
           desktopImage: s.desktop_image
         },
+        ...s.desktop_video === void 0 ? {} : {
+          desktopVideo: s.desktop_video
+        },
         ...s.focal_y === void 0 ? {} : {
           focalY: s.focal_y
         }
@@ -15439,11 +15454,17 @@ function HomeShowcase() {
           priority: true,
           className: [styles$3.image, styles$3.phoneArt].join(" ")
         }), jsx(ShopImage, {
-          src: HERO_DESKTOP,
+          src: DESKTOP_POSTER,
           alt: "",
           fill: true,
           sizes: "100vw",
           className: [styles$3.image, styles$3.desktopArt].join(" ")
+        }), wide2 && jsx(ShopVideo, {
+          src: DESKTOP_VIDEO,
+          poster: DESKTOP_POSTER,
+          fill: true,
+          priority: true,
+          className: [styles$3.image, styles$3.desktopArt].join(" ")
         }), jsxs("div", {
           className: styles$3.heroContent,
           children: [jsxs("div", {

package/package.json

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