shortcut to hide/show controller

If manual control is used we override default youtube autohide behavior
and yield control to the user.

Closes #104, #123.

inject.css

@@ -17,6 +17,12 @@
   opacity: 1.0;
 }
 
+.vsc-hidden { display: none !important; }
+.vsc-manual {
+  visibility: visible !important;
+  opacity: 1.0 !important;
+}
+
 /* 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) .vsc-controller {

inject.js

@@ -10,6 +10,7 @@ chrome.extension.sendMessage({}, function(response) {
       fasterKeyCode: 68,    // default: D
       rewindKeyCode: 90,    // default: Z
       advanceKeyCode: 88,   // default: X
+      displayKeyCode: 86,   // default: V
       rememberSpeed: false, // default: false
       blacklist: `
         www.instagram.com
@@ -29,6 +30,7 @@ chrome.extension.sendMessage({}, function(response) {
     tc.settings.rewindKeyCode = Number(storage.rewindKeyCode);
     tc.settings.slowerKeyCode = Number(storage.slowerKeyCode);
     tc.settings.fasterKeyCode = Number(storage.fasterKeyCode);
+    tc.settings.displayKeyCode = Number(storage.displayKeyCode);
     tc.settings.advanceKeyCode = Number(storage.advanceKeyCode);
     tc.settings.rememberSpeed = Boolean(storage.rememberSpeed);
     tc.settings.blacklist = String(storage.blacklist);
@@ -192,6 +194,8 @@ chrome.extension.sendMessage({}, function(response) {
           runAction('slower', document, true)
         } else if (keyCode == tc.settings.resetKeyCode) {
           runAction('reset', document, true)
+        } else if (keyCode == tc.settings.displayKeyCode) {
+          runAction('display', document, true)
         }
 
         return false;
@@ -277,6 +281,9 @@ chrome.extension.sendMessage({}, function(response) {
         } else if (action === 'close') {
           v.classList.add('vsc-cancelled');
           controller.remove();
+        } else if (action === 'display') {
+          controller.classList.add('vsc-manual');
+          controller.classList.toggle('vsc-hidden');
         }
       }
     });

options.html

@@ -32,6 +32,10 @@
         <label for="fasterKeyInput">Increase speed</label>
         <input id="fasterKeyInput" placeholder="press a key" type="text" value=""/>
       </div>
+      <div class="row">
+        <label for="displayKeyInput">Show/hide controller</label>
+        <input id="displayKeyInput" placeholder="press a key" type="text" value=""/>
+      </div>
     </section>
 
     <section>

options.js

@@ -8,6 +8,7 @@ var tcDefaults = {
   fasterKeyCode: 68,    // default: D
   rewindKeyCode: 90,    // default: Z
   advanceKeyCode: 88,   // default: X
+  displayKeyCode: 86,   // default: V
   rememberSpeed: false, // default: false
   blacklist: `
     www.instagram.com
@@ -95,6 +96,7 @@ function save_options() {
   var advanceKeyCode = document.getElementById('advanceKeyInput').keyCode;
   var slowerKeyCode = document.getElementById('slowerKeyInput').keyCode;
   var fasterKeyCode = document.getElementById('fasterKeyInput').keyCode;
+  var displayKeyCode = document.getElementById('displayKeyInput').keyCode;
   var rememberSpeed = document.getElementById('rememberSpeed').checked;
   var blacklist     = document.getElementById('blacklist').value;
 
@@ -106,6 +108,7 @@ function save_options() {
   advanceKeyCode = isNaN(advanceKeyCode) ? tcDefaults.advanceKeyCode : advanceKeyCode;
   slowerKeyCode = isNaN(slowerKeyCode) ? tcDefaults.slowerKeyCode : slowerKeyCode;
   fasterKeyCode = isNaN(fasterKeyCode) ? tcDefaults.fasterKeyCode : fasterKeyCode;
+  displayKeyCode = isNaN(displayKeyCode) ? tcDefaults.displayKeyCode : displayKeyCode;
 
   chrome.storage.sync.set({
     speedStep:      speedStep,
@@ -116,6 +119,7 @@ function save_options() {
     advanceKeyCode: advanceKeyCode,
     slowerKeyCode:  slowerKeyCode,
     fasterKeyCode:  fasterKeyCode,
+    displayKeyCode: displayKeyCode,
     rememberSpeed:  rememberSpeed,
     blacklist:      blacklist.replace(/^\s+|\s+$/gm,'')
   }, function() {
@@ -139,6 +143,7 @@ function restore_options() {
     updateShortcutInputText('advanceKeyInput', storage.advanceKeyCode);
     updateShortcutInputText('slowerKeyInput', storage.slowerKeyCode);
     updateShortcutInputText('fasterKeyInput', storage.fasterKeyCode);
+    updateShortcutInputText('displayKeyInput', storage.displayKeyCode);
     document.getElementById('rememberSpeed').checked = storage.rememberSpeed;
     document.getElementById('blacklist').value = storage.blacklist;
   });
@@ -173,6 +178,7 @@ document.addEventListener('DOMContentLoaded', function () {
   initShortcutInput('advanceKeyInput');
   initShortcutInput('slowerKeyInput');
   initShortcutInput('fasterKeyInput');
+  initShortcutInput('displayKeyInput');
 
   document.getElementById('rewindTime').addEventListener('keypress', inputFilterNumbersOnly);
   document.getElementById('advanceTime').addEventListener('keypress', inputFilterNumbersOnly);