add explicit hide/close button

inject.css

@@ -12,7 +12,7 @@
   margin: 10px;
   line-height: 1.8em;
 
-  cursor: pointer;
+  cursor: default;
   z-index: 9999999;
   opacity: 0.3;
 
@@ -20,9 +20,6 @@
   font-size: 13px;
 }
 
-.tc-videoController button {
-}
-
 .tc-videoController:hover {
   opacity: 0.7;
 }
@@ -37,6 +34,7 @@
 }
 
 .tc-controls button {
+  cursor: pointer;
   color: black !important;
   background: white !important;
   font-weight: bold !important;
@@ -47,6 +45,11 @@
   line-height: 15px !important;
 }
 
+.tc-videoController button.tc-hideButton {
+  margin: 0 2px 0 20px !important;
+  opacity: 0.8;
+}
+
 /* shift controller when YouTube infobar is present */
 .ytp-block-autohide:not(.el-detailpage):not(.hide-info-bar) .tc-videoController {
   margin-top: 40px;

inject.js

@@ -66,14 +66,18 @@ chrome.extension.sendMessage({}, function(response) {
         var fasterButton = document.createElement('button');
         var slowerButton = document.createElement('button');
         var rewindButton = document.createElement('button');
+        var hideButton = document.createElement('button');
 
         rewindButton.innerHTML = '«';
         fasterButton.textContent = '+';
         slowerButton.textContent = '-';
+        hideButton.textContent = 'x';
+        hideButton.className = 'tc-hideButton';
 
         controls.appendChild(rewindButton);
         controls.appendChild(slowerButton);
         controls.appendChild(fasterButton);
+        controls.appendChild(hideButton);
 
         container.appendChild(speedIndicator);
         container.appendChild(controls);
@@ -96,7 +100,7 @@ chrome.extension.sendMessage({}, function(response) {
             runAction('faster')
           } else if (e.target === rewindButton) {
             runAction('rewind')
-          } else {
+          } else if (e.target === hideButton) {
             container.nextSibling.classList.add('vc-cancelled')
             container.remove();
           }