title: VideoJS v5 - adding custom components in ES6 - am I doing it right?
body: <p>I'm writing a social sharing plugin for <a href="https://github.com/videojs/video.js" rel="nofollow">VideoJS v5</a>: I want to add a div to the player markup, below the control bar, which contains a couple links that will allow social sharing of the player instance in an article on my site. I'm working in ES6.</p>
  
  <p>The VideoJS documentation is minimal, especially for v5 - I'm scratching around in the source to try and figure out how to do it. I did find <a href="https://github.com/videojs/video.js/wiki/5.0-Change-Details#videojs-50-subclassing-examples" rel="nofollow">this example</a> of subclassing VideoJS components.</p>
  
  <p>Here's what I've got so far - apologies if I'm committing stylistic crimes, I've not had much experience with VideoJS plugins or ES6 classes.</p>
  
  <pre><code>videojs.plugin('social-share', function(opts) {
    let player = this;
  
    const Component = videojs.getComponent('Component');
    const ClickableComponent = videojs.getComponent('ClickableComponent');
  
    class VjsShareBar extends Component {
      constructor(player, opts) {
        super(player, opts);
      }
  
      createEl() {
        return super.createEl('div', {
          className: 'vjs-share-bar video-share share-buttons'
        }, {
          'role': 'group'
        });
      }
    }
  
    class VjsShareButton extends Component {
      constructor(player, opts) {
        super(player, opts);
      }
  
      createEl() {
        return super.createEl('a', {
          className: 'share-button'
        })
      }
    }
  
    let twitterShareBtn = new VjsShareButton(player, opts);
    twitterShareBtn.addClass('twitter');
  
    let twitterShareIcon = new Component(player, opts);
  
    let fbShareBtn = new VjsShareButton(player, opts);
    fbShareBtn.addClass('facebook');
  
    let vjsShareBar = player.addChild(new VjsShareBar(player, opts));
    vjsShareBar.addChild(twitterShareBtn);
    vjsShareBar.addChild(fbShareBtn);
  
  });
  </code></pre>
  
  <p>This adds the expected elements to the player markup inside the <code>video-js</code> container:</p>
  
  <pre><code>&lt;div class="vjs-share-bar video-share share-buttons" role="group"&gt;
      &lt;a class="share-button twitter"&gt;&lt;/a&gt;
      &lt;a class="share-button facebook"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Do I need this approach of extending a new subclass for each element? It seems a bit clunky. Is there a way I can simply create a new instance of the VideoJS <a href="https://github.com/videojs/video.js/blob/master/src/js/component.js" rel="nofollow">Component</a> class for each element I want to create, passing in a different tagname and classes each time? I need to add spans within the <code>a</code> tags, and the idea of extending a new <code>Component</code> subclass for each seems overkill.</p>
  
  <p>(Existing event handlers in my site will handle clicks on the links, so I'm not going to listen for click events with the player API. And I'm using the simple <code>Component</code> class because don't want the extra bumph more specific classes like <code>ClickableComponent</code> and <code>Button</code> add to the markup.) </p>