{"version":3,"file":"ExternalVideo.mjs","names":[],"sources":["../../src/ExternalVideo.tsx"],"sourcesContent":["import type {ExternalVideo as ExternalVideoType} from './storefront-api-types.js';\nimport type {Entries, PartialDeep} from 'type-fest';\nimport {forwardRef, IframeHTMLAttributes} from 'react';\n\n/**\n * Takes in the same props as a native `<iframe>` element, except for `src`.\n * @publicDocs */\nexport interface ExternalVideoBaseProps {\n  /**\n   * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n   */\n  data: PartialDeep<ExternalVideoType, {recurseIntoArrays: true}>;\n  /** An object containing the options available for either\n   * [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or\n   * [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters).\n   */\n  options?: YouTube | Vimeo;\n}\n\nexport type ExternalVideoProps = Omit<\n  IframeHTMLAttributes<HTMLIFrameElement>,\n  'src'\n> &\n  ExternalVideoBaseProps;\n\n/**\n * The `ExternalVideo` component renders an embedded video for the Storefront\n * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n * @publicDocs\n */\nexport const ExternalVideo = forwardRef<HTMLIFrameElement, ExternalVideoProps>(\n  (props, ref): JSX.Element => {\n    const {\n      data,\n      options,\n      id = data.id,\n      frameBorder = '0',\n      allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',\n      allowFullScreen = true,\n      loading = 'lazy',\n      ...passthroughProps\n    } = props;\n\n    if (!data.embedUrl) {\n      throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);\n    }\n\n    let finalUrl: string = data.embedUrl;\n\n    if (options) {\n      const urlObject = new URL(data.embedUrl);\n      for (const [key, value] of Object.entries(options) as Entries<\n        typeof options\n      >) {\n        if (typeof value === 'undefined') {\n          continue;\n        }\n\n        urlObject.searchParams.set(key, value.toString());\n      }\n      finalUrl = urlObject.toString();\n    }\n\n    return (\n      <iframe\n        {...passthroughProps}\n        id={id ?? data.embedUrl}\n        title={data.alt ?? data.id ?? 'external video'}\n        frameBorder={frameBorder}\n        allow={allow}\n        allowFullScreen={allowFullScreen}\n        src={finalUrl}\n        loading={loading}\n        ref={ref}\n      ></iframe>\n    );\n  },\n);\n\ninterface YouTube {\n  autoplay?: 0 | 1;\n  cc_lang_pref?: string;\n  cc_load_policy?: 1;\n  color?: 'red' | 'white';\n  controls?: 0 | 1;\n  disablekb?: 0 | 1;\n  enablejsapi?: 0 | 1;\n  end?: number;\n  fs?: 0 | 1;\n  hl?: string;\n  iv_load_policy?: 1 | 3;\n  list?: string;\n  list_type?: 'playlist' | 'user_uploads';\n  loop?: 0 | 1;\n  modest_branding?: 1;\n  origin?: string;\n  playlist?: string;\n  plays_inline?: 0 | 1;\n  rel?: 0 | 1;\n  start?: number;\n  widget_referrer?: string;\n}\n\ntype VimeoBoolean = 0 | 1 | boolean;\n\ninterface Vimeo {\n  autopause?: VimeoBoolean;\n  autoplay?: VimeoBoolean;\n  background?: VimeoBoolean;\n  byline?: VimeoBoolean;\n  color?: string;\n  controls?: VimeoBoolean;\n  dnt?: VimeoBoolean;\n  loop?: VimeoBoolean;\n  muted?: VimeoBoolean;\n  pip?: VimeoBoolean;\n  playsinline?: VimeoBoolean;\n  portrait?: VimeoBoolean;\n  quality?: '240p' | '360p' | '540p' | '720p' | '1080p' | '2k' | '4k';\n  speed?: VimeoBoolean;\n  '#t'?: string;\n  texttrack?: string;\n  title?: VimeoBoolean;\n  transparent?: VimeoBoolean;\n}\n"],"mappings":";;;;;;;;AA8BA,IAAa,gBAAgB,YAC1B,OAAO,QAAqB;CAC3B,MAAM,EACJ,MACA,SACA,KAAK,KAAK,IACV,cAAc,KACd,QAAQ,2EACR,kBAAkB,MAClB,UAAU,QACV,GAAG,qBACD;AAEJ,KAAI,CAAC,KAAK,SACR,OAAM,IAAI,MAAM,oDAAoD;CAGtE,IAAI,WAAmB,KAAK;AAE5B,KAAI,SAAS;EACX,MAAM,YAAY,IAAI,IAAI,KAAK,SAAS;AACxC,OAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,QAAQ,EAE/C;AACD,OAAI,OAAO,UAAU,YACnB;AAGF,aAAU,aAAa,IAAI,KAAK,MAAM,UAAU,CAAC;;AAEnD,aAAW,UAAU,UAAU;;AAGjC,QACE,oBAAC,UAAD;EACE,GAAI;EACJ,IAAI,MAAM,KAAK;EACf,OAAO,KAAK,OAAO,KAAK,MAAM;EACjB;EACN;EACU;EACjB,KAAK;EACI;EACJ;EACG,CAAA;EAGf"}