From cf813cf6f8da7299fc710e22d291728db9344e68 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Mon, 9 Jul 2018 23:30:11 +0200 Subject: [PATCH] Popup seems to be more or less fixed. --- js/conf/ExtensionConf.js | 4 ++ js/lib/Comms.js | 4 ++ res/popup/js/popup.js | 86 ++++++++++++++++++++++++++++++++++++---- res/popup/popup.html | 72 +++++++++++++++++++++------------ 4 files changed, 133 insertions(+), 33 deletions(-) diff --git a/js/conf/ExtensionConf.js b/js/conf/ExtensionConf.js index 2d2331c..4c5873a 100644 --- a/js/conf/ExtensionConf.js +++ b/js/conf/ExtensionConf.js @@ -139,6 +139,10 @@ var ExtensionConf = { action: "crop", arg: 2.0 }, + "q": { + action: "crop", + arg: 2.35 + }, //#endregion //#region zoom "z": { diff --git a/js/lib/Comms.js b/js/lib/Comms.js index d72d665..1b66e96 100644 --- a/js/lib/Comms.js +++ b/js/lib/Comms.js @@ -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? diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index 07c798c..cb8c6e2 100644 --- a/res/popup/js/popup.js +++ b/res/popup/js/popup.js @@ -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 // // ------------ @@ -153,8 +154,10 @@ function loadConfig(extensionConf, site){ ArPanel.alignment[extensionConf.miscFullscreenSettings.videoFloat].classList.add("selected"); } - + //#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(); +getConf(); \ No newline at end of file diff --git a/res/popup/popup.html b/res/popup/popup.html index 5297545..16d3c2e 100644 --- a/res/popup/popup.html +++ b/res/popup/popup.html @@ -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
- Stretc settings + Stretch settings
Video alignment:
@@ -291,23 +313,23 @@