From d48d1d3e96ab5997ddadea8a81d5ee90fcf9f366 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Sun, 15 Jul 2018 17:01:30 +0200 Subject: [PATCH 01/25] updated readme some more --- README.md | 73 +++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 49 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 475f0c1..ba0f199 100644 --- a/README.md +++ b/README.md @@ -6,15 +6,50 @@ If you own an ultrawide monitor, you have probably noticed that sometimes videos ![Demo](img-demo/example-httyd2.png "Should these black bars be here? No [...] But an ultrawide user never forgets.") -Works (tested!) on Youtube and Netflix, but you can try your luck with other sites as well. Available for [Firefox](https://addons.mozilla.org/en/firefox/addon/ultrawidify/) and [Chrome](https://chrome.google.com/webstore/detail/ultrawidify/dndehlekllfkaijdlokmmicgnlanfjbi). Should support theater mode on youtube, iframes only supported on fullscreen. +### Limitations -Youtube demo of autodetection stuff can be found [here](https://www.youtube.com/watch?v=j2xn1WpbtCQ). +* Unclear how extension handles sites with more than one video per page. +* Autodetection is only correct 95% of the time, most of the time. +* That new stretching mode wasn't thoroughly tested yet. Issues may be present. +* Enabling extension everywhere (as opposed to whitelisted sites) could break some websites. -## Beggathon +### Features + +* **Can be enabled or disabled on per-site basis** +* **Crop video to fit screen** (no stretching. Supported aspect ratios: 21/9 (1:2.39), 16:9, 16:10, _one (1) custom aspect ratio_) +* **Automatic aspect ratio detection** (can be enabled/disabled entirely or on a per-site basis, separately of the extension. Autodetection in action: [youtube](https://www.youtube.com/watch?v=j2xn1WpbtCQ)) +* **[NEW in v3!] Stretch video to fit the screen** (4 different approaches) +* **Supports Youtube theater mode** + +### Officially supported sites + +* Youtube +* Netflix + +### Other sites + +I am not actively testing extension on other sites. You can try your luck and enable extension for any unsupported site you stumble across via extension popup (in the _Setting for this site_ menu), but I make no guarantees it will work everywhere. + +### Installing this extension + +You can download this extension from Firefox' and Chrome's extension stores: + +* [Firefox](https://addons.mozilla.org/en/firefox/addon/ultrawidify/) (v3.0.0) +* [Chrome](https://chrome.google.com/webstore/detail/ultrawidify/dndehlekllfkaijdlokmmicgnlanfjbi) (v2.2.5-ish) + +### Beggathon Working on this extension takes time, coffee and motivation. If you want to buy me a beer or something, you can [use this link to send me motivation](https://www.paypal.me/tamius). **Any donations are well appreciated.** -## The long version +  + +  + +  + +  + +# The long version The technology has been here for a while, but plenty of people don't know how to properly encode a video (despite the fact [youtube has an article that explains aspect ratios](https://support.google.com/youtube/answer/6375112)). Plenty of people surprisingly includes major Holywood studios, such as [Marvel](https://www.youtube.com/watch?v=Ke1Y3P9D0Bc), [Disney](https://www.youtube.com/watch?v=yCOPJi0Urq4), [Dreamworks](https://www.youtube.com/watch?v=oKiYuIsPxYk), [Warner Brothers](https://www.youtube.com/watch?v=VYZ3U1inHA4), [Sony](https://www.youtube.com/watch?v=7BWWWQzTpNU), et cetera. You'd think that this is the one thing Holywood studios and people who make [music videos for a living](https://www.youtube.com/watch?v=c6Mx2mxpaCY) would know how to do right, but they don't. This extension is here to fix that. @@ -22,15 +57,6 @@ The technology has been here for a while, but plenty of people don't know how to ## Features -(Note: this readme is being written ahead of time, so not all features described here are available in the store version of the extension. Firefox users can expect these features by, at latest, 1st of August. Chrome version may take a little longer.) - -TL;DR: - -* **Can be enabled or disabled on per-site basis** -* **Crop video to fit screen** (no stretching. Supported aspect ratios: 21/9 (1:2.39), 16:9, 16:10, _one custom aspect ratio_) -* **Automatic aspect ratio detection** (can be enabled/disabled entirely or on a per-site basis, separately of the extension) -* **[NEW in v3!] Stretch video to fit the screen** (4 different approaches) - Most settings are self-explanatory, but we'll get into details anyway. ### Limitations: @@ -56,8 +82,7 @@ In the **Options for this site** section, there's some sidenotes to be had: ### Automatic aspect ratio detection -There's a few caveats to automatic aspect ratio detection. Namely, it only works on HTML5 videos (but who doesn't use HTML5 these days?). If videos on the site are DRM-protected (e.g. Netflix), autodetection will not work unless you're using Firefox (and even then, no guarantees). - +There's a few caveats to automatic aspect ratio detection. Namely, it only works on HTML5 videos (but who doesn't use HTML5 these days?). If videos on the site are DRM-protected (e.g. Netflix), autodetection will not work unless you're using Firefox (and even then, no guarantees). Video demonstration of autodetection can be found [here](https://www.youtube.com/watch?v=j2xn1WpbtCQ). ![Demo](img-demo/ui/popup/autoar.png) @@ -134,9 +159,9 @@ They still aren't rebindable. ### Permanent install / stable -[Latest stable for Firefox — download from AMO](https://addons.mozilla.org/en/firefox/addon/ultrawidify/) +[Latest stable for Firefox — download from AMO](https://addons.mozilla.org/en/firefox/addon/ultrawidify/) (v3.0.0) -[Latest stafle for Chrome — download from Chrome store](https://chrome.google.com/webstore/detail/ultrawidify/dndehlekllfkaijdlokmmicgnlanfjbi) +[Latest stafle for Chrome — download from Chrome store](https://chrome.google.com/webstore/detail/ultrawidify/dndehlekllfkaijdlokmmicgnlanfjbi) (v2.2.5) ### Installing the current, github version @@ -153,13 +178,13 @@ They still aren't rebindable. ## Plans for the future -~~1. Handle porting of extension settings between versions. (Some people had some issues where extension broke until reinstalled, and corrupted settings seemed to be the problem.)~~ seems to work for me? -2. Reintroduce gradual zoom on z and u and provide a way to 'scroll' the zoomed in video up/down left/right -reintroduce settings page (rebindable keys, blacklist/whitelist management, some settings for automatic aspect ratio detection) -3. site-specific options for sites that require additional CSS classes or other hacks -4. figure the best way to do GUI (injecting buttons into the player bar is not a good way. Been there, done that, each site has its own way and some appear to be impossible). Might get bumped to be released alongside #2 -~~5. Stretch mode, because some people are very salty and toxic about the fact that this extension is here to solve a problem that's different than the one they want. More salty than me rn.~~ done -6. Improvements to automatic aspect ratio detection +1. ~~Handle porting of extension settings between versions. (Some people had some issues where extension broke until reinstalled, and corrupted settings seemed to be the problem.)~~ seems to work for me? +2. Reintroduce gradual zoom on z and u and provide a way to 'scroll' the zoomed in video up/down left/right. +3. reintroduce settings page (rebindable keys, blacklist/whitelist management, some settings for automatic aspect ratio detection) +4. site-specific options for sites that require additional CSS classes or other hacks +5. figure the best way to do GUI (injecting buttons into the player bar is not a good way. Been there, done that, each site has its own way and some appear to be impossible). Might get bumped to be released alongside #2 +6. ~~Stretch mode, because some people are very salty and toxic about the fact that this extension is here to solve a problem that's different than the one they want. More salty than me rn.~~ done +7. Improvements to automatic aspect ratio detection ## Changelog From 5ce0c510184f7dff1dae5428b61221f6abc5a039 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Mon, 16 Jul 2018 20:38:16 +0200 Subject: [PATCH 02/25] Fixed autodetection menu --- js/conf/Debug.js | 4 ++-- manifest.json | 2 +- res/popup/js/popup.js | 23 +---------------------- 3 files changed, 4 insertions(+), 25 deletions(-) diff --git a/js/conf/Debug.js b/js/conf/Debug.js index 28d7ecf..1c1d516 100644 --- a/js/conf/Debug.js +++ b/js/conf/Debug.js @@ -1,6 +1,6 @@ // Set prod to true when releasing -_prod = true; -// _prod = false; +// _prod = true; +_prod = false; Debug = { debug: true, diff --git a/manifest.json b/manifest.json index e939a14..c259a0c 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Ultrawidify", - "version": "3.0.0", + "version": "3.0.1", "icons": { "32":"res/icons/uw-32.png", diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index 6625f40..c496361 100644 --- a/res/popup/js/popup.js +++ b/res/popup/js/popup.js @@ -376,21 +376,10 @@ function toggleSite(option){ Comms.sendToBackgroundScript({cmd:"enable-for-site", option:option}); } -function getMode(isEnabled, whitelistOnly) { - if(isEnabled) { - return whitelistOnly ? "whitelist" : "blacklist" - } else { - return "disabled"; - } -} - - document.addEventListener("click", (e) => { function getcmd(e){ - - var command = {}; command.sender = "popup"; command.receiver = "uwbg"; @@ -533,9 +522,7 @@ document.addEventListener("click", (e) => { return command; } if(e.target.classList.contains("_autoAr")){ - - var command = {}; - if(e.target.classList.contains("_ext_global_options")){ + if(e.target.classList.contains("_ar_global_options")){ command.cmd = "set-autoar-defaults"; if (e.target.classList.contains("_blacklist")) { command.mode = "blacklist"; @@ -546,14 +533,6 @@ document.addEventListener("click", (e) => { } return command; } else if (e.target.classList.contains("_autoAr_whitelist-only")) { - var arStatus = document.getElementById("_checkbox_autoar-enabled").checked; - var whitelist = document.getElementById("_checkbox_autoar-whitelist").checked; - - - if(Debug.debug) { - console.log("CHANGED CHECKMARK IN _AR-WHTIELIST:", extStatus, whitelist) - } - return { cmd: "set-autoar-mode", mode: getMode(arStatus, whitelist), From 20576675ce5373d556fe9db02f9a776768be2681 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Mon, 16 Jul 2018 22:30:52 +0200 Subject: [PATCH 03/25] Fixes for chrome --- js/lib/BrowserDetect.js | 21 +++++++++++++++--- js/lib/Comms.js | 47 +++++++++++++++++++---------------------- 2 files changed, 40 insertions(+), 28 deletions(-) diff --git a/js/lib/BrowserDetect.js b/js/lib/BrowserDetect.js index fa3b009..6923854 100644 --- a/js/lib/BrowserDetect.js +++ b/js/lib/BrowserDetect.js @@ -6,10 +6,24 @@ var _bd_isEdge = false; // we'll see if FF try{ // todo: find something that works in firefox but not in edge (or vice-versa) - _bd_isFirefox = true; - _bd_isEdge = false; + var browserinfo = browser.runtime.getBrowserInfo(); + + // we don't need to actually check because only firefox supports that. + // if we're not on firefox, the above call will probably throw an exception anyway. + // if browsers other than firefox start supporting that, well ... we'll also need to actually await for promise + // that getBrowserInfo() returns to resolve. + + // if (Browser.name.toLowerCase().indexOf(firefox) !== -1 || Browser.vendor.toLowerCase().indexOf(mozilla) !== -1) { + _bd_isFirefox = true; + _bd_isEdge = false; + // } + } -catch (e) {}; +catch (e) { + if(Debug.debug) { + console.info("[BrowserDetect] browser.runtime.getBrowserInfo() probably failed. This means we're probably not using firefox.", e) + } +}; if(typeof browser === "undefined"){ // This is a good sign we're in chrome or chromium-based browsers if(chrome){ @@ -17,6 +31,7 @@ if(typeof browser === "undefined"){ // This is a good sign we're in chrome or ch _bd_usebrowser = "chrome"; _bd_isChrome = true; _bd_isEdge = false; + _bd_isFirefox = false; } } diff --git a/js/lib/Comms.js b/js/lib/Comms.js index f24fc24..a856b22 100644 --- a/js/lib/Comms.js +++ b/js/lib/Comms.js @@ -1,10 +1,14 @@ if(Debug.debug){ - console.log("Loading Comms.js") + console.log("Loading Comms.js"); } class CommsClient { - constructor(name){ - this.port = browser.runtime.connect({name: name}); + constructor(name) { + if (BrowserDetect.firefox) { + this.port = browser.runtime.connect({name: name}); + } else if (BrowserDetect.chrome) { + this.port = chrome.runtime.connect({name: name}); + } var ths = this; this.port.onMessage.addListener(m => ths.processReceivedMessage(m)); @@ -158,20 +162,25 @@ class CommsServer { } } - sendToActive(message) { + async _getActiveTab() { + if (BrowserDetect.firefox) { + console.log("we firefox") + return await browser.tabs.query({currentWindow: true, active: true}); + } else { + return await new Promise( (resolve, reject) => { + chrome.tabs.query({currentWindow: true, active: true}, function (res) { + resolve(res); + }); + }); + } + } + + async sendToActive(message) { if(Debug.debug && Debug.comms){ console.log("%c[CommsServer::sendToActive] trying to send a message to active tab. Message:", "background: #dda; color: #11D", message); } - if(BrowserDetect.firefox){ - this._sendToActive_ff(message); - } else if (BrowserDetect.chrome) { - - } - } - - async _sendToActive_ff(message){ - var tabs = await browser.tabs.query({currentWindow: true, active: true}); + var tabs = await this._getActiveTab(); if(Debug.debug && Debug.comms){ console.log("[CommsServer::_sendToActive_ff] currently active tab(s)?", tabs); @@ -186,18 +195,6 @@ class CommsServer { } } - - async queryTabs_chrome(tabInfo){ - return new Promise(function (resolve, reject){ - browser.tabs.query(tabInfo, function(response){ - browser.tabs.query(tabInfo); - // Chrome/js shittiness mitigation — remove this line and an empty array will be returned - var r = response; - resolve(r); - }); - }); - } - onConnect(port){ var ths = this; From 335bcd64fc10c460d5359bd1d9224637e7088d0e Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Mon, 16 Jul 2018 22:34:32 +0200 Subject: [PATCH 04/25] code cleanup --- js/lib/Comms.js | 174 ------------------------------------------------ 1 file changed, 174 deletions(-) diff --git a/js/lib/Comms.js b/js/lib/Comms.js index a856b22..9084236 100644 --- a/js/lib/Comms.js +++ b/js/lib/Comms.js @@ -164,7 +164,6 @@ class CommsServer { async _getActiveTab() { if (BrowserDetect.firefox) { - console.log("we firefox") return await browser.tabs.query({currentWindow: true, active: true}); } else { return await new Promise( (resolve, reject) => { @@ -421,176 +420,3 @@ class Comms { } } - -// var _com_queryTabs = async function(tabInfo){ -// if(BrowserDetect.usebrowser != "firefox"){ -// return await _com_chrome_tabquery_wrapper(tabInfo); -// } -// else{ -// return browser.tabs.query(tabInfo); -// } -// } - -// var _com_getActiveTab = async function(tabInfo){ -// if(BrowserDetect.firefox){ -// return await browser.tabs.query({currentWindow: true, active: true}); -// } -// return _com_chrome_tabquery_wrapper({currentWindow: true, active: true}); -// } - - -// var _com_chrome_tabs_sendmsg_wrapper = async function(tab, message, options){ -// return new Promise(function (resolve, reject){ -// try{ -// browser.tabs.sendMessage(tab, message, /*options, */function(response){ -// console.log("TESTING what is this owo? (response)", response); - -// // Chrome/js shittiness mitigation — remove this line and an empty array will be returned -// var r = response; - -// resolve(r); -// }); -// } -// catch(e){ -// reject(e); -// } -// }); -// } - -// var _com_sendMessage = async function(tab, message, options){ -// if(BrowserDetect.usebrowser != "firefox"){ -// var r = await _com_chrome_tabs_sendmsg_wrapper(tab, message, options); -// console.log("TESTING what is this owo? (should be a promise)", r); -// return r; -// } -// else{ -// return browser.tabs.sendMessage(tab, message, options); -// } -// } - -// var _com_chrome_tabs_sendmsgrt_wrapper = async function(message){ -// return new Promise(function (resolve, reject){ -// try{ -// browser.runtime.sendMessage(message, function(response){ - -// // Chrome/js shittiness mitigation — remove this line and an empty array will be returned -// var r = response; - -// resolve(r); -// }); -// } -// catch(e){ -// reject(e); -// } -// }); -// } - -// var _com_sendMessageRuntime = async function(message){ -// if(BrowserDetect.usebrowser != "firefox"){ -// return _com_chrome_tabs_sendmsgrt_wrapper(message); -// } -// else{ -// return browser.runtime.sendMessage(message); -// } -// } - -// // pošlje sporočilce vsem okvirjem v trenutno odprtem zavihku. Vrne tisti odgovor od tistega okvira, ki prispe prvi. -// // sends a message to all frames in the currently opened tab. Returns the response of a frame that replied first -// var _com_sendToAllFrames = async function(message) { -// if(Debug.debug) -// console.log("[Comms::_com_sendToAllFrames] sending message to all frames of currenntly active tab"); - -// var tabs = await browser.tabs.query({currentWindow: true, active: true}); - -// if(Debug.debug) -// console.log("[Comms::_com_sendToAllFrames] trying to send message", message, " to tab ", tabs[0], ". (all tabs:", tabs,")"); - -// var response = await browser.tabs.sendMessage(tabs[0].id, message); -// console.log("[Comms::_com_sendToAllFrames] response is this:",response); -// return response; - -// // if(BrowserDetect.firefox){ -// // return -// // } -// } - -// // pošlje sporočilce vsem okvirjem v trenutno odprtem zavihku in vrne _vse_ odgovore -// // sends a message to all frames in currently opened tab and returns all responses -// var _com_sendToEachFrame = async function(message, tabId) { -// if(Debug.debug) -// console.log("[Comms::_com_sendToEveryFrame] sending message to every frames of currenntly active tab"); - -// if(tabId === undefined){ -// var tabs = await browser.tabs.query({currentWindow: true, active: true}); -// tabId = tabs[0].id; -// } -// var frames = await browser.webNavigation.getAllFrames({tabId: tabId}); - -// if(Debug.debug) -// console.log("[Comms::_com_sendToEveryFrame] we have this many frames:", frames.length, "||| tabId:", tabId ,"frames:",frames); - - -// // pošlji sporočilce vsakemu okvirju, potisni obljubo v tabelo -// // send message to every frame, push promise to array -// var promises = []; -// for(var frame of frames){ -// if(Debug.debug) -// console.log("[Comms:_com_sendToEachFrame] we sending message to tab with id", tabId, ", frame with id", frame.frameId); -// try{ -// promises.push(browser.tabs.sendMessage(tabId, message, {frameId: frame.frameId})); -// } -// catch(e){ -// if(Debug.debug) -// console.log("[Comms:_com_sendToEachFrame] we sending message to tab with id", tabId, ", frame with id", frame.frameId); -// } -// } - -// // počakajmo, da so obljube izpolnjene. -// // wait for all promises to be kept - -// var responses = []; - -// for(var promise of promises){ -// var response = await promise; -// if(response !== undefined) -// responses.push(response); -// } - -// if(Debug.debug) -// console.log("[Comms::_com_sendToEveryFrame] we received responses from all frames", responses); - -// return responses; -// } - -// var _com_sendToMainFrame = async function(message, tabId){ -// if(Debug.debug) -// console.log("[Comms::_com_sendToMainFrame] sending message to every frames of currenntly active tab"); - -// if(tabId === undefined){ -// var tabs = await browser.tabs.query({currentWindow: true, active: true}); -// tabId = tabs[0].id; -// } - -// // pošlji sporočilce glavnemu okvirju. Glavni okvir ima id=0 -// // send message to the main frame. Main frame has id=0 -// try{ -// var response = await browser.tabs.sendMessage(tabId, message, {frameId: 0}); -// console.log("[Comms::_com_sendToMainFrame] response is this:",response); - -// } -// catch(e){ -// console.log("[Comms:_com_sendToEachFrame] failed sending message to tab with id", tabId, ", frame with id", 0, "\nerror:",e); -// } -// return response; -// } - -// var Comms = { -// getActiveTab: _com_getActiveTab, -// sendToBackgroundScript: _com_sendMessageRuntime, -// queryTabs: _com_queryTabs, -// sendMessage: _com_sendMessage, -// sendMessageRuntime: _com_sendMessageRuntime, -// sendToEach: _com_sendToEachFrame, -// sendToAll: _com_sendToAllFrames, -// sendToMain: _com_sendToMainFrame, -// } From 872bc4ece7ba79fae7428d00aa000315a3f03c1b Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 19 Jul 2018 23:05:39 +0200 Subject: [PATCH 05/25] Some work on settings --- js/conf/ExtensionConf.js | 4 +- res/css/uw_common.css | 57 ------ res/css/uw_netflix.css | 39 ---- res/css/uw_settings.css | 1 - res/css/uw_yt.css | 28 --- res/popup/popup.html | 113 +---------- res/settings/settings.html | 375 ++++++++++++++----------------------- 7 files changed, 154 insertions(+), 463 deletions(-) delete mode 100644 res/css/uw_common.css delete mode 100644 res/css/uw_netflix.css delete mode 100644 res/css/uw_settings.css delete mode 100644 res/css/uw_yt.css diff --git a/js/conf/ExtensionConf.js b/js/conf/ExtensionConf.js index e9fd5cb..d3db062 100644 --- a/js/conf/ExtensionConf.js +++ b/js/conf/ExtensionConf.js @@ -194,13 +194,13 @@ var ExtensionConf = { status: "enabled", // should extension work on this site? arStatus: "default", // should we enable autodetection statusEmbedded: "enabled", // should extension work for this site when embedded on other sites? - override: true // ignore value localStorage in favour of this + override: false // ignore value localStorage in favour of this }, "www.netflix.com" : { status: "enabled", arStatus: BrowserDetect.firefox ? "default" : "disabled", statusEmbedded: "enabled", - override: true + override: false }, } } diff --git a/res/css/uw_common.css b/res/css/uw_common.css deleted file mode 100644 index e5c980d..0000000 --- a/res/css/uw_common.css +++ /dev/null @@ -1,57 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Oxygen:300,400&subset=latin-ext'); - -.show{ - display: block !important; -} -.uw_hide{ - display: none !important; -} - -.uw_submenu{ - display: none; - position: absolute; - background-color: rgba(0,0,0,0.66); -} -/* -.uw-setmenu{ - padding-left: 2em !important; - padding-right: 2em !important; -}*/ - -.uw_submenu_bottom0{ - bottom: 0px; -} - -.display_relative{ - display: relative; -} - -.uw-setmenu-item{ - padding-right: 2em !important; - padding-left: 2em !important; -} - -.common_anchor { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: hidden; -} - -.uw_button{ - display: inline-block; -/* height: 100% !important; */ - background-size: 75% 75%; - background-repeat: no-repeat; - background-position: center center; -} - -.uw_ui_anchor{ - display: inline-block; -} -#uw_ui_anchor{ - display: inline-block; - -} diff --git a/res/css/uw_netflix.css b/res/css/uw_netflix.css deleted file mode 100644 index 41896a1..0000000 --- a/res/css/uw_netflix.css +++ /dev/null @@ -1,39 +0,0 @@ -.uw-button{ - display: inline-block; -/* height: 100% !important; */ - background-size: 75% 75%; - background-repeat: no-repeat; - background-position: center center; -} - -.uw-button-row { - display: inline-block !important; - position: absolute !important; - top: 0 !important; - right: 0 !important; - width: 99% !important; - height: 100% !important; - z-index: 1337 !important; - text-align: right; -} - -.uw-button:hover{ - background-color: rgba(192,0,0,0.66); -} -.uw-setmenu{ - display: none; - position: absolute; - background-color: rgba(0,0,0,0.66); - right: 0px; -} -.uw-setmenu-item{ - display: flex; - align-items: center; - font-family: "Oxygen"; - color: #ffffff !important; - width: 90%; - padding-left: 10%; -} -.uw-setmenu-item:hover{ - background-color: rgba(192,0,0,0.66); -} diff --git a/res/css/uw_settings.css b/res/css/uw_settings.css deleted file mode 100644 index 8bbf7e2..0000000 --- a/res/css/uw_settings.css +++ /dev/null @@ -1 +0,0 @@ -/* yeah this is also a placeholder file, this time for 'settings' page */ diff --git a/res/css/uw_yt.css b/res/css/uw_yt.css deleted file mode 100644 index d933f82..0000000 --- a/res/css/uw_yt.css +++ /dev/null @@ -1,28 +0,0 @@ -.uw-button{ - display: inline-block; - height: 100% !important; - background-size: 75% 75%; - background-repeat: no-repeat; - background-position: center center; -} -.uw-button:hover{ - background-color: rgba(192,0,0,0.66); -} -.uw-setmenu{ - display: none; - position: absolute; - background-color: rgba(0,0,0,0.66); - right: 0px; -} -.uw-setmenu-item{ - display: flex; - align-items: center; - font-family: "Oxygen"; - color: #ffffff !important; -} -.uw-setmenu-item:hover{ - background-color: rgba(192,0,0,0.66); -} -.uw_top{ - z-index: 1337; -} diff --git a/res/popup/popup.html b/res/popup/popup.html index 2918b84..f037eb2 100644 --- a/res/popup/popup.html +++ b/res/popup/popup.html @@ -5,6 +5,7 @@ + @@ -214,24 +132,7 @@
If you see this line, then your browser didn't start the popup script yet. This is a problem caused by the browser. Please wait a few seconds.
- - - +
- - -
Shortcuts
+
General settings
+
Site options
+
Shortcuts
About
+ + + - -
+
-
-
Enable automatic aspect ratio detection
-
This option uses 3rd party websites to determine aspect ratio. It may not work all the time or even properly. It only works with Netflix. This option is NOT available on Youtube. Also deprecated probably, tamius pls remove
-
-
-
Enable brute-force automatic aspect ratio detection
-
Pretend that this checkbox is checked and that you can't uncheck it.

This option works by checking where black pixels end on _every_ frame (technically every ~30ms). Because of this, this option may cause lagginess and increased CPU usage. also you can't not use it because we're doing a total rewrite lol
-
-
-
Yes, the UI is gone. [..] but why is the UI gone?
+ +
+ Enable this extension: +
+ Always + On whitelisted sites + Never +
+ + Always enables this extension on every site you visit that you didn't blacklist. + On whitelisted sites enables this extension only on sites you explicitly whitelisted. + Never disables extension on all sites, even on those you whitelisted. + +
+ +
+ Enable autodetection: +
+ Always + On whitelisted sites + Never +
+ + Always enables autodetection on every site this extension is enabled for, unless blacklisted. + On whitelisted sites enables autodetection only for sites that you explicitly enabled. + Never disables autodetection on all sites, even on those you whitelisted. + +
+ +
+ In-player UI +
+ Always/a> + On whitelisted sites + Never +
+
- - - - - - + +
+ Video alignment: +
+ left + center + right +
+
+ +
+
+ Never
 + Basic
 + Hybrid
 + Thin borders
 +
+
+ + + + +
+ +
+ Enable autodetection: +
+ Always + On whitelisted sites + Never +
+
+ Always enables autodetection on every site this extension is enabled for, unless blacklisted. + On whitelisted sites enables autodetection only for sites that you explicitly enabled. + Never disables autodetection on all sites, even on those you whitelisted. +
+
+ +
+ Checking for aspect ratio changes +
+ When video is playing: ms +
+
+ When video is paused: ms +
+
+ On error: ms +
+ +
+ All values are in milliseconds. + The values determine how often the autodetection script will scan video for changes in aspect ratio under different circumstances. + Using shorter intervals can cause lag and increases resource usage. + Using longer intervals increases delay between aspect ratio changing and said change being detected. +
+
+ +
+ + todo: insert checkbox +
+

In order for autodetection to work, the extension grabs a frame of the video you're watching and takes a look at it. + Some websites use DRM, which prevents you from using the HTML5-blessed way of getting a frame from a video. + Some browsers offer some features that can be used to circumvent DRM protection. + With this option enabled, the extension will use said features to basically do that. +

+

Technical details: tl;dr — only works in Firefox and maybe its forks.
+ Fallback mode depends on two things: +

    +
  1. Attempting to grab a video frame from DRM protected video stream must return an error (Chrome returns black image)
    2. +
  2. Supports CanvasRenderingContext2D.drawWindow() method, which pretty much only Firefox does
    3. +
+

+

But I thought it's illegal to circumvent DRM?
+ Courts disagree (at least as far as our use-case is concerned). + At this point I'd also throw in some choice words about DRM and everyone using it, but AMO gives me "you're breaking terms of conduct" warnings over use of the word for thing you flush down the toilet, prepended by a word for male cow*, in the code comments.
*'cow' is term for the female +

+
+
+ +
+ + + + +
+ +
+ + + +

PLEASE NOTE: THIS IS COMPLETELY NON-FUNCTIONAL ATM. YOU CANT SET SITE-SPECIFIC OPTIONS ATM

@@ -265,7 +175,10 @@
-
+ + + +

Keyboard shortcuts

@@ -343,6 +256,9 @@
+ + +

Ultrawidify - an aspect ratio fixer for youtube (and netflix)

@@ -366,7 +282,6 @@
- From 8ba028a5b23a9021bb35c6f96671b59cb59d8db3 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 19 Jul 2018 23:05:57 +0200 Subject: [PATCH 06/25] git commit -am doesn't add new files --- js/lib/UiFactory.js | 0 js/modules/Interface.js | 16 +++ res/css/uw-common.css | 117 ++++++++++++++++++++++ res/settings/settings.css | 202 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 335 insertions(+) create mode 100644 js/lib/UiFactory.js create mode 100644 js/modules/Interface.js create mode 100644 res/css/uw-common.css create mode 100644 res/settings/settings.css diff --git a/js/lib/UiFactory.js b/js/lib/UiFactory.js new file mode 100644 index 0000000..e69de29 diff --git a/js/modules/Interface.js b/js/modules/Interface.js new file mode 100644 index 0000000..8f7e13f --- /dev/null +++ b/js/modules/Interface.js @@ -0,0 +1,16 @@ +class Interface { + constructor(videoData) { + this.conf = videoData; + this.player = videoData.player; + } + + injectUi() { + + this.detectorDiv = document.createElement('div'); + this.uiRoot = document.createElement('div'); + this.detectorDiv.appendChild(this.uiRoot); + + + + } +} diff --git a/res/css/uw-common.css b/res/css/uw-common.css new file mode 100644 index 0000000..bee5588 --- /dev/null +++ b/res/css/uw-common.css @@ -0,0 +1,117 @@ +a { + color: #af7f37; +} +a:hover { + color: #c0924e; +} + +.hidden { + display: none !important; +} + + + +/** layout stuff **/ + +.row { + display: block; + margin-top: 20px; + margin-bottom: 10px; +} + +.button-row { + display: block; + margin-top: 5px; + margin-bottom: 10px; +} + +.w24 { + width: 100px; +} + + + +/** input **/ + +input { + border: 1px solid #322; + padding: 0.5em; + padding-top: 0.5em; + padding-bottom: 0.5em; +} + +.invalid-input { + border: 1px solid #720 !important; + background-color: #410 !important; +} + + + + +/** buttons and stuff ***/ + +.button { + display: inline-block; + padding-top: 8px; + padding-bottom: 3px; + padding-left: 20px; + padding-right: 20px; + border: 1px solid #444; + margin-top: 3px; + margin-bottom: 3px; + color: #dbb; + text-align: center; +} + +.button:hover { + color: #fff; + background-color: #433221; +} + + + + +/** formatting **/ + +small{ + font-size: 0.75em; + font-weight: 200; +} + +.smallcaps{ + font-variant: small-caps; +} + +.center{ + text-align: center; + width: 100%; +} + + + + +/** misc **/ + +.color_warn { + color: #d6ba4a; +} + +.warning { + color: #d6ba4a; + padding-left: 35px; + float: right; +} + +.warning::before { + content: "⚠ "; + display: inline-block; + font-weight: bold; + font-size: 2.5em; + margin-left: -35px; + padding-right: 10px; +/* top: 0px; */ + float: left; +} + + + diff --git a/res/settings/settings.css b/res/settings/settings.css new file mode 100644 index 0000000..9da1b1b --- /dev/null +++ b/res/settings/settings.css @@ -0,0 +1,202 @@ +@import url("../css/font/overpass.css"); +@import url("../css/font/overpass-mono.css"); + +body { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==); + background-size: 75px; + background-color: #000000; + color: #ddd; + font-family: 'overpass', serif; + font-size: 1.2em; + width: 100%; + border: 0px; + margin: 0px; + padding: 0px; + text-align: center; + z-index: -1000; +} + +a, a:visited{ + color: #fa6607; + text-decoration: none; +} +a:hover{ + color: #fa6; +} + +.show{ + display: block !important; +} +.hide{ + display: none !important; +} +head{ + width: 100%; + border: 0px; + margin: 0px; + padding: 0px; +} + +h1,h2{ + color: #ff9; + font-weight: 300; +} +h1{ + font-size: 3.3em; +} +h2{ + font-size: 2.2em; +} +.sites_header{ + font-size: 1.6em; + color: #ff9; +} +.content{ + display: inline-block; + width: 52em; +} +.center{ + margin: 0 auto; +} +.basecolor { + color: #ddd !important; +} +.red{ + color: #ff3a00; +} +.disabled { + opacity: 0.69; +} +.left { + text-align: left; +} +.block { + display: inline-block; + margin-left: 1em; + margin-right: 1em; +} +.tabline { + background-color: #000; + width: 100%; + margin-bottom: 1.5em; + padding-top: 0.3em; + padding-bottom: 0.4em; + z-index: -200; +} +.tab { + color: #fa6607; +} +.tab:hover{ + text-shadow: #aa5 0px 0px 0.02em,#aa5 0px 0px 0.02em; +} +.tab-selected { + color: #ff9 !important; +} +#all{ + min-width: 100%; + min-height: 100vh; + background-image: url('img/settings/about-bg.png'); + background-position: calc(50vw + 20em) 10vh; + background-attachment: fixed; + background-size: auto 100%; + background-repeat: no-repeat; +} +.dup_keybinds{ + background-color: #720 !important; +} +input[type=text]{ + font-size: 1em; + padding-left: 0.6em; + margin-left: 1em; + width: 2em; + background-color: #000; + border: 1px #442 solid; +} +.uw_shortcuts_line{ + padding-top: 0.25em; + padding-left: 5em; +} +.uw_shortcuts_label{ + display: inline-block; + color: #fff; + width: 17.5em; +} +.uw_options_line{ + margin-top: 0.75em; + font-size: 1.1em; + width: 80%; + margin-left: 5%; +} +.uw_options_option{ + margin-left: 5%; +} +.uw_suboption{ + margin-left: 5em; + margin-top: 0.75em; + font-size: 0.85em; +} +.uw_options_desc, .uw_suboption_desc{ + margin-top: 0.33em; + font-size: 0.69em; + color: #aaa; +} +.uw_suboption_desc{ + margin-left: 5em; +} + +.buttonbar{ +/* width: 100%; */ + padding-left: 20em; + margin-bottom: 2em; +} +.button{ + display: inline-block; + margin-left: 1em; + margin-right: 1em; + padding-left: 1em; + padding-right: 1em; + padding-top: 0.4em; + width: 4em; + text-align: center; + background-color: rgba(0,0,0,0.66); + color: #ffc; + height: 1.7em; +} + +/** site options css **/ +.site_name { + padding-left: 1em; + padding-bottom: 0.3em; + color: #fff; + font-size: 1.1em; + height: 13em !important; + +} +.site_details { + font-size: 0.8em; +} +.site_title_ebox { + width: 10em !important; + font-size: 1.5em !important; + background-color: rgba(0,0,0,0) !important; + margin-left: 0px !important; + border: 0px !important; + color: #ffc !important; +} +.details_ebox { + width: 12em !important; + background-color: rgba(0,0,0,0) !important; + border: 0px !important; + color: #ffc !important; + margin-left: 0em !important; +} +.details_ebox:disabled { + color: #aaa !important; +} +.inline_button { + display: inline-block; + margin-top: -1.42em; +} +.inline_button:hover { + color: #fff; +} \ No newline at end of file From 1eaff8f2ce9ed0becd2a03ed1ef700f665f55b35 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 19 Jul 2018 23:48:24 +0200 Subject: [PATCH 07/25] some preliminary cleaning in the 'about' section --- res/settings/settings.html | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/res/settings/settings.html b/res/settings/settings.html index 8bf6e79..bdf8660 100644 --- a/res/settings/settings.html +++ b/res/settings/settings.html @@ -262,21 +262,18 @@

Ultrawidify - an aspect ratio fixer for youtube (and netflix)

-

Created by Tamius Han (me). If something is broken, you can shout at me on github (shout nicely, though. Open an issue or bug report or something). If you're curious to see the source code, github's here. If you're looking at this page because you're bored and want to be bored some more, my website's here.

+

Created by Tamius Han (me). If something is broken, you can shout at me on github (shout nicely, though. Open an issue or bug report or something). + If you're curious to see the source code, github's here. + If you're looking at this page because you're bored and want to be bored some more, my website's here.

So you want to help?

-

There's a lot of sites where you can stream videos. A lot of these sites keep failing to handle aspect ratios correctly, which means it would be great if this extension worked elsewhere. Unfortunately, a lot of these sites require me to pony up some money (ayy lmao) OR just flat out block anyone who's not from the US (or their small selection of approved regions). Some sites even do both.

-

This means I'd need some help. There's two ways. One of them is to use 'inspect element' option of your browser to pick up IDs (or classnames) of certain elements. More detail here(TODO: add a link to quick tutorial).probably wont be necessary

-

The second one is, well. I won't shy away from donations either. Bonus respect for dank amounts!

-

Needless to say, I'll be happy and thankful regardless of the way you contribute.

+

Alan pls add quick description.

Plans for the future

-

Support for more sizes. More flexible/customizable UI. Maybe (but absolutely no promises here) a bit more advanced autodetection.

-

this is the future lol. (at least as far as autodetection goes, keybinds need to make a comeback)

Acknowledgements

-

This extension uses font Oxygen.

-

Special thanks to CD Project Red (The Witcher 2), Cyanide Studios (Styx, Of Orcs and Men), and Valve (CS:GO), which made it possible for me to untrigger myself after seeing so many improperly encoded videos.

-

More or less.

- -

Special one-finger salute to all incompetent people who don't know how to properly encode videos and upload them to youtube (to word it most nicely).

+

This extension uses font Overpass.

+ + + +

Special thanks to me for making this extension. You're welcome.

From 09cc1816ad6d93e469d0e73eea09f84341b7394f Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 2 Aug 2018 23:16:07 +0200 Subject: [PATCH 08/25] Cleanup --- js/uw-bg.js | 245 +--------------------------------------------------- js/uw.js | 105 ---------------------- 2 files changed, 1 insertion(+), 349 deletions(-) diff --git a/js/uw-bg.js b/js/uw-bg.js index 53876d4..0af1066 100644 --- a/js/uw-bg.js +++ b/js/uw-bg.js @@ -79,247 +79,4 @@ class UWServer { } -var server = new UWServer(); - - - -// async function main(){ -// if(Debug.debug) -// console.log("[uw-bg::main] setting up background script"); - - -// Keybinds.keybinds = await Keybinds.fetch(); - - -// // Poslušalci za dogodke | event listeners here -// // {===]///[-------------------------------------]\\\[===} - -// browser.runtime.onMessage.addListener(_uwbg_rcvmsg); -// browser.tabs.onActivated.addListener(_uwbg_onTabSwitched); - -// if(Debug.debug) -// console.log("[uw-bg::main] listeners registered"); - -// // add currentSite -// var tabs = await Comms.getActiveTab(); -// BgVars.currentSite = extractHostname(tabs[0].url); - -// // -// setInterval(_uwbg_check4videos, 5000); -// } - -// async function _uwbg_onTabSwitched(activeInfo){ -// BgVars.hasVideos = false; -// if(Debug.debug) -// console.log("[uw-bg::onTabSwitched] TAB CHANGED, GETTING INFO FROM MAIN TAB"); - - -// var tabId = activeInfo.tabId; // just for readability - -// var tab = await browser.tabs.get(tabId); - -// BgVars.currentSite = extractHostname(tab.url); - -// // this can fail. This might also not return a promise? Check that. -// var videoFrameList = await Comms.sendToEach({"cmd":"has-videos"}, tabId); - -// if(Debug.debug) -// console.log("[uw-bg::onTabSwitched] got list of frames and whether they have videos", videoFrameList); - -// // Pogledamo, če kateri od okvirjev vsebuje video. Da omogočimo pojavno okno je zadosti že -// // en okvir z videom. -// // <===[///]----------------------------[\\\]===> -// // Check if any frame has a video in it. To enable the popup there only needs to be at least one, -// // but the popup controls all frames. - -// var hasVideos = false; -// for(frame of videoFrameList){ -// hasVideos |= frame.response.hasVideos; -// } - -// BgVars.hasVideos = hasVideos; - -// Settings.reload(); -// // todo: change extension icon depending on whether there's a video on the page or not -// } - -// async function _uwbg_check4videos(){ -// if(BgVars.hasVideos) -// return; - -// var videoFrameList = Comms.sendToEach({"cmd":"has-videos"}); - -// if(Debug.debug) -// console.log("[uw-bg::check4videos] got updated list of frames and whether they have videos", videoFrameList); - -// var hasVideos = false; -// for(frame of videoFrameList){ -// hasVideos |= frame.response.hasVideos; -// } - -// BgVars.hasVideos = hasVideos; -// } - -// async function _uwbg_registerVideo(tabId){ -// var tabs = await Comms.getActiveTab(); - -// // če ukaz pride iz zavihka, na katerem se trenunto ne nahajamo, potem se za zahtevo ne brigamo -// // if command originated from a tab that's _not_ currently active, we ignore the request -// if(tabId != tabs[0].id){ -// if(Debug.debug){ -// console.log("[uw-bg::_uwbg_registerVideo] request didn't come from currently active tab, ignoring"); -// } -// return; -// } -// if(Debug.debug){ -// console.log("%c[uw-bg::_uwbg_registerVideo] request came from currently active tab!", "color: #afd, background: #000"); -// } -// BgVars.hasVideos = true; - -// // todo: change extension icon depending on whether there's a video on the page or not -// } - -// function _uwbg_rcvmsg(message, sender, sendResponse){ -// if(Debug.debug){ -// console.log("[uw-bg::_uwbg_rcvmsg] received message", message, "from sender", sender); -// } - -// message.sender = "uwbg"; -// message.receiver = "uw"; - -// if(message.cmd == "has-videos"){ -// if(Debug.debug){ -// console.log("[uw-bg::_uwbg_rcvmsg] does this tab or any of its subframes have videos?", BgVars.hasVideos ); -// } - -// var res = {response: {hasVideos: BgVars.hasVideos}}; -// if(BrowserDetect.firefox){ -// return Promise.resolve(res); -// } -// sendResponse(res); -// return true; -// } - -// if(message.cmd == "get-config"){ -// var config = {}; -// config.videoAlignment = ExtensionConf.miscFullscreenSettings.videoFloat; -// config.arConf = {}; -// config.arConf.enabled_global = ExtensionConf.arDetect.enabled == "blacklist"; - -// config.site = {}; -// config.site.status = SitesConf.getSiteStatus(BgVars.currentSite); -// config.site.arStatus = SitesConf.getArStatus(BgVars.currentSite); - -// config.mode = ExtensionConf.extensionMode; -// config.arMode = ExtensionConf.arDetect.mode; -// config.arDisabledReason = ExtensionConf.arDetect.disabledReason; -// config.arTimerPlaying = ExtensionConf.arDetect.timer_playing; - -// if(Debug.debug) -// console.log("[uw-bg::_uwbg_rcvmsg] Keybinds.getKeybinds() returned this:", Keybinds.getKeybinds()); - -// config.keyboardShortcuts = Keybinds.getKeybinds(); - - -// // predvidevajmo, da je enako. Če je drugače, bomo popravili ko dobimo odgovor -// // assume current is same as global & change that when you get response from content script -// config.arConf.enabled_current = ExtensionConf.arDetect.enabled == "blacklist"; - -// var res = {response: config} - -// if(Debug.debug){ -// console.log("[uw-bg::_uwbg_rcvmsg] get-config: returning this to popup script:", res); -// } - -// if(BrowserDetect.firefox){ -// return Promise.resolve(res); -// } -// sendResponse(res); -// return true; -// } - -// if(message.cmd == "register-video"){ -// // dobili smo sporočilce, ki pravi: "hej jaz imam video, naredi cahen" — ampak preden naredimo cahen, -// // se je potrebno prepričati, da je sporočilce prišlo iz pravilnega zavihka. Trenutno odprt zavihek -// // lahko dobimo to. ID zavihka, iz katerega je prišlo sporočilo, se skriva v sender.tab.id -// // ~<><\\\][=================][///><>~ -// // we got a message that says: "hey I have a video, make a mark or something" — but before we do the -// // mark, we should check if the message has truly arrived from currently active tab. We can get the -// // id of currently active tab here. ID of the sender tab is ‘hidden’ in sender.tab.id. - -// _uwbg_registerVideo(sender.tab.id); -// } - -// else if(message.cmd == "uw-enabled-for-site"){ - -// var mode = SitesConf.getSiteStatus(BgVars.currentSite); - -// if(BrowserDetect.usebrowser == "firefox") -// return Promise.resolve({response: mode}); - -// try{ -// sendResponse({response: mode}); -// } -// catch(chromeIsShitError){}; - -// return true; -// } -// else if(message.cmd == "enable-for-site"){ -// SitesConf.updateSite(BgVars.currentSite, {status: message.option, statusEmbedded: message.option}); -// } -// else if(message.cmd == "enable-autoar"){ -// ExtensionConf.arDetect.mode = "blacklist"; -// Settings.save(ExtensionConf); -// Comms.sendToAll({cmd: "reload-settings", sender: "uwbg"}) -// if(Debug.debug){ -// console.log("[uw-bg] autoar set to enabled (blacklist). evidenz:", ExtensionConf); -// } -// } -// else if(message.cmd == "disable-autoar"){ -// ExtensionConf.arDetect.mode = "disabled"; -// if(message.reason){ -// ExtensionConf.arDetect.disabledReason = message.reason; -// } else { -// ExtensionConf.arDetect.disabledReason = ''; -// } -// Settings.save(ExtensionConf); -// // Comms.sendToAll({cmd: "reload-settings", sender: "uwbg"}); -// if(Debug.debug){ -// console.log("[uw-bg] autoar set to disabled. evidenz:", ExtensionConf); -// } -// } -// else if(message.cmd == "gib-settings"){ -// if(Debug.debug) -// console.log("[uw-bg] we got asked for settings. Returning this:", ExtensionConf); - -// if(BrowserDetect.usebrowser == "firefox") -// return Promise.resolve({response: ExtensionConf}); - -// try{ -// sendResponse({response: ExtensionConf}); -// } -// catch(chromeIsShitError){}; - -// return true; -// } -// else if(message.cmd = "autoar-set-timer-playing"){ - -// if(Debug.debug) -// console.log("[uw-bg] trying to set new interval for autoAr. New interval is",message.timeout,"ms"); - -// var timeout = message.timeout; - -// if(timeout < 1) -// timeout = 1; -// if(timeout > 999) -// timeout = 999; - -// ExtensionConf.arDetect.timer_playing = timeout; -// Settings.save(ExtensionConf); -// Comms.sendToAll({cmd: "update-settings", sender: "uwbg", newConf: ExtensionConf}); -// } - -// } - - -// main(); +var server = new UWServer(); \ No newline at end of file diff --git a/js/uw.js b/js/uw.js index 7768a78..5c2875d 100644 --- a/js/uw.js +++ b/js/uw.js @@ -55,109 +55,4 @@ async function init(){ console.log("[uw.js::setup] pageInfo initialized. Here's the object:", pageInfo); } } - - -// comms -// function receiveMessage(message, sender, sendResponse) { -// if(Debug.debug) -// console.log("[uw::receiveMessage] we received a message.", message); - -// if(message.cmd == "has-videos"){ -// var anyVideos = GlobalVars.video != null; - -// if(Debug.debug) -// console.log("[uw::receiveMessage] are there any videos on this page?", anyVideos, GlobalVars.video, this); - -// if(BrowserDetect.usebrowser == "firefox") -// return Promise.resolve({response: {"hasVideos": anyVideos }}); - -// try{ -// sendResponse({response: {"hasVideos":anyVideos}}); -// return true; -// } -// catch(chromeIsShitError){} -// return; -// } -// else if(message.cmd == "get-config"){ - -// var config = {}; -// config.videoAlignment = ExtensionConf.miscFullscreenSettings.videoFloat; -// config.arConf = {}; -// config.arConf.enabled_global = ExtensionConf.arDetect.enabled == "global"; - - -// var keybinds = ExtensionConf.keyboard.shortcuts; -// if(Debug.debug) -// console.log("[uw-bg::_uwbg_rcvmsg] Keybinds.fetch returned this:", keybinds); - -// config.keyboardShortcuts = keybinds; - -// // predvidevajmo, da je enako. Če je drugače, bomo popravili ko dobimo odgovor -// // assume current is same as global & change that when you get response from content script -// config.arConf.enabled_current = ArDetect.isRunning(); - -// if(BrowserDetect.usebrowser == "firefox") -// return Promise.resolve({response: config}); - -// try{ -// sendResponse({response: config}); -// } -// catch(chromeIsShitError){}; - -// return true; -// } - -// else if(message.cmd == "force-ar"){ -// if(Debug.debug) -// console.log("[uw::receiveMessage] we're being commanded to change aspect ratio to", message.newAr); - -// if(message.arType == "legacy"){ -// ArDetect.stop(); -// Resizer.legacyAr(message.newAr); -// } -// else{ -// ArDetect.stop(); -// Resizer.setAr(message.newAr); -// } -// } -// else if(message.cmd == "force-video-float"){ -// if(Debug.debug) -// console.log("[uw::receiveMessage] we're aligning video to", message.newFloat); - -// ExtensionConf.miscFullscreenSettings.videoFloat = message.newFloat; -// Settings.save(ExtensionConf); -// } -// else if(message.cmd == "stop-autoar"){ -// ArDetect.stop(); -// } -// else if(message.cmd == "update-settings"){ -// if(Debug.debug){ -// console.log("[uw] we got sent new ExtensionConf to abide by:", cmd.newConf); -// } -// ExtensionConf = cmd.newConf; -// } -// // else if(message.cmd == "enable-autoar"){ -// // if(Debug.debug){ -// // console.log("[uw] enabling autoar."); -// // } -// // ExtensionConf.autoAr.mode == "blacklist"; -// // Settings.save(ExtensionConf); -// // } -// // else if(message.cmd == "disable-autoar"){ -// // if(Debug.debug){ -// // console.log("[uw] disabling autoar."); -// // } -// // ExtensionConf.autoAr.mode == "disabled"; -// // Settings.save(ExtensionConf); -// // } -// if(message.cmd == "testing"){ -// if(Browserdetect.usebrowser = "firefox") -// return Promise.resolve({response: "test response hier"}); - -// sendResponse({response: "test response hier"}); -// return true; -// } -// } - - init(); From b01e5ebcec6e443cf09b54882e95f5f49c8bdfca Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Fri, 3 Aug 2018 00:44:37 +0200 Subject: [PATCH 09/25] Renamed stuff for consistency with ExtensionConf. Cleanup. --- res/popup/js/popup.js | 60 +++---------------------------------------- res/popup/popup.html | 6 ++--- 2 files changed, 7 insertions(+), 59 deletions(-) diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index c496361..003b64a 100644 --- a/res/popup/js/popup.js +++ b/res/popup/js/popup.js @@ -38,8 +38,8 @@ AutoArPanel.globalOptions.blacklist = document.getElementById("_ar_global_option AutoArPanel.globalOptions.whitelist = document.getElementById("_ar_global_options_whitelist"); AutoArPanel.globalOptions.disabled = document.getElementById("_ar_global_options_disabled"); AutoArPanel.siteOptions = {}; -AutoArPanel.siteOptions.disabled = document.getElementById("_ar_site_options_blacklist"); -AutoArPanel.siteOptions.enabled = document.getElementById("_ar_site_options_whitelist"); +AutoArPanel.siteOptions.disabled = document.getElementById("_ar_site_options_disabled"); +AutoArPanel.siteOptions.enabled = document.getElementById("_ar_site_options_enabled"); AutoArPanel.siteOptions.default = document.getElementById("_ar_site_options_default"); var ArPanel = {}; @@ -269,51 +269,6 @@ function openMenu(menu){ MenuTab[menu].classList.add("selected"); } -function _arctl_onclick(command){ - if(! _config) - return; - - if(command.cmd == "stop-autoar") - _config.arConf.enabled_current = false; - else if(command.cmd == "force-ar") - _config.arConf.enabled_current = true; - else if(command.cmd == "disable-autoar") - _config.arConf.enabled_global = false; - else if(command.cmd == "enable-autoar") - _config.arConf.enabled_global = true; - - showArctlButtons(); -} - -function showArctlButtons(){ - if(! _config) - return; - - // if(_config.arConf){ - // if(! _config.arConf.enabled_global){ - // ArPanel.autoar.disable.classList.add("hidden"); - // ArPanel.autoar.enable.classList.remove("hidden"); - - // ArPanel.autoar.enable_tmp.textContent = "Temporarily enable"; - // ArPanel.autoar.disable_tmp.textContent = "Temporarily disable"; - // } - // else{ - // ArPanel.autoar.disable.classList.remove("hidden"); - // ArPanel.autoar.enable.classList.add("hidden"); - - // ArPanel.autoar.enable_tmp.textContent = "Re-enable"; - // ArPanel.autoar.disable_tmp.textContent = "Temporarily disable"; - // } - // if(! _config.arConf.enabled_current){ - // ArPanel.autoar.disable_tmp.classList.add("hidden"); - // ArPanel.autoar.enable_tmp.classList.remove("hidden"); - // } - // else{ - // ArPanel.autoar.disable_tmp.classList.remove("hidden"); - // ArPanel.autoar.enable_tmp.classList.add("hidden"); - // } - // } -} function getCustomAspectRatio() { var textBox_value = document.getElementById("_input_custom_ar").value.trim(); @@ -532,13 +487,6 @@ document.addEventListener("click", (e) => { command.mode = "disabled"; } return command; - } else if (e.target.classList.contains("_autoAr_whitelist-only")) { - return { - cmd: "set-autoar-mode", - mode: getMode(arStatus, whitelist), - sender: "popup", - receiver: "uwbg" - }; } else if (e.target.classList.contains("_save_autoAr_frequency")) { var value = parseInt(document.getElementById("_input_autoAr_frequency").value.trim()); @@ -550,9 +498,9 @@ document.addEventListener("click", (e) => { return; } else if (e.target.classList.contains("_ar_site_options")) { command.cmd = "set-autoar-for-site"; - if(e.target.classList.contains("_blacklist")){ + if(e.target.classList.contains("_disabled")){ command.mode = "disabled"; - } else if(e.target.classList.contains("_whitelist")) { + } else if(e.target.classList.contains("_enabled")) { command.mode = "enabled"; } else { command.mode = "default"; diff --git a/res/popup/popup.html b/res/popup/popup.html index f037eb2..8dacc5a 100644 --- a/res/popup/popup.html +++ b/res/popup/popup.html @@ -171,9 +171,9 @@
Options for this site:
- Blacklist - Default - Whitelist + Blacklist + Default + Whitelist
From 966f8a034d6adb45482a1a6825ec05148ed51813 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Sun, 5 Aug 2018 23:48:56 +0200 Subject: [PATCH 10/25] Rewrote Settings.js, did some cleanup with legacy stuff. --- js/conf/Keybinds.js | 7 +- js/conf/Settings.js | 169 - js/conf/SitesConf.js | 257 - js/conf/Status.js | 3 - js/dep/chrome/chrome-extension-async.js | 250 - js/dep/jquery-3.1.1.js | 10220 ---------------------- js/lib/Comms.js | 136 +- js/lib/EdgeDetect.js | 41 +- js/lib/GuardLine.js | 21 +- js/lib/ObjectCopy.js | 43 + js/lib/Settings.js | 161 + js/lib/VideoData.js | 4 +- js/modules/ArDetect.js | 77 +- js/modules/PageInfo.js | 9 +- js/modules/Resizer.js | 12 +- js/modules/Stretcher.js | 11 +- manifest.json | 15 +- test/TEST_VIDEOS.md | 7 + 18 files changed, 381 insertions(+), 11062 deletions(-) delete mode 100644 js/conf/Settings.js delete mode 100644 js/conf/SitesConf.js delete mode 100644 js/conf/Status.js delete mode 100644 js/dep/chrome/chrome-extension-async.js delete mode 100644 js/dep/jquery-3.1.1.js create mode 100644 js/lib/ObjectCopy.js create mode 100644 js/lib/Settings.js diff --git a/js/conf/Keybinds.js b/js/conf/Keybinds.js index dd90121..e27bf2e 100644 --- a/js/conf/Keybinds.js +++ b/js/conf/Keybinds.js @@ -4,6 +4,7 @@ if(Debug.debug) class Keybinds { constructor(pageInfo){ this.pageInfo = pageInfo; + this.settings = pageInfo.settings; this.inputs = ['input','select','button','textarea']; } @@ -36,7 +37,7 @@ class Keybinds { // building modifiers list: var modlist = ""; - for(var mod of ExtensionConf.keyboard.modKeys){ + for(var mod of this.settings.active.keyboard.modKeys){ if(event[mod]) modlist += (mod + "_") } @@ -52,8 +53,8 @@ class Keybinds { console.log("[Keybinds::_kbd_process] our full keypress is this", keypress ); - if(ExtensionConf.keyboard.shortcuts[keypress]){ - var conf = ExtensionConf.keyboard.shortcuts[keypress]; + if(this.settings.active.keyboard.shortcuts[keypress]){ + var conf = this.settings.active.keyboard.shortcuts[keypress]; if(Debug.debug && Debug.keyboard) console.log("[Keybinds::_kbd_process] there's an action associated with this keypress. conf:", conf); diff --git a/js/conf/Settings.js b/js/conf/Settings.js deleted file mode 100644 index 2f1625a..0000000 --- a/js/conf/Settings.js +++ /dev/null @@ -1,169 +0,0 @@ -// This file handles saving and loading of settings. -// Actual settings are in ExtensionConf - -if(Debug.debug) - console.log("Loading: Settings.js"); - -var _se_init = async function(isSlave){ - - if(Debug.debug) - console.log("[Settings::_se_init()] -------- starting init! ---------"); - - if(isSlave === undefined) - isSlave = false; - - if(isSlave){ - // request settings from background script. Yes, this is supposed to be global. - var res = await Comms.sendToBackgroundScript({cmd: "gib-settings"}); - - ExtensionConf = res.response; - - if(Debug.debug){ - console.log("[Settings::_se_init()] received settings from the background script. ExtensionConf:",ExtensionConf,"response message was this:",res); - } - - return; - } - - - var newSettings = await StorageManager.getopt_async("uw-settings"); - var uwVersion = browser.runtime.getManifest().version; - - if (Debug.debug) - console.log("[Settings::_se_init()] settings saved in localstorage are:", newSettings, " - if that's empty, it's gonna be replaced by this:", ExtensionConf, ")"); - - if ((Object.keys(newSettings).length === 0 && newSettings.constructor === Object)){ - if(Debug.debug) - console.log("[Settings::_se_init()] no saved settings, saving default"); - StorageManager.setopt({"uw-settings": ExtensionConf}); - } - else{ - var actualSettings = newSettings["uw-settings"]; - if(actualSettings.version === undefined || actualSettings.version != uwVersion){ - ExtensionConf['version'] = uwVersion; - - if(Debug.debug) - console.log("[Settings::_se_init()] extension was updated, replacing settings", ExtensionConf); - - StorageManager.setopt({"uw-settings": ExtensionConf}); - } - else{ - _se_patchUserSettings(actualSettings, ExtensionConf); - } - if(Debug.debug) - console.log("[Settings::_se_init()] parsed settings:", actualSettings, "were they copied to ExtensionConf?",ExtensionConf); - - } - - if(Debug.debug) - console.log("[Settings::_se_init] settings have been loaded/reloaded. Current state: ", ExtensionConf); - -} - -var _se_patchUserSettings = function(saved, extDefaults){ - for(var k in extDefaults){ - if(extDefaults[k] != null && typeof extDefaults[k] === 'object' && extDefaults[k].constructor === Object){ - if(typeof saved[k] !== 'object' || saved[k].constructor !== Object || extDefaults[k].override === true) - continue; // if user's settings are wrong or if override flag is set, we keep value in extDefaults - - _se_patchUserSettings(saved[k], extDefaults[k]); - } - else{ - extDefaults[k] = saved[k]; - } - } -} - -var _se_save = function(settings){ - StorageManager.delopt("uw-settings"); - - if(settings !== undefined){ - StorageManager.setopt({"uw-settings": settings}); - } - else{ - StorageManager.setopt({"uw-settings": ExtensionConf}); - } - - if (Debug.debug) - console.log("[Settings::_se_save()] saving settings:", settings); -} - -var _se_reload = function(){ - this.init(true); -} - -var _se_isBlacklisted = function(site){ - return this.blacklist.indexOf(site) > -1; -} - -var _se_isWhitelisted = function(site){ - return this.whitelist.indexOf(site) > -1; -} - -var Settings = { - init: _se_init, - save: _se_save, - reload: _se_reload, -} - - -// ----------------------------------------- -// Nastavitve za posamezno stran -// Config for a given page: -// -// : { -// status:
@@ -171,9 +171,9 @@
Options for this site:
- Blacklist - Default Whitelist + Default + Blacklist
From 38a94e3bd3e46016e8a1c9143f5c35513c984f0d Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Wed, 29 Aug 2018 21:23:08 +0200 Subject: [PATCH 22/25] Changing persistent settings (the ones _not_ limited to current page) bypasses comms --- res/popup/js/popup.js | 132 ++++++++++++++++++++++-------------------- 1 file changed, 68 insertions(+), 64 deletions(-) diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index ec468af..e8a0f9c 100644 --- a/res/popup/js/popup.js +++ b/res/popup/js/popup.js @@ -64,9 +64,25 @@ var _config; var _changeAr_button_shortcuts = { "autoar":"none", "reset":"none", "219":"none", "189":"none", "169":"none", "custom":"none" } var comms = new Comms(); +var settings = new Settings(); + var port = browser.runtime.connect({name: 'popup-port'}); port.onMessage.addListener( (m,p) => processReceivedMessage(m,p)); + + +// let's init settings and check if they're loaded +await settings.init(); + +if (Debug.debug) { + console.log("[popup] Are settings loaded?", settings) +} + + + + + + async function processReceivedMessage(message, port){ if(message.cmd === 'set-config'){ @@ -100,16 +116,16 @@ function stringToKeyCombo(key_in){ return keys_out; } -function loadConfig(extensionConf, site){ +async function loadConfig(){ + if(Debug.debug) - console.log("[popup.js::loadConfig] loading config. conf object:", extensionConf, "\n\n\n\n\n\n\n\n-------------------------------------"); + console.log("[popup.js::loadConfig] loading config. conf object:", settings.active, "\n\n\n\n\n\n\n\n-------------------------------------"); - _extensionConf = extensionConf; // ---------------------- //#region extension-basics - SET BASIC EXTENSION OPTIONS if(Debug.debug) - console.log("EXT: site is:", site, "|extensionConf for this site: ", (site && extensionConf.sites[site]) ? extensionConf.sites[site] : "default site") + console.log("EXT: site is:", site, "|settings for this site: ", (site && settings.active.sites[site]) ? settings.active.sites[site] : "default site") for(var button in ExtPanel.globalOptions) { @@ -119,9 +135,9 @@ function loadConfig(extensionConf, site){ ExtPanel.siteOptions[button].classList.remove("selected"); } - ExtPanel.globalOptions[extensionConf.extensionMode].classList.add("selected"); - if(site && extensionConf.sites[site]) { - ExtPanel.siteOptions[extensionConf.sites[site].status].classList.add("selected"); + ExtPanel.globalOptions[settings.active.extensionMode].classList.add("selected"); + if(site && settings.active.sites[site]) { + ExtPanel.siteOptions[settings.active.sites[site].status].classList.add("selected"); } else { ExtPanel.siteOptions.default.classList.add("selected"); } @@ -131,9 +147,9 @@ function loadConfig(extensionConf, site){ // ------------ //#region autoar - SET AUTOAR OPTIONS // if(Debug.debug) - // console.log("Autodetect mode?", extensionConf.arDetect.mode, "| site & site options:", site, ",", (site && extensionConf.sites[site]) ? extensionConf.sites[site].arStatus : "fucky wucky?" ); - // document.getElementById("_autoAr_disabled_reason").textContent = extensionConf.arDetect.DisabledReason; - document.getElementById("_input_autoAr_timer").value = extensionConf.arDetect.timer_playing; + // console.log("Autodetect mode?", settings.active.arDetect.mode, "| site & site options:", site, ",", (site && settings.active.sites[site]) ? settings.active.sites[site].arStatus : "fucky wucky?" ); + // document.getElementById("_autoAr_disabled_reason").textContent = settings.active.arDetect.DisabledReason; + document.getElementById("_input_autoAr_timer").value = settings.active.arDetect.timer_playing; for(var button in AutoArPanel.globalOptions) { @@ -144,20 +160,20 @@ function loadConfig(extensionConf, site){ } - AutoArPanel.globalOptions[extensionConf.arDetect.mode].classList.add("selected"); - if(site && extensionConf.sites[site]) { - AutoArPanel.siteOptions[extensionConf.sites[site].arStatus].classList.add("selected"); + AutoArPanel.globalOptions[settings.active.arDetect.mode].classList.add("selected"); + if(site && settings.active.sites[site]) { + AutoArPanel.siteOptions[settings.active.sites[site].arStatus].classList.add("selected"); } else { AutoArPanel.siteOptions.default.classList.add("selected"); } //#endregion // process video alignment: - if(extensionConf.miscFullscreenSettings.videoFloat){ + if(settings.active.miscFullscreenSettings.videoFloat){ for(var button in ArPanel.alignment) ArPanel.alignment[button].classList.remove("selected"); - ArPanel.alignment[extensionConf.miscFullscreenSettings.videoFloat].classList.add("selected"); + ArPanel.alignment[settings.active.miscFullscreenSettings.videoFloat].classList.add("selected"); } //#region - SET STRETCH @@ -166,21 +182,21 @@ function loadConfig(extensionConf, site){ for (var button in StretchPanel.global) { StretchPanel.global[button].classList.remove("selected"); } - if (extensionConf.stretch.initialMode === 0) { + if (settings.active.stretch.initialMode === 0) { StretchPanel.global.none.classList.add("selected"); - } else if (extensionConf.stretch.initialMode === 1) { + } else if (settings.active.stretch.initialMode === 1) { StretchPanel.global.basic.classList.add("selected"); - } else if (extensionConf.stretch.initialMode === 2) { + } else if (settings.active.stretch.initialMode === 2) { StretchPanel.global.hybrid.classList.add("selected"); - } else if (extensionConf.stretch.initialMode === 3) { + } else if (settings.active.stretch.initialMode === 3) { StretchPanel.global.conditional.classList.add("selected"); } //#endregion // process keyboard shortcuts: - if(extensionConf.keyboard.shortcuts){ - for(var key in extensionConf.keyboard.shortcuts){ - var shortcut = extensionConf.keyboard.shortcuts[key]; + if(settings.active.keyboard.shortcuts){ + for(var key in settings.active.keyboard.shortcuts){ + var shortcut = settings.active.keyboard.shortcuts[key]; var keypress = stringToKeyCombo(key); @@ -217,8 +233,8 @@ function loadConfig(extensionConf, site){ } // fill in custom aspect ratio - if (extensionConf.keyboard.shortcuts.q) { - document.getElementById("_input_custom_ar").value = extensionConf.keyboard.shortcuts.q.arg; + if (settings.active.keyboard.shortcuts.q) { + document.getElementById("_input_custom_ar").value = settings.active.keyboard.shortcuts.q.arg; } } for(var key in _changeAr_button_shortcuts){ @@ -379,15 +395,15 @@ document.addEventListener("click", (e) => { if(e.target.classList.contains("_ext")) { var command = {}; if(e.target.classList.contains("_ext_global_options")){ - command.cmd = "set-extension-defaults"; if (e.target.classList.contains("_blacklist")) { - command.mode = "blacklist"; + settings.active.extensionMode = "blacklist"; } else if (e.target.classList.contains("_whitelist")) { - command.mode = "whitelist"; + settings.active.extensionMode = "whitelist"; } else { - command.mode = "disabled"; + settings.active.extensionMode = "disabled"; } - return command; + settings.save(); + return; } else if (e.target.classList.contains("_ext_site_options")) { command.cmd = "set-extension-for-site"; if(e.target.classList.contains("_blacklist")){ @@ -456,17 +472,17 @@ document.addEventListener("click", (e) => { } if(e.target.classList.contains("_stretch")){ if (e.target.classList.contains("_ar_stretch_global")) { - command.cmd = "set-stretch-default" if (e.target.classList.contains("_none")) { - command.mode = 0; + settings.active.stretch.initialMode = 0; } else if (e.target.classList.contains("_basic")) { - command.mode = 1; + settings.active.stretch.initialMode = 1; } else if (e.target.classList.contains("_hybrid")) { - command.mode = 2; + settings.active.stretch.initialMode = 2; } else if (e.target.classList.contains("_conditional")) { - command.mode = 3; + settings.active.stretch.initialMode = 3; } - return command; + settings.save(); + return; } if(e.target.classList.contains("_ar_stretch_none")) { @@ -486,22 +502,22 @@ document.addEventListener("click", (e) => { } if(e.target.classList.contains("_autoAr")){ if(e.target.classList.contains("_ar_global_options")){ - command.cmd = "set-autoar-defaults"; if (e.target.classList.contains("_blacklist")) { - command.mode = "blacklist"; + settings.active.arDetect.mode = "blacklist"; } else if (e.target.classList.contains("_whitelist")) { - command.mode = "whitelist"; + settings.active.arDetect.mode = "whitelist"; } else { - command.mode = "disabled"; + settings.active.arDetect.mode = "disabled"; } - return command; + settings.save(); + return; } else if (e.target.classList.contains("_save_autoAr_frequency")) { var value = parseInt(document.getElementById("_input_autoAr_frequency").value.trim()); if(! isNaN(value)){ var timeout = parseInt(value); - command = {cmd: "autoar-set-timer-playing", timeout: timeout, sender: "popup", receiver: "uwbg"}; - Comms.sendToBackgroundScript(command); + settings.active.arDetect.timer_playing = timeout; + settings.save(); } return; } else if (e.target.classList.contains("_ar_site_options")) { @@ -521,29 +537,17 @@ document.addEventListener("click", (e) => { command.global = true; - if(e.target.classList.contains("_align_left")){ - command.cmd = "set-video-float", - command.newFloat = "left" - - // console.log(".................\n\n\n..........\n\n >>command<< \n\n\n\n ",command,"\n\n\n.........\n\n\n................................"); - - return command; + if (e.target.classList.contains("_align_left")) { + settings.active.miscFullscreenSettings.videoFloat = 'left'; + } else if (e.target.classList.contains("_align_center")) { + settings.active.miscFullscreenSettings.videoFloat = 'center'; + } else if (e.target.classList.contains("_align_right")) { + settings.active.miscFullscreenSettings.videoFloat = 'left'; } - if(e.target.classList.contains("_align_center")){ - command.cmd = "set-video-float" - command.newFloat = "center" - return command; - } - if(e.target.classList.contains("_align_right")){ - command.cmd = "set-video-float"; - command.newFloat = "right"; - return command; - } - } - if(e.target.classList.contains("extensionEnabledOnCurrentSite")){ // legacy? can be removed? - toggleSite(document.extensionEnabledOnCurrentSite.mode.value); - } - + + settings.save(); + return; + } } var command = getcmd(e); From 0c37c5a0e15cdd17a010f684a4bc4a205022cc11 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 30 Aug 2018 00:56:15 +0200 Subject: [PATCH 23/25] Popup and settings work, but all scripts can run doubly if uw.init() was called twice --- js/conf/Debug.js | 4 +- js/conf/ExtensionConf.js | 6 +- js/lib/Comms.js | 92 ++++++++----------- js/lib/Settings.js | 25 +++++- js/lib/VideoData.js | 6 ++ js/modules/PageInfo.js | 22 +++-- js/modules/Resizer.js | 96 ++++++++------------ js/uw.js | 107 +++++++++++----------- res/popup/js/popup.js | 186 +++++++++++++++++++++++++-------------- res/popup/popup.html | 3 +- 10 files changed, 298 insertions(+), 249 deletions(-) diff --git a/js/conf/Debug.js b/js/conf/Debug.js index 1c1d516..446be10 100644 --- a/js/conf/Debug.js +++ b/js/conf/Debug.js @@ -7,8 +7,8 @@ Debug = { keyboard: true, debugResizer: true, debugArDetect: true, - debugStorage: true, - comms: true, + debugStorage: false, + comms: false, // showArDetectCanvas: true, flushStoredSettings: false, playerDetectDebug: true, diff --git a/js/conf/ExtensionConf.js b/js/conf/ExtensionConf.js index 402d6b4..fd8ac87 100644 --- a/js/conf/ExtensionConf.js +++ b/js/conf/ExtensionConf.js @@ -194,13 +194,15 @@ var ExtensionConf = { status: "enabled", // should extension work on this site? arStatus: "default", // should we enable autodetection statusEmbedded: "enabled", // should extension work for this site when embedded on other sites? - override: false // ignore value localStorage in favour of this + override: false, // ignore value localStorage in favour of this + type: 'official' // is officially supported? (Alternatives are 'community' and 'user-defined') }, "www.netflix.com" : { status: "enabled", arStatus: BrowserDetect.firefox ? "default" : "disabled", statusEmbedded: "enabled", - override: false + override: false, + type: 'official' }, } } diff --git a/js/lib/Comms.js b/js/lib/Comms.js index 8020ada..bd41154 100644 --- a/js/lib/Comms.js +++ b/js/lib/Comms.js @@ -13,24 +13,46 @@ class CommsClient { } var ths = this; - this.port.onMessage.addListener(m => ths.processReceivedMessage(m)); + this._listener = m => ths.processReceivedMessage(m); + this.port.onMessage.addListener(this._listener); this.settings = settings; this.pageInfo = undefined; + this.commsId = (Math.random() * 20).toFixed(0); } + destroy() { + this.pageInfo = null; + this.settings = null; + this.port.onMessage.removeListener(this._listener); + } + setPageInfo(pageInfo){ + this.pageInfo = pageInfo; + + if(Debug.debug) { + console.log(`[CommsClient::setPageInfo] <${this.commsId}>`, "SETTING PAGEINFO —", this.pageInfo, this) + } + + var ths = this; + this._listener = m => ths.processReceivedMessage(m); + this.port.onMessage.removeListener(this._listener); + this.port.onMessage.addListener(this._listener); + } processReceivedMessage(message){ if(Debug.debug && Debug.comms){ - console.log("[CommsClient.js::processMessage] Received message from background script!", message); + console.log(`[CommsClient.js::processMessage] <${this.commsId}> Received message from background script!`, message); } - if (! this.pageInfo || this.settings.active) { + if (!this.pageInfo || !this.settings.active) { if(Debug.debug && Debug.comms){ - console.log("[CommsClient.js::processMessage] this.pageInfo not defined. Extension is probably disabled for this site."); + console.log(`[CommsClient.js::processMessage] <${this.commsId}> this.pageInfo (or settings) not defined. Extension is probably disabled for this site.\npageInfo:`, this.pageInfo, + "\nsettings.active:", this.settings.active, + "\nnobj:", this + ); } return; } @@ -40,12 +62,6 @@ class CommsClient { } else if (message.cmd === 'set-video-float') { this.settings.active.miscFullscreenSettings.videoFloat = message.newFloat; this.pageInfo.restoreAr(); - } else if (message.cmd === "has-videos") { - - } else if (message.cmd === "set-config") { - this.hasSettings = true; - this.settings.active = message.conf; - // this.pageInfo.reset(); } else if (message.cmd === "set-stretch") { this.pageInfo.setStretchMode(StretchMode[message.mode]); } else if (message.cmd === "autoar-start") { @@ -60,28 +76,7 @@ class CommsClient { } else if (message.cmd === "resume-processing") { // todo: autoArStatus this.pageInfo.resumeProcessing(message.autoArStatus); - } else if (message.cmd === "reload-settings") { - this.settings.active = message.newConf; - this.pageInfo.reset(); - if(this.settings.active.arDetect.mode === "disabled") { - this.pageInfo.stopArDetection(); - } else { - this.pageInfo.startArDetection(); - } - } - } - - async waitForSettings(){ - var t = this; - return new Promise( async (resolve, reject) => { - while(true){ - await t.sleep(100); - if(this.hasSettings){ - resolve(); - break; - } - } - }); + } } async sleep(n){ @@ -131,10 +126,6 @@ class CommsClient { return Promise.resolve(true); } - async requestSettings_fallback(){ - this.port.postMessage({cmd: "get-config"}); - } - registerVideo(){ this.port.postMessage({cmd: "has-video"}); } @@ -236,6 +227,10 @@ class CommsServer { console.log("[CommsServer.js::processMessage] Received message from background script!", message, "port", port, "\nsettings and server:", this.settings,this.server); } + if(message.cmd === 'get-current-site') { + port.postMessage({cmd: 'set-current-site', site: this.server.currentSite}); + } + if (message.cmd === 'get-config') { if(Debug.debug) { console.log("CommsServer: received get-config. Active settings?", this.settings.active, "\n(settings:", this.settings, ")") @@ -246,25 +241,17 @@ class CommsServer { } else if (message.cmd === 'set-stretch-default') { this.settings.active.stretch.initialMode = message.mode; this.settings.save(); - this.sendToAll({cmd: 'reload-settings', newConf: this.settings.active}); } else if (message.cmd === 'set-ar') { this.sendToActive(message); } else if (message.cmd === 'set-custom-ar') { this.settings.active.keyboard.shortcuts.q.arg = message.ratio; this.settings.save(); - this.sendToAll({cmd: 'reload-settings', newConf: this.settings.active}); } else if (message.cmd === 'set-video-float') { this.sendToActive(message); this.settings.active.miscFullscreenSettings.videoFloat = message.newFloat; this.settings.save(); - this.sendToAll({cmd: 'reload-settings', newConf: this.settings.active}); - } else if (message.cmd === 'autoar-start') { this.sendToActive(message); - } else if (message.cmd === "autoar-enable") { // LEGACY - can be removed prolly? - this.settings.active.arDetect.mode = "blacklist"; - this.settings.save(); - this.sendToAll({cmd: 'reload-settings', newConf: this.settings.active}); } else if (message.cmd === "autoar-disable") { // LEGACY - can be removed prolly? this.settings.active.arDetect.mode = "disabled"; if(message.reason){ @@ -273,7 +260,6 @@ class CommsServer { this.settings.active.arDetect.disabledReason = 'User disabled'; } this.settings.save(); - this.sendToAll({cmd: 'reload-settings', newConf: this.settings.active}); } else if (message.cmd === "autoar-set-interval") { if(Debug.debug) console.log("[uw-bg] trying to set new interval for autoAr. New interval is",message.timeout,"ms"); @@ -282,15 +268,12 @@ class CommsServer { var timeout = message.timeout < 4 ? 4 : message.timeout; this.settings.active.arDetect.timer_playing = timeout; this.settings.save(); - this.sendToAll({cmd: 'reload-settings', newConf: this.settings.active}); } else if (message.cmd === "set-autoar-defaults") { this.settings.active.arDetect.mode = message.mode; this.settings.save(); - this.sendToAll({cmd: "reload-settings", sender: "uwbg"}) } else if (message.cmd === "set-autoar-for-site") { if (this.settings.active.sites[this.server.currentSite]) { this.settings.active.sites[this.server.currentSite].arStatus = message.mode; - console.log("SAVING AUTOAR MODE FOR SITE", this.server.currentSite, "\nnew site obj",this.settings.active.sites[this.server.currentSite] ) this.settings.save(); } else { this.settings.active.sites[this.server.currentSite] = { @@ -300,11 +283,9 @@ class CommsServer { }; this.settings.save(); } - this.sendToAll({cmd: "reload-settings", sender: "uwbg"}); } else if (message.cmd === "set-extension-defaults") { this.settings.active.extensionMode = message.mode; this.settings.save(); - this.sendToAll({cmd: "reload-settings", sender: "uwbg"}) } else if (message.cmd === "set-extension-for-site") { if (this.settings.active.sites[this.server.currentSite]) { this.settings.active.sites[this.server.currentSite].status = message.mode; @@ -315,14 +296,11 @@ class CommsServer { arStatus: "default", statusEmbedded: message.mode }; - this.settings.save(); - console.log("SAVING PER-SITE OPTIONS,", this.server.currentSite, this.settings.active.sites[this.server.currentSite]) + this.settings.save(); + if(Debug.debug) { + console.log("SAVING PER-SITE OPTIONS,", this.server.currentSite, this.settings.active.sites[this.server.currentSite]) + } } - this.sendToAll({cmd: "reload-settings", sender: "uwbg"}); - } - - if (message.cmd.startsWith('set-')) { - port.postMessage({cmd: "set-config", conf: this.settings.active, site: this.server.currentSite}); } } diff --git a/js/lib/Settings.js b/js/lib/Settings.js index 36dfb65..130e340 100644 --- a/js/lib/Settings.js +++ b/js/lib/Settings.js @@ -1,16 +1,17 @@ class Settings { - constructor(activeSettings) { + constructor(activeSettings, updateCallback) { this.active = activeSettings ? activeSettings : undefined; this.default = ExtensionConf; this.useSync = false; this.version = undefined; + this.updateCallback = updateCallback; const ths = this; if(BrowserDetect.firefox) { browser.storage.onChanged.addListener( (changes, area) => { - if (Debug.debug) { + if (Debug.debug && Debug.debugStorage) { console.log("[Settings::] Settings have been changed outside of here. Updating active settings. Changes:", changes, "storage area:", area); if (changes['uwSettings'] && changes['uwSettings'].newValue) { console.log("[Settings::] new settings object:", JSON.parse(changes.uwSettings.newValue)); @@ -19,10 +20,18 @@ class Settings { if(changes['uwSettings'] && changes['uwSettings'].newValue) { ths.active = JSON.parse(changes.uwSettings.newValue); } + + if(this.updateCallback) { + try { + updateCallback(); + } catch (e) { + console.log("[Settings] CALLING UPDATE CALLBACK FAILED.") + } + } }); } else if (BrowserDetect.chrome) { chrome.storage.onChanged.addListener( (changes, area) => { - if (Debug.debug) { + if (Debug.debug && Debug.debugStorage) { console.log("[Settings::] Settings have been changed outside of here. Updating active settings. Changes:", changes, "storage area:", area); if (changes['uwSettings'] && changes['uwSettings'].newValue) { console.log("[Settings::] new settings object:", JSON.parse(changes.uwSettings.newValue)); @@ -31,7 +40,15 @@ class Settings { if(changes['uwSettings'] && changes['uwSettings'].newValue) { ths.active = JSON.parse(changes.uwSettings.newValue); } - }) + + if(this.updateCallback) { + try { + updateCallback(); + } catch (e) { + console.log("[Settings] CALLING UPDATE CALLBACK FAILED.") + } + } + }); } } diff --git a/js/lib/VideoData.js b/js/lib/VideoData.js index 15a0154..bbb73df 100644 --- a/js/lib/VideoData.js +++ b/js/lib/VideoData.js @@ -40,6 +40,10 @@ class VideoData { } destroy() { + if(Debug.debug){ + console.log("[VideoData::destroy] received destroy command"); + } + this.destroyed = true; if(this.arDetector){ this.arDetector.stop(); @@ -49,9 +53,11 @@ class VideoData { if(this.resizer){ this.resizer.destroy(); } + this.resizer = null; if(this.player){ this.player.destroy(); } + this.player = null; this.video = null; } diff --git a/js/modules/PageInfo.js b/js/modules/PageInfo.js index 424ac0f..a04901e 100644 --- a/js/modules/PageInfo.js +++ b/js/modules/PageInfo.js @@ -3,8 +3,6 @@ if(Debug.debug) class PageInfo { constructor(comms, settings){ - this.keybinds = new Keybinds(this); - this.keybinds.setup(); this.hasVideos = false; this.siteDisabled = false; this.videos = []; @@ -17,13 +15,21 @@ class PageInfo { if(comms){ this.comms = comms; - this.comms.setPageInfo(this); - if(this.videos.length > 0){ - comms.registerVideo(); - } + } + + if(this.videos.length > 0){ + comms.registerVideo(); } } + destroy() { + if(Debug.debug){ + console.log("[PageInfo::destroy] destroying all videos!") + } + for (var video of this.videos) { + video.destroy(); + } + } reset() { for(var video of this.videos) { @@ -128,7 +134,7 @@ class PageInfo { ths.rescanTimer = null; ths.rescan(rr); ths = null; - }, rescanReason === settings.active.pageInfo.timeouts.rescan, RescanReason.PERIODIC) + }, rescanReason === this.settings.active.pageInfo.timeouts.rescan, RescanReason.PERIODIC) } catch(e) { if(Debug.debug){ console.log("[PageInfo::scheduleRescan] scheduling rescan failed. Here's why:",e) @@ -148,7 +154,7 @@ class PageInfo { ths.rescanTimer = null; ths.ghettoUrlCheck(); ths = null; - }, settings.active.pageInfo.timeouts.urlCheck) + }, this.settings.active.pageInfo.timeouts.urlCheck) }catch(e){ if(Debug.debug){ console.log("[PageInfo::scheduleUrlCheck] scheduling URL check failed. Here's why:",e) diff --git a/js/modules/Resizer.js b/js/modules/Resizer.js index c5ce77d..882fa3a 100644 --- a/js/modules/Resizer.js +++ b/js/modules/Resizer.js @@ -36,6 +36,8 @@ class Resizer { this.lastAr = {type: 'original'}; this.destroyed = false; + + this.resizerId = (Math.random(99)*100).toFixed(0); } start(){ @@ -47,17 +49,23 @@ class Resizer { } destroy(){ + if(Debug.debug){ + console.log(`[Resizer::destroy] received destroy command.`); + } this.destroyed = true; this.stopCssWatcher(); } setAr(ar, lastAr){ + if (this.destroyed) { + return; + } this.startCssWatcher(); this.cssWatcherIncreasedFrequencyCounter = 20; if(Debug.debug){ - console.log('[Resizer::setAr] trying to set ar. New ar:', ar) + console.log('[Resizer::setAr] trying to set ar. New ar:', ar) } if(lastAr) { @@ -89,7 +97,7 @@ class Resizer { if(! stretchFactors || stretchFactors.error){ if(Debug.debug){ - console.log("[Resizer::setAr] failed to set AR due to problem with calculating crop. Error:", (stretchFactors ? stretchFactors.error : stretchFactors)); + console.log("[Resizer::setAr] failed to set AR due to problem with calculating crop. Error:", (stretchFactors ? stretchFactors.error : stretchFactors)); } if(stretchFactors.error === 'no_video'){ this.conf.destroy(); @@ -142,6 +150,9 @@ class Resizer { } startCssWatcher(){ + if (this.destroyed) { + return; + } // this.haltCssWatcher = false; if(!this.cssWatcherTimer){ this.scheduleCssWatcher(1); @@ -152,6 +163,10 @@ class Resizer { } scheduleCssWatcher(timeout, force_reset) { + if (this.destroyed) { + return; + } + if(timeout === undefined) { console.log("?") this.cssCheck(); // no timeout = one-off @@ -183,7 +198,7 @@ class Resizer { restore() { if(Debug.debug){ - console.log("[Resizer::restore] attempting to restore aspect ratio. this & settings:", {'this': this, "settings": Settings} ); + console.log("[Resizer::restore] attempting to restore aspect ratio. this & settings:", {'this': this, "settings": this.settings} ); } // this is true until we verify that css has actually been applied @@ -232,7 +247,7 @@ class Resizer { computeOffsets(stretchFactors){ if(Debug.debug) - console.log("[Resizer::_res_computeOffsets] video will be aligned to ", settings.active.miscFullscreenSettings.videoFloat); + console.log("[Resizer::_res_computeOffsets] video will be aligned to ", this.settings.active.miscFullscreenSettings.videoFloat); var actualWidth = this.conf.video.offsetWidth * stretchFactors.xFactor; var actualHeight = this.conf.video.offsetHeight * stretchFactors.yFactor; @@ -242,10 +257,10 @@ class Resizer { if (this.pan) { // todo: calculate translate } else { - if (settings.active.miscFullscreenSettings.videoFloat == "left") { + if (this.settings.active.miscFullscreenSettings.videoFloat == "left") { translate.x = (this.conf.player.dimensions.width - actualWidth) * -0.5; } - else if (settings.active.miscFullscreenSettings.videoFloat == "right") { + else if (this.settings.active.miscFullscreenSettings.videoFloat == "right") { translate.x = (this.conf.player.dimensions.width - actualWidth) * 0.5; } } @@ -257,7 +272,7 @@ class Resizer { if (! this.video) { if(Debug.debug) - console.log("[Resizer::_res_applyCss] Video went missing, doing nothing."); + console.log("[Resizer::_res_applyCss] Video went missing, doing nothing."); this.conf.destroy(); return; } @@ -312,7 +327,7 @@ class Resizer { if(! this.video){ if(Debug.debug) - console.log("[Resizer::_res_setStyleString] Video element went missing, nothing to do here.") + console.log("[Resizer::_res_setStyleString] Video element went missing, nothing to do here.") return; } @@ -337,7 +352,7 @@ class Resizer { } else{ if(Debug.debug) - console.log("[Resizer::_res_setStyleString] css applied. Style string:", styleString); + console.log("[Resizer::_res_setStyleString] css applied. Style string:", styleString); } } @@ -350,64 +365,29 @@ class Resizer { // this means video went missing. videoData will be re-initialized when the next video is found if(! this.video){ + if(Debug.debug) { + console.log("[Resizer::cssCheck] no video detecting, issuing destroy command"); + } this.conf.destroy(); return; } + if(this.destroyed) { + if(Debug.debug) { + console.log("[Resizer::cssCheck] destroyed flag is set, we shouldnt be running"); + } + return; + } var styleString = this.video.getAttribute('style'); // first, a quick test: // if (this.currentVideoSettings.validFor == this.conf.player.dimensions ){ - if (this.currentStyleString !== styleString){ - this.restore(); - this.scheduleCssWatcher(10); - return; - } - // } - - // if (styleString){ - // var styleArray = styleString.split(";"); - - // var stuffChecked = 0; - // var stuffToCheck = 2; - - // for(var i in styleArray){ - // styleArray[i] = styleArray[i].trim(); - - // if (styleArray[i].startsWith("top:")){ - // // don't force css restore if currentCss.top is not defined - // if(this.currentCss.top && styleArray[i] != this.currentCss.top){ - // if(Debug.debug){ - // console.log("[Resizer::_res_antiCssOverride] SOMEBODY TOUCHED MA SPAGHETT (our CSS got overriden, restoring our css)"); - // console.log("[Resizer::_res_antiCssOverride] MA SPAGHETT: top:", this.currentCss.top, "left:", this.currentCss.left, "thing that touched ma spaghett", styleString); - // } - // this.restore(); - // return; - // } - // stuffChecked++; - // } - // else if(styleArray[i].startsWith("left:")){ - // // don't force css restore if currentCss.left is not defined - // if(this.currentCss.left && styleArray[i] != this.currentCss.left){ - // if(Debug.debug){ - // console.log("[Resizer::_res_antiCssOverride] SOMEBODY TOUCHED MA SPAGHETT (our CSS got overriden, restoring our css)"); - // console.log("[Resizer::_res_antiCssOverride] MA SPAGHETT: width:", this.currentCss.width, "height:", this.currentCss.height, "thing that touched ma spaghett", styleString); - // } - // this.restore(); - // return; - // } - // stuffChecked++; - // } - - // if(stuffChecked == stuffToCheck){ - // // if(Debug.debug){ - // // console.log("[Resizer::_res_antiCssOverride] My spaghett rests untouched. (nobody overrode our CSS, doing nothing)"); - // // } - // return; - // } - // } - // } + if (this.currentStyleString !== styleString){ + this.restore(); + this.scheduleCssWatcher(10); + return; + } if (this.cssWatcherIncreasedFrequencyCounter > 0) { --this.cssWatcherIncreasedFrequencyCounter; this.scheduleCssWatcher(20); diff --git a/js/uw.js b/js/uw.js index 3d044ff..f01d8b3 100644 --- a/js/uw.js +++ b/js/uw.js @@ -13,57 +13,64 @@ if(Debug.debug){ } -var pageInfo; -var comms; -var settings; +class UW { + constructor(){ + this.pageInfo = undefined; + this.comms = undefined; + this.settings = undefined; + this.keybinds = undefined; + } -async function init(){ - if(Debug.debug) - console.log("[uw::main] loading configuration ..."); - - - settings = new Settings(); - await settings.init(); - - comms = new CommsClient('content-client-port', settings); - - // load settings - // var settingsLoaded = await comms.requestSettings(); - // if(!settingsLoaded){ - // if(Debug.debug) { - // console.log("[uw::main] failed to get settings (settingsLoaded=",settingsLoaded,") Waiting for settings the old fashioned way"); - // } - // comms.requestSettings_fallback(); - // await comms.waitForSettings(); - // if(Debug.debug){ - // console.log("[uw::main] settings loaded."); - // } - // } - - // if(Debug.debug) - // console.log("[uw::main] configuration should be loaded now"); - - - - console.log("SETTINGS SHOULD BE LOADED NOW!", settings) - - // če smo razširitev onemogočili v nastavitvah, ne naredimo ničesar - // If extension is soft-disabled, don't do shit - if(! settings.canStartExtension()){ - if(Debug.debug) { - console.log("[uw::init] EXTENSION DISABLED, THEREFORE WONT BE STARTED") + async init(){ + if (Debug.debug) { + console.log("[uw::main] loading configuration ..."); } - return; - } - - try { - pageInfo = new PageInfo(comms, settings); - } catch (e) { - console.log("[uw::init] FAILED TO START EXTENSION. Error:", e); - } - - if(Debug.debug){ - console.log("[uw.js::setup] pageInfo initialized. Here's the object:", pageInfo); + + // init() is re-run any time settings change + if (this.pageInfo) { + if(Debug.debug){ + console.log("[uw::init] Destroying existing pageInfo", this.pageInfo); + } + this.pageInfo.destroy(); + } + if (this.comms) { + this.comms.destroy(); + } + + if (!this.settings) { + var ths = this; + this.settings = new Settings(undefined, () => ths.init()); + await this.settings.init(); + } + + this.comms = new CommsClient('content-client-port', this.settings); + + // če smo razširitev onemogočili v nastavitvah, ne naredimo ničesar + // If extension is soft-disabled, don't do shit + if(! this.settings.canStartExtension()){ + if(Debug.debug) { + console.log("[uw::init] EXTENSION DISABLED, THEREFORE WONT BE STARTED") + } + return; + } + + try { + this.pageInfo = new PageInfo(this.comms, this.settings); + if(Debug.debug){ + console.log("[uw.js::setup] pageInfo initialized. Here's the object:", this.pageInfo); + } + this.comms.setPageInfo(this.pageInfo); + + this.keybinds = new Keybinds(this.pageInfo); + this.keybinds.setup(); + + } catch (e) { + console.log("[uw::init] FAILED TO START EXTENSION. Error:", e); + } + + } } -init(); + +var uw = new UW(); +uw.init(); diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index e8a0f9c..91fd0c8 100644 --- a/res/popup/js/popup.js +++ b/res/popup/js/popup.js @@ -5,7 +5,6 @@ document.getElementById("uw-version").textContent = browser.runtime.getManifest( var Menu = {}; // Menu.noVideo = document.getElementById("no-videos-display"); -Menu.general = document.getElementById("extension-mode"); Menu.thisSite = document.getElementById("settings-for-current-site"); Menu.arSettings = document.getElementById("aspect-ratio-settings"); Menu.autoAr = document.getElementById("autoar-basic-settings"); @@ -57,40 +56,31 @@ StretchPanel.global.hybrid = document.getElementById("_stretch_global_hybri StretchPanel.global.conditional = document.getElementById("_stretch_global_conditional"); -var selectedMenu = "arSettings"; +var selectedMenu = ""; var hasVideos = false; var _config; var _changeAr_button_shortcuts = { "autoar":"none", "reset":"none", "219":"none", "189":"none", "169":"none", "custom":"none" } var comms = new Comms(); -var settings = new Settings(); +var settings = new Settings(undefined, () => updateConfig()); + +var site = undefined; var port = browser.runtime.connect({name: 'popup-port'}); port.onMessage.addListener( (m,p) => processReceivedMessage(m,p)); - -// let's init settings and check if they're loaded -await settings.init(); - -if (Debug.debug) { - console.log("[popup] Are settings loaded?", settings) +async function processReceivedMessage(message, port){ + if(message.cmd === 'set-current-site'){ + site = message.site; + loadConfig(message.site); + } } - - - - - -async function processReceivedMessage(message, port){ - if(message.cmd === 'set-config'){ - - if(Debug.debug){ - console.log("[popup.js] setting config. Message was:", message) - } - - this.loadConfig(message.conf, message.site); +async function updateConfig() { + if (site) { + loadConfig(site); } } @@ -116,12 +106,43 @@ function stringToKeyCombo(key_in){ return keys_out; } -async function loadConfig(){ +async function loadConfig(site){ if(Debug.debug) console.log("[popup.js::loadConfig] loading config. conf object:", settings.active, "\n\n\n\n\n\n\n\n-------------------------------------"); - + + // ----------------------- + //#region tab-disabled + // + // if extension is disabled on current site, we can't do shit. Therefore, the following tabs will be disabled: + // * AutoAR options + // * Crop settings + // * Stretch settings + var canStartExtension = settings.canStartExtension(site); + if (canStartExtension) { + MenuTab.arSettings.classList.remove('disabled'); + MenuTab.autoAr.classList.remove('disabled'); + MenuTab.stretchSettings.classList.remove('disabled'); + + // only switch when popup is being opened for the first time + if(! selectedMenu) { + openMenu('arSettings'); + } + } else { + MenuTab.arSettings.classList.add('disabled'); + MenuTab.autoAr.classList.add('disabled'); + MenuTab.stretchSettings.classList.add('disabled'); + + // if popup isn't being opened for the first time, there's no reason to switch + // we're already in this tab + if(! selectedMenu) { + openMenu('thisSite'); + } + } + + //#endregion + // // ---------------------- //#region extension-basics - SET BASIC EXTENSION OPTIONS if(Debug.debug) @@ -252,8 +273,8 @@ async function loadConfig(){ console.log("[popup.js::loadConfig] config loaded"); } -async function getConf(){ - port.postMessage({cmd: 'get-config'}); +async function getSite(){ + port.postMessage({cmd: 'get-current-site'}); } function openMenu(menu){ @@ -337,9 +358,9 @@ function validateCustomAr(){ function validateAutoArTimeout(){ const inputField = document.getElementById("_input_autoAr_timer"); - const valueSaveButton = document.getElementById("_b_autoar_save_autoar_frequency"); + const valueSaveButton = document.getElementById("_b_autoar_save_autoar_timer"); - if (! isNaN(parseInt(inputField.trim().value()))) { + if (! isNaN(parseInt(inputField.value.trim().value()))) { inputField.classList.remove("invalid-input"); valueSaveButton.classList.remove("disabled-button"); } else { @@ -348,13 +369,6 @@ function validateAutoArTimeout(){ } } -function toggleSite(option){ - if(Debug.debug) - console.log("[popup::toggleSite] toggling extension 'should I work' status to", option, "on current site"); - - Comms.sendToBackgroundScript({cmd:"enable-for-site", option:option}); -} - document.addEventListener("click", (e) => { @@ -367,9 +381,6 @@ document.addEventListener("click", (e) => { return; if(e.target.classList.contains("menu-item")){ - if(e.target.classList.contains("_menu_general")){ - openMenu("general"); - } if(e.target.classList.contains("_menu_this_site")){ openMenu("thisSite"); } @@ -405,15 +416,28 @@ document.addEventListener("click", (e) => { settings.save(); return; } else if (e.target.classList.contains("_ext_site_options")) { - command.cmd = "set-extension-for-site"; + var mode; if(e.target.classList.contains("_blacklist")){ - command.mode = "disabled"; + mode = "disabled"; } else if(e.target.classList.contains("_whitelist")) { - command.mode = "enabled"; + mode = "enabled"; } else { - command.mode = "default"; + mode = "default"; } - return command; + + if(settings.active.sites[site]) { + settings.active.sites[site].status = mode; + settings.active.sites[site].statusEmbedded = mode; + } else { + settings.active.sites[site] = { + status: mode, + statusEmbedded: mode, + arStatus: 'default', + type: 'user-defined' + } + } + settings.save(); + return; } } if(e.target.classList.contains("_changeAr")){ @@ -511,8 +535,8 @@ document.addEventListener("click", (e) => { } settings.save(); return; - } else if (e.target.classList.contains("_save_autoAr_frequency")) { - var value = parseInt(document.getElementById("_input_autoAr_frequency").value.trim()); + } else if (e.target.classList.contains("_save_autoAr_timer")) { + var value = parseInt(document.getElementById("_input_autoAr_timer").value.trim()); if(! isNaN(value)){ var timeout = parseInt(value); @@ -521,15 +545,27 @@ document.addEventListener("click", (e) => { } return; } else if (e.target.classList.contains("_ar_site_options")) { - command.cmd = "set-autoar-for-site"; + var mode; if(e.target.classList.contains("_disabled")){ - command.mode = "disabled"; + mode = "disabled"; } else if(e.target.classList.contains("_enabled")) { - command.mode = "enabled"; + mode = "enabled"; } else { - command.mode = "default"; + mode = "default"; } - return command; + + if(settings.active.sites[site]) { + settings.active.sites[site].arStatus = mode; + } else { + settings.active.sites[site] = { + status: settings.active.extensionMode, + statusEmbedded: settings.active.extensionMode, + arStatus: mode, + type: 'user-defined' + } + } + settings.save(); + return; } } @@ -557,23 +593,39 @@ document.addEventListener("click", (e) => { return true; }); -const customArInputField = document.getElementById("_input_custom_ar"); -const autoarFrequencyInputField = document.getElementById("_input_autoAr_timer"); -customArInputField.addEventListener("blur", (event) => { - validateCustomAr(); -}); -customArInputField.addEventListener("mouseleave", (event) => { - validateCustomAr(); -}); -autoarFrequencyInputField.addEventListener("blur", (event) => { - validateAutoArTimeout(); -}); -autoarFrequencyInputField.addEventListener("mouseleave", (event) => { - validateAutoArTimeout(); -}); -hideWarning("script-not-running-warning"); -openMenu(selectedMenu); -getConf(); \ No newline at end of file + + +async function popup_init() { + // let's init settings and check if they're loaded + await settings.init(); + + if (Debug.debug) { + console.log("[popup] Are settings loaded?", settings) + } + + + const customArInputField = document.getElementById("_input_custom_ar"); + const autoarFrequencyInputField = document.getElementById("_input_autoAr_timer"); + + customArInputField.addEventListener("blur", (event) => { + validateCustomAr(); + }); + customArInputField.addEventListener("mouseleave", (event) => { + validateCustomAr(); + }); + + autoarFrequencyInputField.addEventListener("blur", (event) => { + validateAutoArTimeout(); + }); + autoarFrequencyInputField.addEventListener("mouseleave", (event) => { + validateAutoArTimeout(); + }); + + hideWarning("script-not-running-warning"); + getSite(); +} + +popup_init(); \ No newline at end of file diff --git a/res/popup/popup.html b/res/popup/popup.html index 63f5ef2..8d7a8ea 100644 --- a/res/popup/popup.html +++ b/res/popup/popup.html @@ -166,7 +166,7 @@
-

Check every ms — Save

+

Check every ms — Save

Options for this site: @@ -259,6 +259,7 @@ + From 165790db7e9f0f69e81d154cd64f02ce61e78911 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 30 Aug 2018 23:03:47 +0200 Subject: [PATCH 24/25] fixed issue where resizer.js didn't get killed properly --- js/modules/PageInfo.js | 3 +++ manifest.json | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/js/modules/PageInfo.js b/js/modules/PageInfo.js index a04901e..fd496e1 100644 --- a/js/modules/PageInfo.js +++ b/js/modules/PageInfo.js @@ -26,6 +26,9 @@ class PageInfo { if(Debug.debug){ console.log("[PageInfo::destroy] destroying all videos!") } + if(this.rescanTimer){ + clearTimeout(this.rescanTimer); + } for (var video of this.videos) { video.destroy(); } diff --git a/manifest.json b/manifest.json index 2ee8143..da4e0a6 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Ultrawidify", - "version": "3.0.2a", + "version": "3.1.0a", "applications": { "gecko": { "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}" From c6d5298f391a6bac19d53d7b2e6af687cfde6c46 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 30 Aug 2018 23:17:42 +0200 Subject: [PATCH 25/25] v3.1.0 for firefox --- js/conf/Debug.js | 4 ++-- manifest.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/js/conf/Debug.js b/js/conf/Debug.js index 446be10..efd99fe 100644 --- a/js/conf/Debug.js +++ b/js/conf/Debug.js @@ -1,6 +1,6 @@ // Set prod to true when releasing -// _prod = true; -_prod = false; +_prod = true; +// _prod = false; Debug = { debug: true, diff --git a/manifest.json b/manifest.json index da4e0a6..4a8b7b5 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Ultrawidify", - "version": "3.1.0a", + "version": "3.1.0", "applications": { "gecko": { "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"