Make shortcuts consistent

inject.js

@@ -6,7 +6,6 @@
       speeds: {},           // empty object to hold speed for each source
 
       displayKeyCode: 86,   // default: V
-      displayForce: false,
       rememberSpeed: false, // default: false
       audioBoolean: false,  // default: false
       startHidden: false,   // default: false
@@ -75,7 +74,6 @@
         keyBindings: tc.settings.keyBindings,
         version: tc.settings.version,
         displayKeyCode: tc.settings.displayKeyCode,
-        displayForce: tc.settings.displayForce,
         rememberSpeed: tc.settings.rememberSpeed,
         audioBoolean: tc.settings.audioBoolean,
         startHidden: tc.settings.startHidden,
@@ -85,13 +83,23 @@
     }
     tc.settings.lastSpeed = Number(storage.lastSpeed);
     tc.settings.displayKeyCode = Number(storage.displayKeyCode);
-    tc.settings.displayForce = String(storage.displayForce);
     tc.settings.rememberSpeed = Boolean(storage.rememberSpeed);
     tc.settings.audioBoolean = Boolean(storage.audioBoolean);
     tc.settings.startHidden = Boolean(storage.startHidden);
     tc.settings.controllerOpacity = Number(storage.controllerOpacity);
     tc.settings.blacklist = String(storage.blacklist);
 
+    // ensure that there is a "display" binding (for upgrades from versions that had it as a separate binding)
+    if (tc.settings.keyBindings.filter(x => x.action == "display").length == 0) {
+      tc.settings.keyBindings.push({
+        action: "display",
+        key: Number(storage.displayKeyCode) || 86,
+        value: 0,
+        force: false,
+        predefined: true
+      }); // default V
+    }
+
     initializeWhenReady(document);
   });
 
@@ -361,13 +369,6 @@
             return false;
           }
 
