{"version":3,"file":"./modules/YouTube.xxxxxxxx.js","mappings":"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","sources":["webpack:///./modules/YouTube.ts"],"sourcesContent":["import { isIOS, getYouTubeVideoIdFromUrl } from '../helpers/helperFunctions';\r\n\r\nconst moduleSelector = '[data-module=\"YouTube\"]';\r\n\r\nexport default class YouTube {\r\n\r\n    private enableClosedCaptions: boolean;\r\n    private videoUrl: string;\r\n    private youTubeId: string;\r\n    private iFrameContainer: HTMLElement;\r\n    private posterFormat: string[];\r\n    private videoPlayBtn: HTMLElement;\r\n    private counter;\r\n    private option: any;\r\n    private consentImageUrl: string;\r\n    isPortraitVideo: boolean;\r\n    playerId: number;\r\n    player: any;\r\n    isIos: boolean;\r\n    funcPlayButtonClick: 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 YouTube(element);\r\n            element.dataset.moduleInitialized = 'true';\r\n        });\r\n    }\r\n\r\n    constructor(public element: HTMLElement) {\r\n        this.enableClosedCaptions = this.element.hasAttribute(\"data-enable-closed-captions\");\r\n        this.videoUrl = this.element.dataset.videoUrl;\r\n        this.videoPlayBtn = this.element.querySelector('.nx-video__btn-play');\r\n        this.youTubeId = getYouTubeVideoIdFromUrl(this.videoUrl);\r\n        this.iFrameContainer = this.element.querySelector('.nx-video__iframe');\r\n        this.posterFormat = ['maxresdefault', 'sddefault', 'hqdefault', '0'];\r\n        this.consentImageUrl = this.element.dataset.consentImgUrl;\r\n        this.isPortraitVideo = this.videoUrl.includes('shorts') || this.element.dataset?.isPortraitVideo === \"True\";\r\n        this.isIos = isIOS();\r\n        this.counter = 0;\r\n        this.option = {\r\n            autoplay: 1\r\n        };\r\n\r\n        this.isPortraitVideo ? this.addVideo9To16Class(): \"\";\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.NiveaX.registerIFrameVideo(this);\r\n    }\r\n\r\n    getCmpYTConsent(): boolean {\r\n        return window.__cmp('getCMPData')?.vendorConsents?.s30 ? true : false;\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.debug(\"ConsentManagerApi is Not Loaded\");\r\n        }\r\n\r\n        return consentApi;\r\n    }\r\n\r\n    private loadConsentImage() {\r\n        this.createFallbackImage(this.consentImageUrl)\r\n    }\r\n\r\n    private removeConsentImage() {\r\n        this.element.querySelector('.nx-video__poster')?.remove();\r\n    }\r\n\r\n    private loadPoster(format = this.posterFormat[this.counter]) {\r\n        if (!format || this.element.querySelector(\".nx-video__poster\")) {\r\n            return;\r\n        }\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\r\n        poster.addEventListener('error', (error) => { console.log(error)  /* format not available */ });\r\n    }\r\n\r\n    private 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.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        if (fallbackImgUrl) {\r\n            posterImage.src = fallbackImgUrl;\r\n        }\r\n\r\n        this.appendImage(posterImage);\r\n    }\r\n\r\n    private appendImage(poster): void {\r\n        poster.className = 'nx-video__poster';\r\n\r\n        if (this.iFrameContainer.childNodes.length > 0) {\r\n            this.iFrameContainer.insertBefore(poster, this.iFrameContainer.childNodes[0]);\r\n        } else {\r\n            this.iFrameContainer.appendChild(poster);\r\n        }\r\n    }\r\n\r\n    removeBlocker() {\r\n        this.element.classList.remove(\"nx-video__container--blocked\");\r\n        this.addPlayButtonClickListener()\r\n    }\r\n\r\n    addPlayButtonClickListener() {\r\n        this.funcPlayButtonClick = () => this.loadIFrame();\r\n        this.element.addEventListener('click', this.funcPlayButtonClick);\r\n    }\r\n\r\n    loadIFrame() {\r\n        this.element.removeEventListener('click', this.funcPlayButtonClick, false);\r\n        \r\n        this.videoPlayBtn.innerHTML = `\r\n        <div class=\"nx-spinner nx-spinner__loading nx-spinner--medium nx-spinner--youtube\">\r\n                <div class=\"nx-spinner__container \">\r\n                    <div class=\"nx-spinner__wheel\"></div>\r\n                </div>\r\n        </div>`;\r\n\r\n        this.initPlayer();\r\n    }\r\n\r\n    initPlayer() {\r\n        this.iFrameContainer.id = 'nx-video__iframe-' + this.playerId;\r\n        \r\n        this.player = new window.YT.Player(this.iFrameContainer.id, {\r\n            videoId: this.youTubeId,\r\n            height: \"100%\",\r\n            width:  \"100%\",\r\n            host: 'http://www.youtube-nocookie.com',\r\n            playerVars: {\r\n                autoplay: this.option.autoplay,\r\n                cc_load_policy: this.enableClosedCaptions ? 1 : 0,\r\n                rel: 0,\r\n                modestbranding: 0\r\n            },\r\n            events: {\r\n                onReady: (event) => {\r\n                    this.autoPlayOnMobile(event);\r\n                }\r\n            }\r\n        });   \r\n    }\r\n\r\n    addVideo9To16Class(){\r\n         this.element.parentElement.classList.add('nx-video__portrait');\r\n    }\r\n\r\n    autoPlayOnMobile({ target }) {\r\n        if (window.NiveaX.isTouch) {\r\n            target.playVideo();\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    YouTube.setup(moduleSelector);\r\n\r\n    module.hot.accept(() => {\r\n        YouTube.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    YouTube.setup(moduleSelector);\r\n}\r\n"],"names":["moduleSelector","YouTube","setup","selector","Array","from","document","querySelectorAll","filter","node","dataset","moduleInitialized","forEach","element","constructor","this","enableClosedCaptions","hasAttribute","videoUrl","videoPlayBtn","querySelector","youTubeId","iFrameContainer","posterFormat","consentImageUrl","consentImgUrl","isPortraitVideo","includes","isIos","counter","option","autoplay","addVideo9To16Class","addEventListener","removeConsentImage","init","checkIfConsentApiIsActive","getCmpYTConsent","loadConsentImage","loadPoster","window","NiveaX","registerIFrameVideo","__cmp","vendorConsents","s30","consentApi","error","console","debug","createFallbackImage","remove","format","poster","Image","src","e","checkPoster","target","naturalWidth","log","imgWidth","posterImage","appendImage","imageUrl","fallbackImgUrl","className","childNodes","length","insertBefore","appendChild","removeBlocker","classList","addPlayButtonClickListener","funcPlayButtonClick","loadIFrame","removeEventListener","innerHTML","initPlayer","id","playerId","player","YT","Player","videoId","height","width","host","playerVars","cc_load_policy","rel","modestbranding","events","onReady","event","autoPlayOnMobile","parentElement","add","isTouch","playVideo","pauseVideo"],"sourceRoot":""}