{"version":3,"file":"hero-video.ba67908f490e480ce4c6.min.js","mappings":"gJAAe,MAAMA,EACjBC,WAAAA,CAAYC,GACRC,KAAKD,UAAYA,EACjBC,KAAKC,MAAQC,SAASC,cAAc,sBACpCH,KAAKI,aAAeC,OAAOC,WAAW,uBAAuBC,QAC7DP,KAAKQ,qBAAuBR,KAAKI,aACjCJ,KAAKS,UAAY,CACbC,IAAKV,KAAKD,UAAUY,aAAa,kBACjCC,KAAMZ,KAAKD,UAAUY,aAAa,mBAClCE,UAAWb,KAAKD,UAAUY,aAAa,yBACvCG,WAAYd,KAAKD,UAAUY,aAAa,2BAG5CX,KAAKe,OAASf,KAAKD,UAAUiB,WAAWb,cAAc,4BAEtDE,OAAOY,iBAAiB,SAAUjB,KAAKkB,mBAAmBC,KAAKnB,OAE/DA,KAAKoB,sBACLpB,KAAKqB,uBACLrB,KAAKsB,0BACT,CAEAC,UAAAA,GACIvB,KAAKD,UAAUyB,QACfxB,KAAKe,OAAOU,UAAUC,OAAO,aACjC,CAEAC,SAAAA,GACI3B,KAAKD,UAAU6B,OACf5B,KAAKe,OAAOU,UAAUI,IAAI,cAC1B7B,KAAKC,MAAMwB,UAAUI,IAAI,SAC7B,CAEAC,kBAAAA,CAAmBC,GACf/B,KAAKD,UAAUiC,UAAY,GAEvBD,GACI/B,KAAKS,UAAUI,YACfb,KAAKD,UAAUiC,WAAa,gBAAgBhC,KAAKS,UAAUI,gCAC3Db,KAAKS,UAAUK,aACfd,KAAKD,UAAUiC,WAAa,gBAAgBhC,KAAKS,UAAUK,kCAC/Dd,KAAKC,MAAMgC,MAAQ,aACnBjC,KAAKC,MAAMwB,UAAUC,OAAO,UAC5B1B,KAAKuB,eAEDvB,KAAKS,UAAUC,MACfV,KAAKD,UAAUiC,WAAa,gBAAgBhC,KAAKS,UAAUC,0BAC3DV,KAAKS,UAAUG,OACfZ,KAAKD,UAAUiC,WAAa,gBAAgBhC,KAAKS,UAAUG,4BAC/DZ,KAAKC,MAAMgC,MAAQ,aACnBjC,KAAK2B,YAEb,CAEAT,kBAAAA,GACIlB,KAAKI,aAAeC,OAAOC,WAAW,uBAAuBC,QAEzDP,KAAKI,eAAiBJ,KAAKQ,uBAC3BR,KAAK8B,mBAAmB9B,KAAKI,cAC7BJ,KAAKQ,qBAAuBR,KAAKI,aAEzC,CAEAgB,mBAAAA,GACI,GAAIpB,KAAKe,OAAQ,CACb,MAAMmB,EAAOlC,KAEbA,KAAKe,OAAOE,iBAAiB,SAAS,KAE9BiB,EAAKnC,UAAUoC,WAAa,GAC5BD,EAAKJ,mBAAmBI,EAAK9B,cAI7B8B,EAAKnC,UAAUqC,YAAc,IAC5BF,EAAKnC,UAAUsC,SACfH,EAAKnC,UAAUuC,MAEhBtC,KAAKuB,cACEW,EAAKnC,UAAUqC,YAAc,GAAKF,EAAKnC,UAAUsC,SAGxDH,EAAKJ,mBAAmBI,EAAK9B,cAC7B8B,EAAKnC,UAAUwC,QAHfvC,KAAK2B,YAKT,GAER,CACJ,CAEAN,oBAAAA,GACIrB,KAAKD,UAAUkC,MAAMO,QAAU,QAG1BxC,KAAKI,aAGNJ,KAAKC,MAAMgC,MAAQ,aAFnBjC,KAAK2B,WAIb,CAEAL,wBAAAA,GAMqB,IAAImB,sBAAsBC,IACvCA,EAAQC,SAASC,IACRA,EAAMC,gBAEP7C,KAAKuB,YACT,GACF,GAXU,CACZW,KAAM,KACNY,UAAW,KAYNC,QAAQ/C,KAAKD,UAC1B,E","sources":["webpack://intracto-deheus/./Frontend/js/components/hero-video/index.js"],"sourcesContent":["export default class HeroVideo {\r\n constructor(component) {\r\n this.component = component;\r\n this.image = document.querySelector('[data-video-image]');\r\n this.mobileActive = window.matchMedia('(max-width: 1024px)').matches;\r\n this.previousMobileActive = this.mobileActive;\r\n this.videoUrls = {\r\n mp4: this.component.getAttribute('data-video-mp4'),\r\n webm: this.component.getAttribute('data-video-webm'),\r\n mobileMp4: this.component.getAttribute('data-video-mobile-mp4'),\r\n mobileWebm: this.component.getAttribute('data-video-mobile-webm'),\r\n };\r\n\r\n this.button = this.component.parentNode.querySelector('[data-hero-video-button]');\r\n\r\n window.addEventListener('resize', this.handleWindowResize.bind(this));\r\n\r\n this.setupButtonListener();\r\n this.activateVideoElement();\r\n this.initIntersectionObserver();\r\n }\r\n\r\n pauseVideo() {\r\n this.component.pause();\r\n this.button.classList.remove('is-playing');\r\n }\r\n\r\n playVideo() {\r\n this.component.play();\r\n this.button.classList.add('is-playing');\r\n this.image.classList.add('d-none');\r\n }\r\n\r\n updateVideoElement(mobile) {\r\n this.component.innerHTML = '';\r\n\r\n if (mobile) {\r\n if (this.videoUrls.mobileMp4)\r\n this.component.innerHTML += ``;\r\n if (this.videoUrls.mobileWebm)\r\n this.component.innerHTML += ``;\r\n this.image.style = 'z-index: 1';\r\n this.image.classList.remove('d-none');\r\n this.pauseVideo();\r\n } else {\r\n if (this.videoUrls.mp4)\r\n this.component.innerHTML += ``;\r\n if (this.videoUrls.webm)\r\n this.component.innerHTML += ``;\r\n this.image.style = 'z-index: 0';\r\n this.playVideo();\r\n }\r\n }\r\n\r\n handleWindowResize() {\r\n this.mobileActive = window.matchMedia('(max-width: 1024px)').matches;\r\n\r\n if (this.mobileActive !== this.previousMobileActive) {\r\n this.updateVideoElement(this.mobileActive);\r\n this.previousMobileActive = this.mobileActive;\r\n }\r\n }\r\n\r\n setupButtonListener() {\r\n if (this.button) {\r\n const root = this;\r\n\r\n this.button.addEventListener('click', () => {\r\n // Ensure the video is loaded and ready to play\r\n if (root.component.readyState < 3) {\r\n root.updateVideoElement(root.mobileActive);\r\n }\r\n\r\n if (\r\n root.component.currentTime > 0 &&\r\n !root.component.paused &&\r\n !root.component.ended\r\n ) {\r\n this.pauseVideo();\r\n } else if (root.component.currentTime > 0 && root.component.paused) {\r\n this.playVideo();\r\n } else {\r\n root.updateVideoElement(root.mobileActive);\r\n root.component.load(); // Explicitly load the video\r\n this.playVideo();\r\n }\r\n });\r\n }\r\n }\r\n\r\n activateVideoElement() {\r\n this.component.style.display = 'block';\r\n\r\n // Autoplay on desktop\r\n if (!this.mobileActive) {\r\n this.playVideo();\r\n } else {\r\n this.image.style = 'z-index: 1';\r\n }\r\n }\r\n\r\n initIntersectionObserver() {\r\n const options = {\r\n root: null, // Null means that the viewport is used as the observer\r\n threshold: 0.5, // Trigger if at least 50% of the element is visible\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach((entry) => {\r\n if (!entry.isIntersecting) {\r\n // Pause the video if the component is not in view\r\n this.pauseVideo();\r\n }\r\n });\r\n }, options);\r\n\r\n observer.observe(this.component); // Start observing\r\n }\r\n}\r\n"],"names":["HeroVideo","constructor","component","this","image","document","querySelector","mobileActive","window","matchMedia","matches","previousMobileActive","videoUrls","mp4","getAttribute","webm","mobileMp4","mobileWebm","button","parentNode","addEventListener","handleWindowResize","bind","setupButtonListener","activateVideoElement","initIntersectionObserver","pauseVideo","pause","classList","remove","playVideo","play","add","updateVideoElement","mobile","innerHTML","style","root","readyState","currentTime","paused","ended","load","display","IntersectionObserver","entries","forEach","entry","isIntersecting","threshold","observe"],"sourceRoot":""}