{"version":3,"sources":["webpack:///./LeLab.Web/src/js/media-viewer.entry.js"],"names":["PageComponent","constructor","node","this","json","isFirstInit","JSON","parse","querySelector","innerHTML","error","console","setTimeout","history","back","slider","slideCount","slides","length","sliderOpts","container","prevButton","nextButton","nav","loop","speed","startIndex","PageState","get","onInit","autoplay","createHtml","clickHandler","click","bind","addEventListener","querySelectorAll","TinySlider","events","on","i","set","Math","max","displayIndex","forEach","x","parentNode","removeChild","previousLabel","nextLabel","closeLabel","tns","type","appendChild","createImageSlide","createYoutubeSlide","obj","elm","document","createElement","classList","add","setAttribute","src","alt","poster","videoId","picture","e","play","target","closest","slide","video","dataset","iframe","width","frameBorder","allow","allowfullscreen","prepend","destroy","removeEventListener"],"mappings":"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","file":"media-viewer.js","sourcesContent":["import \"./media-viewer.scss\";\r\nimport { PageComponent, PageState } from \"barba\";\r\nimport TinySlider from \"utils/tiny-slider\";\r\n\r\nclass MediaViewer {\r\n    constructor({ node }) {\r\n        this.node = node;\r\n        this.json = null;\r\n        this.isFirstInit = true;\r\n\r\n        try {\r\n            this.json = JSON.parse(this.node.querySelector('script[type=\"application/json\"]').innerHTML);\r\n        } catch (error) {\r\n            console.error(\"Media Viewer, error in JSON format.\");\r\n            setTimeout(() => history.back(), 1000);\r\n            return;\r\n        }\r\n\r\n        this.slider = null;\r\n        this.slideCount = this.json.slides ? this.json.slides.length : 0;\r\n        this.sliderOpts = () => ({\r\n            container: this.node.querySelector(\".media-viewer__tns\"),\r\n            prevButton: this.node.querySelector(\".media-viewer__prev\"),\r\n            nextButton: this.node.querySelector(\".media-viewer__next\"),\r\n            nav: false,\r\n            loop: true,\r\n            speed: 500,\r\n            startIndex: PageState.get(\"startIndex\") || 0,\r\n            onInit: () => this.autoplay()\r\n        });\r\n\r\n        this.createHtml();\r\n\r\n        this.clickHandler = this.click.bind(this);\r\n        this.node.addEventListener(\"click\", this.clickHandler);\r\n\r\n        if (this.node.querySelectorAll(\".media-viewer__item\").length > 1) {\r\n            this.slider = new TinySlider(this.sliderOpts);\r\n            this.slider.events.on(\"indexChanged\", (i) => {\r\n                PageState.set(\"startIndex\", Math.max(0, i.displayIndex - 1));\r\n                // Remove all video iframe\r\n                this.node.querySelectorAll(\".media-viewer__iframe\").forEach((x) => {\r\n                    x.parentNode.removeChild(x);\r\n                });\r\n            });\r\n        } else {\r\n            this.autoplay();\r\n        }\r\n    }\r\n\r\n    createHtml() {\r\n        this.node.innerHTML = `\r\n            <img class=\"media-viewer__bg-img\" src=\"/dist/assets/footer/mountain.svg\" alt=\"\" />\r\n            <div class=\"media-viewer__ctrl\">\r\n                <button class=\"media-viewer__prev btn-secondary ${this.slideCount <= 1 ? \"hidden\" : \"\"}\" title=\"${\r\n            this.json.previousLabel || \"\"\r\n        }\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13.38\" height=\"8.33\" viewBox=\"0 0 13.38 8.33\"><path fill=\"currentcolor\" d=\"M4.24 8.09a.69.69 0 01-1.05 0L.22 4.76a.92.92 0 01-.1-1.05.7.7 0 01.1-.13L3.2.24a.69.69 0 011.05 0 .9.9 0 010 1.18l-1.7 1.91h10.1c.4 0 .73.38.73.84s-.33.83-.74.83H2.53l1.71 1.9c.3.33.3.86 0 1.19z\"/></svg>\r\n                </button>\r\n                <button class=\"media-viewer__next btn-secondary ${this.slideCount <= 1 ? \"hidden\" : \"\"}\" title=\"${\r\n            this.json.nextLabel || \"\"\r\n        }\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13.38\" height=\"8.33\" viewBox=\"0 0 13.38 8.33\"><path fill=\"currentcolor\" d=\"M9.13.24a.69.69 0 011.05 0l2.98 3.34a.93.93 0 01.1 1.05.75.75 0 01-.1.13l-2.98 3.33a.69.69 0 01-1.05 0 .9.9 0 010-1.18L10.83 5H.74C.34 5 0 4.63 0 4.17s.33-.84.74-.84h10.1l-1.7-1.9a.9.9 0 010-1.19z\"/></svg>\r\n                </button>\r\n                <a class=\"media-viewer__close btn-primary\" href=\"javascript:history.back()\" title=\"${\r\n                    this.json.closeLabel || \"\"\r\n                }\"></a>\r\n            </div>\r\n            <div class=\"media-viewer__tns\"></div>\r\n        `;\r\n\r\n        if (!this.json.slides) return;\r\n\r\n        const tns = this.node.querySelector(\".media-viewer__tns\");\r\n        this.json.slides.forEach((x) => {\r\n            if (!x.type) return;\r\n            switch (x.type) {\r\n                case \"image\":\r\n                    tns.appendChild(this.createImageSlide(x));\r\n                    break;\r\n                case \"youtube\":\r\n                    tns.appendChild(this.createYoutubeSlide(x));\r\n                    break;\r\n            }\r\n        });\r\n    }\r\n\r\n    createImageSlide(obj) {\r\n        let elm = document.createElement(\"div\");\r\n        elm.classList.add(\"media-viewer__item\");\r\n        elm.setAttribute(\"data-no-context-menu\", \"\");\r\n\r\n        const src = obj.src || null;\r\n\r\n        if (!src) return elm;\r\n\r\n        elm.innerHTML = `\r\n            <picture class=\"media-viewer__pic context-menu-disabled\">\r\n                <source type=\"image/webp\" srcset=\"${src}?mode=max&format=webp&width=3840&height=2160\" />\r\n                <source type=\"image/jpeg\" srcset=\"${src}?mode=max&format=jpeg&bgcolor=222121&width=3840&height=2160\" />\r\n                <img class=\"media-viewer__img\" src=\"${src}?mode=max&format=jpeg&bgcolor=222121&width=3840&height=2160\" alt=\"${\r\n            obj.alt || \"\"\r\n        }\" data-loaded-class=\"opacity-100\" />\r\n            </picture>\r\n        `;\r\n\r\n        return elm;\r\n    }\r\n\r\n    createYoutubeSlide(obj) {\r\n        let elm = document.createElement(\"div\");\r\n        elm.classList.add(\"media-viewer__item\");\r\n\r\n        const poster = obj.poster || null;\r\n        const videoId = obj.videoId || null;\r\n\r\n        if (!videoId) return elm;\r\n\r\n        let picture = \"\";\r\n        if (poster) {\r\n            picture = `\r\n                <picture class=\"media-viewer__pic\">\r\n                    <source media=\"(min-width: 1440px)\" type=\"image/webp\" srcset=\"${poster}?mode=crop&format=webp&width=1920&height=1080\" />\r\n                    <source media=\"(min-width: 1200px)\" type=\"image/webp\" srcset=\"${poster}?mode=crop&format=webp&width=1440&height=810\" />\r\n                    <source media=\"(min-width: 992px)\" type=\"image/webp\" srcset=\"${poster}?mode=crop&format=webp&width=1200&height=675\" />\r\n                    <source media=\"(min-width: 768px)\" type=\"image/webp\" srcset=\"${poster}?mode=crop&format=webp&width=992&height=558\" />\r\n                    <source media=\"(min-width: 568px)\" type=\"image/webp\" srcset=\"${poster}?mode=crop&format=webp&width=768&height=432\" />\r\n                    <source type=\"image/webp\" srcset=\"${poster}?mode=crop&format=webp&width=568&height=320\" />\r\n\r\n                    <source media=\"(min-width: 1440px)\" type=\"image/jpeg\" srcset=\"${poster}?mode=crop&format=jpeg&bgcolor=222121&width=1920&height=1080\" />\r\n                    <source media=\"(min-width: 1200px)\" type=\"image/jpeg\" srcset=\"${poster}?mode=crop&format=jpeg&bgcolor=222121&width=1440&height=810\" />\r\n                    <source media=\"(min-width: 992px)\" type=\"image/jpeg\" srcset=\"${poster}?mode=crop&format=jpeg&bgcolor=222121&width=1200&height=675\" />\r\n                    <source media=\"(min-width: 768px)\" type=\"image/jpeg\" srcset=\"${poster}?mode=crop&format=jpeg&bgcolor=222121&width=992&height=558\" />\r\n                    <source media=\"(min-width: 568px)\" type=\"image/jpeg\" srcset=\"${poster}?mode=crop&format=jpeg&bgcolor=222121&width=768&height=432\" />\r\n                    <source type=\"image/jpeg\" srcset=\"${poster}?mode=crop&format=jpeg&bgcolor=222121&width=568&height=320\" />\r\n                    \r\n                    <img class=\"media-viewer__img object-cover\" src=\"${poster}?mode=crop&format=jpeg&bgcolor=222121&width=1920&height=1080\" alt=\"\" data-loaded-class=\"opacity-100\" />\r\n                </picture>\r\n            `;\r\n        }\r\n\r\n        elm.innerHTML = `\r\n            <div class=\"media-viewer__video relative\" data-video-id=\"${videoId}\">\r\n                <div class=\"media-viewer__poster\">\r\n                    ${picture}\r\n                    <div class=\"media-viewer__play\">\r\n                        <button class=\"btn-primary h-48 px-0 w-64 md:h-64 md:w-80 rounded\">\r\n                            <span class=\"bg-center bg-no-repeat bg-play-secondary-800 bg-contain block h-20 w-20\"></span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        `;\r\n\r\n        return elm;\r\n    }\r\n\r\n    click(e) {\r\n        const play = e.target.closest(\".media-viewer__play\");\r\n        if (!play) return;\r\n\r\n        const video = play.closest(\".media-viewer__video\");\r\n        if (!video) return;\r\n\r\n        this.play();\r\n    }\r\n\r\n    play() {\r\n        let slide = null;\r\n        if (this.slideCount > 1) {\r\n            slide = this.node.querySelector(\".tns-slide-active\");\r\n        } else {\r\n            slide = this.node.querySelector(\".media-viewer__item\");\r\n        }\r\n        if (!slide) return;\r\n\r\n        const video = slide.querySelector(\".media-viewer__video\");\r\n        if (!video) return;\r\n\r\n        const videoId = video.dataset.videoId;\r\n        if (!videoId) return;\r\n\r\n        let iframe = document.createElement(\"iframe\");\r\n        iframe.classList.add(\"media-viewer__iframe\");\r\n        iframe.width = 560;\r\n        iframe.width = 315;\r\n        iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;\r\n        iframe.frameBorder = 0;\r\n        iframe.allow = \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\";\r\n        iframe.allowfullscreen = \"\";\r\n\r\n        video.prepend(iframe);\r\n    }\r\n\r\n    autoplay() {\r\n        if (this.isFirstInit) this.play();\r\n        this.isFirstInit = false;\r\n    }\r\n\r\n    destroy() {\r\n        this.node.removeEventListener(\"click\", this.clickHandler);\r\n\r\n        if (this.slider && this.slider.destroy) {\r\n            this.slider.destroy();\r\n        }\r\n\r\n        delete this.node;\r\n        delete this.json;\r\n        delete this.isFirstInit;\r\n        delete this.slider;\r\n        delete this.slideCount;\r\n        delete this.sliderOpts;\r\n        delete this.clickHandler;\r\n    }\r\n}\r\n\r\nnew PageComponent(\".media-viewer\", MediaViewer);\r\n"],"sourceRoot":""}