diff options
Diffstat (limited to 'static/lite-vimeo.min.js')
| -rw-r--r-- | static/lite-vimeo.min.js | 1 |
1 files changed, 0 insertions, 1 deletions
diff --git a/static/lite-vimeo.min.js b/static/lite-vimeo.min.js deleted file mode 100644 index 692eea0..0000000 --- a/static/lite-vimeo.min.js +++ /dev/null @@ -1 +0,0 @@ -let LiteVimeoEmbed=(()=>{class i extends HTMLElement{constructor(){super(),this.iframeLoaded=!1,this.setupDom()}static get observedAttributes(){return["videoid"]}connectedCallback(){this.addEventListener("pointerover",i.warmConnections,{once:!0}),this.addEventListener("click",()=>this.addIframe())}get videoId(){return encodeURIComponent(this.getAttribute("videoid")||"")}set videoId(e){this.setAttribute("videoid",e)}get videoTitle(){return this.getAttribute("videotitle")||"Video"}set videoTitle(e){this.setAttribute("videotitle",e)}get videoPlay(){return this.getAttribute("videoPlay")||"Play"}set videoPlay(e){this.setAttribute("videoPlay",e)}get videoStartAt(){return this.getAttribute("videoPlay")||"0s"}set videoStartAt(e){this.setAttribute("videoPlay",e)}get autoLoad(){return this.hasAttribute("autoload")}set autoLoad(e){e?this.setAttribute("autoload",""):this.removeAttribute("autoload")}get autoPlay(){return this.hasAttribute("autoplay")}set autoPlay(e){e?this.setAttribute("autoplay","autoplay"):this.removeAttribute("autoplay")}setupDom(){const e=this.attachShadow({mode:"open"});e.innerHTML=`<style>:host{contain:content;display:block;position:relative;width:100%;padding-bottom:calc(100% / (16 / 9))}#fallbackPlaceholder,#frame,iframe{position:absolute;width:100%;height:100%}#frame{cursor:pointer}#fallbackPlaceholder{object-fit:cover}#frame::before{content:'';display:block;position:absolute;top:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);background-position:top;background-repeat:repeat-x;height:60px;padding-bottom:50px;width:100%;transition:all .2s cubic-bezier(0,0,.2,1);z-index:1}.lvo-playbtn{width:70px;height:46px;background-color:#212121;z-index:1;opacity:.8;border-radius:10%;transition:all .2s cubic-bezier(0,0,.2,1);border:0}#frame:hover .lvo-playbtn{background-color:#62afed;opacity:1}.lvo-playbtn:before{content:'';border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}.lvo-playbtn,.lvo-playbtn:before{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.lvo-activated{cursor:unset}#frame.lvo-activated::before,.lvo-activated .lvo-playbtn{display:none}</style><div id="frame"><picture><source id="webpPlaceholder" type="image/webp"><source id="jpegPlaceholder" type="image/jpeg"><img id="fallbackPlaceholder" referrerpolicy="origin"></picture><button class="lvo-playbtn"></button></div> `,this.domRefFrame=this.shadowRoot.querySelector("#frame"),this.domRefImg={fallback:this.shadowRoot.querySelector("#fallbackPlaceholder"),webp:this.shadowRoot.querySelector("#webpPlaceholder"),jpeg:this.shadowRoot.querySelector("#jpegPlaceholder")},this.domRefPlayButton=this.shadowRoot.querySelector(".lvo-playbtn")}setupComponent(){this.initImagePlaceholder(),this.domRefPlayButton.setAttribute("aria-label",this.videoPlay+": "+this.videoTitle),this.setAttribute("title",this.videoPlay+": "+this.videoTitle),this.autoLoad&&this.initIntersectionObserver()}attributeChangedCallback(e,t,o){"videoid"===e&&t!==o&&(this.setupComponent(),this.domRefFrame.classList.contains("lvo-activated")&&(this.domRefFrame.classList.remove("lvo-activated"),this.shadowRoot.querySelector("iframe").remove()))}addIframe(){var e;this.iframeLoaded||(e=this.autoLoad&&this.autoPlay||!this.autoLoad?"autoplay=1":"",e=new URL(`/video/${this.videoId}?${e}&#t=`+this.videoStartAt,"https://player.vimeo.com/"),this.domRefFrame.insertAdjacentHTML("beforeend",`<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="${e}"></iframe>`),this.domRefFrame.classList.add("lvo-activated"),this.iframeLoaded=!0)}async initImagePlaceholder(){i.addPrefetch("preconnect","https://i.vimeocdn.com/");var e=`https://vimeo.com/api/v2/video/${this.videoId}.json`;let t=(await(await fetch(e)).json())[0].thumbnail_large;var e=t.substr(t.lastIndexOf("/")+1).split("_")[0],o=`https://i.vimeocdn.com/video/${e}.jpg?mw=1100&mh=619&q=70`;this.domRefImg.webp.srcset=`https://i.vimeocdn.com/video/${e}.webp?mw=1100&mh=619&q=70`,this.domRefImg.jpeg.srcset=o,this.domRefImg.fallback.src=o,this.domRefImg.fallback.setAttribute("aria-label",this.videoPlay+": "+this.videoTitle),this.domRefImg.fallback.setAttribute("alt",this.videoPlay+": "+this.videoTitle)}initIntersectionObserver(){if("IntersectionObserver"in window&&"IntersectionObserverEntry"in window){const e=new IntersectionObserver((e,t)=>{e.forEach(e=>{e.isIntersecting&&!this.iframeLoaded&&(i.warmConnections(),this.addIframe(),t.unobserve(this))})},{root:null,rootMargin:"0px",threshold:0});e.observe(this)}}static addPrefetch(e,t,o){const i=document.createElement("link");i.rel=e,i.href=t,o&&(i.as=o),i.crossOrigin="true",document.head.append(i)}static warmConnections(){i.preconnected||(i.addPrefetch("preconnect","https://f.vimeocdn.com"),i.addPrefetch("preconnect","https://player.vimeo.com"),i.addPrefetch("preconnect","https://i.vimeocdn.com"),i.preconnected=!0)}}return i.preconnected=!1,i})();customElements.define("lite-vimeo",LiteVimeoEmbed);export{LiteVimeoEmbed}; |
