Add ability to enable/disable from toolbar (#528)

* Add ability to enable/disable from toolbar
This commit is contained in:
Timothy Lim
2019-10-19 03:28:52 +08:00
committed by Ilya Grigorik
parent a01f397d36
commit c3f44db1bf
9 changed files with 84 additions and 19 deletions

BIN
icons/icon19_disabled.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
icons/icon38_disabled.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
icons/icon48_disabled.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

View File

@@ -3,6 +3,7 @@
var tc = { var tc = {
settings: { settings: {
lastSpeed: 1.0, // default 1x lastSpeed: 1.0, // default 1x
enabled: true, // default enabled
speeds: {}, // empty object to hold speed for each source speeds: {}, // empty object to hold speed for each source
displayKeyCode: 86, // default: V displayKeyCode: 86, // default: V
@@ -77,6 +78,7 @@
rememberSpeed: tc.settings.rememberSpeed, rememberSpeed: tc.settings.rememberSpeed,
audioBoolean: tc.settings.audioBoolean, audioBoolean: tc.settings.audioBoolean,
startHidden: tc.settings.startHidden, startHidden: tc.settings.startHidden,
enabled: tc.settings.enabled,
controllerOpacity: tc.settings.controllerOpacity, controllerOpacity: tc.settings.controllerOpacity,
blacklist: tc.settings.blacklist.replace(regStrip, '') blacklist: tc.settings.blacklist.replace(regStrip, '')
}); });
@@ -85,6 +87,7 @@
tc.settings.displayKeyCode = Number(storage.displayKeyCode); tc.settings.displayKeyCode = Number(storage.displayKeyCode);
tc.settings.rememberSpeed = Boolean(storage.rememberSpeed); tc.settings.rememberSpeed = Boolean(storage.rememberSpeed);
tc.settings.audioBoolean = Boolean(storage.audioBoolean); tc.settings.audioBoolean = Boolean(storage.audioBoolean);
tc.settings.enabled = Boolean(storage.enabled);
tc.settings.startHidden = Boolean(storage.startHidden); tc.settings.startHidden = Boolean(storage.startHidden);
tc.settings.controllerOpacity = Number(storage.controllerOpacity); tc.settings.controllerOpacity = Number(storage.controllerOpacity);
tc.settings.blacklist = String(storage.blacklist); tc.settings.blacklist = String(storage.blacklist);
@@ -309,6 +312,7 @@
} }
} }
function initializeNow(document) { function initializeNow(document) {
if (!tc.settings.enabled) return;
// enforce init-once due to redundant callers // enforce init-once due to redundant callers
if (!document.body || document.body.classList.contains('vsc-initialized')) { if (!document.body || document.body.classList.contains('vsc-initialized')) {
return; return;

View File

@@ -1,14 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Video Speed Controller: Options</title> <title>Video Speed Controller: Options</title>
<link rel="stylesheet" href="options.css" /> <link rel="stylesheet" href="options.css" />
<script src="options.js"></script> <script src="options.js"></script>
</head> </head>
<body> <body>
<header> <header>
<h1>Video Speed Controller</h1> <h1>Video Speed Controller</h1>
</header> </header>
<section id="customs"> <section id="customs">
<h3>Shortcuts</h3> <h3>Shortcuts</h3>
@@ -81,26 +81,30 @@
</section> </section>
<section> <section>
<h3>Other</h3> <h3>Other</h3>
<div class="row"> <div class="row">
<label for="enabled">Enabled</label>
<input id="enabled" type="checkbox"/>
</div>
<div class="row">
<label for="startHidden">Hide controller by default</label> <label for="startHidden">Hide controller by default</label>
<input id="startHidden" type="checkbox"/> <input id="startHidden" type="checkbox"/>
</div> </div>
<div class="row"> <div class="row">
<label for="rememberSpeed">Remember Playback Speed</label> <label for="rememberSpeed">Remember Playback Speed</label>
<input id="rememberSpeed" type="checkbox"/> <input id="rememberSpeed" type="checkbox"/>
</div> </div>
<div class="row"> <div class="row">
<label for="audioBoolean">Work on audio</label> <label for="audioBoolean">Work on audio</label>
<input id="audioBoolean" type="checkbox"/> <input id="audioBoolean" type="checkbox"/>
</div> </div>
<div class="row"> <div class="row">
<label for="controllerOpacity">Controller opacity</label> <label for="controllerOpacity">Controller opacity</label>
<input id="controllerOpacity" type="text" value=""> <input id="controllerOpacity" type="text" value="">
</div> </div>
<div class="row"> <div class="row">
<label for="blacklist">Blacklisted sites on which extension is disabled<br/>(one per line)</label> <label for="blacklist">Blacklisted sites on which extension is disabled<br/>(one per line)</label>
<textarea id="blacklist" rows="10" cols="50"></textarea> <textarea id="blacklist" rows="10" cols="50"></textarea>
</div> </div>
</section> </section>

View File

@@ -6,6 +6,7 @@ var tcDefaults = {
rememberSpeed: false, // default: false rememberSpeed: false, // default: false
audioBoolean: false, // default: false audioBoolean: false, // default: false
startHidden: false, // default: false startHidden: false, // default: false
enabled: true, // default enabled
controllerOpacity: 0.3, // default: 0.3 controllerOpacity: 0.3, // default: 0.3
keyBindings: [ keyBindings: [
{action: "slower", key: 83, value: 0.1, force: false, predefined: true}, // S {action: "slower", key: 83, value: 0.1, force: false, predefined: true}, // S
@@ -168,6 +169,7 @@ function save_options() {
var displayKeyCode = document.getElementById('displayKeyInput').keyCode; var displayKeyCode = document.getElementById('displayKeyInput').keyCode;
var rememberSpeed = document.getElementById('rememberSpeed').checked; var rememberSpeed = document.getElementById('rememberSpeed').checked;
var audioBoolean = document.getElementById('audioBoolean').checked; var audioBoolean = document.getElementById('audioBoolean').checked;
var enabled = document.getElementById('enabled').checked;
var startHidden = document.getElementById('startHidden').checked; var startHidden = document.getElementById('startHidden').checked;
var controllerOpacity = document.getElementById('controllerOpacity').value; var controllerOpacity = document.getElementById('controllerOpacity').value;
var blacklist = document.getElementById('blacklist').value; var blacklist = document.getElementById('blacklist').value;
@@ -179,6 +181,7 @@ function save_options() {
displayKeyCode: displayKeyCode, displayKeyCode: displayKeyCode,
rememberSpeed: rememberSpeed, rememberSpeed: rememberSpeed,
audioBoolean: audioBoolean, audioBoolean: audioBoolean,
enabled: enabled,
startHidden: startHidden, startHidden: startHidden,
controllerOpacity: controllerOpacity, controllerOpacity: controllerOpacity,
keyBindings: keyBindings, keyBindings: keyBindings,
@@ -199,6 +202,7 @@ function restore_options() {
updateShortcutInputText('displayKeyInput', storage.displayKeyCode); updateShortcutInputText('displayKeyInput', storage.displayKeyCode);
document.getElementById('rememberSpeed').checked = storage.rememberSpeed; document.getElementById('rememberSpeed').checked = storage.rememberSpeed;
document.getElementById('audioBoolean').checked = storage.audioBoolean; document.getElementById('audioBoolean').checked = storage.audioBoolean;
document.getElementById('enabled').checked = storage.enabled;
document.getElementById('startHidden').checked = storage.startHidden; document.getElementById('startHidden').checked = storage.startHidden;
document.getElementById('controllerOpacity').value = storage.controllerOpacity; document.getElementById('controllerOpacity').value = storage.controllerOpacity;
document.getElementById('blacklist').value = storage.blacklist; document.getElementById('blacklist').value = storage.blacklist;

View File

@@ -27,3 +27,7 @@ button {
font-size: 0.95em; font-size: 0.95em;
margin: 0.15em 0; margin: 0.15em 0;
} }
.hide {
display: none;
}

View File

@@ -6,6 +6,10 @@
<script src="popup.js"></script> <script src="popup.js"></script>
</head> </head>
<body> <body>
<button id="enable" class="hide">Enable</button>
<button id="disable">Disable</button>
<span id="status" class="hide"></span>
<hr />
<button id="config">Settings</button> <button id="config">Settings</button>
<hr /> <hr />
<button id="feedback" class="secondary">Send feedback</button> <button id="feedback" class="secondary">Send feedback</button>

View File

@@ -10,4 +10,49 @@ document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#feedback').addEventListener('click', function() { document.querySelector('#feedback').addEventListener('click', function() {
window.open("https://github.com/igrigorik/videospeed/issues"); window.open("https://github.com/igrigorik/videospeed/issues");
}); });
document.querySelector('#enable').addEventListener('click', function() {
toggleEnabled(true, settingsSavedReloadMessage);
});
document.querySelector('#disable').addEventListener('click', function() {
toggleEnabled(false, settingsSavedReloadMessage);
});
chrome.storage.sync.get({enabled: true}, function(storage) {
toggleEnabledUI(storage.enabled);
});
function toggleEnabled(enabled, callback){
chrome.storage.sync.set({
enabled: enabled,
}, function() {
toggleEnabledUI(enabled);
if(callback) callback(enabled);
});
}
function toggleEnabledUI(enabled){
document.querySelector('#enable').classList.toggle("hide", enabled);
document.querySelector('#disable').classList.toggle("hide", !enabled);
const suffix = `${(enabled ? "" : "_disabled")}.png`
chrome.browserAction.setIcon({
"path": {
"19": "icons/icon19" + suffix,
"38": "icons/icon38" + suffix,
"48": "icons/icon48" + suffix
}
});
}
function settingsSavedReloadMessage(enabled){
setStatusMessage(`${enabled ? "Enabled" : "Disabled"}. Reload page to see changes`);
}
function setStatusMessage(str){
const status_element = document.querySelector('#status')
status_element.classList.toggle("hide", false);
status_element.innerText = str;
}
}); });