joshpatra/videospeed
1
0
Fork 0
mirror of https://github.com/SoPat712/videospeed.git synced 2025-08-21 18:08:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Allow user to define custom shortcuts #347 (#399)

Browse Source 
- Over-all working structure changed
- tc.settings.keyBindings array added
- Options page changed
Clean up of #350
This commit is contained in:
Can Arslan
2018-12-12 07:31:44 +03:00
committed by Ilya Grigorik
parent ecca27f0c0
commit e24b95dd84
5 changed files with 357 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
options.js
View File

@@ -1,32 +1,35 @@
var tcDefaults = {
speed: 1.0, // default 1x
speedStep: 0.1, // default 0.1x
rewindTime: 10, // default 10s
advanceTime: 10, // default 10s
fastSpeed: 1.8, // default 1.8x
resetKeyCode: 82, // default: R
slowerKeyCode: 83, // default: S
fasterKeyCode: 68, // default: D
fastKeyCode: 71, // default: G
rewindKeyCode: 90, // default: Z
advanceKeyCode: 88, // default: X
speed: 1.0, // default:
displayKeyCode: 86, // default: V
rememberSpeed: false, // default: false
startHidden: false, // default: false
keyBindings: [
{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
{action: "advance", key: 88, value: 10, force: false, predefined: true}, // X
{action: "reset", key: 82, value: 1, force: false, predefined: true}, // R
{action: "fast", key: 71, value: 1.8, force: false, predefined: true} // G
],
blacklist: `
www.instagram.com
twitter.com
vine.co
imgur.com
`.replace(/^\s+|\s+$/gm,'')
`.replace(/^\s+|\s+$/gm, '')
};
var keyBindings = [];
var keyCodeAliases = {
32: 'Space',
96: 'Num 0',
97: 'Num 1',
98: 'Num 2',
99: 'Num 3',
0: 'null',
null: 'null',
undefined: 'null',
32: 'Space',
96: 'Num 0',
97: 'Num 1',
98: 'Num 2',
99: 'Num 3',
100: 'Num 4',
101: 'Num 5',
102: 'Num 6',
@@ -64,6 +67,9 @@ function recordKeyPress(e) {
e.stopPropagation();
} else if (e.keyCode === 8) { // Clear input when backspace pressed
e.target.value = '';
} else if (e.keyCode === 27) { // When esc clicked, clear input
e.target.value = 'null';
e.target.keyCode = null;
}
};
@@ -88,50 +94,64 @@ function updateShortcutInputText(inputId, keyCode) {
document.getElementById(inputId).keyCode = keyCode;
}
function updateCustomShortcutInputText(inputItem, keyCode) {
inputItem.value = keyCodeAliases[keyCode] || String.fromCharCode(keyCode);
inputItem.keyCode = keyCode;
}
function add_shortcut() {
var html = `<select class="customDo">
<option value="slower">Decrease speed</option>
<option value="faster">Increase speed</option>
<option value="rewind">Rewind</option>
<option value="advance">Advance</option>
<option value="reset">Reset speed</option>
<option value="fast">Preferred speed</option>
<option value="muted">Mute</option>
<option value="pause">Pause</option>
</select>
<input class="customKey" type="text" 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>
<button class="removeParent">X</button>`;
var div = document.createElement('div');
div.setAttribute('class', 'row customs');
div.innerHTML = html;
var customs_element = document.getElementById("customs");
customs_element.insertBefore(div, customs_element.children[customs_element.childElementCount - 1]);
}
function createKeyBindings(item) {
const action = item.querySelector(".customDo").value;
const key = item.querySelector(".customKey").keyCode;
const value = Number(item.querySelector(".customValue").value);
const force = item.querySelector(".customForce").value;
const predefined = !!item.id;//item.id ? true : false;
keyBindings.push({action: action, key: key, value: value, force: force, predefined: predefined});
}
// Saves options to chrome.storage
function save_options() {
keyBindings = [];
Array.from(document.querySelectorAll(".customs")).forEach(item => createKeyBindings(item)); // Remove added shortcuts
var speedStep = document.getElementById('speedStep').value;
var rewindTime = document.getElementById('rewindTime').value;
var advanceTime = document.getElementById('advanceTime').value;
var fastSpeed = document.getElementById('fastSpeed').value;
var resetKeyCode = document.getElementById('resetKeyInput').keyCode;
var rewindKeyCode = document.getElementById('rewindKeyInput').keyCode;
var advanceKeyCode = document.getElementById('advanceKeyInput').keyCode;
var slowerKeyCode = document.getElementById('slowerKeyInput').keyCode;
var fasterKeyCode = document.getElementById('fasterKeyInput').keyCode;
var fastKeyCode = document.getElementById('fastKeyInput').keyCode;
var displayKeyCode = document.getElementById('displayKeyInput').keyCode;
var rememberSpeed = document.getElementById('rememberSpeed').checked;
var startHidden = document.getElementById('startHidden').checked;
var blacklist = document.getElementById('blacklist').value;
speedStep = isNaN(speedStep) ? tcDefaults.speedStep : Number(speedStep);
rewindTime = isNaN(rewindTime) ? tcDefaults.rewindTime : Number(rewindTime);
advanceTime = isNaN(advanceTime) ? tcDefaults.advanceTime : Number(advanceTime);
fastSpeed = isNaN(fastSpeed) ? tcDefaults.fastSpeed : Number(fastSpeed);
resetKeyCode = isNaN(resetKeyCode) ? tcDefaults.resetKeyCode : resetKeyCode;
rewindKeyCode = isNaN(rewindKeyCode) ? tcDefaults.rewindKeyCode : rewindKeyCode;
advanceKeyCode = isNaN(advanceKeyCode) ? tcDefaults.advanceKeyCode : advanceKeyCode;
slowerKeyCode = isNaN(slowerKeyCode) ? tcDefaults.slowerKeyCode : slowerKeyCode;
fasterKeyCode = isNaN(fasterKeyCode) ? tcDefaults.fasterKeyCode : fasterKeyCode;
fastKeyCode = isNaN(fastKeyCode) ? tcDefaults.fastKeyCode : fastKeyCode;
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({
speedStep: speedStep,
rewindTime: rewindTime,
advanceTime: advanceTime,
fastSpeed: fastSpeed,
resetKeyCode: resetKeyCode,
rewindKeyCode: rewindKeyCode,
advanceKeyCode: advanceKeyCode,
slowerKeyCode: slowerKeyCode,
fasterKeyCode: fasterKeyCode,
fastKeyCode: fastKeyCode,
displayKeyCode: displayKeyCode,
rememberSpeed: rememberSpeed,
startHidden: startHidden,
keyBindings: keyBindings,
blacklist: blacklist.replace(/^\s+|\s+$/gm,'')
}, function() {
// Update status to let user know options were saved.
@@ -146,26 +166,41 @@ function save_options() {
// Restores options from chrome.storage
function restore_options() {
chrome.storage.sync.get(tcDefaults, function(storage) {
document.getElementById('speedStep').value = storage.speedStep.toFixed(2);
document.getElementById('rewindTime').value = storage.rewindTime;
document.getElementById('advanceTime').value = storage.advanceTime;
document.getElementById('fastSpeed').value = storage.fastSpeed;
updateShortcutInputText('resetKeyInput', storage.resetKeyCode);
updateShortcutInputText('rewindKeyInput', storage.rewindKeyCode);
updateShortcutInputText('advanceKeyInput', storage.advanceKeyCode);
updateShortcutInputText('slowerKeyInput', storage.slowerKeyCode);
updateShortcutInputText('fasterKeyInput', storage.fasterKeyCode);
updateShortcutInputText('fastKeyInput', storage.fastKeyCode);
updateShortcutInputText('displayKeyInput', storage.displayKeyCode);
document.getElementById('rememberSpeed').checked = storage.rememberSpeed;
document.getElementById('startHidden').checked = storage.startHidden;
document.getElementById('blacklist').value = storage.blacklist;
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"];
updateCustomShortcutInputText(document.querySelector("#" + item["action"] + " .customKey"), item["key"]);
document.querySelector("#" + item["action"] + " .customValue").value = item["value"];
document.querySelector("#" + item["action"] + " .customForce").value = item["force"];
}
else {
// new ones
add_shortcut();
const dom = document.querySelector(".customs:last-of-type")
dom.querySelector(".customDo").value = item["action"];
if (item["action"] === "pause" || item["action"] === "muted")
dom.querySelector(".customValue").disabled = true;
updateCustomShortcutInputText(dom.querySelector(".customKey"), item["key"]);
dom.querySelector(".customValue").value = item["value"];
dom.querySelector(".customForce").value = item["force"];
}
}
});
}
function restore_defaults() {
chrome.storage.sync.set(tcDefaults, function() {
restore_options();
document.querySelectorAll(".removeParent").forEach(button => button.click()); // Remove added shortcuts
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Default options restored';
@@ -175,6 +210,10 @@ function restore_defaults() {
});
}
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);
@@ -185,18 +224,47 @@ document.addEventListener('DOMContentLoaded', function () {
restore_options();
document.getElementById('save').addEventListener('click', save_options);
document.getElementById('add').addEventListener('click', add_shortcut);
document.getElementById('restore').addEventListener('click', restore_defaults);
document.getElementById('experimental').addEventListener('click', show_experimental);
initShortcutInput('resetKeyInput');
initShortcutInput('rewindKeyInput');
initShortcutInput('advanceKeyInput');
initShortcutInput('slowerKeyInput');
initShortcutInput('fasterKeyInput');
initShortcutInput('fastKeyInput');
initShortcutInput('displayKeyInput');
document.getElementById('rewindTime').addEventListener('keypress', inputFilterNumbersOnly);
document.getElementById('advanceTime').addEventListener('keypress', inputFilterNumbersOnly);
document.getElementById('speedStep').addEventListener('keypress', inputFilterNumbersOnly);
document.getElementById('fastSpeed').addEventListener('keypress', inputFilterNumbersOnly);
function eventCaller(event, className, funcName) {
if (!event.target.classList.contains(className)) {
return
}
funcName(event);
}
document.addEventListener('keypress', (event) => {
eventCaller(event, "customValue", inputFilterNumbersOnly)
});
document.addEventListener('focus', (event) => {
eventCaller(event, "customKey", inputFocus)
});
document.addEventListener('blur', (event) => {
eventCaller(event, "customKey", inputBlur)
});
document.addEventListener('keydown', (event) => {
eventCaller(event, "customKey", recordKeyPress)
});
document.addEventListener('click', (event) => {
eventCaller(event, "removeParent", function () {
event.target.parentNode.remove()
})
});
document.addEventListener('change', (event) => {
eventCaller(event, "customDo", function () {
switch (event.target.value) {
case "muted":
case "pause":
event.target.nextElementSibling.nextElementSibling.disabled = true;
event.target.nextElementSibling.nextElementSibling.value = 0;
break;
default:
event.target.nextElementSibling.nextElementSibling.disabled = false;
}
})
});
})