{"version":3,"file":"Video.mjs","names":[],"sources":["../../src/Video.tsx"],"sourcesContent":["import {forwardRef, type HTMLAttributes} from 'react';\nimport {shopifyLoader} from './Image.js';\nimport type {Video as VideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\n/** @publicDocs */\nexport interface VideoProps {\n  /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/2026-04/objects/video). */\n  data: PartialDeep<VideoType, {recurseIntoArrays: true}>;\n  /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */\n  previewImageOptions?: Parameters<typeof shopifyLoader>[0];\n  /** Props that will be passed to the `video` element's `source` children elements. */\n  sourceProps?: HTMLAttributes<HTMLSourceElement> & {\n    'data-testid'?: string;\n  };\n}\n\n/**\n * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).\n * @publicDocs\n */\nexport const Video = forwardRef<\n  HTMLVideoElement,\n  JSX.IntrinsicElements['video'] & VideoProps\n>((props, ref): JSX.Element => {\n  const {\n    data,\n    previewImageOptions,\n    id = data.id,\n    playsInline = true,\n    controls = true,\n    sourceProps = {},\n    ...passthroughProps\n  } = props;\n\n  const posterUrl = shopifyLoader({\n    src: data.previewImage?.url ?? '',\n    ...previewImageOptions,\n  });\n\n  if (!data.sources) {\n    throw new Error(`<Video/> requires a 'data.sources' array`);\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption\n    <video\n      {...passthroughProps}\n      id={id}\n      playsInline={playsInline}\n      controls={controls}\n      poster={posterUrl}\n      ref={ref}\n    >\n      {data.sources.map((source) => {\n        if (!(source?.url && source?.mimeType)) {\n          throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);\n        }\n        return (\n          <source\n            {...sourceProps}\n            key={source.url}\n            src={source.url}\n            type={source.mimeType}\n          />\n        );\n      })}\n    </video>\n  );\n});\n"],"mappings":";;;;;;;;AAqBA,IAAa,QAAQ,YAGlB,OAAO,QAAqB;CAC7B,MAAM,EACJ,MACA,qBACA,KAAK,KAAK,IACV,cAAc,MACd,WAAW,MACX,cAAc,EAAE,EAChB,GAAG,qBACD;CAEJ,MAAM,YAAY,cAAc;EAC9B,KAAK,KAAK,cAAc,OAAO;EAC/B,GAAG;EACJ,CAAC;AAEF,KAAI,CAAC,KAAK,QACR,OAAM,IAAI,MAAM,2CAA2C;AAG7D,QAEE,oBAAC,SAAD;EACE,GAAI;EACA;EACS;EACH;EACV,QAAQ;EACH;YAEJ,KAAK,QAAQ,KAAK,WAAW;AAC5B,OAAI,EAAE,QAAQ,OAAO,QAAQ,UAC3B,OAAM,IAAI,MAAM,oDAAoD;AAEtE,UACE,8BAAC,UAAD;IACE,GAAI;IACJ,KAAK,OAAO;IACZ,KAAK,OAAO;IACZ,MAAM,OAAO;IACb,CAAA;IAEJ;EACI,CAAA;EAEV"}