diff --git a/inject.js b/inject.js index 7f8d47f..c616f51 100644 --- a/inject.js +++ b/inject.js @@ -130,7 +130,7 @@ chrome.extension.sendMessage({}, function(response) { var speedStep, rewindTime, rewindKeyCode, slowerKeyCode, fasterKeyCode; chrome.storage.sync.get({ - speedStep: 0.25, // default 0.25x + speedStep: 0.1, // default 0.10x rewindTime: 10, // default 10s rewindKeyCode: 65, // default: A slowerKeyCode: 83, // default: S diff --git a/manifest.json b/manifest.json index 538b691..f58bb91 100755 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "name": "HTML5 Video Playback Speed Controller", - "version": "0.1.2", + "version": "0.1.3", "manifest_version": 2, "description": "Lean in and speed up your video learning with handy shortcuts to accelerate, slow-down, and rewind your video via your keyboard.", "homepage_url": "https://github.com/igrigorik/videospeed", diff --git a/options.css b/options.css index b0d8cb0..0486233 100644 --- a/options.css +++ b/options.css @@ -47,7 +47,7 @@ section h3 { margin-left: -18px; } -button, select { +button { -webkit-appearance: none; position: relative; @@ -56,7 +56,7 @@ button, select { min-width: 4em; min-height: 2em; - background-image: linear-gradient(#EDEDED, #EDEDED 38%, #DEDEDE); + background-image: linear-gradient(#EDEDED, #EDEDED 38%, #DEDEDE); border: 1px solid rgba(0,0,0,0.25); border-radius: 2px; outline: none; @@ -68,16 +68,10 @@ button, select { user-select: none; } -select { - padding-right: 20px; - - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAaUlEQVQoz2P4//8/A7UwdkEGhiggTsODo4g2LBEImJmZvwE1/UfHIHGQPNGGAbHCggULFrKxsf1ENgjEB4mD5EnxJoaByAZB5Yk3DNlAPj6+L8gGkWUYzMC3b982IRtEtmFQjaxYxDAwAGi4TwMYKNLfAAAAAElFTkSuQmCC'), linear-gradient(#EDEDED, #EDEDED 38%, #DEDEDE); - background-position: right center; - background-repeat: no-repeat; -} input[type="text"] { - width: 120px; + width: 75px; + text-align: center; } .row { @@ -89,11 +83,6 @@ label { width: 150px; } -#rewindTime { - width: 69px; - text-align: center; -} - #status { color: #9D9D9D; display: inline-block; diff --git a/options.html b/options.html index c51b7ad..fc62e61 100644 --- a/options.html +++ b/options.html @@ -13,15 +13,15 @@

Shortcuts

- +
- +
- +
@@ -33,14 +33,7 @@
- +
diff --git a/options.js b/options.js index 9624fa1..baaf108 100644 --- a/options.js +++ b/options.js @@ -1,39 +1,44 @@ function recordKeyPress(e) { - var normalizedKeyCode = String.fromCharCode(e.keyCode).toUpperCase().charCodeAt(); - e.target.value = getInputMsg(normalizedKeyCode); - e.target.keyCode = normalizedKeyCode; + var normalizedChar = String.fromCharCode(e.keyCode).toUpperCase(); + e.target.value = normalizedChar; + e.target.keyCode = normalizedChar.charCodeAt(); e.preventDefault(); e.stopPropagation(); }; +function inputFilterNumbersOnly(e) { + var char = String.fromCharCode(e.keyCode); + if (!/[\d\.]$/.test(char) || !/^\d+(\.\d*)?$/.test(e.target.value + char)) { + e.preventDefault(); + e.stopPropagation(); + } +}; + function inputFocus(e) { e.target.value = ""; }; function inputBlur(e) { - e.target.value = getInputMsg(e.target.keyCode); + e.target.value = String.fromCharCode(e.target.keyCode).toUpperCase(); }; function updateShortcutInputText(inputId, keyCode) { - document.getElementById(inputId).value = getInputMsg(keyCode); + document.getElementById(inputId).value = String.fromCharCode(keyCode).toUpperCase(); document.getElementById(inputId).keyCode = keyCode; } -function getInputMsg(keyCode) { - return "Shortcut set to " + String.fromCharCode(keyCode).toUpperCase(); -}; - // Saves options to chrome.storage function save_options() { - var speedStep = Number(document.getElementById('speedStep').value); + var speedStep = document.getElementById('speedStep').value; var rewindTime = document.getElementById('rewindTime').value; var rewindKeyCode = document.getElementById('rewindKeyInput').keyCode; var slowerKeyCode = document.getElementById('slowerKeyInput').keyCode; var fasterKeyCode = document.getElementById('fasterKeyInput').keyCode; - rewindTime = isNaN(rewindTime) ? 10 : rewindTime; + speedStep = isNaN(speedStep) ? 0.1 : Number(speedStep); + rewindTime = isNaN(rewindTime) ? 10 : Number(rewindTime); rewindKeyCode = isNaN(rewindKeyCode) ? 65 : rewindKeyCode; slowerKeyCode = isNaN(slowerKeyCode) ? 83 : slowerKeyCode; fasterKeyCode = isNaN(fasterKeyCode) ? 68 : fasterKeyCode; @@ -57,7 +62,7 @@ function save_options() { // Restores options from chrome.storage function restore_options() { chrome.storage.sync.get({ - speedStep: 0.25, + speedStep: 0.1, rewindTime: 10, rewindKeyCode: 65, slowerKeyCode: 83, @@ -74,7 +79,7 @@ function restore_options() { function restore_defaults() { chrome.storage.sync.set({ - speedStep: 0.25, + speedStep: 0.1, rewindTime: 10, rewindKeyCode: 65, slowerKeyCode: 83, @@ -100,6 +105,9 @@ initShortcutInput('rewindKeyInput'); initShortcutInput('slowerKeyInput'); initShortcutInput('fasterKeyInput'); +document.getElementById('rewindTime').addEventListener('keypress', inputFilterNumbersOnly); +document.getElementById('speedStep').addEventListener('keypress', inputFilterNumbersOnly); + function initShortcutInput(inputId) { document.getElementById(inputId).addEventListener('focus', inputFocus); document.getElementById(inputId).addEventListener('blur', inputBlur);