added functionality to allow user to save Video Speed in Chrome Sync Storage via Chrome Extensions's Browser Action and automated the process to apply user saved Video Speed to HTML5 videos

This commit is contained in:
Apoorv Saxena
2014-06-06 03:54:15 +05:30
parent 279c957f24
commit 4ec4a2d385
4 changed files with 114 additions and 4 deletions

33
browser_action.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mainPopup {
padding: 5px;
height: 20px;
width: 120px;
font-family: Helvetica, Ubuntu, Arial, sans-serif;
}
.tc-controls button {
color: black !important;
background: white !important;
font-weight: bold !important;
margin: 0 2px !important;
border-radius: 5px !important;
padding: 3px 8px !important;
font-size: 15px !important;
line-height: 15px !important;
}
</style>
</head>
<body>
<div id="mainPopup">
<div class="tc-controls">
<button data-control="decrease" id="decrease-video-speed">-</button>
<span id="current-video-speed">1</span>
<button data-control="increase" id="increase-video-speed">+</button>
</div>
</div>
<script type="text/javascript" src="browser_action.js"></script>
</body>
</html>

64
browser_action.js Normal file
View File

@@ -0,0 +1,64 @@
(function () {
var video_speed = (function () {
var common_speed;
function set_speed(speed) {
speed = parseFloat(Math.round(speed * 100) / 100);
chrome.storage.sync.set({'speed': speed});
common_speed = speed;
}
function initialize(callback) {
chrome.storage.sync.get('speed', function (storage) {
if (storage.speed) {
common_speed = storage.speed;
} else {
set_speed(1.00);
}
callback(common_speed);
});
}
function increase() {
set_speed(common_speed + 0.10);
return common_speed;
}
function decrease() {
set_speed(common_speed - 0.10);
return common_speed;
}
return {
initialize: initialize,
increase: increase,
decrease: decrease
};
})();
var current_speed = document.getElementById('current-video-speed'),
speed_controls = document.getElementsByTagName('button');
speed_controls.forEach = Array.prototype.forEach;
video_speed.initialize(function (speed) {
current_speed.innerHTML = speed.toFixed(2);
});
speed_controls.forEach(function (speed_control) {
speed_control.addEventListener('click', function (event) {
var speed, control = event.target.attributes['data-control'].value;
if (control === 'increase') {
speed = video_speed.increase();
} else {
speed = video_speed.decrease();
}
current_speed.innerHTML = speed.toFixed(2);
});
});
})();

View File

@@ -12,6 +12,14 @@ chrome.extension.sendMessage({}, function(response) {
this.video.addEventListener('ratechange', function(event) {
this.speedIndicator.textContent = this.getSpeed();
}.bind(this));
chrome.storage.sync.get('speed', function(storage) {
target.playbackRate = storage.speed;
});
chrome.storage.onChanged.addListener(function(storage) {
if(storage.speed) {
target.playbackRate = storage.speed.newValue;
}
});
};
tc.videoController.prototype.getSpeed = function() {

View File

@@ -1,6 +1,6 @@
{
"name": "HTML5 Video Playback Speed Controller",
"version": "0.1.1",
"version": "0.1.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.",
"homepage_url": "https://github.com/igrigorik/videospeed",
@@ -9,12 +9,17 @@
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"permissions": [ "activeTab" ],
"permissions": [ "activeTab", "storage" ],
"content_scripts": [{
"all_frames": true,
"matches": [ "http://*/*", "https://*/*"],
"css": [ "inject.css" ],
"js": [ "inject.js" ]
}
]
}
],
"browser_action": {
"default_icon": "icons/icon16.png",
"default_title": "Video Playback Speed Controller",
"default_popup": "browser_action.html"
}
}