{"version":3,"sources":["webpack:///./modules/YouTube.ts"],"names":["__webpack_require__","r","__webpack_exports__","_helpers_helperFunctions__WEBPACK_IMPORTED_MODULE_0__","_helpers_DOMHelpers__WEBPACK_IMPORTED_MODULE_1__","YouTube","element","this","ignoreLoadedEvent","blockThirdParty","dataset","block","videoPlayBtn","querySelector","poster","youTubeId","videoId","iFrameContainer","posterFormat","isIos","Object","counter","option","autoplay","init","setup","selector","Array","from","document","querySelectorAll","filter","node","moduleInitialized","forEach","prototype","_this","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","_a","isTouch","playVideo","pauseVideo"],"mappings":"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","file":"./modules/YouTube.d8c1659a.js","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}"],"sourceRoot":""}