{"version":3,"file":"./modules/YouTube.xxxxxxxx.js","mappings":"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","sources":["webpack:///./modules/YouTube.ts"],"sourcesContent":["/// <reference path=\"../typings/bdfcw.d.ts\" />\r\n\r\nimport { isIOS } from '../helpers/helperFunctions';\r\nimport { hasClass } from \"../helpers/DOMHelpers\";\r\n\r\nconst moduleSelector = '[data-module=\"YouTube\"]';\r\n\r\nexport default class YouTube {\r\n\r\n    private youTubeId: string;\r\n    private iFrameContainer: HTMLElement;\r\n    private posterFormat: string[];\r\n    private videoPlayBtn: HTMLElement;\r\n    private counter: number;\r\n    private poster: HTMLElement;\r\n    private option: any;\r\n    private playerId: number;\r\n    private player: any;\r\n    private isIos: boolean;\r\n    private funcButtonClick: any;\r\n    private blockThirdParty: boolean;\r\n    private ignoreLoadedEvent: boolean = false;\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.blockThirdParty = this.element.dataset.block === \"True\";\r\n        this.videoPlayBtn = this.element.querySelector('.cw-btn-video-player');\r\n        this.poster = this.element.querySelector('.cw-video__poster');\r\n        this.youTubeId = this.element.dataset.videoId;\r\n        this.iFrameContainer = this.element.querySelector('.cw-video__iframe');\r\n        this.posterFormat = ['maxresdefault', 'sddefault', 'hqdefault', '0'];\r\n        this.isIos = isIOS();\r\n\r\n        this.counter = 0;\r\n        this.option = {\r\n            autoplay: 1\r\n        };\r\n        this.init();\r\n    }\r\n\r\n    private init() {\r\n        if (this.isIos) {\r\n            this.option = { autoplay: 0 };\r\n        }\r\n\r\n        this.poster.addEventListener('load', (e: any) => {\r\n            if(!this.ignoreLoadedEvent)\r\n                this.checkPoster(e.target.naturalWidth);\r\n        });\r\n\r\n        document.addEventListener('initYoutubeModule', () => {\r\n            this.removeBlocker();\r\n        }, false);\r\n\r\n        if (!this.blockThirdParty || this.getCmpYTConsent())\r\n            this.loadPoster();\r\n\r\n        this.addButtonClickListener();\r\n\r\n        window.Beiersdorf.registerIFrameVideo(this);\r\n    }\r\n\r\n    private loadPoster(format = this.posterFormat[this.counter]): void {\r\n        if (this.blockThirdParty && !this.getCmpYTConsent())\r\n            return;\r\n\r\n        if (!format) {\r\n            return;\r\n        }\r\n\r\n        const imageUrl: string = `https://img.youtube.com/vi/${this.youTubeId}/${format}.jpg`;\r\n        this.poster.setAttribute('src', imageUrl);\r\n    }\r\n\r\n    private checkPoster(imgWidth: number): void {\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);\r\n        }\r\n    }\r\n\r\n    private checkIfImageFits(imgWidth: number): void {\r\n        if (this.element.offsetWidth * 0.8 > imgWidth) {\r\n            this.createFallbackImage();\r\n        }\r\n    }\r\n\r\n    private createFallbackImage(): void {\r\n        let fallbackImgUrl = this.element.dataset.fallbackImgUrl;\r\n        if (fallbackImgUrl) {\r\n            this.ignoreLoadedEvent = true;\r\n            this.poster.setAttribute('src', fallbackImgUrl);\r\n        }\r\n    }\r\n\r\n    private getCmpYTConsent(): boolean {\r\n        const cmp: any = window.__cmp('getCMPData');\r\n        if (cmp == null)\r\n            return false;\r\n        const vendorConsents: any = cmp.vendorConsents;\r\n        if (vendorConsents == null)\r\n            return false\r\n        return vendorConsents.s30 ? true : false;\r\n    }\r\n\r\n    private removeBlocker(): void {\r\n        this.blockThirdParty = false;\r\n        this.loadPoster();\r\n        Array.from(document.querySelectorAll(\".cw-video__container\")).forEach((element: HTMLElement) => {\r\n            element.classList.remove(\"cw-video__container--blocked\");\r\n        });\r\n    }\r\n\r\n    private addButtonClickListener(): void {\r\n        this.funcButtonClick = () => this.loadIframe();\r\n        this.element.querySelector(\".cw-btn-video-player\").addEventListener('click', this.funcButtonClick);\r\n    }\r\n\r\n    private loadIframe(): void {\r\n        if (hasClass(this.element, 'cw-video-overlay')) {\r\n            window.Beiersdorf.openYtVideoLayer(this.element.dataset.videoUrl, 'cw-video');\r\n        } else {\r\n            this.element.removeEventListener('click', this.funcButtonClick, false);\r\n            this.videoPlayBtn.innerHTML = `\r\n        <div class=\"cw-spinner cw-spinner__loading cw-spinner--medium cw-spinner--youtube\">\r\n                <div class=\"cw-spinner__container\">\r\n                    <div class=\"cw-spinner__wheel\"></div>\r\n                </div>\r\n        </div>`;\r\n            this.initPlayer();\r\n        }\r\n    }\r\n\r\n    private initPlayer(): void {\r\n        this.iFrameContainer.id = 'cw-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                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                }\r\n            }\r\n        });\r\n    }\r\n\r\n    private autoPlayOnMobile({ target }): void {\r\n        if (window.Beiersdorf.isTouch) {\r\n            target.playVideo();\r\n        }\r\n    }\r\n\r\n    public pauseVideo(): void {\r\n        this.player.pauseVideo();\r\n    }\r\n\r\n    public playVideo(): void {\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}"],"names":["moduleSelector","element","ignoreLoadedEvent","this","blockThirdParty","dataset","block","videoPlayBtn","querySelector","poster","youTubeId","videoId","iFrameContainer","posterFormat","isIos","counter","option","autoplay","init","setup","selector","Array","from","document","querySelectorAll","filter","node","moduleInitialized","forEach","YouTube","addEventListener","e","checkPoster","target","naturalWidth","removeBlocker","getCmpYTConsent","loadPoster","addButtonClickListener","window","Beiersdorf","registerIFrameVideo","format","imageUrl","setAttribute","imgWidth","checkIfImageFits","offsetWidth","createFallbackImage","fallbackImgUrl","cmp","__cmp","vendorConsents","s30","classList","remove","funcButtonClick","loadIframe","openYtVideoLayer","videoUrl","removeEventListener","innerHTML","initPlayer","id","playerId","player","YT","Player","height","width","host","playerVars","rel","showinfo","autohide","modestbranding","events","onReady","event","autoPlayOnMobile","isTouch","playVideo","pauseVideo"],"sourceRoot":""}