refactor, wrap controller within shadowroot

inject.css

@@ -1,30 +1,11 @@
-.tc-videoController {
+/* Origin specific overrides */
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  background: black;
-  color: white;
-
-  border-radius: 5px;
-  padding: 5px;
-  margin: 10px 10px 10px 15px;
-
-  cursor: default;
-  z-index: 9999999;
-  opacity: 0.3;
-}
-
-.tc-videoController:hover {
-  opacity: 0.7;
-}
 
 /* YouTube player */
-.ytp-hide-info-bar .tc-videoController {
+.ytp-hide-info-bar .vsc-controller {
   margin-top: 10px;
 }
 
-.ytp-autohide .tc-videoController {
+.ytp-autohide .vsc-controller {
   visibility: hidden;
   transition: opacity .25s cubic-bezier(0.4,0,0.2,1);
   opacity: 0;
@@ -32,18 +13,18 @@
 
 /* YouTube embedded player */
 /* e.g. https://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/ */
-.full-frame .html5-video-player:not(.ytp-fullscreen) .tc-videoController {
+.full-frame .html5-video-player:not(.ytp-fullscreen) .vsc-controller {
   margin-top: 45px;
 }
 
-.ytp-fullscreen .tc-videoController {
+.ytp-fullscreen .vsc-controller {
   display: block;
   margin-top: 60px;
 }
 
 /* shift controller on vine.co */
 /* e.g. https://vine.co/v/OrJj39YlL57 */
-.video-container .vine-video-container .tc-videoController {
+.video-container .vine-video-container .vsc-controller {
   margin-left: 40px;
 }
 
@@ -52,6 +33,7 @@
 .ytp-webgl-spherical-control {
   top: 50px !important;
 }
+
 .ytp-fullscreen .ytp-webgl-spherical-control {
   top: 100px !important;
 }

inject.js

@@ -34,6 +34,7 @@ chrome.extension.sendMessage({}, function(response) {
       this.video = target;
       this.parent = target.parentElement || parent;
       this.document = target.ownerDocument;
+      this.id = Math.random().toString(36).substr(2, 9);
       if (!tc.settings.rememberSpeed) {
         tc.settings.speed = 1.0;
       }
@@ -66,93 +67,56 @@ chrome.extension.sendMessage({}, function(response) {
 
     tc.videoController.prototype.initializeControls = function() {
       var document = this.document;
+      var speed = parseFloat(tc.settings.speed).toFixed(2),
+        top = Math.max(this.video.offsetTop, 0) + "px",
+        left = Math.max(this.video.offsetLeft, 0) + "px";
 
+      var prevent = function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      var wrapper = document.createElement('div');
+      wrapper.classList.add('vsc-controller');
+      wrapper.dataset['vscid'] = this.id;
+      wrapper.addEventListener('dblclick', prevent, true);
+      wrapper.addEventListener('mousedown', prevent, true);
+      wrapper.addEventListener('click', prevent, true);
+
+      var shadow = wrapper.createShadowRoot();
+      var shadowTemplate = `
+        <style>
+          @import "${chrome.extension.getURL('shadow.css')}";
+        </style>
+
+        <div id="controller" style="top:${top}; left:${left}">
+          <span>${speed}</span>
+          <span id="controls">
+            <button data-action="rewind" class="rw">«</button>
+            <button data-action="slower">-</button>
+            <button data-action="faster">+</button>
+            <button data-action="advance" class="rw">»</button>
+            <button data-action="close" class="hideButton">x</button>
+          </span>
+        </div>
+      `;
+      shadow.innerHTML = shadowTemplate;
+      shadow.querySelectorAll('button').forEach(button => {
+        button.onclick = (e) => {
+          runAction(e.target.dataset['action'], document);
+        }
+      });
+
+      this.speedIndicator = shadow.querySelector('span');
       var fragment = document.createDocumentFragment();
-      var container = document.createElement('div');
+      fragment.appendChild(wrapper);
-
-      var shadow = container.createShadowRoot();
-      shadow.innerHTML = '<style> @import "' +
-        chrome.extension.getURL('shadow.css') +
-        '"; </style>';
-
-      var speedIndicator = document.createElement('span');
-      var controls = document.createElement('span');
-      var fasterButton = document.createElement('button');
-      var slowerButton = document.createElement('button');
-      var rewindButton = document.createElement('button');
-      var advanceButton = document.createElement('button');
-      var hideButton = document.createElement('button');
-
-      rewindButton.innerHTML = '&laquo;';
-      rewindButton.className = 'rw';
-      rewindButton.addEventListener('click', function(e) {
-        runAction('rewind', document);
-      });
-
-      fasterButton.textContent = '+';
-      fasterButton.addEventListener('click', function(e) {
-        runAction('faster', document);
-      });
-
-      slowerButton.textContent = '-';
-      slowerButton.addEventListener('click', function(e) {
-        runAction('slower', document);
-      });
-
-      advanceButton.innerHTML = '&raquo;';
-      advanceButton.className = 'rw';
-      advanceButton.addEventListener('click', function(e) {
-        runAction('advance', document);
-      });
-
-      hideButton.textContent = 'x';
-      hideButton.className = 'tc-hideButton';
-      hideButton.addEventListener('click', function(e) {
-        container.nextSibling.classList.add('vc-cancelled')
-        container.remove();
-      });
-
-      controls.appendChild(rewindButton);
-      controls.appendChild(slowerButton);
-      controls.appendChild(fasterButton);
-      controls.appendChild(advanceButton);
-      controls.appendChild(hideButton);
-
-      shadow.appendChild(speedIndicator);
-      shadow.appendChild(controls);
-
-      container.classList.add('tc-videoController');
-      controls.classList.add('tc-controls');
-      container.style.top = Math.max(this.video.offsetTop,0)+"px";
-      container.style.left = Math.max(this.video.offsetLeft,0)+"px";
-
-      fragment.appendChild(container);
-      this.video.classList.add('tc-initialized');
 
       // Note: when triggered via a MutationRecord, it's possible that the
       // target is not the immediate parent. This appends the controller as
       // the first element of the target, which may not be the parent.
       this.parent.insertBefore(fragment, this.parent.firstChild);
-
+      this.video.classList.add('vsc-initialized');
-      var speed = parseFloat(tc.settings.speed).toFixed(2);
+      this.video.dataset['vscid'] = this.id;
-      speedIndicator.textContent = speed;
-      this.speedIndicator = speedIndicator;
-
-      container.addEventListener('dblclick', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-      }, true);
-
-      container.addEventListener('mousedown', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-      }, true);
-
-      container.addEventListener('click', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-      }, true);
-
     }
   }
 
@@ -204,7 +168,7 @@ chrome.extension.sendMessage({}, function(response) {
       var forEach = Array.prototype.forEach;
       function checkForVideo(node, parent) {
         if (node.nodeName === 'VIDEO') {
-          if (!node.classList.contains('tc-initialized')) {
+          if (!node.classList.contains('vsc-initialized')) {
             new tc.videoController(node, parent);
           }
         } else if (node.children != undefined) {
@@ -241,10 +205,14 @@ chrome.extension.sendMessage({}, function(response) {
     videoTags.forEach = Array.prototype.forEach;
 
     videoTags.forEach(function(v) {
-      if (keyboard)
+      var id = v.dataset['vscid'];
-        showController(v);
+      var controller = document.querySelector(`div[data-vscid="${id}"]`)
+        .shadowRoot.querySelector('#controller');
 
-      if (!v.classList.contains('vc-cancelled')) {
+      if (keyboard)
+        showController(controller);
+
+      if (!v.classList.contains('vsc-cancelled')) {
         if (action === 'rewind') {
           v.currentTime -= tc.settings.rewindTime;
         } else if (action === 'advance') {
@@ -261,15 +229,15 @@ chrome.extension.sendMessage({}, function(response) {
           v.playbackRate = Number(s.toFixed(2));
         } else if (action === 'reset') {
           v.playbackRate = 1.0;
+        } else if (action === 'close') {
+          v.classList.add('vsc-cancelled');
+          controller.remove();
         }
       }
     });
   }
 
-  function showController(v) {
+  function showController(controller) {
-    var controller = v.closest('.tc-videoController ~ .tc-initialized')
-      .parentElement.getElementsByClassName('tc-videoController')[0];
-
     controller.style.visibility = 'visible';
     if (controllerAnimation != null
         && controllerAnimation.playState != 'finished') {

shadow.css

@@ -4,11 +4,32 @@
   font-size: 13px;
 }
 
-:host(:hover) .tc-controls {
+:host(:hover) #controls {
   display: inline;
 }
 
-.tc-controls {
+#controller {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  background: black;
+  color: white;
+
+  border-radius: 5px;
+  padding: 5px;
+  margin: 10px 10px 10px 15px;
+
+  cursor: default;
+  z-index: 9999999;
+  opacity: 0.3;
+}
+
+#controller:hover {
+  opacity: 0.7;
+}
+
+#controls {
   display: none;
   margin-left: 1em;
 }
@@ -18,7 +39,6 @@ button {
   color: black;
   background: white;
   font-weight: bold;
-  margin: 0 2px;
   border-radius: 5px;
   padding: 1px 6px 3px 6px;
   font-size: 14px;
@@ -27,6 +47,10 @@ button {
   font-family: "Lucida Console", Monaco, monospace;
 }
 
+button:focus {
+  outline: 0;
+}
+
 button:hover {
   opacity: 1.0;
 }
@@ -39,7 +63,7 @@ button.rw {
   opacity: 0.65;
 }
 
-button.tc-hideButton {
+button.hideButton {
-  margin: 0 2px 0 20px;
+  margin: 0 2px 0 15px;
   opacity: 0.5;
 }