{"version":3,"file":"static/js/423.3be949ef.chunk.js","mappings":"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","sources":["shared/hero-banner-video/hero-banner-video-component.jsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\"\nimport ReactHtmlParser from \"react-html-parser\"\nimport Svg from \"../_svgs/svg\"\n\nexport default function HeroBannerVideoComponent({ heading, ctaLabel, backgroundVideo, playVideo, scrollText }) {\n  //if we dont end up using a hook, just remove it.\n  const [showBackgroundVideo, setShowBackgroundVideo] = useState(true)\n  const [playActiveVideo, setPlayActiveVideo] = useState(false)\n  const [fade, setFade] = useState(false)\n  const activeVideoRef = useRef(null)\n  const bgVideoRef = useRef(null)\n  const isFirstRender = useRef(true)\n  const [fadeInBgVideo, setFadeInBgVideo] = useState(true)\n\n  const handleButtonClick = () => {\n    // Trigger the fade-out animation for the currently shown video.\n    setFade(true)\n    const bgVideo = bgVideoRef.current\n    const viewportHeight = window.innerHeight\n\n    // Calculate the distance to scroll (bottom of the element to the bottom of the viewport)\n    const distanceToScroll = bgVideo.getBoundingClientRect().bottom - viewportHeight\n\n    // Scroll the element to the bottom of the viewport\n    window.scrollBy({ top: distanceToScroll, behavior: \"smooth\" })\n\n    setTimeout(() => {\n      setShowBackgroundVideo(!showBackgroundVideo)\n      setPlayActiveVideo(!playActiveVideo)\n      setTimeout(() => {\n        setFade(false)\n      }, 100) // combats the weird iOS issue\n    }, 2200) // Adjust the delay to match the duration of the fade-out animation\n  }\n\n  useEffect(() => {\n    const activeVideo = activeVideoRef.current\n    const bgVideo = bgVideoRef.current\n\n    const playBgVideo = () => {\n      bgVideo.currentTime = 0\n      bgVideo\n        .play()\n        .then(() => {\n          setFadeInBgVideo(false)\n        })\n        .catch((error) => {\n          console.error(\"Playback failed: \", error)\n        })\n    }\n\n    const handleCanPlay = () => {\n      if (bgVideo.readyState >= 4) {\n        playBgVideo()\n        bgVideo.removeEventListener(\"canplaythrough\", handleCanPlay)\n      }\n    }\n\n    bgVideo.addEventListener(\"canplaythrough\", handleCanPlay)\n\n    bgVideo.load()\n    activeVideo.load()\n\n    // Cleanup function to remove event listener\n    return () => {\n      bgVideo.removeEventListener(\"canplaythrough\", handleCanPlay)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false\n      return\n    }\n\n    const activeVideo = activeVideoRef.current\n    const bgVideo = bgVideoRef.current\n\n    const resetAndPlayActiveVideo = () => {\n      activeVideo.pause()\n      activeVideo.currentTime = 0\n      activeVideo\n        .play()\n        .then(() => {\n          bgVideo.pause()\n          bgVideo.currentTime = 0\n        })\n        .catch((error) => {\n          console.error(\"Playback failed: \", error)\n        })\n      activeVideo.removeEventListener(\"canplaythrough\", resetAndPlayActiveVideo)\n    }\n\n    const resetAndPlayBgVideo = () => {\n      bgVideo.pause()\n      bgVideo.currentTime = 0\n      bgVideo\n        .play()\n        .then(() => {\n          activeVideo.pause()\n          activeVideo.currentTime = 0\n        })\n        .catch((error) => {\n          console.error(\"Playback failed: \", error)\n        })\n      bgVideo.removeEventListener(\"canplaythrough\", resetAndPlayBgVideo)\n    }\n\n    if (activeVideo && playActiveVideo) {\n      if (window.innerWidth < 768 && !!activeVideo.requestFullscreen) {\n        activeVideo.requestFullscreen()\n      }\n\n      if (activeVideo.readyState >= 4) {\n        resetAndPlayActiveVideo()\n      } else {\n        activeVideo.addEventListener(\"canplaythrough\", resetAndPlayActiveVideo)\n      }\n    }\n\n    if (bgVideo && !playActiveVideo) {\n      if (bgVideo.readyState >= 4) {\n        resetAndPlayBgVideo()\n      } else {\n        bgVideo.addEventListener(\"canplaythrough\", resetAndPlayBgVideo)\n      }\n    }\n\n    // Cleanup function to remove event listener\n    return () => {\n      if (activeVideo) {\n        activeVideo.removeEventListener(\"canplaythrough\", resetAndPlayActiveVideo)\n      }\n      if (bgVideo) {\n        bgVideo.removeEventListener(\"canplaythrough\", resetAndPlayBgVideo)\n      }\n    }\n  }, [playActiveVideo])\n\n  const handleScrollButtonClick = () => {\n    const bgVideo = bgVideoRef.current\n\n    // Calculate the distance to scroll (bottom of the element to the bottom of the viewport)\n    const distanceToScroll = bgVideo.getBoundingClientRect().bottom\n\n    // Scroll the element to the bottom of the viewport\n    window.scrollBy({ top: distanceToScroll, behavior: \"smooth\" })\n  }\n\n  //rework html structure if necessary\n  return (\n    <div className=\"hero-banner-video-container\">\n      <div className={\"hero-banner-video-content\"}>\n        <div className={`fade-in-out ${fade ? \"fading-out\" : \"\"} ${showBackgroundVideo ? \"\" : \"hidden\"}`}>\n          <div className={`gradient-corperate-blue`}>\n            <video\n              ref={bgVideoRef}\n              className={fadeInBgVideo ? \"fadeInFromBlackBefore\" : \"fadeInFromBlackAfter\"}\n              data-epi-property=\"BackgroundVideo\"\n              id={\"backgroundVideoHero\"}\n              loop\n              muted\n              playsInline\n              preload={\"auto\"}\n              loading=\"eager\"\n              fetchPriority=\"high\"\n            >\n              <source src={backgroundVideo} />\n            </video>\n          </div>\n          <div className=\"video-hero\">\n            <div data-epi-property=\"Heading\" className=\"rich-text\">\n              {ReactHtmlParser(heading)}\n            </div>\n            <button data-epi-property=\"CtaLabel\" onClick={handleButtonClick} className=\"watch-button\">\n              <div className=\"iconplay\">\n                <Svg iconName={\"icon_play\"} fillColor={\"none\"} />\n              </div>\n              {ctaLabel}\n            </button>\n          </div>\n          <button data-epi-property=\"ScrollText\" className=\"scroll-button\" onClick={handleScrollButtonClick}>\n            {scrollText}\n            <div className=\"iconarrowdown\">\n              <Svg iconName={\"icon_arrow_down\"} fillColor={\"#FFFFFF\"} />\n            </div>\n          </button>\n        </div>\n\n        <div className={`fade-in-out ${fade ? \"fading-out\" : \"\"} ${showBackgroundVideo ? \"hidden\" : \"\"}`}>\n          <video\n            ref={activeVideoRef}\n            data-epi-property=\"PlayVideo\"\n            id={\"videoHero\"}\n            controls\n            playsInline\n            preload={\"auto\"}\n            loading=\"eager\"\n            fetchPriority=\"high\"\n          >\n            <source src={playVideo} />\n          </video>\n          <button onClick={handleButtonClick} className=\"circle\">\n            <div className=\"cross\"></div>\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["HeroBannerVideoComponent","_ref","heading","ctaLabel","backgroundVideo","playVideo","scrollText","_useState","useState","_useState2","_slicedToArray","showBackgroundVideo","setShowBackgroundVideo","_useState3","_useState4","playActiveVideo","setPlayActiveVideo","_useState5","_useState6","fade","setFade","activeVideoRef","useRef","bgVideoRef","isFirstRender","_useState7","_useState8","fadeInBgVideo","setFadeInBgVideo","handleButtonClick","bgVideo","current","viewportHeight","window","innerHeight","distanceToScroll","getBoundingClientRect","bottom","scrollBy","top","behavior","setTimeout","useEffect","activeVideo","handleCanPlay","readyState","currentTime","play","then","catch","error","console","removeEventListener","addEventListener","load","resetAndPlayActiveVideo","pause","resetAndPlayBgVideo","innerWidth","requestFullscreen","_jsx","className","children","_jsxs","concat","ref","id","loop","muted","playsInline","preload","loading","fetchPriority","src","ReactHtmlParser","onClick","Svg","iconName","fillColor","controls"],"sourceRoot":""}