${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\"\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\"\nimport { ScrollToPlugin } from \"gsap/ScrollToPlugin\"\nimport settings from \"@/scripts/common/settings\"\nimport { addScrollController } from \"@/scripts/common/api/scrolltrigger.services\"\n\ngsap.registerPlugin(ScrollTrigger)\ngsap.registerPlugin(ScrollToPlugin)\n\nexport default class Pin {\n constructor(pin, container, options) {\n this.$pin = pin\n this.$pinContainer = container\n this.scrollController = null\n this.isMobile = window.innerWidth < settings.breakpoints.mobile\n\n this.scrollPinOptions = {\n trigger: this.$pin,\n endTrigger: this.$pinContainer || this.$pin,\n start: 'top top',\n end: 'bottom bottom',\n pin: this.$pin,\n pinSpacing: this.isMobile ? false : true,\n toggleClass: {\n targets: this.$pin,\n className: `pinned`\n }\n }\n\n Object.assign(this.scrollPinOptions, options)\n\n this.init()\n }\n\n init() {\n this.addPinSCrollController()\n }\n\n // Options update\n updatePinOption(options) {\n Object.assign(this.scrollPinOptions, options)\n }\n\n // Callbacks\n refresh() {\n this.scrollController.refresh()\n }\n\n addPinSCrollController() {\n if (this.scrollController) this.scrollController = null\n this.scrollController = ScrollTrigger.create(this.scrollPinOptions)\n addScrollController(this.scrollController)\n }\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","import {Video} from './Video'\r\n(async function(){\r\n const $videoBanner = document.querySelectorAll('.banner-video')\r\n $videoBanner.forEach($v => new Video.VideoBanner($v))\r\n})()\r\n\r\n"],"sourceRoot":""}