tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Popup seems to be more or less fixed.

Browse Source
This commit is contained in:
Tamius Han 2018-07-09 23:30:11 +02:00
parent 0eb70babf3
commit cf813cf6f8
4 changed files with 133 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/conf/ExtensionConf.js
View File

@ -139,6 +139,10 @@ var ExtensionConf = {
action: "crop",
arg: 2.0
},
"q": {
action: "crop",
arg: 2.35
},
//#endregion
//#region zoom
"z": {

4
js/lib/Comms.js
View File

@ -235,6 +235,10 @@ class CommsServer {
this.sendToAll({cmd: 'reload-settings', newConf: ExtensionConf});
} else if (message.cmd === 'set-ar') {
this.sendToActive(message);
} else if (message.cmd === 'set-custom-ar') {
ExtensionConf.keyboard.shortcuts.q.arg = message.ratio;
Settings.save(ExtensionConf);
this.sendToAll({cmd: 'reload-settings', newConf: ExtensionConf});
} else if (message.cmd === 'autoar-start') {
this.sendToActive(message);
} else if (message.cmd === "autoar-enable") { // LEGACY - can be removed prolly?

82
res/popup/js/popup.js
View File

@ -61,7 +61,7 @@ var selectedMenu = "arSettings";
var hasVideos = false;
var _config;
var _changeAr_button_shortcuts = { "autoar":"none", "reset":"none", "219":"none", "189":"none", "169":"none" }
var _changeAr_button_shortcuts = { "autoar":"none", "reset":"none", "219":"none", "189":"none", "169":"none", "custom":"none" }
var comms = new Comms();
var port = browser.runtime.connect({name: 'popup-port'});
@ -120,6 +120,7 @@ function loadConfig(extensionConf, site){
} else {
ExtPanel.siteOptions.default.classList.add("selected");
}
//#endregion extension-basics
//
// ------------
@ -155,6 +156,8 @@ function loadConfig(extensionConf, site){
}
//#region - SET STRETCH
// set stretching
for (var button in StretchPanel.global) {
StretchPanel.global[button].classList.remove("selected");
}
@ -178,7 +181,10 @@ function loadConfig(extensionConf, site){
try{
if(shortcut.action == "crop"){
if(shortcut.arg == 2.0){
if (key == 'q') {
_changeAr_button_shortcuts["custom"] = keypress;
}
else if(shortcut.arg == 2.0){
_changeAr_button_shortcuts["189"] = keypress;
}
else if(shortcut.arg == 2.39){
@ -204,6 +210,11 @@ function loadConfig(extensionConf, site){
catch(Ex){
//do nothing if key doesn't exist
}
// fill in custom aspect ratio
if (extensionConf.keyboard.shortcuts.q) {
document.getElementById("_input_custom_ar").value = extensionConf.keyboard.shortcuts.q.arg;
}
}
for(var key in _changeAr_button_shortcuts){
try{
@ -304,6 +315,47 @@ function showArctlButtons(){
// }
}
function getCustomAspectRatio() {
var textBox_value = document.getElementById("_input_custom_ar").value.trim();
// validate value - this spaghett will match the following stuff
// [int]/[int]
// 1:[float]
// [float]
if (! /(^[0-9]+\/[0-9]+$|^(1:)?[0-9]+\.?[0-9]*$)/.test(textBox_value)) {
return false; // validation failed!
}
if (! isNaN(parseFloat(textBox_value))) {
return parseFloat(textBox_value);
}
if (/\//.test(textBox_value)) {
const vars = textBox_value.split('/');
return parseInt(vars[0])/parseInt(vars[1]); // non-ints shouldn't make it past regex
}
if (/:/.test(textBox_value)) {
const vars = textBox_value.split(':');
return parseFloat(vars[1]);
}
// we should never come this far.
// If we do, then there's something wrong with the input and our regex
return false;
}
function validateCustomAr(){
console.log("validating!")
const valid = getCustomAspectRatio() !== false;
const inputField = document.getElementById("_input_custom_ar");
const valueSaveButton = document.getElementById("_b_changeAr_save_custom_ar");
if (valid) {
inputField.classList.remove("invalid-input");
valueSaveButton.classList.remove("disabled-button");
} else {
inputField.classList.add("invalid-input");
valueSaveButton.classList.add("disabled-button");
}
}
function toggleSite(option){
if(Debug.debug)
@ -326,6 +378,7 @@ document.addEventListener("click", (e) => {
function getcmd(e){
var command = {};
command.sender = "popup";
command.receiver = "uwbg";
@ -424,6 +477,18 @@ document.addEventListener("click", (e) => {
command.ratio = 1.6;
return command;
}
if(e.target.classList.contains("_ar_custom")){
ratio = getCustomAspectRatio();
command.cmd = "set-ar";
command.ratio = ratio;
return ratio !== false ? command : null;
}
if(e.target.classList.contains("_ar_save_custom_ar")){
ratio = getCustomAspectRatio();
command.cmd = "set-custom-ar";
command.ratio = ratio;
return ratio !== false ? command : null; // this validates input
}
}
if(e.target.classList.contains("_stretch")){
if (e.target.classList.contains("_ar_stretch_global")) {
@ -487,7 +552,7 @@ document.addEventListener("click", (e) => {
var value = parseInt(document.getElementById("_input_autoAr_frequency").value.trim());
if(! isNaN(value)){
var timeout = parseInt(1000 / value);
var timeout = parseInt(value);
command = {cmd: "autoar-set-timer-playing", timeout: timeout, sender: "popup", receiver: "uwbg"};
Comms.sendToBackgroundScript(command);
}
@ -541,9 +606,14 @@ document.addEventListener("click", (e) => {
return true;
});
const inputField = document.getElementById("_input_custom_ar");
inputField.addEventListener("blur", (event) => {
validateCustomAr();
});
inputField.addEventListener("mouseleave", (event) => {
validateCustomAr();
});
hideWarning("script-not-running-warning");
openMenu(selectedMenu);
// check4videos();
getConf();
// check4siteStatus();

72
res/popup/popup.html
View File

@ -27,6 +27,13 @@
color: #c0924e;
}
input {
border: 1px solid #322;
padding: 0.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.hidden {
display: none !important;
}
@ -60,6 +67,18 @@
.disabled {
color: #666;
}
.disabled-button {
color: #666 !important;
cursor: not-allowed !important;
}
.disabled-button:hover {
color: #777 !important;
background-color: #222 !important;
}
.invalid-input {
border: 1px solid #720 !important;
background-color: #410 !important;
}
.header {
background-color: #7f1416;
color: #fff;
@ -183,7 +202,7 @@
Crop settings
</div>
<div id="_menu_stretch" class="menu-item _menu_stretch">
Stretc settings
Stretch settings
</div>
<div id="_menu_csshacks" class="menu-item disabled hidden _menu_hacks">
CSS hacks for this site
@ -263,22 +282,25 @@
<div class="row">
<span class="label">Cropping mode</span>
<div class="button-row">
<a class="button _changeAr _ar_auto w24">Auto-detect<br/><span id="_b_changeAr_auto-ar_key" class="smallcaps small darker"></span></a>
<a class="button _changeAr _ar_reset w24">Reset<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
<a class="button _changeAr _ar_219 w24">21:9<br/><span id="_b_changeAr_219_key" class="smallcaps small darker"></span></a>
<a class="button _changeAr _ar_189 w24">2:1 (18:9)<br/><span id="_b_changeAr_189_key" class="smallcaps small darker"></span></a>
<a class="button _changeAr _ar_169 w24">16:9<br/><span id="_b_changeAr_169_key" class="smallcaps small darker"></span></a>
<a class="button _changeAr _ar_auto w24">Auto-detect<br/><span id="_b_changeAr_auto-ar_key" class="smallcaps small darker"></span>&nbsp;</a>
<a class="button _changeAr _ar_reset w24">Reset<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker">&nbsp;</span></a>
<a class="button _changeAr _ar_219 w24">21:9<br/><span id="_b_changeAr_219_key" class="smallcaps small darker">&nbsp;</span></a>
<a class="button _changeAr _ar_189 w24">2:1 (18:9)<br/><span id="_b_changeAr_189_key" class="smallcaps small darker">&nbsp;</span></a>
<a class="button _changeAr _ar_169 w24">16:9<br/><span id="_b_changeAr_169_key" class="smallcaps small darker">&nbsp;</span></a>
<a class="button _changeAr _ar_custom w24">Custom<br/><span id="_b_changeAr_custom_key" class="smallcaps small darker">&nbsp;</span></a>
</div>
</div>
<!--<div class="row">
<span class="label">Automatic aspect ratio autodetection:</span>
<div class="button-row">
<a id="_autoar_disable_tmp" class="button _autoar _autoar_temp-disable">Temporarily disable</a>
<a id="_autoar_enable_tmp" class="button _autoar _ar_auto hidden">Re-enable</a>
<a id="_autoar_disable" class="button _autoar _autoar_disable">Disable</a>
<a id="_autoar_enable" class="button _autoar _autoar_enable hidden">Enable</a>
<div class="row">
<span class="label">Custom aspect ratio</span>
<div>
<input id="_input_custom_ar" class="_changeAr _custom" onblur="validateCustomAr()"> &nbsp; &nbsp; <span id="_b_changeAr_save_custom_ar" class="button _ar_save_custom_ar _changeAr">Save</span>
<br/><small>Aspect ratio can be entered in any of these forms (without quotes):
<ul style="display: block; padding-top: 0px; margin-top: 0px">
<li>fraction (<i>width/height</i>, e.g. <i>16/10</i>, <i>2560/1080</i>, etc.)</li>
<li>ratio (e.g. <i>1:2.35</i> or simply <i>2.35</i> — <i>1:</i> bit can be left out)</li>
</ul></small>
</div>
</div>-->
</div>
<div class="row">
<span class="label">Video alignment:</span>
<div class="button-row">
@ -291,23 +313,23 @@
<div id="stretch-settings" class="suboption hidden">
<p class="warning">
Stretching video is currently experimental and has <strike>been tested even less rigorously than the rest of this addon</strike> not been tested thoroughly. If you notice any bugs, please consider reporting via github or email.
Stretching video is currently experimental and has <strike>been tested even less rigorously than the rest of this addon</strike> not been tested thoroughly. If you notice any bugs, please consider reporting them.
</p>
<span class="label">Default stretching mode<br><small>Stretching is independent of crop mode. Crop gets applied before stretching.</small></span>
<span class="label">Default stretching mode<br><small>You may need to reload for this option to take effect. NOTE: Stretching is independent of crop mode. Crop gets applied before stretching.</small></span>
<div class="button-row">
<a id="_stretch_global_none" class="button _stretch _ar_stretch_global _none w24">Never<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
<a id="_stretch_global_basic" class="button _stretch _ar_stretch_global _basic w24">Basic<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
<a id="_stretch_global_hybrid" class="button _stretch _ar_stretch_global _hybrid w24">Hybrid<br/><span id="_b_changeAr_sw_key" class="smallcaps small darker"></span></a>
<a id="_stretch_global_conditional" class="button _stretch _ar_stretch_global _conditional w24">Thin borders<br/><span id="_b_changeAr_sh_key" class="smallcaps small darker"></span></a>
<a id="_stretch_global_none" class="button _stretch _ar_stretch_global _none w24">Never<br/><span id="_b_stretch_default_none_key" class="smallcaps small darker"></span></a>
<a id="_stretch_global_basic" class="button _stretch _ar_stretch_global _basic w24">Basic<br/><span id="_b_stretch_default_basic_key" class="smallcaps small darker"></span></a>
<a id="_stretch_global_hybrid" class="button _stretch _ar_stretch_global _hybrid w24">Hybrid<br/><span id="_b_stretch_default_hybrid_key" class="smallcaps small darker"></span></a>
<a id="_stretch_global_conditional" class="button _stretch _ar_stretch_global _conditional w24">Thin borders<br/><span id="_b_stretch_default_conditional_key" class="smallcaps small darker"></span></a>
</div>
<span class="label">Stretching mode for this video<br><small>Temporarily overrides default stretching mode.</small></span>
<span class="label">Temporary stretching mode<br><small>Temporarily overrides default stretching mode.</small></span>
<div class="button-row">
<a class="button _stretch _ar_stretch_none w24">Never<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_basic w24">Basic<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_changeAr_sw_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_conditional w24">Thin borders<br/><span id="_b_changeAr_sh_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_none w24">Never<br/><span id="_b_stretch_none_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_basic w24">Basic<br/><span id="_b_stretch_basic_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_stretch_hybrid_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_conditional w24">Thin borders<br/><span id="_b_stretch_conditional_key" class="smallcaps small darker"></span></a>
</div>
</div>