{"version":3,"file":"lite-vimeo.min.js","sources":["lite-vimeo.js"],"sourcesContent":["// src/index.ts\nvar _LiteVimeoEmbed = 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    } 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    } 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\" part=\"frame\">\n        <picture part=\"picture-frame\">\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               part=\"picture\">\n        </picture>\n        <button class=\"lvo-playbtn\" part=\"play-button\"></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 (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      const apValue = this.autoLoad && this.autoPlay || !this.autoLoad ? \"autoplay=1\" : \"\";\n      const srcUrl = new URL(`/video/${this.videoId}?${apValue}&#t=${this.videoStartAt}`, \"https://player.vimeo.com/\");\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    _LiteVimeoEmbed.addPrefetch(\"preconnect\", \"https://i.vimeocdn.com/\");\n    const apiUrl = `https://vimeo.com/api/v2/video/${this.videoId}.json`;\n    const apiResponse = (await (await fetch(apiUrl)).json())[0];\n    const tnLarge = apiResponse.thumbnail_large;\n    const imgId = tnLarge.substr(tnLarge.lastIndexOf(\"/\") + 1).split(\"_\")[0];\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 && \"IntersectionObserverEntry\" in window) {\n      const options = {\n        root: null,\n        rootMargin: \"0px\",\n        threshold: 0\n      };\n      const observer = new IntersectionObserver((entries, observer2) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting && !this.iframeLoaded) {\n            _LiteVimeoEmbed.warmConnections();\n            this.addIframe();\n            observer2.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    _LiteVimeoEmbed.addPrefetch(\"preconnect\", \"https://f.vimeocdn.com\");\n    _LiteVimeoEmbed.addPrefetch(\"preconnect\", \"https://player.vimeo.com\");\n    _LiteVimeoEmbed.addPrefetch(\"preconnect\", \"https://i.vimeocdn.com\");\n    _LiteVimeoEmbed.preconnected = true;\n  }\n};\n_LiteVimeoEmbed.preconnected = false;\nvar LiteVimeoEmbed = _LiteVimeoEmbed;\ncustomElements.define(\"lite-vimeo\", LiteVimeoEmbed);\nexport {\n  LiteVimeoEmbed\n};\n"],"names":["_LiteVimeoEmbed","HTMLElement","constructor","super","this","iframeLoaded","setupDom","observedAttributes","connectedCallback","addEventListener","warmConnections","once","addIframe","videoId","encodeURIComponent","getAttribute","id","setAttribute","videoTitle","title","videoPlay","name","videoStartAt","time","autoLoad","hasAttribute","value","removeAttribute","autoPlay","attachShadow","mode","innerHTML","domRefFrame","shadowRoot","querySelector","domRefImg","fallback","webp","jpeg","domRefPlayButton","setupComponent","initImagePlaceholder","initIntersectionObserver","attributeChangedCallback","oldVal","newVal","classList","contains","remove","srcUrl","apValue","URL","insertAdjacentHTML","add","addPrefetch","apiUrl","tnLarge","fetch","json","thumbnail_large","imgId","substr","lastIndexOf","split","posterUrlJpeg","srcset","src","window","IntersectionObserver","entries","observer2","forEach","entry","isIntersecting","unobserve","root","rootMargin","threshold","observe","kind","url","as","linkElem","document","createElement","rel","href","crossOrigin","head","append","preconnected","LiteVimeoEmbed","customElements","define"],"mappings":"AACA,IAAIA,sBAAwBA,wBAAwBC,YAClDC,cACEC,MAAM,EACNC,KAAKC,aAAe,CAAA,EACpBD,KAAKE,SAAS,CAChB,CACAC,gCACE,MAAO,CAAC,UACV,CACAC,oBACEJ,KAAKK,iBAAiB,cAAeT,gBAAgBU,gBAAiB,CACpEC,KAAM,CAAA,CACR,CAAC,EACDP,KAAKK,iBAAiB,QAAS,IAAML,KAAKQ,UAAU,CAAC,CACvD,CACAC,cACE,OAAOC,mBAAmBV,KAAKW,aAAa,SAAS,GAAK,EAAE,CAC9D,CACAF,YAAYG,GACVZ,KAAKa,aAAa,UAAWD,CAAE,CACjC,CACAE,iBACE,OAAOd,KAAKW,aAAa,YAAY,GAAK,OAC5C,CACAG,eAAeC,GACbf,KAAKa,aAAa,aAAcE,CAAK,CACvC,CACAC,gBACE,OAAOhB,KAAKW,aAAa,WAAW,GAAK,MAC3C,CACAK,cAAcC,GACZjB,KAAKa,aAAa,YAAaI,CAAI,CACrC,CACAC,mBACE,OAAOlB,KAAKW,aAAa,WAAW,GAAK,IAC3C,CACAO,iBAAiBC,GACfnB,KAAKa,aAAa,YAAaM,CAAI,CACrC,CACAC,eACE,OAAOpB,KAAKqB,aAAa,UAAU,CACrC,CACAD,aAAaE,GACPA,EACFtB,KAAKa,aAAa,WAAY,EAAE,EAEhCb,KAAKuB,gBAAgB,UAAU,CAEnC,CACAC,eACE,OAAOxB,KAAKqB,aAAa,UAAU,CACrC,CACAG,aAAaF,GACPA,EACFtB,KAAKa,aAAa,WAAY,UAAU,EAExCb,KAAKuB,gBAAgB,UAAU,CAEnC,CAIArB,WACoBF,KAAKyB,aAAa,CAAEC,KAAM,MAAO,CAAC,EAC1CC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6FV3B,KAAK4B,YAAc5B,KAAK6B,WAAWC,cAAc,QAAQ,EACzD9B,KAAK+B,UAAY,CACfC,SAAUhC,KAAK6B,WAAWC,cAAc,sBAAsB,EAC9DG,KAAMjC,KAAK6B,WAAWC,cAAc,kBAAkB,EACtDI,KAAMlC,KAAK6B,WAAWC,cAAc,kBAAkB,CACxD,EACA9B,KAAKmC,iBAAmBnC,KAAK6B,WAAWC,cAAc,cAAc,CACtE,CAIAM,iBACEpC,KAAKqC,qBAAqB,EAC1BrC,KAAKmC,iBAAiBtB,aAAa,aAAiBb,KAAKgB,UAAR,KAAsBhB,KAAKc,UAAY,EACxFd,KAAKa,aAAa,QAAYb,KAAKgB,UAAR,KAAsBhB,KAAKc,UAAY,EAC9Dd,KAAKoB,UACPpB,KAAKsC,yBAAyB,CAElC,CAOAC,yBAAyBtB,EAAMuB,EAAQC,GAE9B,YADCxB,GAEAuB,IAAWC,IACbzC,KAAKoC,eAAe,EAChBpC,KAAK4B,YAAYc,UAAUC,SAAS,eAAe,KACrD3C,KAAK4B,YAAYc,UAAUE,OAAO,eAAe,EACjD5C,KAAK6B,WAAWC,cAAc,QAAQ,EAAEc,OAAO,EAQzD,CAIApC,YACE,IAEQqC,EAFH7C,KAAKC,eACF6C,EAAU9C,KAAKoB,UAAYpB,KAAKwB,UAAY,CAACxB,KAAKoB,SAAW,aAAe,GAC5EyB,EAAS,IAAIE,cAAc/C,KAAKS,WAAWqC,QAAc9C,KAAKkB,aAAgB,2BAA2B,EAK/GlB,KAAK4B,YAAYoB,mBAAmB;;;yBADjBH,cACwC,EAC3D7C,KAAK4B,YAAYc,UAAUO,IAAI,eAAe,EAC9CjD,KAAKC,aAAe,CAAA,EAExB,CAIAoC,6BACEzC,gBAAgBsD,YAAY,aAAc,yBAAyB,EACnE,IAAMC,oCAA2CnD,KAAKS,eAEhD2C,GADc,MAAO,MAAOC,MAAMF,CAAM,GAAGG,KAAK,GAAG,GAC7BC,gBACtBC,EAAQJ,EAAQK,OAAOL,EAAQM,YAAY,GAAG,EAAI,CAAC,EAAEC,MAAM,GAAG,EAAE,GAEhEC,kCAAgDJ,4BACtDxD,KAAK+B,UAAUE,KAAK4B,uCAFkCL,6BAGtDxD,KAAK+B,UAAUG,KAAK2B,OAASD,EAC7B5D,KAAK+B,UAAUC,SAAS8B,IAAMF,EAC9B5D,KAAK+B,UAAUC,SAASnB,aAAa,aAAiBb,KAAKgB,UAAR,KAAsBhB,KAAKc,UAAY,EAC1Fd,KAAK+B,UAAUC,SAASnB,aAAa,MAAUb,KAAKgB,UAAR,KAAsBhB,KAAKc,UAAY,CACrF,CAIAwB,2BACM,yBAA0ByB,QAAU,8BAA+BA,QAMpD,IAAIC,qBAAqB,CAACC,EAASC,KAClDD,EAAQE,QAAQ,IACVC,EAAMC,gBAAkB,CAACrE,KAAKC,eAChCL,gBAAgBU,gBAAgB,EAChCN,KAAKQ,UAAU,EACf0D,EAAUI,UAAUtE,IAAI,EAE5B,CAAC,CACH,EAbgB,CACduE,KAAM,KACNC,WAAY,MACZC,UAAW,CACb,CASU,EACDC,QAAQ1E,IAAI,CAEzB,CAOAkD,mBAAmByB,EAAMC,EAAKC,GAC5B,IAAMC,EAAWC,SAASC,cAAc,MAAM,EAC9CF,EAASG,IAAMN,EACfG,EAASI,KAAON,EACZC,IACFC,EAASD,GAAKA,GAEhBC,EAASK,YAAc,OACvBJ,SAASK,KAAKC,OAAOP,CAAQ,CAC/B,CAWAxE,yBACMV,gBAAgB0F,eAEpB1F,gBAAgBsD,YAAY,aAAc,wBAAwB,EAClEtD,gBAAgBsD,YAAY,aAAc,0BAA0B,EACpEtD,gBAAgBsD,YAAY,aAAc,wBAAwB,EAClEtD,gBAAgB0F,aAAe,CAAA,EACjC,CACF,EAEIC,gBADJ3F,gBAAgB0F,aAAe,CAAA,EACV1F,iBACrB4F,eAAeC,OAAO,aAAcF,cAAc,SAEhDA,cACD"}