diff --git a/inject.js b/inject.js
index 255d811..7f8d47f 100644
--- a/inject.js
+++ b/inject.js
@@ -92,18 +92,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 -= speedStep;
+ 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 +126,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.25, // default 0.25x
+ 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);
});
diff --git a/manifest.json b/manifest.json
index 825f091..538b691 100755
--- a/manifest.json
+++ b/manifest.json
@@ -10,6 +10,7 @@
"128": "icons/icon128.png"
},
"permissions": [ "activeTab", "storage" ],
+ "options_page": "options.html",
"content_scripts": [{
"all_frames": true,
"matches": [ "http://*/*", "https://*/*"],
diff --git a/options.css b/options.css
new file mode 100644
index 0000000..b0d8cb0
--- /dev/null
+++ b/options.css
@@ -0,0 +1,101 @@
+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, select {
+ -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;
+}
+
+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;
+}
+
+.row {
+ margin: 5px 0px;
+}
+
+label {
+ display: inline-block;
+ width: 150px;
+}
+
+#rewindTime {
+ width: 69px;
+ text-align: center;
+}
+
+#status {
+ color: #9D9D9D;
+ display: inline-block;
+ margin-left: 50px;
+}
\ No newline at end of file
diff --git a/options.html b/options.html
new file mode 100644
index 0000000..c51b7ad
--- /dev/null
+++ b/options.html
@@ -0,0 +1,52 @@
+
+
+
+ HTML5 Video Playback Speed Controller Options
+
+
+
+
+ HTML5 Video Playback Speed Controller
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/options.js b/options.js
new file mode 100644
index 0000000..9624fa1
--- /dev/null
+++ b/options.js
@@ -0,0 +1,107 @@
+function recordKeyPress(e) {
+ var normalizedKeyCode = String.fromCharCode(e.keyCode).toUpperCase().charCodeAt();
+ e.target.value = getInputMsg(normalizedKeyCode);
+ e.target.keyCode = normalizedKeyCode;
+
+ e.preventDefault();
+ e.stopPropagation();
+};
+
+function inputFocus(e) {
+ e.target.value = "";
+};
+
+function inputBlur(e) {
+ e.target.value = getInputMsg(e.target.keyCode);
+};
+
+function updateShortcutInputText(inputId, keyCode) {
+ document.getElementById(inputId).value = getInputMsg(keyCode);
+ 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 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;
+ 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
+ }, 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.25,
+ rewindTime: 10,
+ rewindKeyCode: 65,
+ slowerKeyCode: 83,
+ fasterKeyCode: 68
+ }, 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);
+ });
+}
+
+function restore_defaults() {
+
+ chrome.storage.sync.set({
+ speedStep: 0.25,
+ rewindTime: 10,
+ rewindKeyCode: 65,
+ slowerKeyCode: 83,
+ fasterKeyCode: 68
+ }, 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');
+
+function initShortcutInput(inputId) {
+ document.getElementById(inputId).addEventListener('focus', inputFocus);
+ document.getElementById(inputId).addEventListener('blur', inputBlur);
+ document.getElementById(inputId).addEventListener('keypress', recordKeyPress);
+}