Use event.code instead of event.keyCode. Add key codes to default settings

src/ext/conf/ExtensionConf.js

@@ -191,6 +191,7 @@ var ExtensionConf = {
         label: 'Automatic',   // example override, takes precedence over default label
         shortcut: [{
           key: 'a',
+          code: 'KeyA',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -216,6 +217,7 @@ var ExtensionConf = {
         show: true,
         shortcut: [{
           key: 'r',
+          code: 'KeyR',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -241,6 +243,7 @@ var ExtensionConf = {
         show: true,
         shortcut: [{
           key: 'w',
+          code: 'KeyW',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -266,6 +269,7 @@ var ExtensionConf = {
         show: true,
         shortcut: [{
           key: 'e',
+          code: 'KeyE',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -292,6 +296,7 @@ var ExtensionConf = {
         show: true,
         shortcut:  [{
           key: 's',
+          code: 'KeyS',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -318,6 +323,7 @@ var ExtensionConf = {
         show: true,
         shortcut: [{
           key: 'd',
+          code: 'KeyD',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -344,6 +350,7 @@ var ExtensionConf = {
         show: true,
         shortcut: [{
           key: 'x',
+          code: 'KeyX',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -369,6 +376,7 @@ var ExtensionConf = {
         show: false,
         shortcut: [{
           key: 'z',
+          code: 'KeyY',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -393,6 +401,7 @@ var ExtensionConf = {
         show: false,
         shortcut: [{
           key: 'u',
+          code: 'KeyU',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -412,20 +421,6 @@ var ExtensionConf = {
       action: 'toggle-pan',
       arg: 'toggle'
     }],
-    scopes: {
-      page: {
-        show: true,
-        shortcut: [{
-          key: 'p',
-          ctrlKey: false,
-          metaKey: false,
-          altKey: false, 
-          shiftKey: false,
-          onKeyUp: true,
-          onKeyDown: false,
-        }]
-      }
-    },
     playerUi: {
       show: true,
       path: 'zoom'

src/ext/lib/ActionHandler.js

@@ -192,8 +192,8 @@ class ActionHandler {
            shortcut.altKey   === event.altKey  &&
            shortcut.shiftKey === event.shiftKey
   }
-  isActionMatchKeycode(shortcut, event) {
+  isActionMatchKeyCode(shortcut, event) {
-    return shortcut.keyCode  === event.key     &&
+    return shortcut.code     === event.code    &&
            shortcut.ctrlKey  === event.ctrlKey &&
            shortcut.metaKey  === event.metaKey &&
            shortcut.altKey   === event.altKey  &&
@@ -205,7 +205,7 @@ class ActionHandler {
     // regular matching by key is going to work
     return isLatin ? 
       this.isActionMatchStandard(shortcut, event) : 
-      this.isActionMatchStandard(shortcut, event) || this.isActionMatchKeycode(shortcut, event);
+      this.isActionMatchStandard(shortcut, event) || this.isActionMatchKeyCode(shortcut, event);
   }
 
   execAction(actions, event, videoData) {

src/options/App.vue

@@ -109,6 +109,8 @@
 </template>
 
 <script>
+import ControlsSettings from './controls-settings/ControlsSettings';
+import GeneralSettings from './GeneralSettings';
 import Donate from '../common/misc/Donate.vue';
 import SuperAdvancedSettings from './SuperAdvancedSettings.vue';
 import Debug from '../ext/conf/Debug.js';

src/options/controls-settings/scope-settings-component/ScopeSettings.vue

@@ -39,12 +39,11 @@
 </template>
 
 <script>
-import SetShortcutButton from './SetShortcutButton.vue';
+import SetShortcutButton from './SetShortcutButton';
-
 
 export default {
   components: {
-    SetShortcutButton
+    SetShortcutButton,
   },
   props: {
     scopeOptions: Object,

src/options/controls-settings/scope-settings-component/SetShortcutButton.vue

@@ -38,7 +38,7 @@ export default {
       if (this.waitingForPress) {
         const shortcut = {
           key: event.key,
-          keyCode: event.keyCode,
+          code: event.code,
           ctrlKey: event.ctrlKey,
           metaKey: event.metaKey,
           altKey: event.altKey,