-          if (keyCode == tc.settings.displayKeyCode) {
-            runAction('display', document, true)
-            if (tc.settings.displayForce === "true") {// disable websites key bindings
-              event.preventDefault();
-              event.stopPropagation();
-            }
-          }
         var item = tc.settings.keyBindings.find(item => item.key === keyCode);
         if (item) {
           runAction(item.action, document, item.value);

options.html

@@ -12,14 +12,16 @@
 
     <section id="customs">
       <h3>Shortcuts</h3>
-      <div class="row">
+        <div class="row customs" id="display">
-        <label for="displayKeyInput">Show/hide controller</label>
+            <select class="customDo">
-        <input id="displayKeyInput" placeholder="press a key" type="text" value=""/>
+                <option value="display">Show/hide controller</option>
-        <select class="customForce" id="displayForce">
+            </select>
+            <input class="customKey" type="text" value="" placeholder="press a key">
+            <input class="customValue" type="text" placeholder="value (0.10)">
+            <select class="customForce">
                 <option value="false">Do not disable website key bindings</option>
                 <option value="true">Disable websites key bindings</option>
-        </select>
+            </select></div>
-      </div>
         <div class="row customs" id="slower">
             <select class="customDo">
                 <option value="slower">Decrease speed</option>

options.js

@@ -3,12 +3,12 @@ var regStrip=/^[\r\t\f\v ]+|[\r\t\f\v ]+$/gm;
 var tcDefaults = {
   speed: 1.0,           // default:
   displayKeyCode: 86,   // default: V
-  displayForce: false,
   rememberSpeed: false, // default: false
   audioBoolean: false, // default: false
   startHidden: false,   // default: false
   controllerOpacity: 0.3, // default: 0.3
   keyBindings: [
+    {action: "display", key: 86, value: 0, force: false, predefined: true }, // V
     {action: "slower", key: 83, value: 0.1, force: false, predefined: true}, // S
     {action: "faster", key: 68, value: 0.1, force: false, predefined: true}, // D
     {action: "rewind", key: 90, value: 10, force: false, predefined: true}, // Z
@@ -106,7 +106,7 @@ function updateCustomShortcutInputText(inputItem, keyCode) {
 }
 
 // List of custom actions for which customValue should be disabled
-var customActionsNoValues=["pause","muted","mark","jump"];
+var customActionsNoValues=["pause","muted","mark","jump","display"];
 
 function add_shortcut() {
   var html = `<select class="customDo">
@@ -120,6 +120,7 @@ function add_shortcut() {
     <option value="pause">Pause</option>
     <option value="mark">Set marker</option>
     <option value="jump">Jump to marker</option>
+    <option value="display">Show/hide controller</option>
     </select> 
     <input class="customKey" type="text" placeholder="press a key"/> 
     <input class="customValue" type="text" placeholder="value (0.10)"/> 
@@ -150,20 +151,14 @@ function save_options() {
   keyBindings = [];
   Array.from(document.querySelectorAll(".customs")).forEach(item => createKeyBindings(item)); // Remove added shortcuts
 
-  var displayKeyCode = document.getElementById('displayKeyInput').keyCode;
-  var displayForce = document.getElementById('displayForce').value;
   var rememberSpeed = document.getElementById('rememberSpeed').checked;
   var audioBoolean = document.getElementById('audioBoolean').checked;
   var startHidden = document.getElementById('startHidden').checked;
   var controllerOpacity = document.getElementById('controllerOpacity').value;
   var blacklist     = document.getElementById('blacklist').value;
 
-  displayKeyCode = isNaN(displayKeyCode) ? tcDefaults.displayKeyCode : displayKeyCode;
-
   chrome.storage.sync.remove(["resetSpeed", "speedStep", "fastSpeed", "rewindTime", "advanceTime", "resetKeyCode", "slowerKeyCode", "fasterKeyCode", "rewindKeyCode", "advanceKeyCode", "fastKeyCode"]);
   chrome.storage.sync.set({
-    displayKeyCode: displayKeyCode,
-    displayForce: displayForce,
     rememberSpeed:  rememberSpeed,
     audioBoolean:  audioBoolean,
     startHidden:    startHidden,
@@ -183,19 +178,29 @@ function save_options() {
 // Restores options from chrome.storage
 function restore_options() {
   chrome.storage.sync.get(tcDefaults, function(storage) {
-    updateShortcutInputText('displayKeyInput', storage.displayKeyCode);
-    document.getElementById('displayForce').value = storage.displayForce;
     document.getElementById('rememberSpeed').checked = storage.rememberSpeed;
     document.getElementById('audioBoolean').checked = storage.audioBoolean;
     document.getElementById('startHidden').checked = storage.startHidden;
     document.getElementById('controllerOpacity').value = storage.controllerOpacity;
     document.getElementById('blacklist').value = storage.blacklist;
 
+    // ensure that there is a "display" binding for upgrades from versions that had it as a separate binding
+    if(storage.keyBindings.filter(x => x.action == "display").length == 0){
+      storage.keyBindings.push({ action: "display", value: 0, force: false, predefined: true });
+    }
+
     for (let i in storage.keyBindings) {
       var item = storage.keyBindings[i];
       if (item.predefined) {
         //do predefined ones because their value needed for overlay
         // document.querySelector("#" + item["action"] + " .customDo").value = item["action"];
+        if (item["action"] == "display" && typeof (item["key"]) === "undefined"){
+          item["key"] = storage.displayKeyCode || tcDefaults.displayKeyCode; // V
+        }
+
+        if (customActionsNoValues.includes(item["action"]))
+          document.querySelector("#" + item["action"] + " .customValue").disabled = true;
+
         updateCustomShortcutInputText(document.querySelector("#" + item["action"] + " .customKey"), item["key"]);
         document.querySelector("#" + item["action"] + " .customValue").value = item["value"];
         document.querySelector("#" + item["action"] + " .customForce").value = item["force"];
@@ -234,12 +239,6 @@ function show_experimental() {
   document.querySelectorAll(".customForce").forEach(item => item.style.display = 'inline-block');
 }
 
-function initShortcutInput(inputId) {
-  document.getElementById(inputId).addEventListener('focus', inputFocus);
-  document.getElementById(inputId).addEventListener('blur', inputBlur);
-  document.getElementById(inputId).addEventListener('keydown', recordKeyPress);
-}
-
 document.addEventListener('DOMContentLoaded', function () {
   restore_options();
 
@@ -248,8 +247,6 @@ document.addEventListener('DOMContentLoaded', function () {
   document.getElementById('restore').addEventListener('click', restore_defaults);
   document.getElementById('experimental').addEventListener('click', show_experimental);
 
-  initShortcutInput('displayKeyInput');
-
   function eventCaller(event, className, funcName) {
     if (!event.target.classList.contains(className)) {
       return