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

Options Page adjustments

Browse Source 
Implemented the adjustments suggested by Ilya: default values
adjustments, input validation, UI
This commit is contained in:
Radu Filip
2014-08-16 11:53:34 +01:00
parent d3ab0a194e
commit dfb86cd287
5 changed files with 31 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
inject.js
View File

@@ -130,7 +130,7 @@ chrome.extension.sendMessage({}, function(response) {
var speedStep, rewindTime, rewindKeyCode, slowerKeyCode, fasterKeyCode; var speedStep, rewindTime, rewindKeyCode, slowerKeyCode, fasterKeyCode;
chrome.storage.sync.get({ chrome.storage.sync.get({
speedStep: 0.25, // default 0.25x speedStep: 0.1, // default 0.10x
rewindTime: 10, // default 10s rewindTime: 10, // default 10s
rewindKeyCode: 65, // default: A rewindKeyCode: 65, // default: A
slowerKeyCode: 83, // default: S slowerKeyCode: 83, // default: S

2
manifest.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "HTML5 Video Playback Speed Controller", "name": "HTML5 Video Playback Speed Controller",
"version": "0.1.2", "version": "0.1.3",
"manifest_version": 2, "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.", "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", "homepage_url": "https://github.com/igrigorik/videospeed",

19
options.css
View File

@@ -47,7 +47,7 @@ section h3 {
margin-left: -18px; margin-left: -18px;
} }
button, select { button {
-webkit-appearance: none; -webkit-appearance: none;
position: relative; position: relative;
@@ -56,7 +56,7 @@ button, select {
min-width: 4em; min-width: 4em;
min-height: 2em; 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: 1px solid rgba(0,0,0,0.25);
border-radius: 2px; border-radius: 2px;
outline: none; outline: none;
@@ -68,16 +68,10 @@ button, select {
user-select: none; 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"] { input[type="text"] {
width: 120px; width: 75px;
text-align: center;
} }
.row { .row {
@@ -89,11 +83,6 @@ label {
width: 150px; width: 150px;
} }
#rewindTime {
width: 69px;
text-align: center;
}
#status { #status {
color: #9D9D9D; color: #9D9D9D;
display: inline-block; display: inline-block;

15
options.html
View File

@@ -13,15 +13,15 @@
<h3>Shortcuts</h3> <h3>Shortcuts</h3>
<div class="row"> <div class="row">
<label for="rewindKeyInput">Rewind</label> <label for="rewindKeyInput">Rewind</label>
<input id="rewindKeyInput" placeholder="Press a Key" type="text" value=""/> <input id="rewindKeyInput" placeholder="press a key" type="text" value=""/>
</div> </div>
<div class="row"> <div class="row">
<label for="slowerKeyInput">Slow Down</label> <label for="slowerKeyInput">Slow Down</label>
<input id="slowerKeyInput" placeholder="Press a Key" type="text" value=""/> <input id="slowerKeyInput" placeholder="press a key" type="text" value=""/>
</div> </div>
<div class="row"> <div class="row">
<label for="fasterKeyInput">Speed Up</label> <label for="fasterKeyInput">Speed Up</label>
<input id="fasterKeyInput" placeholder="Press a Key" type="text" value=""/> <input id="fasterKeyInput" placeholder="press a key" type="text" value=""/>
</div> </div>
</section> </section>
@@ -33,14 +33,7 @@
</div> </div>
<div class="row"> <div class="row">
<label for="speedStep">Speed change step</label> <label for="speedStep">Speed change step</label>
<select id="speedStep"> <input id="speedStep" type="text" value=""/>
<option value="0.10">0.10 x</option>
<option value="0.20">0.20 x</option>
<option value="0.25">0.25 x</option>
<option value="0.50">0.50 x</option>
<option value="0.75">0.75 x</option>
<option value="1.00">1.00 x</option>
</select>
</div> </div>
</section> </section>

34
options.js
View File

@@ -1,39 +1,44 @@
function recordKeyPress(e) { function recordKeyPress(e) {
var normalizedKeyCode = String.fromCharCode(e.keyCode).toUpperCase().charCodeAt(); var normalizedChar = String.fromCharCode(e.keyCode).toUpperCase();
e.target.value = getInputMsg(normalizedKeyCode); e.target.value = normalizedChar;
e.target.keyCode = normalizedKeyCode; e.target.keyCode = normalizedChar.charCodeAt();
e.preventDefault(); e.preventDefault();
e.stopPropagation(); 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) { function inputFocus(e) {
e.target.value = ""; e.target.value = "";
}; };
function inputBlur(e) { function inputBlur(e) {
e.target.value = getInputMsg(e.target.keyCode); e.target.value = String.fromCharCode(e.target.keyCode).toUpperCase();
}; };
function updateShortcutInputText(inputId, keyCode) { function updateShortcutInputText(inputId, keyCode) {
document.getElementById(inputId).value = getInputMsg(keyCode); document.getElementById(inputId).value = String.fromCharCode(keyCode).toUpperCase();
document.getElementById(inputId).keyCode = keyCode; document.getElementById(inputId).keyCode = keyCode;
} }
function getInputMsg(keyCode) {
return "Shortcut set to " + String.fromCharCode(keyCode).toUpperCase();
};
// Saves options to chrome.storage // Saves options to chrome.storage
function save_options() { function save_options() {
var speedStep = Number(document.getElementById('speedStep').value); var speedStep = document.getElementById('speedStep').value;
var rewindTime = document.getElementById('rewindTime').value; var rewindTime = document.getElementById('rewindTime').value;
var rewindKeyCode = document.getElementById('rewindKeyInput').keyCode; var rewindKeyCode = document.getElementById('rewindKeyInput').keyCode;
var slowerKeyCode = document.getElementById('slowerKeyInput').keyCode; var slowerKeyCode = document.getElementById('slowerKeyInput').keyCode;
var fasterKeyCode = document.getElementById('fasterKeyInput').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; rewindKeyCode = isNaN(rewindKeyCode) ? 65 : rewindKeyCode;
slowerKeyCode = isNaN(slowerKeyCode) ? 83 : slowerKeyCode; slowerKeyCode = isNaN(slowerKeyCode) ? 83 : slowerKeyCode;
fasterKeyCode = isNaN(fasterKeyCode) ? 68 : fasterKeyCode; fasterKeyCode = isNaN(fasterKeyCode) ? 68 : fasterKeyCode;
@@ -57,7 +62,7 @@ function save_options() {
// Restores options from chrome.storage // Restores options from chrome.storage
function restore_options() { function restore_options() {
chrome.storage.sync.get({ chrome.storage.sync.get({
speedStep: 0.25, speedStep: 0.1,
rewindTime: 10, rewindTime: 10,
rewindKeyCode: 65, rewindKeyCode: 65,
slowerKeyCode: 83, slowerKeyCode: 83,
@@ -74,7 +79,7 @@ function restore_options() {
function restore_defaults() { function restore_defaults() {
chrome.storage.sync.set({ chrome.storage.sync.set({
speedStep: 0.25, speedStep: 0.1,
rewindTime: 10, rewindTime: 10,
rewindKeyCode: 65, rewindKeyCode: 65,
slowerKeyCode: 83, slowerKeyCode: 83,
@@ -100,6 +105,9 @@ initShortcutInput('rewindKeyInput');
initShortcutInput('slowerKeyInput'); initShortcutInput('slowerKeyInput');
initShortcutInput('fasterKeyInput'); initShortcutInput('fasterKeyInput');
document.getElementById('rewindTime').addEventListener('keypress', inputFilterNumbersOnly);
document.getElementById('speedStep').addEventListener('keypress', inputFilterNumbersOnly);
function initShortcutInput(inputId) { function initShortcutInput(inputId) {
document.getElementById(inputId).addEventListener('focus', inputFocus); document.getElementById(inputId).addEventListener('focus', inputFocus);
document.getElementById(inputId).addEventListener('blur', inputBlur); document.getElementById(inputId).addEventListener('blur', inputBlur);