{"version":3,"file":"static/js/3224.6f3efb23.chunk.js","mappings":"0MAEe,SAASA,EAAsBC,GAAoC,IAAjCC,EAAKD,EAALC,MAAOC,EAAcF,EAAdE,eAAgBC,EAAKH,EAALG,MAEtEC,GAA0CC,EAAAA,EAAAA,WAAS,GAAKC,GAAAC,EAAAA,EAAAA,GAAAH,EAAA,GAAjDI,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GACtCI,GAAsCL,EAAAA,EAAAA,WAAS,GAAKM,GAAAJ,EAAAA,EAAAA,GAAAG,EAAA,GAA7CE,EAAWD,EAAA,GAAEE,EAAcF,EAAA,GAC5BG,GAAWC,EAAAA,EAAAA,QAAO,MAyCxB,OA3BAC,EAAAA,EAAAA,YAAU,WACR,IAAMC,EAAcH,EAASI,QAEvBC,EAAoB,SAApBA,IACJF,EAAYG,QACZH,EAAYI,YAAc,EAC1BJ,EAAYK,OAAOC,OAAM,SAACC,GACxBC,QAAQD,MAAM,oBAAqBA,EACrC,IACAP,EAAYS,oBAAoB,iBAAkBP,EACpD,EAUA,OARIF,IAAgBT,IACdS,EAAYU,YAAc,EAC5BR,IAEAF,EAAYW,iBAAiB,iBAAkBT,IAI5C,WACDF,GACFA,EAAYS,oBAAoB,iBAAkBP,EAEtD,CACF,GAAG,CAACX,KAGFqB,EAAAA,EAAAA,MAAA,OAAKC,UAAU,2BAA0BC,SAAA,EACvCC,EAAAA,EAAAA,KAAA,MAAI,oBAAkB,QAAOD,SAAE5B,KAC/B0B,EAAAA,EAAAA,MAAA,OAAKC,UAAW,yBAAyBC,SAAA,EACvCC,EAAAA,EAAAA,KAAA,SACEC,IAAKnB,EACL,oBAAkB,QAClBoB,UAAQ,EACRC,aAAa,EACbC,OAAQ5B,EACRsB,UAAS,kBAAAO,OAAoBzB,EAAc,wBAA0B,wBACrE0B,IAAKrC,IAENO,GACCqB,EAAAA,EAAAA,MAAA,UAAQC,UAAU,2BAA2BS,QAAS,kBArD3C,WACjB9B,GAAkBD,GAClB,IAAMS,EAAcH,EAASI,QAC7BsB,YAAW,WACTvB,EAAYI,YAAc,EAC1BmB,YAAW,WACT3B,GAAe,GACfI,EAAYK,MACd,GAAG,GACL,GAAG,GACL,CA2CoEmB,EAAY,EAACV,SAAA,EACvEC,EAAAA,EAAAA,KAAA,OAAK,oBAAkB,iBAAiBM,IAAKpC,KAC7C8B,EAAAA,EAAAA,KAAA,OAAKF,UAAU,gBAAeC,UAC5BC,EAAAA,EAAAA,KAAA,OAAKF,UAAS,gCAAkCC,UAC9CC,EAAAA,EAAAA,KAAA,OAAKU,WAAW,+BAA+BC,UAAS,uCAAyCZ,SAAC,qBAMtGa,OAIZ,C,sJCvEqBC,EAAmB,WAOrC,OAAAC,EAAAA,EAAAA,IAND,SAAAD,EAAYE,IAAMC,EAAAA,EAAAA,GAAA,KAAAH,GAChB,IAAMI,EAAOC,KAIb,OAHAD,EAAKF,KAAOA,EACZE,EAAKE,UAAYJ,EAAKK,QAAQD,WAAaE,KAAKC,MAAMP,EAAKK,QAAQD,WACnEF,EAAKM,OACEN,CACT,GAAC,EAAAO,IAAA,OAAAC,MAED,WAEEC,EAAAA,uBADaR,KACwBH,MACrCW,EAAAA,QAAgB1B,EAAAA,EAAAA,KAACjC,EAAAA,SAAsB4D,EAAAA,EAAAA,GAAA,GAAKT,KAAKC,YAFpCD,KAEwDH,KACvE,IAAC,CAbqC,E","sources":["shared/showcase-video/showcase-video-component.jsx","shared/showcase-video/showcase-video-module.jsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\"\n\nexport default function ShowcaseVideoComponent({ video, thumbnailImage, title }) {\n  //if we dont end up using a hook, just remove it.\n  const [showThumbnail, setShowThumbnail] = useState(true)\n  const [fadeInVideo, setFadeInVideo] = useState(true)\n  const videoRef = useRef(null)\n\n  const handlePlay = () => {\n    setShowThumbnail(!showThumbnail)\n    const videoplayer = videoRef.current\n    setTimeout(() => {\n      videoplayer.currentTime = 0\n      setTimeout(() => {\n        setFadeInVideo(false)\n        videoplayer.play()\n      }, 50) // combats the weird iOS issue\n    }, 50)\n  }\n\n  useEffect(() => {\n    const videoplayer = videoRef.current\n\n    const resetAndPlayVideo = () => {\n      videoplayer.pause()\n      videoplayer.currentTime = 0\n      videoplayer.play().catch((error) => {\n        console.error(\"Playback failed: \", error)\n      })\n      videoplayer.removeEventListener(\"canplaythrough\", resetAndPlayVideo)\n    }\n\n    if (videoplayer && !showThumbnail) {\n      if (videoplayer.readyState >= 4) {\n        resetAndPlayVideo()\n      } else {\n        videoplayer.addEventListener(\"canplaythrough\", resetAndPlayVideo)\n      }\n    }\n\n    return () => {\n      if (videoplayer) {\n        videoplayer.removeEventListener(\"canplaythrough\", resetAndPlayVideo)\n      }\n    }\n  }, [showThumbnail])\n\n  return (\n    <div className=\"showcase-video-container\">\n      <h2 data-epi-property=\"Title\">{title}</h2>\n      <div className={\"showcase-video-content\"}>\n        <video\n          ref={videoRef}\n          data-epi-property=\"Video\"\n          controls\n          playsInline={true}\n          hidden={showThumbnail}\n          className={`showcase-video ${fadeInVideo ? \"fadeInFromBlackBefore\" : \"fadeInFromBlackAfter\"}`}\n          src={video}\n        ></video>\n        {showThumbnail ? (\n          <button className=\"showcase-video-thumbnail\" onClick={() => handlePlay()}>\n            <img data-epi-property=\"ThumbnailImage\" src={thumbnailImage}></img>\n            <div className=\"svg-container\">\n              <svg className={`svg-icon svg-icon--playcircle`}>\n                <use xmlnsXlink=\"http://www.w3.org/1999/xlink\" xlinkHref={`/dist/svg/symbols.svg#svg-playcircle`}>\n                  &nbsp;\n                </use>\n              </svg>\n            </div>\n          </button>\n        ) : undefined}\n      </div>\n    </div>\n  )\n}\n","import React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport ShowcaseVideoComponent from \"./showcase-video-component\"\n\nexport default class ShowcaseVideoModule {\n  constructor(elem) {\n    const self = this\n    self.elem = elem\n    self.modelJson = elem.dataset.modelJson && JSON.parse(elem.dataset.modelJson)\n    self.init()\n    return self\n  }\n\n  init() {\n    const self = this\n    ReactDOM.unmountComponentAtNode(self.elem)\n    ReactDOM.render(<ShowcaseVideoComponent {...this.modelJson} />, self.elem)\n  }\n}\n"],"names":["ShowcaseVideoComponent","_ref","video","thumbnailImage","title","_useState","useState","_useState2","_slicedToArray","showThumbnail","setShowThumbnail","_useState3","_useState4","fadeInVideo","setFadeInVideo","videoRef","useRef","useEffect","videoplayer","current","resetAndPlayVideo","pause","currentTime","play","catch","error","console","removeEventListener","readyState","addEventListener","_jsxs","className","children","_jsx","ref","controls","playsInline","hidden","concat","src","onClick","setTimeout","handlePlay","xmlnsXlink","xlinkHref","undefined","ShowcaseVideoModule","_createClass","elem","_classCallCheck","self","this","modelJson","dataset","JSON","parse","init","key","value","ReactDOM","_objectSpread"],"sourceRoot":""}