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

This commit is contained in:
Tamius Han 2019-10-23 19:34:58 +02:00
parent cd4e3768e2
commit 261f9a6b8d
5 changed files with 45 additions and 49 deletions

View File

@ -191,6 +191,7 @@ var ExtensionConf = {
label: 'Automatic', // example override, takes precedence over default label label: 'Automatic', // example override, takes precedence over default label
shortcut: [{ shortcut: [{
key: 'a', key: 'a',
code: 'KeyA',
ctrlKey: false, ctrlKey: false,
metaKey: false, metaKey: false,
altKey: false, altKey: false,
@ -204,7 +205,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'crop', path: 'crop',
}, },
},{ }, {
name: 'Reset to default', name: 'Reset to default',
label: 'Reset', label: 'Reset',
cmd: [{ cmd: [{
@ -216,6 +217,7 @@ var ExtensionConf = {
show: true, show: true,
shortcut: [{ shortcut: [{
key: 'r', key: 'r',
code: 'KeyR',
ctrlKey: false, ctrlKey: false,
metaKey: false, metaKey: false,
altKey: false, altKey: false,
@ -229,7 +231,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'crop' path: 'crop'
}, },
},{ }, {
name: 'Fit to width', name: 'Fit to width',
label: 'Fit width', label: 'Fit width',
cmd: [{ cmd: [{
@ -241,6 +243,7 @@ var ExtensionConf = {
show: true, show: true,
shortcut: [{ shortcut: [{
key: 'w', key: 'w',
code: 'KeyW',
ctrlKey: false, ctrlKey: false,
metaKey: false, metaKey: false,
altKey: false, altKey: false,
@ -254,7 +257,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'crop' path: 'crop'
} }
},{ }, {
name: 'Fit to height', name: 'Fit to height',
label: 'Fit height', label: 'Fit height',
cmd: [{ cmd: [{
@ -266,6 +269,7 @@ var ExtensionConf = {
show: true, show: true,
shortcut: [{ shortcut: [{
key: 'e', key: 'e',
code: 'KeyE',
ctrlKey: false, ctrlKey: false,
metaKey: false, metaKey: false,
altKey: false, altKey: false,
@ -279,7 +283,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'crop' path: 'crop'
} }
},{ }, {
name: 'Set aspect ratio to 16:9', name: 'Set aspect ratio to 16:9',
label: '16:9', label: '16:9',
cmd: [{ cmd: [{
@ -292,6 +296,7 @@ var ExtensionConf = {
show: true, show: true,
shortcut: [{ shortcut: [{
key: 's', key: 's',
code: 'KeyS',
ctrlKey: false, ctrlKey: false,
metaKey: false, metaKey: false,
altKey: false, altKey: false,
@ -305,7 +310,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'crop' path: 'crop'
} }
},{ }, {
name: 'Set aspect ratio to 21:9 (2.39:1)', name: 'Set aspect ratio to 21:9 (2.39:1)',
label: '21:9', label: '21:9',
cmd: [{ cmd: [{
@ -318,6 +323,7 @@ var ExtensionConf = {
show: true, show: true,
shortcut: [{ shortcut: [{
key: 'd', key: 'd',
code: 'KeyD',
ctrlKey: false, ctrlKey: false,
metaKey: false, metaKey: false,
altKey: false, altKey: false,
@ -331,7 +337,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'crop' path: 'crop'
} }
},{ }, {
name: 'Set aspect ratio to 18:9', name: 'Set aspect ratio to 18:9',
label: '18:9', label: '18:9',
cmd: [{ cmd: [{
@ -344,6 +350,7 @@ var ExtensionConf = {
show: true, show: true,
shortcut: [{ shortcut: [{
key: 'x', key: 'x',
code: 'KeyX',
ctrlKey: false, ctrlKey: false,
metaKey: false, metaKey: false,
altKey: false, altKey: false,
@ -357,7 +364,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'crop', path: 'crop',
} }
},{ }, {
name: 'Zoom in', name: 'Zoom in',
label: 'Zoom', label: 'Zoom',
cmd: [{ cmd: [{
@ -369,6 +376,7 @@ var ExtensionConf = {
show: false, show: false,
shortcut: [{ shortcut: [{
key: 'z', key: 'z',
code: 'KeyY',
ctrlKey: false, ctrlKey: false,
metaKey: false, metaKey: false,
altKey: false, altKey: false,
@ -381,7 +389,7 @@ var ExtensionConf = {
playerUi: { playerUi: {
show: false, show: false,
} }
},{ }, {
name: 'Zoom out', name: 'Zoom out',
label: 'Unzoom', label: 'Unzoom',
cmd: [{ cmd: [{
@ -393,6 +401,7 @@ var ExtensionConf = {
show: false, show: false,
shortcut: [{ shortcut: [{
key: 'u', key: 'u',
code: 'KeyU',
ctrlKey: false, ctrlKey: false,
metaKey: false, metaKey: false,
altKey: false, altKey: false,
@ -405,32 +414,18 @@ var ExtensionConf = {
playerUi: { playerUi: {
show: false show: false
} }
},{ }, {
name: 'Toggle panning mode', name: 'Toggle panning mode',
label: 'Toggle pan', label: 'Toggle pan',
cmd: [{ cmd: [{
action: 'toggle-pan', action: 'toggle-pan',
arg: 'toggle' arg: 'toggle'
}], }],
scopes: {
page: {
show: true,
shortcut: [{
key: 'p',
ctrlKey: false,
metaKey: false,
altKey: false,
shiftKey: false,
onKeyUp: true,
onKeyDown: false,
}]
}
},
playerUi: { playerUi: {
show: true, show: true,
path: 'zoom' path: 'zoom'
} }
},{ }, {
name: 'Hold to pan', name: 'Hold to pan',
cmd: [{ cmd: [{
action: 'pan', action: 'pan',
@ -479,7 +474,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'stretch' path: 'stretch'
} }
},{ }, {
name: 'Set stretch to "basic"', name: 'Set stretch to "basic"',
label: 'Basic stretch', label: 'Basic stretch',
cmd: [{ cmd: [{
@ -504,7 +499,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'stretch' path: 'stretch'
} }
},{ }, {
name: 'Set stretch to "hybrid"', name: 'Set stretch to "hybrid"',
label: 'Hybrid stretch', label: 'Hybrid stretch',
cmd: [{ cmd: [{
@ -529,7 +524,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'stretch' path: 'stretch'
} }
},{ }, {
name: 'Stretch only to hide thin borders', name: 'Stretch only to hide thin borders',
label: 'Thin borders only', label: 'Thin borders only',
cmd: [{ cmd: [{
@ -554,7 +549,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'stretch' path: 'stretch'
} }
},{ }, {
name: 'Set stretch to default value', name: 'Set stretch to default value',
label: 'Default', label: 'Default',
cmd: [{ cmd: [{
@ -592,7 +587,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'align' path: 'align'
} }
},{ }, {
name: 'Align video to center', name: 'Align video to center',
label: 'Center', label: 'Center',
cmd: [{ cmd: [{
@ -614,7 +609,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'align' path: 'align'
} }
},{ }, {
name: 'Align video to the right', name: 'Align video to the right',
label: 'Right', label: 'Right',
cmd: [{ cmd: [{
@ -636,7 +631,7 @@ var ExtensionConf = {
show: true, show: true,
path: 'align' path: 'align'
} }
},{ }, {
name: 'Use default alignment', name: 'Use default alignment',
label: 'Default', label: 'Default',
cmd: [{ cmd: [{
@ -669,7 +664,7 @@ var ExtensionConf = {
show: true, show: true,
} }
} }
},{ }, {
name: 'Enable extension on whitelisted sites only', name: 'Enable extension on whitelisted sites only',
label: 'On whitelist only', label: 'On whitelist only',
cmd: [{ cmd: [{
@ -682,7 +677,7 @@ var ExtensionConf = {
show: true show: true
} }
} }
},{ }, {
name: 'Extension mode: use default settings', name: 'Extension mode: use default settings',
label: 'Default', label: 'Default',
cmd: [{ cmd: [{
@ -695,7 +690,7 @@ var ExtensionConf = {
show: true show: true
} }
} }
},{ }, {
name: 'Disable extension', name: 'Disable extension',
label: 'Disable', label: 'Disable',
cmd: [{ cmd: [{
@ -711,7 +706,7 @@ var ExtensionConf = {
show: true, show: true,
} }
} }
},{ }, {
name: 'Enable automatic aspect ratio detection', name: 'Enable automatic aspect ratio detection',
label: 'Enable', label: 'Enable',
cmd: [{ cmd: [{
@ -727,7 +722,7 @@ var ExtensionConf = {
show: true show: true
} }
} }
},{ }, {
name: 'Enable automatic aspect ratio detection on whitelisted sites only', name: 'Enable automatic aspect ratio detection on whitelisted sites only',
label: 'On whitelist only', label: 'On whitelist only',
cmd: [{ cmd: [{
@ -740,7 +735,7 @@ var ExtensionConf = {
show: true, show: true,
} }
} }
},{ }, {
name: 'Use default settings for automatic aspect ratio detection', name: 'Use default settings for automatic aspect ratio detection',
label: 'Default', label: 'Default',
cmd: [{ cmd: [{
@ -753,7 +748,7 @@ var ExtensionConf = {
show: true, show: true,
} }
} }
},{ }, {
name: 'Disable automatic aspect ratio detection', name: 'Disable automatic aspect ratio detection',
label: 'Disable', label: 'Disable',
cmd: [{ cmd: [{
@ -792,7 +787,7 @@ var ExtensionConf = {
show: true, show: true,
} }
} }
},{ }, {
name: 'Enable keyboard shortcuts on whitelisted sites only', name: 'Enable keyboard shortcuts on whitelisted sites only',
label: 'On whitelist only', label: 'On whitelist only',
cmd: [{ cmd: [{
@ -804,7 +799,7 @@ var ExtensionConf = {
show: true show: true
}, },
} }
},{ }, {
name: 'Keyboard shortcuts mode: use default settings', name: 'Keyboard shortcuts mode: use default settings',
label: 'Default', label: 'Default',
cmd: [{ cmd: [{
@ -816,7 +811,7 @@ var ExtensionConf = {
show: true show: true
} }
} }
},{ }, {
name: 'Disable keyboard shortcuts', name: 'Disable keyboard shortcuts',
label: 'Disable', label: 'Disable',
cmd: [{ cmd: [{

View File

@ -192,8 +192,8 @@ class ActionHandler {
shortcut.altKey === event.altKey && shortcut.altKey === event.altKey &&
shortcut.shiftKey === event.shiftKey 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.ctrlKey === event.ctrlKey &&
shortcut.metaKey === event.metaKey && shortcut.metaKey === event.metaKey &&
shortcut.altKey === event.altKey && shortcut.altKey === event.altKey &&
@ -201,11 +201,11 @@ class ActionHandler {
} }
isActionMatch(shortcut, event, isLatin = true) { isActionMatch(shortcut, event, isLatin = true) {
// ASCII and symbols fall back to keycode matching, because we don't know for sure that // ASCII and symbols fall back to key code matching, because we don't know for sure that
// regular matching by key is going to work // regular matching by key is going to work
return isLatin ? return isLatin ?
this.isActionMatchStandard(shortcut, event) : this.isActionMatchStandard(shortcut, event) :
this.isActionMatchStandard(shortcut, event) || this.isActionMatchKeycode(shortcut, event); this.isActionMatchStandard(shortcut, event) || this.isActionMatchKeyCode(shortcut, event);
} }
execAction(actions, event, videoData) { execAction(actions, event, videoData) {

View File

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

View File

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

View File

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