{"version":3,"file":"video_banner.0812d8b2.js","mappings":"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","sources":["webpack://fitflop-storefront/./core-app/grails-app/assets/javascripts/app/cmscomponents/videoBanner/videoBanner.js"],"sourcesContent":["import { isElementVisibleWithinParent, findAncestorBySelector } from 'app/utils/helpers';\nimport { loadAsyncScript } from 'app/utils/ajaxHelpers';\nimport mediaQueries from 'app/utils/mediaQueries';\nimport './video.scss';\n\nconst { plyr } = window.inlineGlobalConfig.hashedPaths;\nconst videoBannerComponents = [...document.querySelectorAll('.video-banner')].filter(\n  videoBanner => !findAncestorBySelector(videoBanner, '#content-spots')\n);\n\nif (videoBannerComponents.length) {\n  loadAsyncScript(plyr).then(() => {\n    const videoBannerComponentsInitialized = [];\n    videoBannerComponents.forEach(videoBanner => {\n      const videoId = videoBanner.id;\n      const videoElement = videoBanner.querySelector('video');\n      const { videoOptions, ctaBanner, url, target, linkName } = videoBanner.dataset;\n\n      try {\n        if (!videoOptions && !videoBanner.classList.contains('video-banner--in-media')) {\n          throw Error('Options are empty');\n        }\n\n        const setClickableArea = entireVideoBanner => {\n          const eventListenerFunc = event => {\n            if (target.toUpperCase() === 'SAMEWINDOW') {\n              window.location.href = url;\n            } else {\n              window.open(url);\n            }\n            event.stopPropagation();\n          };\n\n          const addOnClickFunc = el => {\n            el.addEventListener('click', eventListenerFunc);\n          };\n\n          setTimeout(() => {\n            if (entireVideoBanner) {\n              const videoBannerWrapper = videoBanner.querySelector('.plyr__video-wrapper');\n\n              videoBannerWrapper.classList.add('with-pointer-events');\n              addOnClickFunc(videoBannerWrapper);\n            } else {\n              const realEstateCta = videoBanner.querySelector('.copy');\n              if (realEstateCta) {\n                const childElements = Array.prototype.slice.call(realEstateCta.children);\n                childElements.forEach(el => {\n                  el.classList.add('with-pointer-events');\n                  addOnClickFunc(el);\n                });\n              }\n            }\n          }, 0);\n        };\n\n        if (linkName) {\n          videoBanner.querySelector('a').classList.add('label-background');\n        }\n        if (ctaBanner === 'true') {\n          setClickableArea(true);\n        } else if (!linkName) {\n          setClickableArea(false);\n        }\n\n        const options = videoOptions ? JSON.parse(videoOptions.replace(/"/g, '\"')) : {};\n        const shadow = options.shadow && options.controls.length !== 0;\n        if (!shadow) {\n          setTimeout(() => {\n            const playerControls = videoBanner.querySelector('.plyr__controls');\n            playerControls.classList.add('no-shadow');\n          }, 0);\n        }\n        const duration = options.displayTime || null;\n        if (duration) {\n          window.addEventListener('load', () => {\n            const plyrEl = videoBanner.querySelector('.plyr');\n            plyrEl.classList.add('plyr--hide-controls');\n          });\n\n          const handlePlyrControlVisibility = event => {\n            const plyrEl = videoBanner.querySelector('.plyr');\n            event.preventDefault();\n            plyrEl.classList.remove('plyr--hide-controls');\n            setTimeout(() => {\n              plyrEl.classList.add('plyr--hide-controls');\n            }, duration * 1000);\n          };\n\n          const handlePlyrOnResize = () => {\n            const isSmall = mediaQueries.is_small_only();\n            const isMedium = mediaQueries.is_medium_only();\n\n            if (isSmall || isMedium) {\n              videoBanner.removeEventListener('mouseenter', handlePlyrControlVisibility);\n              videoBanner.addEventListener('click', handlePlyrControlVisibility);\n            } else {\n              videoBanner.removeEventListener('click', handlePlyrControlVisibility);\n              videoBanner.addEventListener('mouseenter', handlePlyrControlVisibility);\n            }\n          };\n\n          const handlePlyrControlOnResize = handlePlyrOnResize;\n          handlePlyrControlOnResize();\n\n          window.addEventListener('resize', handlePlyrControlOnResize);\n        }\n        const autoplay = options.autoplay && isElementVisibleWithinParent(videoElement);\n        videoBannerComponentsInitialized.push({\n          player: new window.Plyr(videoElement, {\n            ...options,\n            autoplay,\n            hideControls: false,\n          }),\n          autoplay: options.autoplay,\n          id: videoId,\n        });\n      } catch (err) {\n        console.error(err);\n      }\n    });\n    const handleVideosByVisibility = () => {\n      let isSmallOnly = mediaQueries.is_small_only();\n      let isMediumOnly = mediaQueries.is_medium_only();\n\n      return () => {\n        if (isSmallOnly !== mediaQueries.is_small_only() || isMediumOnly !== mediaQueries.is_medium_only()) {\n          isSmallOnly = mediaQueries.is_small_only();\n          isMediumOnly = mediaQueries.is_medium_only();\n          videoBannerComponentsInitialized.forEach(video => {\n            /* eslint-disable no-param-reassign */\n            if (video.player.playing && !isElementVisibleWithinParent(document.querySelector(`#${video.id}`))) {\n              video.player.pause();\n              video.wasPlaying = true;\n            } else if (!video.player.playing && (video.wasPlaying || video.autoplay)) {\n              video.player.play();\n              video.autoplay = false;\n              video.wasPlaying = false;\n            }\n          });\n        }\n      };\n    };\n\n    const handleViewportChanges = handleVideosByVisibility();\n    handleViewportChanges();\n\n    window.addEventListener('resize', handleViewportChanges);\n  });\n}\n"],"names":["plyr","window","inlineGlobalConfig","hashedPaths","videoBannerComponents","document","querySelectorAll","filter","videoBanner","findAncestorBySelector","length","loadAsyncScript","then","videoBannerComponentsInitialized","forEach","videoId","id","videoElement","querySelector","_videoBanner$dataset","dataset","videoOptions","ctaBanner","url","target","linkName","classList","contains","Error","setClickableArea","entireVideoBanner","eventListenerFunc","event","toUpperCase","location","href","open","stopPropagation","addOnClickFunc","el","addEventListener","setTimeout","videoBannerWrapper","add","realEstateCta","Array","prototype","slice","call","children","options","JSON","parse","replace","shadow","controls","duration","displayTime","handlePlyrControlVisibility","plyrEl","preventDefault","remove","handlePlyrControlOnResize","isSmall","mediaQueries","isMedium","removeEventListener","autoplay","isElementVisibleWithinParent","push","player","Plyr","_objectSpread","hideControls","err","console","error","isSmallOnly","isMediumOnly","handleViewportChanges","video","playing","concat","pause","wasPlaying","play"],"sourceRoot":""}