@ikas/bp-storefront 1.4.0-beta.81 → 1.4.0-beta.82

package/dist/functions/models/image/index.d.ts

@@ -1,37 +1,61 @@
 import { IkasImage } from "../../../storefront-models/src";
 /**
- * Returns the default source URL for an image at 1080px resolution.
+ * Returns the default source URL for an image OR video at 1080px resolution.
+ *
+ * Product media items (IkasProductImage) can be videos. ALWAYS check `item.isVideo`
+ * and render a `<video src={getDefaultSrc(item)}>` instead of an `<img>` when it is true.
+ * Never assume every media item is an image.
  *
  * @ai-category Image
  * @ai-related getThumbnailSrc, getSrc, createMediaSrcset
  *
  * @param image - The image object to generate the default source URL for.
- * @returns The CDN URL string for the image at 1080px size.
+ * @returns The CDN URL string for the image or video at 1080px size.
  *
  * @example
  * ```typescript
- * import { getDefaultSrc } from "@ikas/bp-storefront";
- *
- * const src = getDefaultSrc(image);
- * console.log(src); // "https://cdn.example.com/images/.../1080/image.webp"
+ * import { getDefaultSrc, createMediaSrcset } from "@ikas/bp-storefront";
+ *
+ * // Product images can be videos — ALWAYS branch on isVideo when mapping media:
+ * {product.images.map((item, i) =>
+ *   item.isVideo ? (
+ *     <video key={i} src={getDefaultSrc(item)} muted playsInline preload="metadata">
+ *       <track kind="captions" />
+ *     </video>
+ *   ) : (
+ *     <img key={i} src={getDefaultSrc(item)} srcSet={createMediaSrcset(item)} alt={`Product ${i + 1}`} />
+ *   )
+ * )}
  * ```
  */
 export declare function getDefaultSrc(image: IkasImage): string;
 /**
- * Returns the thumbnail source URL for an image at 180px resolution.
+ * Returns the thumbnail source URL for an image OR video at 180px resolution.
+ *
+ * When mapping over product media (IkasProductImage[]), some items are videos:
+ * check `item.isVideo` and render a `<video>` thumbnail (typically with a play
+ * overlay) instead of an `<img>` when it is true.
  *
  * @ai-category Image
  * @ai-related getDefaultSrc, getSrc, createMediaSrcset
  *
  * @param image - The image object to generate the thumbnail source URL for.
- * @returns The CDN URL string for the image at 180px size.
+ * @returns The CDN URL string for the image or video at 180px size.
  *
  * @example
  * ```typescript
- * import { getThumbnailSrc } from "@ikas/bp-storefront";
- *
- * const thumbnailSrc = getThumbnailSrc(image);
- * console.log(thumbnailSrc); // "https://cdn.example.com/images/.../180/image.webp"
+ * import { getThumbnailSrc, getDefaultSrc } from "@ikas/bp-storefront";
+ *
+ * // Thumbnail rail — branch on isVideo per item:
+ * {product.images.map((item, i) =>
+ *   item.isVideo ? (
+ *     <video key={i} src={getDefaultSrc(item)} muted preload="metadata">
+ *       <track kind="captions" />
+ *     </video>
+ *   ) : (
+ *     <img key={i} src={getThumbnailSrc(item)} sizes="112px" alt={`Thumb ${i + 1}`} />
+ *   )
+ * )}
  * ```
  */
 export declare function getThumbnailSrc(image: IkasImage): string;
@@ -57,6 +81,10 @@ export declare function getSrc(image: IkasImage, size: number): string;
 /**
  * Generates a complete responsive `srcset` string for an image across all standard sizes (180–3840px).
  *
+ * srcset applies to `<img>` only — video media (`item.isVideo === true`) has no srcset
+ * and must be rendered with `<video src={getDefaultSrc(item)}>`. When mapping product
+ * images, branch on `item.isVideo` first, then only use createMediaSrcset on the image branch.
+ *
  * @ai-category Image
  * @ai-related getDefaultSrc, getThumbnailSrc, getSrc
  *
@@ -67,12 +95,22 @@ export declare function getSrc(image: IkasImage, size: number): string;
  * ```typescript
  * import { createMediaSrcset, getDefaultSrc } from "@ikas/bp-storefront";
  *
- * <img
- *   src={getDefaultSrc(image)}
- *   srcSet={createMediaSrcset(image)}
- *   sizes="(max-width: 768px) 100vw, 50vw"
- *   alt="Product"
- * />
+ * // Product images can be videos — ALWAYS branch on isVideo when mapping media:
+ * {product.images.map((item, i) =>
+ *   item.isVideo ? (
+ *     <video key={i} src={getDefaultSrc(item)} muted playsInline preload="metadata">
+ *       <track kind="captions" />
+ *     </video>
+ *   ) : (
+ *     <img
+ *       key={i}
+ *       src={getDefaultSrc(item)}
+ *       srcSet={createMediaSrcset(item)}
+ *       sizes="(max-width: 768px) 100vw, 50vw"
+ *       alt={`Product ${i + 1}`}
+ *     />
+ *   )
+ * )}
  * ```
  */
 export declare function createMediaSrcset(image?: IkasImage | null): string;

package/dist/functions/models/product/variant/index.d.ts

@@ -1,16 +1,19 @@
 import { BackInStockNotificationForm, IkasAppliedCampaignAmount, IkasProductAttributeMap, IkasProductPrice, IkasProductVariant } from "../../../../storefront-models/src";
 /**
- * Get the main/primary image for a product variant.
+ * Get the main/primary media item for a product variant.
+ *
+ * The returned IkasProductImage may be a video (`isVideo === true`) — branch on it
+ * and render `<video>` instead of `<img>`.
  *
  * @ai-category ProductDetail, ProductList
  * @ai-related getSelectedProductVariant
  *
  * @param variant - The product variant
- * @returns The first IkasProductImage of the variant, or undefined if no images. Access `.image` to get the IkasImage for CDN helpers.
+ * @returns The first IkasProductImage of the variant, or undefined if no images. Check `.isVideo` to decide between `<video>` and `<img>`, and access `.image` to get the IkasImage for CDN helpers.
  *
  * @example
  * ```typescript
- * import { getProductVariantMainImage, getSelectedProductVariant, getDefaultSrc } from "@ikas/bp-storefront";
+ * import { getProductVariantMainImage, getSelectedProductVariant, getDefaultSrc, createMediaSrcset } from "@ikas/bp-storefront";
  * import { IkasProduct } from "@ikas/bp-storefront";
  *
  * function ProductImage({ product }: { product: IkasProduct }) {
@@ -22,7 +25,14 @@ import { BackInStockNotificationForm, IkasAppliedCampaignAmount, IkasProductAttr
  *     return <div className="no-image">No image available</div>;
  *   }
  *
- *   return <img src={getDefaultSrc(image)} alt={product.name} />;
+ *   // Media can be a video — branch on isVideo:
+ *   return productImage.isVideo ? (
+ *     <video src={getDefaultSrc(image)} muted playsInline loop>
+ *       <track kind="captions" />
+ *     </video>
+ *   ) : (
+ *     <img src={getDefaultSrc(image)} srcSet={createMediaSrcset(image)} alt={product.name} />
+ *   );
  * }
  * ```
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/bp-storefront",
-  "version": "1.4.0-beta.81",
+  "version": "1.4.0-beta.82",
   "description": "A framework for the ikas blueprint storefronts.",
   "author": "ikas",
   "license": "ISC",