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

Merge pull request #7 from RaduFi/master

Browse Source 
Added Options Page
This commit is contained in:
Ilya Grigorik
2014-08-17 09:21:04 -07:00
parent 843544504f 8240e35a02
commit 724ec1ada3
5 changed files with 301 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
inject.js
View File

@@ -8,8 +8,11 @@ chrome.extension.sendMessage({}, function(response) {
this.video = target;
this.initializeControls();
chrome.storage.sync.get('speed', function(storage) {
var speed = storage.speed ? storage.speed : '1.00';
chrome.storage.sync.get({
speed: '1.00',
rememberSpeed: false
}, function(storage) {
var speed = storage.rememberSpeed ? storage.speed : '1.00';
target.playbackRate = speed;
this.speedIndicator.textContent = speed;
}.bind(this));
@@ -92,18 +95,24 @@ chrome.extension.sendMessage({}, function(response) {
videoTags.forEach(function(v) {
if (!v.paused && !v.classList.contains("vc-cancelled")) {
if (action === 'rewind') {
v.playbackRate -= 0.10;
v.currentTime -= 10;
} else if (action === 'faster') { v.playbackRate += 0.10 }
else if (action === 'slower') { v.playbackRate = Math.max(v.playbackRate - 0.10, 0.00) }
v.playbackRate = Math.max(v.playbackRate - speedStep, 0.00);
v.currentTime -= rewindTime;
} else if (action === 'faster') {
v.playbackRate += speedStep }
else if (action === 'slower') {
v.playbackRate = Math.max(v.playbackRate - speedStep, 0.00); }
}
});
}
document.addEventListener('keydown', function(event) {
if (event.keyCode == 65) { runAction('rewind') } // A
else if (event.keyCode == 68) { runAction('faster') } // D
else if (event.keyCode == 83) { runAction('slower') } // S
document.addEventListener('keypress', function(event) {
// if lowercase letter pressed, check for uppercase key code
var keyCode = String.fromCharCode(event.keyCode).toUpperCase().charCodeAt();
if (keyCode == rewindKeyCode) { runAction('rewind') }
else if (keyCode == fasterKeyCode) { runAction('faster') }
else if (keyCode == slowerKeyCode) { runAction('slower') }
return false;
}, true);
@@ -120,6 +129,23 @@ chrome.extension.sendMessage({}, function(response) {
videoTags.forEach(function(video) {
var control = new tc.videoController(video);
});
var speedStep, rewindTime, rewindKeyCode, slowerKeyCode, fasterKeyCode;
chrome.storage.sync.get({
speedStep: 0.1, // default 0.10x
rewindTime: 10, // default 10s
rewindKeyCode: 65, // default: A
slowerKeyCode: 83, // default: S
fasterKeyCode: 68 // default: D
},
function(storage) {
speedStep = Number(storage.speedStep);
rewindTime = Number(storage.rewindTime);
rewindKeyCode = Number(storage.rewindKeyCode);
slowerKeyCode = Number(storage.slowerKeyCode);
fasterKeyCode = Number(storage.fasterKeyCode);
});
}
}, 10);
});

3
manifest.json
View File

@@ -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",
@@ -10,6 +10,7 @@
"128": "icons/icon128.png"
},
"permissions": [ "activeTab", "storage" ],
"options_page": "options.html",
"content_scripts": [{
"all_frames": true,
"matches": [ "http://*/*", "https://*/*"],

94
options.css Normal file
View File

@@ -0,0 +1,94 @@
body {
margin: 0;
padding-left: 15px;
padding-top: 53px;
font-family: sans-serif;
font-size: 12px;
color: rgb(48, 57, 66);
}
h1, h2, h3 {
font-weight: normal;
line-height: 1;
user-select: none;
cursor: default;
}
h1 {
font-size: 1.5em;
margin: 21px 0 13px;
}
h3 {
font-size: 1.2em;
margin-bottom: 0.8em;
color: black;
}
p {
margin: 0.65em 0;
}
header {
position: fixed;
top: 0;
left: 15px;
right: 0;
border-bottom: 1px solid #EEE;
background: linear-gradient(white, white 40%, rgba(255, 255, 255, 0.92));
}
header, section {
min-width: 600px;
max-width: 738px;
}
section {
padding-left: 18px;
margin-top: 8px;
margin-bottom: 24px;
}
section h3 {
margin-left: -18px;
}
button {
-webkit-appearance: none;
position: relative;
margin: 0 1px 0 0;
padding: 0 10px;
min-width: 4em;
min-height: 2em;
background-image: linear-gradient(#EDEDED, #EDEDED 38%, #DEDEDE);
border: 1px solid rgba(0,0,0,0.25);
border-radius: 2px;
outline: none;
box-shadow: 0 1px 0 rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.75);
color: #444;
text-shadow: 0 1px 0 rgb(240,240,240);
font: inherit;
user-select: none;
}
input[type="text"] {
width: 75px;
text-align: center;
}
.row {
margin: 5px 0px;
}
label {
display: inline-block;
width: 170px;
}
label[for=rememberSpeed] {
width: 200px;
}
#status {
color: #9D9D9D;
display: inline-block;
margin-left: 50px;
}

49
options.html Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video Playback Speed Controller Options</title>
<link rel="stylesheet" type="text/css" href="options.css" />
</head>
<body>
<header>
<h1>HTML5 Video Playback Speed Controller</h1>
</header>
<section>
<h3>Shortcuts</h3>
<div class="row">
<label for="rewindKeyInput">Rewind</label>
<input id="rewindKeyInput" placeholder="press a key" type="text" value=""/>
</div>
<div class="row">
<label for="slowerKeyInput">Slow Down</label>
<input id="slowerKeyInput" placeholder="press a key" type="text" value=""/>
</div>
<div class="row">
<label for="fasterKeyInput">Speed Up</label>
<input id="fasterKeyInput" placeholder="press a key" type="text" value=""/>
</div>
</section>
<section>
<h3>Others</h3>
<div class="row">
<label for="rewindTime">Rewind Time (s)</label>
<input id="rewindTime" type="text" value=""/>
</div>
<div class="row">
<label for="speedStep">Speed Change Step</label>
<input id="speedStep" type="text" value=""/>
</div>
<div class="row">
<label for="rememberSpeed">Remember Playback Speed</label>
<input id="rememberSpeed" type="checkbox"/>
</div>
</section>
<button id="save">Save</button> <button id="restore">Restore Defaults</button>
<div id="status"></div>
</body>
<script type="text/javascript" src="options.js"></script>
</html>

120
options.js Normal file
View File

@@ -0,0 +1,120 @@
function recordKeyPress(e) {
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 = String.fromCharCode(e.target.keyCode).toUpperCase();
};
function updateShortcutInputText(inputId, keyCode) {
document.getElementById(inputId).value = String.fromCharCode(keyCode).toUpperCase();
document.getElementById(inputId).keyCode = keyCode;
}
// Saves options to chrome.storage
function save_options() {
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;
var rememberSpeed = document.getElementById('rememberSpeed').checked;
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;
chrome.storage.sync.set({
speedStep: speedStep,
rewindTime: rewindTime,
rewindKeyCode: rewindKeyCode,
slowerKeyCode: slowerKeyCode,
fasterKeyCode: fasterKeyCode,
rememberSpeed: rememberSpeed
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Options saved';
setTimeout(function() {
status.textContent = '';
}, 1000);
});
}
// Restores options from chrome.storage
function restore_options() {
chrome.storage.sync.get({
speedStep: 0.1,
rewindTime: 10,
rewindKeyCode: 65,
slowerKeyCode: 83,
fasterKeyCode: 68,
rememberSpeed: false
}, function(storage) {
document.getElementById('speedStep').value = storage.speedStep.toFixed(2);
document.getElementById('rewindTime').value = storage.rewindTime;
updateShortcutInputText('rewindKeyInput', storage.rewindKeyCode);
updateShortcutInputText('slowerKeyInput', storage.slowerKeyCode);
updateShortcutInputText('fasterKeyInput', storage.fasterKeyCode);
document.getElementById('rememberSpeed').checked = storage.rememberSpeed;
});
}
function restore_defaults() {
chrome.storage.sync.set({
speedStep: 0.1,
rewindTime: 10,
rewindKeyCode: 65,
slowerKeyCode: 83,
fasterKeyCode: 68,
rememberSpeed: false
}, function() {
restore_options();
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Default options restored';
setTimeout(function() {
status.textContent = '';
}, 1000);
});
}
// Event Listeners
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);
document.getElementById('restore').addEventListener('click', restore_defaults);
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);
document.getElementById(inputId).addEventListener('keypress', recordKeyPress);
}