Web Component

by Arthur Lutkevichus

HTML

x

CSS

.progress-bar {
  color: red;
}

JavaScript

class VesetVideoPreview extends HTMLElement {

  constructor() {
    super();
    //this.shadow = this.createShadowRoot();
    this.shadow = this.attachShadow({
      mode: 'open'
    });
    
    this.state = {
    	loading: false,
      initialized: false,
    };
    
    this.loadScript("https://vjs.zencdn.net/7.10.2/video.min.js").then(() => console.log("loaded")).catch(() => console.log("err"));
  }
  
  /**
   * Loads script into document
   * @param {string} src Source url
   * @param {object} [attributes] Attributes
	 * @param {function} [isLoaded] Additional check if script is loaded, by default checks if script is in header
   */
  loadScript(src, attributes, isLoaded = () => document.head.querySelector(`script[src="${src}"]`)) {
    return new Promise((resolve, reject) => {
        if (!isLoaded()) {
            if (!document.head.querySelector(`script[src="${src}"]`)) {
                const script = document.createElement('script');

                if (!!attributes && attributes instanceof Object) {
                    Object.entries(attributes).forEach(([attr, val]) => script[attr] = val);
                }

                script.onload = resolve;
                script.onerror = script.onabort = reject;

                document.head.appendChild(script);
                script.src = src;
            } else {
                let retryAttempts = 15;
                const recheckInterval = setInterval(() => {
                    if (retryAttempts === 0) {
                        clearInterval(recheckInterval);
                        reject();
                    } else if (isLoaded()) {
                        clearInterval(recheckInterval);
                        resolve();
                    } else {
                        retryAttempts--;
                    }
                }, 100);
            }
        } else {
            resolve();
        }
    })
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    var innerBar =...