{"version":3,"sources":["webpack:///./modules/YouTubeVideo.ts"],"names":["__webpack_require__","r","__webpack_exports__","_helpers_helperFunctions__WEBPACK_IMPORTED_MODULE_0__","YouTubeVideo","element","_this","this","videoUrl","dataset","videoPlayBtn","querySelector","youTubeId","getVideoId","iFrame","posterFormat","consentImageUrl","consentImgUrl","isIos","Object","counter","option","autoplay","donotallowfullscreen","document","addEventListener","removeConsentImage","init","checkIfConsentApiIsActive","getCmpYTConsent","loadConsentImage","setup","selector","Array","from","querySelectorAll","filter","node","moduleInitialized","forEach","prototype","loadPoster","window","Eucerin","registerIFrameVideo","__cmp","vendorConsents","s30","consentApi","error","console","warn","createFallbackImage","remove","format","poster","Image","src","e","checkPoster","target","naturalWidth","imgWidth","posterImage","checkIfImageFits","offsetWidth","appendImage","imageUrl","fallbackImgUrl","setAttribute","className","childNodes","length","insertBefore","appendChild","removeBlocker","classList","addButtonClickListener","add","funcButtonClick","loadIframe","playInLayer","isMobile","layerContent","createElement","innerHTML","outerHTML","ytModule","ytBtnPlayer_1","removeAttribute","layer","open","layerModifierClasses","callBackFn","removeEventListener","initPlayer","button","initModules","click","id","playerId","player","YT","Player","videoId","height","width","playerVars","rel","showinfo","autohide","modestbranding","events","onReady","event","autoPlayOnMobile","onPlayerReady","_a","playVideo","playFullscreen","url","match","iframe","getElementById","requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen","bind","pauseVideo"],"mappings":"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","file":"./modules/YouTubeVideo.1547bbc6.js","sourcesContent":["/// <reference path=\"../typings/facelift.d.ts\" />\r\nimport { isIOS } from '../helpers/helperFunctions';\r\n\r\nconst moduleSelector = '[data-module=\"YouTubeVideo\"]';\r\n\r\nexport default class YouTubeVideo {\r\n\r\n    private videoUrl: string;\r\n    private youTubeId: string;\r\n    private iFrame: HTMLElement;\r\n    private posterFormat: string[];\r\n    private consentImageUrl: string;\r\n    private videoPlayBtn: HTMLElement;\r\n    private counter;\r\n    private option: any;\r\n    playerId: number;\r\n    player: any;\r\n    isIos: boolean;\r\n    funcButtonClick: any;\r\n\r\n    static setup(selector: string = moduleSelector): void {\r\n        Array.from(document.querySelectorAll(selector)).filter((node: HTMLElement) => !node.dataset.moduleInitialized).forEach((element: HTMLElement) => {\r\n            new YouTubeVideo(element);\r\n            element.dataset.moduleInitialized = 'true';\r\n        });\r\n    }\r\n\r\n    constructor(public element: HTMLElement) {\r\n        this.videoUrl = this.element.dataset.videoUrl;\r\n        this.videoPlayBtn = this.element.querySelector('.video-btn-player');\r\n        this.youTubeId = this.getVideoId(this.videoUrl);\r\n        this.iFrame = this.element.querySelector('.yt-iframe-video');\r\n        this.posterFormat = ['maxresdefault', 'sddefault', 'hqdefault', '0'];\r\n        this.consentImageUrl = this.element.dataset.consentImgUrl;\r\n        this.isIos = isIOS();\r\n        this.counter = 0;\r\n        this.option = {\r\n            autoplay: 1,\r\n            donotallowfullscreen: 1\r\n        };\r\n\r\n        document.addEventListener('initYoutubeModule', () => {\r\n            this.removeConsentImage()\r\n            this.init()\r\n        }, false);\r\n\r\n        if (this.checkIfConsentApiIsActive()) {\r\n            if (!this.getCmpYTConsent()) {\r\n                this.loadConsentImage();\r\n            } else {\r\n                this.init();\r\n            }\r\n        } else {\r\n            this.init();\r\n        }\r\n    }\r\n\r\n    init() {\r\n        this.loadPoster();\r\n        window.Eucerin.registerIFrameVideo(this);\r\n    }\r\n\r\n    getCmpYTConsent(): boolean {\r\n        if (window.__cmp && typeof window.__cmp('getCMPData') === 'object' && window.__cmp('getCMPData').vendorConsents) {\r\n            return window.__cmp('getCMPData').vendorConsents.s30 ? true : false;\r\n        }\r\n        return false;\r\n    }\r\n\r\n\r\n    checkIfConsentApiIsActive(): boolean {\r\n        let consentApi = false;\r\n\r\n        try {\r\n            window.__cmp('consentStatus');\r\n            consentApi = true;\r\n        } catch (error) {\r\n            console.warn(\"ConsentManagerApi is Not Loaded\");\r\n        }\r\n\r\n        return consentApi;\r\n    }\r\n\r\n    private loadConsentImage() {\r\n        this.consentImageUrl ? this.createFallbackImage(this.consentImageUrl) : \"\";\r\n    }\r\n\r\n    private removeConsentImage() {\r\n        this.element.querySelector('.yt-video__poster') && this.element.querySelector('.yt-video__poster').remove();\r\n    }\r\n\r\n    loadPoster(format = this.posterFormat[this.counter]) {\r\n        if (!format) {\r\n            this.createFallbackImage();\r\n            return;\r\n        }\r\n        const poster = new Image();\r\n        poster.src = `https://img.youtube.com/vi/${this.youTubeId}/${format}.jpg`;\r\n\r\n        poster.addEventListener('load', (e: any) => {\r\n            this.checkPoster(e.target.naturalWidth, poster);\r\n        });\r\n        poster.addEventListener('error', () => { /* format not available */ });\r\n    }\r\n\r\n    checkPoster(imgWidth: number, posterImage) {\r\n        // if poster images are not available, the default of 120px width will be loaded  \r\n        if (imgWidth === 120) {\r\n            this.loadPoster(this.posterFormat[this.counter++]);\r\n        } else {\r\n            this.checkIfImageFits(imgWidth, posterImage);\r\n        }\r\n    }\r\n\r\n    checkIfImageFits(imgWidth, posterImage) {\r\n        if (this.element.offsetWidth * 0.8 > imgWidth) {\r\n            this.createFallbackImage();\r\n        } else {\r\n            this.appendImage(posterImage);\r\n        }\r\n    }\r\n\r\n    private createFallbackImage(imageUrl?: string): void {\r\n        let posterImage = new Image();\r\n        let fallbackImgUrl = imageUrl || this.element.dataset.fallbackImgUrl;\r\n\r\n        if (fallbackImgUrl) {\r\n            posterImage.src = fallbackImgUrl;\r\n            posterImage.setAttribute('data-img', 'fallback-img');\r\n\r\n        }\r\n\r\n        this.appendImage(posterImage);\r\n    }\r\n\r\n    appendImage(poster) {\r\n        poster.className = 'yt-video__poster';\r\n\r\n\r\n        if (this.iFrame.childNodes.length > 0) {\r\n            this.iFrame.insertBefore(poster, this.iFrame.childNodes[0]);\r\n        } else {\r\n            this.iFrame.appendChild(poster);\r\n\r\n        }\r\n    }\r\n\r\n    removeBlocker() {\r\n        this.element.classList.remove(\"yt-video__container--blocked\");\r\n        this.addButtonClickListener(); \r\n    }\r\n\r\n    addButtonClickListener() {\r\n        this.element.addEventListener('mouseenter', (e) => this.videoPlayBtn.classList.add(\"hover\"));\r\n        this.element.addEventListener('mouseleave', (e) => this.videoPlayBtn.classList.remove(\"hover\"));\r\n\r\n        this.funcButtonClick = () => this.loadIframe();\r\n        this.element.addEventListener('click', this.funcButtonClick);\r\n    }\r\n\r\n    loadIframe() {\r\n        const playInLayer = this.element.dataset.playInLayer === \"True\";\r\n        if (playInLayer && !Eucerin.isMobile) {\r\n           \r\n            let layerContent = document.createElement(\"div\");\r\n            layerContent.innerHTML = `<div class=\"yt-video-layer youtube-video\">\r\n                                            ${this.element.outerHTML}\r\n                                        </div>`;\r\n\r\n         const ytModule = layerContent.querySelector(\".youtube-video-content\"),\r\n            ytBtnPlayer = ytModule.querySelector('.video-btn-player') as HTMLElement;\r\n                        ytModule.removeAttribute(\"data-module-initialized\");\r\n                        ytModule.removeAttribute(\"data-play-in-layer\");\r\n           \r\n            window.Eucerin.layer.open(layerContent, { layerModifierClasses: 'youtube-video-in-layer' }, () => this.callBackFn(ytBtnPlayer));\r\n        } else {\r\n            this.element.removeEventListener('click', this.funcButtonClick, false);\r\n            this.initPlayer()\r\n        }\r\n    }\r\n\r\n    callBackFn(button: HTMLElement) {\r\n        window.Eucerin.initModules();\r\n        button.click()\r\n    }\r\n\r\n    initPlayer() {\r\n        this.iFrame.id = 'yt-video__iframe-' + this.playerId;\r\n        this.iFrame.innerHTML = '';\r\n\r\n        this.player = new window.YT.Player(this.iFrame.id, {\r\n            videoId: this.youTubeId,\r\n            height: '100%',\r\n            width: '100%',\r\n            playerVars: {\r\n                autoplay: this.option.autoplay,\r\n                rel: 0,\r\n                showinfo: 0,\r\n                autohide: 1,\r\n                modestbranding: 0,\r\n            },\r\n            events: {\r\n                onReady: (event) => {\r\n                    this.autoPlayOnMobile(event);\r\n                    this.onPlayerReady();\r\n                    \r\n                }\r\n            }\r\n        });\r\n    }\r\n\r\n    autoPlayOnMobile({ target }) {\r\n        target.playVideo();\r\n        if (!isIOS() && Eucerin.isMobile) {\r\n            this.playFullscreen(this.iFrame);\r\n        }\r\n    }\r\n\r\n    onPlayerReady() {\r\n        this.element.classList.remove('loader');\r\n    }\r\n\r\n    getVideoId(url) {\r\n        var regExp = /^.*(youtu\\.be\\/|v\\/|u\\/\\w\\/|embed\\/|watch\\?v=|\\&v=)([^#\\&\\?]*).*/;\r\n        var match = url.match(regExp);\r\n        return (match && match[2].length >= 11) ? match[2] : '';;\r\n    }\r\n\r\n    playFullscreen(target) {\r\n        var iframe: any = <HTMLVideoElement>document.getElementById(`${target.id}`);\r\n        var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;\r\n        if (requestFullScreen) {\r\n            requestFullScreen.bind(iframe)();\r\n        }\r\n    }\r\n\r\n    pauseVideo() {\r\n        this.player.pauseVideo();\r\n    }\r\n\r\n    playVideo() {\r\n        this.player.playVideo();\r\n    }\r\n}\r\n\r\n// Hot Module Replacement\r\nif (module.hot) {\r\n    let nodesCache: HMRNodes[] = Array.from(document.querySelectorAll(moduleSelector)).map((element: Node) => ({ nodeToReplace: element, nodeOrigin: element.cloneNode(true) }));\r\n    new YouTubeVideo.setup(moduleSelector);\r\n\r\n    module.hot.accept(() => {\r\n        new YouTubeVideo.setup(moduleSelector);\r\n    });\r\n\r\n    module.hot.dispose(() => {\r\n        nodesCache.forEach(({ nodeToReplace, nodeOrigin }) => { nodeToReplace = nodeToReplace.parentElement.replaceChild(nodeOrigin.cloneNode(true), nodeToReplace) });\r\n    });\r\n} else {\r\n    new YouTubeVideo.setup(moduleSelector);\r\n}"],"sourceRoot":""}