{"version":3,"file":"lite-vimeo.1db9a171.js","sources":["../../../node_modules/@slightlyoff/lite-vimeo/lite-vimeo.js"],"sourcesContent":["/**\n *\n * The shadowDom / Intersection Observer version of Paul's concept:\n * https://github.com/paulirish/lite-youtube-embed\n *\n * A lightweight YouTube embed. Still should feel the same to the user, just\n * MUCH faster to initialize and paint.\n *\n * Thx to these as the inspiration\n *   https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html\n *   https://autoplay-youtube-player.glitch.me/\n *\n * Once built it, I also found these (👍👍):\n *   https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube\n *   https://github.com/Daugilas/lazyYT https://github.com/vb/lazyframe\n */\n/*\n * Vimeo example embed markup:\n<iframe src=\"https://player.vimeo.com/video/364402896\"\n  width=\"640\" height=\"360\"\n  frameborder=\"0\"\n  allow=\"autoplay; fullscreen\" allowfullscreen>\n</iframe>\n<p><a href=\"https://vimeo.com/364402896\">\n  Alex Russell - The Mobile Web: MIA</a> from\n    <a href=\"https://vimeo.com/fronteers\">Fronteers</a>\n    on <a href=\"https://vimeo.com\">Vimeo</a>.\n</p>\n */\nlet LiteVimeoEmbed = /** @class */ (() => {\n    class LiteVimeoEmbed extends HTMLElement {\n        constructor() {\n            super();\n            this.iframeLoaded = false;\n            this.setupDom();\n        }\n        static get observedAttributes() {\n            return ['videoid'];\n        }\n        connectedCallback() {\n            this.addEventListener('pointerover', LiteVimeoEmbed.warmConnections, {\n                once: true,\n            });\n            this.addEventListener('click', () => this.addIframe());\n        }\n        get videoId() {\n            return encodeURIComponent(this.getAttribute('videoid') || '');\n        }\n        set videoId(id) {\n            this.setAttribute('videoid', id);\n        }\n        get videoTitle() {\n            return this.getAttribute('videotitle') || 'Video';\n        }\n        set videoTitle(title) {\n            this.setAttribute('videotitle', title);\n        }\n        get videoPlay() {\n            return this.getAttribute('videoPlay') || 'Play';\n        }\n        set videoPlay(name) {\n            this.setAttribute('videoPlay', name);\n        }\n        get videoStartAt() {\n            return this.getAttribute('videoPlay') || '0s';\n        }\n        set videoStartAt(time) {\n            this.setAttribute('videoPlay', time);\n        }\n        get autoLoad() {\n            return this.hasAttribute('autoload');\n        }\n        set autoLoad(value) {\n            if (value) {\n                this.setAttribute('autoload', '');\n            }\n            else {\n                this.removeAttribute('autoload');\n            }\n        }\n        get autoPlay() {\n            return this.hasAttribute('autoplay');\n        }\n        set autoPlay(value) {\n            if (value) {\n                this.setAttribute('autoplay', 'autoplay');\n            }\n            else {\n                this.removeAttribute('autoplay');\n            }\n        }\n        /**\n         * Define our shadowDOM for the component\n         */\n        setupDom() {\n            const shadowDom = this.attachShadow({ mode: 'open' });\n            shadowDom.innerHTML = `\n      <style>\n        :host {\n          contain: content;\n          display: block;\n          position: relative;\n          width: 100%;\n          padding-bottom: calc(100% / (16 / 9));\n        }\n\n        #frame, #fallbackPlaceholder, iframe {\n          position: absolute;\n          width: 100%;\n          height: 100%;\n        }\n\n        #frame {\n          cursor: pointer;\n        }\n\n        #fallbackPlaceholder {\n          object-fit: cover;\n        }\n\n        #frame::before {\n          content: '';\n          display: block;\n          position: absolute;\n          top: 0;\n          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);\n          background-position: top;\n          background-repeat: repeat-x;\n          height: 60px;\n          padding-bottom: 50px;\n          width: 100%;\n          transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);\n          z-index: 1;\n        }\n        /* play button */\n        .lvo-playbtn {\n          width: 70px;\n          height: 46px;\n          background-color: #212121;\n          z-index: 1;\n          opacity: 0.8;\n          border-radius: 10%;\n          transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);\n          border: 0;\n        }\n        #frame:hover .lvo-playbtn {\n          background-color: rgb(98, 175, 237);\n          opacity: 1;\n        }\n        /* play button triangle */\n        .lvo-playbtn:before {\n          content: '';\n          border-style: solid;\n          border-width: 11px 0 11px 19px;\n          border-color: transparent transparent transparent #fff;\n        }\n        .lvo-playbtn,\n        .lvo-playbtn:before {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate3d(-50%, -50%, 0);\n        }\n\n        /* Post-click styles */\n        .lvo-activated {\n          cursor: unset;\n        }\n\n        #frame.lvo-activated::before,\n        .lvo-activated .lvo-playbtn {\n          display: none;\n        }\n      </style>\n      <div id=\"frame\">\n        <picture>\n          <source id=\"webpPlaceholder\" type=\"image/webp\">\n          <source id=\"jpegPlaceholder\" type=\"image/jpeg\">\n          <img id=\"fallbackPlaceholder\"\n               referrerpolicy=\"origin\"\n               width=\"1100\"\n               height=\"619\"\n               decoding=\"async\"\n               loading=\"lazy\">\n        </picture>\n        <button class=\"lvo-playbtn\"></button>\n      </div>\n    `;\n            this.domRefFrame = this.shadowRoot.querySelector('#frame');\n            this.domRefImg = {\n                fallback: this.shadowRoot.querySelector('#fallbackPlaceholder'),\n                webp: this.shadowRoot.querySelector('#webpPlaceholder'),\n                jpeg: this.shadowRoot.querySelector('#jpegPlaceholder'),\n            };\n            this.domRefPlayButton = this.shadowRoot.querySelector('.lvo-playbtn');\n        }\n        /**\n         * Parse our attributes and fire up some placeholders\n         */\n        setupComponent() {\n            this.initImagePlaceholder();\n            this.domRefPlayButton.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`);\n            this.setAttribute('title', `${this.videoPlay}: ${this.videoTitle}`);\n            if (this.autoLoad) {\n                this.initIntersectionObserver();\n            }\n        }\n        /**\n         * Lifecycle method that we use to listen for attribute changes to period\n         * @param {*} name\n         * @param {*} oldVal\n         * @param {*} newVal\n         */\n        attributeChangedCallback(name, oldVal, newVal) {\n            switch (name) {\n                case 'videoid': {\n                    if (oldVal !== newVal) {\n                        this.setupComponent();\n                        // if we have a previous iframe, remove it and the activated class\n                        if (this.domRefFrame.classList.contains('lvo-activated')) {\n                            this.domRefFrame.classList.remove('lvo-activated');\n                            this.shadowRoot.querySelector('iframe').remove();\n                        }\n                    }\n                    break;\n                }\n                default:\n                    break;\n            }\n        }\n        /**\n         * Inject the iframe into the component body\n         */\n        addIframe() {\n            if (!this.iframeLoaded) {\n                /**\n                 * Vimeo example embed markup:\n                 *\n                 *  <iframe src=\"https://player.vimeo.com/video/364402896#t=1m3s\"\n                 *    width=\"640\" height=\"360\"\n                 *    frameborder=\"0\"\n                 *    allow=\"autoplay; fullscreen\" allowfullscreen>\n                 *  </iframe>\n                 */\n                // FIXME: add a setting for autoplay\n                const apValue = ((this.autoLoad && this.autoPlay) || (!this.autoLoad)) ?\n                    \"autoplay=1\" : \"\";\n                const srcUrl = new URL(`/video/${this.videoId}?${apValue}&#t=${this.videoStartAt}`, \"https://player.vimeo.com/\");\n                // TODO: construct src value w/ URL constructor\n                const iframeHTML = `\n<iframe frameborder=\"0\"\n  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n  allowfullscreen src=\"${srcUrl}\"></iframe>`;\n                this.domRefFrame.insertAdjacentHTML('beforeend', iframeHTML);\n                this.domRefFrame.classList.add('lvo-activated');\n                this.iframeLoaded = true;\n            }\n        }\n        /**\n         * Setup the placeholder image for the component\n         */\n        async initImagePlaceholder() {\n            // TODO(slightlyoff): TODO: cache API responses\n            // we don't know which image type to preload, so warm the connection\n            LiteVimeoEmbed.addPrefetch('preconnect', 'https://i.vimeocdn.com/');\n            // API is the video-id based\n            // http://vimeo.com/api/v2/video/364402896.json\n            const apiUrl = `https://vimeo.com/api/v2/video/${this.videoId}.json`;\n            // Now fetch the JSON that locates our placeholder from vimeo's JSON API\n            const apiResponse = (await (await fetch(apiUrl)).json())[0];\n            // Extract the image id, e.g. 819916979, from a URL like:\n            // thumbnail_large: \"https://i.vimeocdn.com/video/819916979_640.jpg\"\n            const tnLarge = apiResponse.thumbnail_large;\n            const imgId = (tnLarge.substr(tnLarge.lastIndexOf(\"/\") + 1)).split(\"_\")[0];\n            // const posterUrlWebp =\n            //    `https://i.ytimg.com/vi_webp/${this.videoId}/hqdefault.webp`;\n            const posterUrlWebp = `https://i.vimeocdn.com/video/${imgId}.webp?mw=1100&mh=619&q=70`;\n            const posterUrlJpeg = `https://i.vimeocdn.com/video/${imgId}.jpg?mw=1100&mh=619&q=70`;\n            this.domRefImg.webp.srcset = posterUrlWebp;\n            this.domRefImg.jpeg.srcset = posterUrlJpeg;\n            this.domRefImg.fallback.src = posterUrlJpeg;\n            this.domRefImg.fallback.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`);\n            this.domRefImg.fallback.setAttribute('alt', `${this.videoPlay}: ${this.videoTitle}`);\n        }\n        /**\n         * Setup the Intersection Observer to load the iframe when scrolled into view\n         */\n        initIntersectionObserver() {\n            if ('IntersectionObserver' in window &&\n                'IntersectionObserverEntry' in window) {\n                const options = {\n                    root: null,\n                    rootMargin: '0px',\n                    threshold: 0,\n                };\n                const observer = new IntersectionObserver((entries, observer) => {\n                    entries.forEach(entry => {\n                        if (entry.isIntersecting && !this.iframeLoaded) {\n                            LiteVimeoEmbed.warmConnections();\n                            this.addIframe();\n                            observer.unobserve(this);\n                        }\n                    });\n                }, options);\n                observer.observe(this);\n            }\n        }\n        /**\n         * Add a <link rel={preload | preconnect} ...> to the head\n         * @param {*} kind\n         * @param {*} url\n         * @param {*} as\n         */\n        static addPrefetch(kind, url, as) {\n            const linkElem = document.createElement('link');\n            linkElem.rel = kind;\n            linkElem.href = url;\n            if (as) {\n                linkElem.as = as;\n            }\n            linkElem.crossOrigin = 'true';\n            document.head.append(linkElem);\n        }\n        /**\n         * Begin preconnecting to warm up the iframe load Since the embed's netwok\n         * requests load within its iframe, preload/prefetch'ing them outside the\n         * iframe will only cause double-downloads. So, the best we can do is warm up\n         * a few connections to origins that are in the critical path.\n         *\n         * Maybe `<link rel=preload as=document>` would work, but it's unsupported:\n         * http://crbug.com/593267 But TBH, I don't think it'll happen soon with Site\n         * Isolation and split caches adding serious complexity.\n         */\n        static warmConnections() {\n            if (LiteVimeoEmbed.preconnected)\n                return;\n            // Host that Vimeo uses to serve JS needed by player\n            LiteVimeoEmbed.addPrefetch('preconnect', 'https://f.vimeocdn.com');\n            // The iframe document comes from player.vimeo.com\n            LiteVimeoEmbed.addPrefetch('preconnect', 'https://player.vimeo.com');\n            // Image for placeholder comes from i.vimeocdn.com\n            LiteVimeoEmbed.addPrefetch('preconnect', 'https://i.vimeocdn.com');\n            LiteVimeoEmbed.preconnected = true;\n        }\n    }\n    LiteVimeoEmbed.preconnected = false;\n    return LiteVimeoEmbed;\n})();\nexport { LiteVimeoEmbed };\n// Register custom element\ncustomElements.define('lite-vimeo', LiteVimeoEmbed);\n//# sourceMappingURL=lite-vimeo.js.map"],"names":["LiteVimeoEmbed","id","title","name","time","value","shadowDom","oldVal","newVal","apValue","iframeHTML","apiUrl","tnLarge","imgId","posterUrlWebp","posterUrlJpeg","options","entries","observer","entry","kind","url","as","linkElem"],"mappings":"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","x_google_ignoreList":[0]}