{"version":3,"file":"static/js/4031.4632c057.chunk.js","mappings":"qMAEe,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","sources":["shared/showcase-video/showcase-video-component.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"],"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"],"sourceRoot":""}