${this.options.noItemMessage}
`\n this.$loader.prepend(infoDiv)\n return\n }\n }\n\n // Events definer\n eventsCreator() {\n\n this.events['onAdd'] = new CustomEvent('onAdd', {\n bubbles: true,\n detail: {\n getAddedItem: () => {\n return this.$addedItem\n }\n }\n })\n\n this.events['onClear'] = new CustomEvent('onClear', {\n bubbles: true,\n })\n\n this.events['onScrollEnd'] = new CustomEvent('onScrollEnd', {\n bubbles: true,\n })\n\n this.events['onUpdate'] = new CustomEvent('onUpdate', {\n bubbles: true,\n })\n }\n\n // Resize func\n resizeFunc() {\n return utilities.debounce(() => {\n this.refresh()\n }, 250)\n }\n\n // Adding scrollController\n addMainSCrollController() {\n if (this.scrollController) this.scrollController = null\n\n this.scrollController = ScrollTrigger.create(this.scrollOptions)\n addScrollController(this.scrollController)\n }\n\n // Adding Listeners\n addListeners() {\n this.$loader.addEventListener('onAdd', () => this.refresh())\n this.$loader.addEventListener('onClear', () => this.refresh())\n window.addEventListener('resize', this.resizeFunc())\n }\n }\n\n const defaultLoaderOptions = {\n skeletonLoaderStyle: 'article-blog',\n skeletonLoaderNo: 3,\n noItemMessage: 'We are sorry. No result were found for the selected filters(s)'\n }\n\n return {\n InfiniteLoader\n }\n})()","import { gsap } from \"gsap\"\r\nimport { CustomEase } from \"gsap/CustomEase\"\r\nimport { CustomWiggle } from \"gsap/CustomWiggle\"\r\nimport { ScrollToPlugin } from \"gsap/ScrollToPlugin\"\r\nimport { Carousels } from '@/scripts/carousels/SlickCarousel'\r\nimport settings from \"@/scripts/common/settings\"\r\nimport utilities from \"@/scripts/common/utilities\"\r\nimport {API} from '@/scripts/common/api/api.services'\r\nimport {Video} from '@/scripts/video/Video'\r\nimport modalTpl from './templates/modal.template'\r\ngsap.registerPlugin(ScrollToPlugin, CustomEase, CustomWiggle)\r\n\r\nexport const ModalController = (() => {\r\n class Modal {\r\n constructor(trigger, options) {\r\n this.$trigger = trigger\r\n this.$targetHTML = this.$trigger.dataset.target ? document.querySelector(this.$trigger.dataset.target) : null\r\n this.$modal = null\r\n this.$galleryCarousel = null\r\n this.$galleryCarouselThumb = null\r\n this.modalType = this.$trigger.dataset.modalType || 'normal'\r\n this.modalAnimType = this.$targetHTML?.dataset.modalAnimType || 'slidePage'\r\n this.modalDisplay = this.$targetHTML?.dataset.modalDisplay || ''\r\n this.galleryGroup = this.$trigger.dataset.modalGroup || ''\r\n this.galleryGroupTitle = this.$trigger.dataset.modalGroupTitle || ''\r\n this.modalTitle = this.$trigger.dataset.modalTitle || ''\r\n this.mainTl = null\r\n this.galleryItems = []\r\n this.active = false\r\n\r\n this.options = Object.assign({\r\n duration: 0.5,\r\n ease: 'power3.easeInOut'\r\n },options)\r\n\r\n this.init()\r\n }\r\n\r\n init() {\r\n if(this.$targetHTML) this._createModal()\r\n this.addListeners()\r\n }\r\n\r\n // Animation\r\n addUIAnimation() {\r\n if (this.mainTl) {\r\n this.mainTl.kill()\r\n \r\n this.mainTl = null\r\n }\r\n\r\n if (!this.$modal) return\r\n\r\n const $modalInner = this.$modal.querySelector('.modal__inner')\r\n\r\n gsap.set([$modalInner, this.$modal], {clearProps: 'all'})\r\n \r\n switch(this.modalAnimType) {\r\n case 'fromTop':\r\n this.mainTl = this.fromTopAnim()\r\n break\r\n default:\r\n this.mainTl = this.slidePageAnim() \r\n }\r\n \r\n\r\n }\r\n\r\n //Animations\r\n slidePageAnim() {\r\n const $modalInner = this.$modal.querySelector('.modal__inner')\r\n const tl = gsap.timeline({\r\n paused: true\r\n })\r\n\r\n gsap.set(this.$modal, {width: 0})\r\n\r\n tl.to(this.$modal, {\r\n duration: 0.5,\r\n ease: 'power2.inOut',\r\n width: '100%'\r\n })\r\n .from($modalInner, {\r\n autoAlpha: 0,\r\n duration: 0.5,\r\n ease: 'power2.inOut',\r\n xPercent: -100\r\n }, 0)\r\n return tl\r\n }\r\n // From Top\r\n fromTopAnim() {\r\n const $modalContainer = this.$modal.querySelector('.modal__container')\r\n const tl = gsap.timeline({\r\n paused: true\r\n })\r\n \r\n gsap.set(this.$modal, {\r\n autoAlpha: 0,\r\n display: 'none'\r\n })\r\n\r\n gsap.set($modalContainer, {\r\n autoAlpha: 0,\r\n yPercent: -100,\r\n autoAlpha: 0\r\n })\r\n\r\n tl.to(this.$modal, {\r\n duration: this.options.duration,\r\n ease: this.options.ease,\r\n autoAlpha: 1,\r\n display: 'block'\r\n })\r\n .to($modalContainer, {\r\n duration: this.options.duration,\r\n ease: this.options.ease,\r\n yPercent: 0,\r\n autoAlpha: 1 \r\n }, '-=0.2')\r\n\r\n return tl\r\n }\r\n // From side\r\n fromSideAnim() {\r\n const $modalContainer = this.$modal.querySelector('.modal__container')\r\n const tl = gsap.timeline({\r\n paused: true\r\n })\r\n \r\n gsap.set(this.$modal, {\r\n autoAlpha: 0,\r\n display: 'none'\r\n })\r\n\r\n tl.to(this.$modal, {\r\n duration: this.options.duration,\r\n ease: this.options.ease,\r\n autoAlpha: 1,\r\n display: 'block'\r\n })\r\n .from($modalContainer, {\r\n duration: this.options.duration,\r\n ease: this.options.ease,\r\n xPercent: this.options.modalDirection === 'right' ? 100 : -100,\r\n }, '-=0.2')\r\n\r\n return tl\r\n }\r\n\r\n // Shake \r\n shakeAnim() {\r\n const $modalContent = this.$modal.querySelector('.modal__content')\r\n if(!$modalContent) return\r\n\r\n CustomWiggle.create(\"Wiggle.easeInOut\", {wiggles:this.options.wiggles, type:\"easeInOut\"});\r\n CustomWiggle.create(\"Wiggle.easeOut\", {wiggles:this.options.wiggles, type:\"easeOut\"});\r\n gsap.to($modalContent, {\r\n duration: 0.8,\r\n x:\"+=20\", \r\n ease: \"Wiggle.easeOut\"\r\n })\r\n }\r\n\r\n // Modal\r\n\r\n _clearModal() {\r\n if (this.$galleryCarousel) {\r\n this.$galleryCarousel.getSlick().unslick()\r\n this.$galleryCarousel = null\r\n }\r\n if (this.$galleryCarouselThumb) {\r\n this.$galleryCarouselThumb.getSlick().unslick()\r\n this.$galleryCarouselThumb = null\r\n }\r\n if (this.$modal) {\r\n this.$modal.remove()\r\n this.$modal = null\r\n }\r\n }\r\n\r\n _createModal() {\r\n const existingModal = this.$targetHTML && document.querySelector(`#${this.$targetHTML.getAttribute('id')}--modal`)\r\n if(existingModal) {\r\n this.$modal = existingModal\r\n this.calculateGrid()\r\n this.addUIAnimation()\r\n this.addModalActions()\r\n return\r\n }\r\n if (this.$modal && this.modalType === 'gallery') {\r\n this._clearModal()\r\n }\r\n this.$modal = utilities.createNodeParsing(modalTpl())\r\n if(this.modalDisplay === 'modal-normal') {\r\n const $backdrop = document.createElement('div')\r\n $backdrop.classList.add('modal__backdrop')\r\n this.$modal.prepend($backdrop)\r\n this.$modal.classList.add('modal--normal')\r\n }\r\n\r\n if (this.modalType === 'gallery') {\r\n this.collectGallery()\r\n this._createModalHeader()\r\n this._createGalleryCarousel()\r\n this._createGalleryThumbnailCarousel()\r\n document.body.appendChild(this.$modal)\r\n this.carousels()\r\n } else {\r\n this._createModalHeader()\r\n this._createModalFooter()\r\n this._createModalBody()\r\n this.$modal.setAttribute('id', `${this.$targetHTML.getAttribute('id')}--modal`)\r\n document.body.appendChild(this.$modal)\r\n }\r\n this.calculateGrid()\r\n this.addUIAnimation()\r\n this.addModalActions()\r\n\r\n }\r\n\r\n // Modal elems\r\n _createModalHeader() {\r\n const $modalHeader = this.$modal.querySelector('.modal__header')\r\n const $targetHeader = this.$targetHTML?.querySelector('[data-title]')\r\n if($targetHeader) {\r\n $modalHeader.appendChild($targetHeader)\r\n return\r\n }\r\n\r\n if(this.modalTitle) {\r\n \r\n const $title = document.createElement('h1')\r\n $title.innerHTML = `${this.modalTitle}`\r\n $modalHeader.appendChild($title)\r\n }\r\n\r\n if(this.galleryGroupTitle) {\r\n const $grpTitle = document.createElement('h4')\r\n $grpTitle.innerHTML = `${this.galleryGroupTitle}`\r\n $modalHeader.appendChild($grpTitle)\r\n } \r\n const headerModifiers = this.$targetHTML?.dataset.headerModifiers?.split(',').map(val => val.trim()) || []\r\n if(headerModifiers.length)\r\n headerModifiers.forEach((mod) => $modalHeader.classList.add(`${mod}`))\r\n\r\n if(this.modalType === 'gallery') $modalHeader.classList.add(`justify-content-center`)\r\n \r\n return\r\n }\r\n\r\n _createModalFooter() {\r\n const $modalFooter = this.$modal.querySelector('.modal__footer')\r\n const $targetFooter = this.$targetHTML?.querySelector('[data-footer]')\r\n const footerModifiers = this.$targetHTML?.dataset.footerModifiers?.split(',').map(val => val.trim()) || []\r\n if(footerModifiers.length)\r\n footerModifiers.forEach((mod) => $modalFooter.classList.add(`${mod}`))\r\n if($targetFooter) {\r\n $modalFooter.appendChild($targetFooter)\r\n return\r\n }\r\n }\r\n\r\n _createModalBody() {\r\n const $modalBody = this.$modal.querySelector('.modal__body')\r\n const $modalContainer = this.$modal.querySelector('.modal__container')\r\n this.$targetHTML?.classList.add('modal-added')\r\n const bodyModifiers = this.$targetHTML?.dataset.bodyModifiers?.split(',').map(val => val.trim()) || []\r\n const modifiers = this.$targetHTML?.dataset.modifiers?.split(',').map(val => val.trim()) || []\r\n if(bodyModifiers.length)\r\n bodyModifiers.forEach((mod) => $modalBody.classList.add(`${mod}`))\r\n if(modifiers.length)\r\n modifiers.forEach((mod) => $modalContainer.classList.add(`${mod}`))\r\n $modalBody.appendChild(this.$targetHTML)\r\n }\r\n\r\n // Gallery\r\n _createGalleryCarousel() {\r\n this.$galleryCarousel = document.createElement('div')\r\n this.$galleryCarousel.classList.add('modal-single-carousel', 'card-carousel--overlay-controls', 'card-carousel--arrows-btn')\r\n this.galleryItems.forEach((item) => {\r\n const $singleSlide = document.createElement('div')\r\n $singleSlide.classList.add('modal-single-carousel__slide', 'modal-single-carousel__item')\r\n if(!item.iframeSrc) {\r\n $singleSlide.innerHTML = `${this.options.noItemMessage}
`\r\n this.$filterPanel.prepend(infoDiv)\r\n return\r\n }\r\n }\r\n\r\n // Handlers\r\n inputHandler() {\r\n this.updateValue()\r\n this.updateUI()\r\n }\r\n\r\n defaultDropdowns(e) {\r\n e.preventDefault()\r\n const $dropdowns = this.$filterOptions.querySelectorAll('.dropdown')\r\n $dropdowns.forEach($dd => {\r\n $dd.setValue('')\r\n })\r\n }\r\n\r\n addListeners() {\r\n const $inputs = this.$filterOptions.querySelectorAll('input')\r\n const $dropdowns = this.$filterOptions.querySelectorAll('.dropdown')\r\n\r\n $inputs.forEach($inp => $inp.addEventListener('change', () => this.inputHandler()))\r\n $dropdowns.forEach($dd => $dd.addEventListener('select', () => this.inputHandler()))\r\n\r\n this.$filterContainer.addEventListener('UIFilterUpdated', () => this.onFilterUpdate())\r\n\r\n this.$filterAllBtn?.addEventListener('click', (e) => this.defaultDropdowns(e))\r\n }\r\n }\r\n\r\n class FilterSelection extends Filter {\r\n constructor(container) {\r\n super(container)\r\n\r\n this.filterValues = this.$filterContainer.dataset.filters ?\r\n this.$filterContainer.dataset.filters.split(',').map(f => {\r\n return {\r\n name: f.trim(),\r\n value: []\r\n }\r\n }) : []\r\n }\r\n\r\n init() {\r\n this.eventBuilder()\r\n this.updateValue()\r\n this.updateUI()\r\n this.addListeners()\r\n }\r\n\r\n updateUI() {\r\n if(this.carouselList) {\r\n this.filteringCarousel()\r\n return\r\n }\r\n this.getFlipStates()\r\n this.filteringItems()\r\n this.noItemsUpdate()\r\n this.flipAnimate()\r\n }\r\n\r\n // Values and filtering\r\n updateValue() {\r\n const $dropdowns = gsap.utils.toArray(this.$filterOptions.querySelectorAll('.dropdown'))\r\n this.filterValues.forEach(v => {\r\n const $dd = $dropdowns[$dropdowns.findIndex($dd => $dd.classList.contains(`dropdown--filter-${v.name}`))]\r\n v.value = []\r\n v.value.push($dd.value || 'all')\r\n })\r\n }\r\n\r\n filteringCarousel() {\r\n const filterSelector = `${this.filterValues.map((val) => `[data-${val.name}${val.value[0] === 'all' ? '' : `=\"${val.value[0]}\"`}]`).join('')}`\r\n \r\n $(this.$filterCarousel).slick('slickUnfilter')\r\n $(this.$filterCarousel).slick('slickFilter',filterSelector)\r\n\r\n const $lazyload = this.$filterCarousel.querySelectorAll('.lazyload')\r\n $lazyload.forEach($bg => {\r\n if(!$bg.classList.contains('bg-img--loaded')) new LazyLoad($bg)\r\n })\r\n }\r\n\r\n filteringItems() {\r\n \r\n this.$filterItems.forEach($item => {\r\n let activeCond = []\r\n this.filterValues.forEach(fv => {\r\n const filterName = fv.name\r\n const filterValue = fv.value\r\n \r\n activeCond.push(filterValue.findIndex(val => this.filterMatch($item.dataset[filterName], val) || val === 'all') === -1 ? false : true)\r\n })\r\n\r\n if(!activeCond.every(cond => cond)) {\r\n $item.style.display = 'none'\r\n $item.classList.add(`${CLASS_FILTER_PRE}__panel-item--hidden`)\r\n return\r\n }\r\n\r\n $item.style.display = 'flex'\r\n $item.classList.remove(`${CLASS_FILTER_PRE}__panel-item--hidden`)\r\n \r\n })\r\n }\r\n\r\n // Callbacks\r\n inputHandler() {\r\n this.updateValue()\r\n this.updateUI()\r\n }\r\n }\r\n\r\n return {\r\n Filter,\r\n FilterSelection\r\n }\r\n})()","export const YoutubeApi = (function () {\r\n\r\n class YtPlayer extends EventTarget {\r\n constructor(container, player) {\r\n super()\r\n this.container = container\r\n this.videoPlayer = player || container\r\n this.videoID = this.videoPlayer.dataset.videoId || null\r\n this.player = null\r\n this.playerReady = false\r\n this.events = []\r\n this._init()\r\n }\r\n\r\n async _init() {\r\n if(window.YT === undefined) {\r\n await new LoadYtScript().loadScript()\r\n this.createEvents()\r\n this.callApi()\r\n return\r\n }\r\n this.createEvents()\r\n this.callApi()\r\n }\r\n\r\n createEvents() {\r\n this.events['loaded'] = new CustomEvent('loaded', {\r\n bubbles: true,\r\n detail: {\r\n getValue: () => this.videoPlayer\r\n }\r\n })\r\n this.events['play'] = new CustomEvent('play', { bubbles: true })\r\n this.events['pause'] = new CustomEvent('pause', { bubbles: true })\r\n this.events['ended'] = new CustomEvent('ended', { bubbles: true })\r\n }\r\n\r\n async callApi() {\r\n const target = await this.createPlayer()\r\n this.playerReady = true\r\n this.dispatchEvent(this.events['loaded'])\r\n }\r\n\r\n createPlayer() {\r\n return new Promise((resolve, reject) => {\r\n this.player = new YT.Player(this.videoPlayer, {\r\n height: '100%',\r\n width: '100%',\r\n videoId: `${this.videoID}`,\r\n playerVars: {\r\n 'playsinline': 1,\r\n // 'autoplay': 0,\r\n 'controls': 0,\r\n 'autohide': 1,\r\n // 'wmode': 'opaque',\r\n },\r\n events: {\r\n 'onReady': (e) => {\r\n resolve(e.target)\r\n this.onPlayerReady(e)\r\n },\r\n 'onStateChange': (e) => this.onPlayerStateChange(e)\r\n },\r\n\r\n })\r\n })\r\n\r\n }\r\n\r\n\r\n\r\n // Generic methods\r\n onPlayerReady(e) {\r\n //console.log(e.target.playVideo())\r\n }\r\n\r\n onPlayerStateChange(e) {\r\n this.playing = (this.player.getPlayerState() === 1) ? true : false\r\n switch (this.player.getPlayerState()) {\r\n case 1:\r\n this.dispatchEvent(this.events['play'])\r\n break\r\n default:\r\n this.dispatchEvent(this.events['pause'])\r\n }\r\n }\r\n\r\n // callbacks\r\n play() {\r\n this.player.playVideo()\r\n }\r\n pause() {\r\n this.player.pauseVideo()\r\n }\r\n stop() {\r\n this.player.stopVideo()\r\n }\r\n }\r\n\r\n function LoadYtScript() {\r\n this.scriptTag = document.querySelector('[id*=\"youtube-api\"]')\r\n }\r\n\r\n LoadYtScript.prototype = {\r\n\r\n loadScript() {\r\n return new Promise((resolve, reject) => {\r\n if(!this.scriptTag) {\r\n this.scriptTag = document.createElement('script')\r\n this.scriptTag.setAttribute('id', `youtube-api--${Math.round(Math.random() * 10000)}`)\r\n this.scriptTag.src = \"https://www.youtube.com/iframe_api\"\r\n document.body.append(this.scriptTag)\r\n }\r\n\r\n this.scriptTag?.addEventListener('load', function() {\r\n setTimeout(() => resolve(), 1000)\r\n })\r\n this.scriptTag?.addEventListener('error', reject)\r\n })\r\n }\r\n }\r\n\r\n return {\r\n YtPlayer,\r\n LoadYtScript\r\n }\r\n\r\n})()\r\n\r\nexport default YoutubeApi","import VimeoPlayer from \"@vimeo/player\"\r\nexport const VimeoApi = (function () {\r\n\r\n class Player extends EventTarget{\r\n constructor(container, player, options) {\r\n super()\r\n \r\n this.container = container\r\n this.videoPlayer = player || container\r\n this.videoID = this.videoPlayer.dataset.videoId || null\r\n this.player = null\r\n this.playerReady = false\r\n this.events = []\r\n\r\n this.options = Object.assign({\r\n autoplay: false,\r\n background: false\r\n }, {\r\n ...options \r\n })\r\n this._init()\r\n }\r\n\r\n _init() {\r\n this.createEvents()\r\n this.callApi()\r\n }\r\n\r\n createEvents() {\r\n this.events['loaded'] = new CustomEvent('loaded', {\r\n bubbles: true,\r\n detail: {\r\n getValue: () => this.videoPlayer\r\n }\r\n })\r\n this.events['play'] = new CustomEvent('play', {bubbles: true})\r\n this.events['pause'] = new CustomEvent('pause', {bubbles: true})\r\n this.events['ended'] = new CustomEvent('ended', {bubbles: true})\r\n }\r\n\r\n async callApi() {\r\n await this.createPlayer()\r\n this.playerReady = true\r\n this.addPlayerListeners()\r\n this.dispatchEvent(this.events['loaded'])\r\n }\r\n\r\n createPlayer() {\r\n\r\n this.player = new VimeoPlayer(this.videoPlayer, {\r\n height: '100%',\r\n width: '100%',\r\n playsinline: false,\r\n responsive: true,\r\n controls: false,\r\n id: `${this.videoID}`,\r\n byline: false,\r\n background: this.options.background,\r\n loop: this.options.loop,\r\n autoplay: false\r\n })\r\n\r\n return this.player.ready()\r\n \r\n }\r\n\r\n // callbacks\r\n play() {\r\n this.player.play()\r\n }\r\n pause() {\r\n this.player.pause()\r\n }\r\n stop() {\r\n this.player.stop()\r\n }\r\n seek(dur) {\r\n this.player.setCurrentTime(dur)\r\n }\r\n\r\n // Adding listeners\r\n addPlayerListeners() {\r\n this.player.on('play', () => {\r\n this.playing = true\r\n this.dispatchEvent(this.events['play'])\r\n })\r\n this.player.on('pause', () => {\r\n this.playing = false\r\n this.dispatchEvent(this.events['pause'])\r\n })\r\n this.player.on('ended', () => {\r\n this.playing = false\r\n this.dispatchEvent(this.events['ended'])\r\n })\r\n }\r\n }\r\n\r\n return {\r\n Player\r\n }\r\n\r\n})()\r\n\r\nexport default VimeoApi\r\n","import {gsap} from 'gsap'\r\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\"\r\nimport {utilities} from \"@/scripts/common/utilities\"\r\nimport {YoutubeApi} from \"./YouTube\"\r\nimport {VimeoApi} from \"./Vimeo\"\r\ngsap.registerPlugin(ScrollTrigger)\r\n\r\n\r\nexport const Video = (() => {\r\n\r\n class VideoBanner {\r\n constructor(container, options) {\r\n this.$videoContainer = container\r\n this.$videoNative = this.$videoContainer.querySelector('.bg-vid')\r\n this.$videoIframe = this.$videoContainer.querySelector('.bg-iframe')\r\n this.$videoPlayer = this.$videoContainer.querySelector('.bg-vid__player')\r\n this.$videoControls = this.$videoContainer.querySelector('.bg-vid__controls')\r\n this.$videoPlayBtn = this.$videoContainer.querySelector('.bg-vid__controls-play')\r\n this.$articleElems = gsap.utils.toArray(this.$videoContainer.querySelectorAll('.article-generic > *'))\r\n this.videoPlaying = false\r\n this.videoType = this.$videoContainer.dataset.videoType || 'native'\r\n if(this.videoType === 'html5') this.videoType = 'native'\r\n this.playerReady = false\r\n this.Player = null\r\n this.controlRevealTimeoutFunc = null\r\n this.mainTl = null\r\n this.controlRevealTime = 5000\r\n this.scrollController = null\r\n \r\n this.options = Object.assign({\r\n fitIframe: true,\r\n background: this.$videoContainer.dataset.background === \"1\",\r\n autoplay: this.$videoContainer.dataset.autoplay === \"1\" && !this.$videoContainer.closest('.card-carousel'),\r\n loop: this.$videoContainer.dataset.loop === \"1\"\r\n },\r\n {\r\n ...options\r\n })\r\n\r\n this.scrollOptions = {\r\n trigger: this.$videoContainer,\r\n start: 'top bottom',\r\n onToggle: self => {\r\n if(this.options.background) {\r\n !self.isActive ? this._pauseVideo() : this._playVideo()\r\n return\r\n }\r\n if(!self.isActive) this._pauseVideo()\r\n }\r\n }\r\n this.init()\r\n }\r\n\r\n init() {\r\n this.makePlayer()\r\n this.makeAnim()\r\n this.$videoContainer.getVideo = () => this\r\n }\r\n\r\n // Iframe size\r\n makeIframeFit() {\r\n utilities.resizePlayer(this.$videoContainer)\r\n }\r\n\r\n // Iframe utilities\r\n toIframePlayer(player, command){\r\n if (player == null || command == null || player.contentWindow == null) return\r\n player.contentWindow.postMessage(JSON.stringify(command), \"*\");\r\n }\r\n\r\n // Making player\r\n async makePlayer() {\r\n switch(this.videoType) {\r\n case 'youtube':\r\n this.Player = await this.ytLoader()\r\n this.playerReady = true\r\n if(this.options.fitIframe) this.makeIframeFit()\r\n this.addingListener()\r\n break\r\n case 'vimeo':\r\n this.Player = await this.vmLoader()\r\n this.playerReady = true\r\n this.addingListener()\r\n if(this.options.fitIframe) this.makeIframeFit()\r\n break\r\n default:\r\n this.Player = this.$videoNative\r\n this.playerReady = true\r\n this.addingListener()\r\n }\r\n }\r\n\r\n ytLoader() {\r\n return new Promise((resolve, reject) => {\r\n const player = new YoutubeApi.YtPlayer(this.$videoContainer, this.$videoPlayer, this.options)\r\n player.addEventListener('loaded', () => {\r\n resolve(player)\r\n })\r\n })\r\n }\r\n\r\n vmLoader() {\r\n return new Promise((resolve, reject) => {\r\n const player = new VimeoApi.Player(this.$videoContainer, this.$videoPlayer, this.options)\r\n player.addEventListener('loaded', () => {\r\n resolve(player)\r\n })\r\n })\r\n }\r\n\r\n _playVideo() {\r\n if(!this.Player) return\r\n this.videoPlaying = true\r\n this.Player?.play()\r\n }\r\n\r\n _pauseVideo() {\r\n if(!this.Player) return\r\n this.videoPlaying = false\r\n this.Player?.pause()\r\n }\r\n\r\n // Animation\r\n makeAnim() {\r\n this.mainTl = gsap.timeline({paused: true})\r\n if(this.$videoPlayBtn)\r\n this.mainTl.to(this.$videoPlayBtn, {\r\n duration: 0.4,\r\n scale: 1.2,\r\n ease: 'power2.inOut',\r\n autoAlpha: 0\r\n })\r\n if(this.$articleElems.length) {\r\n this.mainTl.to(this.$articleElems, {\r\n stagger: -0.05,\r\n y: 50,\r\n autoAlpha: 0,\r\n ease: 'power2.inOut',\r\n display: 'none'\r\n }, 0)\r\n } \r\n }\r\n\r\n // Controls\r\n toggleVideo() {\r\n this.videoPlaying ? this._pauseVideo() : this._playVideo()\r\n }\r\n\r\n // UI updates\r\n updateUI() {\r\n if(this.videoPlaying) {\r\n this.$videoContainer.classList.add('playing')\r\n this.$videoContainer.classList.remove('paused')\r\n this.mainTl.play()\r\n return\r\n } \r\n this.$videoContainer.classList.remove('playing')\r\n this.$videoContainer.classList.add('paused')\r\n this.mainTl.reverse()\r\n \r\n }\r\n\r\n // Callbacks\r\n updatePlay(play) {\r\n this.videoPlaying = play\r\n this.updateUI()\r\n } \r\n\r\n // endScreenUpdate() {\r\n // if(this.videoType === 'vimeo' && !this.options.loop) {\r\n // this.Player?.seek(0)\r\n // this.Player.play()\r\n // }\r\n // }\r\n\r\n // Resize Callbacks\r\n resizeFunc() {\r\n return utilities.debounce(() => {\r\n if(this.options.fitIframe) this.makeIframeFit()\r\n }, 250)\r\n }\r\n\r\n addingListener() {\r\n this.$videoControls?.addEventListener('click', () => this.toggleVideo())\r\n this.Player?.addEventListener('play', () => this.updatePlay(true))\r\n this.Player?.addEventListener('pause', () => this.updatePlay(false))\r\n this.Player?.addEventListener('ended', () => this.updatePlay(false))\r\n //if(this.videoType === \"vimeo\") this.Player?.addEventListener('ended', () => this.endScreenUpdate())\r\n this.scrollController = ScrollTrigger.create(this.scrollOptions)\r\n\r\n window.addEventListener('resize', this.resizeFunc())\r\n }\r\n }\r\n\r\n return {\r\n VideoBanner\r\n }\r\n})()\r\n\r\nexport default Video"],"sourceRoot":""}