From 063a80393338ebaeadb365a96b4f89deea722762 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 13 Sep 2018 23:47:20 +0200 Subject: [PATCH 01/31] Zooming and panning kinda works --- js/conf/Debug.js | 4 +-- js/conf/ExtensionConf.js | 15 +++++++++ js/conf/Keybinds.js | 28 +++++++++++----- js/lib/PlayerData.js | 20 +++++++++++ js/lib/Settings.js | 6 ---- js/lib/VideoData.js | 10 +++++- js/modules/PageInfo.js | 6 ++++ js/modules/Resizer.js | 71 +++++++++++++++++++++++++++++++++++----- js/modules/Zoom.js | 6 ++++ js/uw-bg.js | 16 ++++----- manifest.json | 2 +- 11 files changed, 149 insertions(+), 35 deletions(-) diff --git a/js/conf/Debug.js b/js/conf/Debug.js index efd99fe..446be10 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/js/conf/ExtensionConf.js b/js/conf/ExtensionConf.js index fd8ac87..b876b75 100644 --- a/js/conf/ExtensionConf.js +++ b/js/conf/ExtensionConf.js @@ -110,6 +110,9 @@ var ExtensionConf = { retryTimeout: 200 } }, + pan: { + mousePanEnabled: false + }, pageInfo: { timeouts: { urlCheck: 200, @@ -163,6 +166,18 @@ var ExtensionConf = { "u": { action: "zoom", arg: -0.1 + }, + "p": { + action: "pan", + arg: 'toggle' // possible: 'enable', 'disable', 'toggle' + }, + "Shift": { + action: "pan", + arg: 'toggle', + keyup: { + action: 'pan', + arg: 'toggle' + } } //#endregion }, diff --git a/js/conf/Keybinds.js b/js/conf/Keybinds.js index e27bf2e..0364bae 100644 --- a/js/conf/Keybinds.js +++ b/js/conf/Keybinds.js @@ -11,9 +11,10 @@ class Keybinds { setup(){ var ths = this; document.addEventListener('keydown', (event) => ths.handleKeypress(event) ); + document.addEventListener('keyup', (event) => ths.handleKeypress(event,true) ); } - handleKeypress(event) { // Tukaj ugotovimo, katero tipko smo pritisnili + handleKeypress(event, isKeyUp) { // Tukaj ugotovimo, katero tipko smo pritisnili if(Debug.debug && Debug.keyboard ){ console.log("%c[Keybinds::_kbd_process] we pressed a key: ", "color: #ff0", event.key , " | keydown: ", event.keydown, "event:", event); @@ -55,20 +56,29 @@ class Keybinds { if(this.settings.active.keyboard.shortcuts[keypress]){ var conf = this.settings.active.keyboard.shortcuts[keypress]; + + if (isKeyUp) { + if (conf.keyup) { + conf = conf.keyup; + } else { + return; + } + } - if(Debug.debug && Debug.keyboard) - console.log("[Keybinds::_kbd_process] there's an action associated with this keypress. conf:", conf); - - if(conf.action === "crop"){ + if(Debug.debug && Debug.keyboard) { + console.log("[Keybinds::_kbd_process] there's an action associated with this keypress. conf:", conf, "conf.arg:", conf.arg); + } + + if (conf.action === "crop"){ this.pageInfo.stopArDetection(); this.pageInfo.setAr(conf.arg); - } - if(conf.action === "zoom"){ + } else if (conf.action === "zoom"){ this.pageInfo.stopArDetection(); this.pageInfo.zoomStep(conf.arg); - } - if(conf.action === "auto-ar"){ + } else if (conf.action === "auto-ar"){ this.pageInfo.startArDetection(); + } else if (conf.action === "pan") { + this.pageInfo.setPanMode(conf.arg); } } } diff --git a/js/lib/PlayerData.js b/js/lib/PlayerData.js index b25a9ce..fe90fcc 100644 --- a/js/lib/PlayerData.js +++ b/js/lib/PlayerData.js @@ -32,9 +32,11 @@ class PlayerData { constructor(videoData) { this.videoData = videoData; this.video = videoData.video; + this.settings = videoData.settings; this.element = undefined; this.dimensions = undefined; + this.getPlayerDimensions(); this.startChangeDetection(); } @@ -139,6 +141,10 @@ class PlayerData { this.scheduleGhettoWatcher(); } + panHandler(event) { + this.videoData.panHandler(event); + } + getPlayerDimensions(elementNames){ // element names — reserved for future use. If element names are provided, this function should return first element that // has classname or id that matches at least one in the elementNames array. @@ -148,6 +154,10 @@ class PlayerData { if(Debug.debug) console.log("[PlayerDetect::_pd_getPlayerDimensions] element is not valid, doing nothing.", element) + if(this.element) { + const ths = this; + this.element.removeEventListener('mousemove', (event) => ths.panHandler(event)); + } this.element = undefined; this.dimensions = undefined; return; @@ -212,14 +222,24 @@ class PlayerData { height: window.innerHeight, fullscreen: true } + const ths = this; + if(this.element) { + this.element.removeEventListener('mousemove', (event) => ths.panHandler(event)); + } this.element = element; + this.element.addEventListener('mousemove', (event) => ths.panHandler(event)); } else { this.dimensions = { width: candidate_width, height: candidate_height, fullscreen: isFullScreen }; + const ths = this; + if(this.element) { + this.element.removeEventListener('mousemove', (event) => ths.panHandler(event)); + } this.element = playerCandidateNode; + this.element.addEventListener('mousemove', (event) => ths.panHandler(event)); } } diff --git a/js/lib/Settings.js b/js/lib/Settings.js index 130e340..f4d7e89 100644 --- a/js/lib/Settings.js +++ b/js/lib/Settings.js @@ -193,12 +193,6 @@ class Settings { Debug.debug = false; const cse = this.canStartExtension(site); Debug.debug = true; - - // console.log("[Settings::canStartExtension] ----------------\nCAN WE START THIS EXTENSION ON SITE", site, - // "?\n\nsettings.active.sites[site]=", this.active.sites[site], - // "\nExtension mode?", this.active.extensionMode, - // "\nCan extension be started?", cse - // ); } try{ // if site is not defined, we use default mode: diff --git a/js/lib/VideoData.js b/js/lib/VideoData.js index 419029b..2352aba 100644 --- a/js/lib/VideoData.js +++ b/js/lib/VideoData.js @@ -106,6 +106,14 @@ class VideoData { this.resizer.setAr(ar, lastAr); } + panHandler(event) { + this.resizer.panHandler(event); + } + + setPanMode(mode) { + this.resizer.setPanMode(mode); + } + restoreAr(){ this.resizer.restore(); } @@ -115,7 +123,7 @@ class VideoData { } zoomStep(step){ - this.resizer.zoomStep(); + this.resizer.zoomStep(step); } } \ No newline at end of file diff --git a/js/modules/PageInfo.js b/js/modules/PageInfo.js index fd496e1..3759e1c 100644 --- a/js/modules/PageInfo.js +++ b/js/modules/PageInfo.js @@ -226,6 +226,12 @@ class PageInfo { } } + setPanMode(mode) { + for(var vd of this.videos) { + vd.setPanMode(mode); + } + } + restoreAr() { for(var vd of this.videos){ vd.restoreAr() diff --git a/js/modules/Resizer.js b/js/modules/Resizer.js index 882fa3a..c6ae418 100644 --- a/js/modules/Resizer.js +++ b/js/modules/Resizer.js @@ -38,6 +38,13 @@ class Resizer { this.destroyed = false; this.resizerId = (Math.random(99)*100).toFixed(0); + + if (this.settings.active.pan) { + console.log("can pan:", this.settings.active.pan.mousePanEnabled, "(default:", this.settings.active.pan.mousePanEnabled, ")") + this.canPan = this.settings.active.pan.mousePanEnabled; + } else { + this.canPan = false; + } } start(){ @@ -138,6 +145,24 @@ class Resizer { this.restore(); } + panHandler(event) { + // console.log("this.conf.canPan:", this.conf.canPan) + if (this.canPan) { + // console.log("event?", event) + // console.log("this?", this) + + if(!this.conf.player || !this.conf.player.element) { + return; + } + const player = this.conf.player.element; + + const relativeX = (event.pageX - player.offsetLeft) / player.offsetWidth; + const relativeY = (event.pageY - player.offsetTop) / player.offsetHeight; + + this.setPan(relativeX, relativeY); + } + } + setPan(relativeMousePosX, relativeMousePosY){ // relativeMousePos[X|Y] - on scale from 0 to 1, how close is the mouse to player edges. // use these values: top, left: 0, bottom, right: 1 @@ -145,8 +170,13 @@ class Resizer { this.pan = {}; } - this.pan.relativeOffsetX = relativeMousePosX*2.5 - 1.25; - this.pan.relativeOffsetY = relativeMousePosY*2.5 - 1.25; + this.pan.relativeOffsetX = -(relativeMousePosX * 1.1) + 0.55; + this.pan.relativeOffsetY = -(relativeMousePosY * 1.1) + 0.55; + + // if(Debug.debug){ + // console.log("[Resizer::setPan] relative cursor pos:", relativeMousePosX, ",",relativeMousePosY, " | new pan obj:", this.pan) + // } + this.restore(); } startCssWatcher(){ @@ -219,6 +249,16 @@ class Resizer { this.setAr('reset'); } + setPanMode(mode) { + if (mode === 'enable') { + this.canPan = true; + } else if (mode === 'disable') { + this.canPan = false; + } else if (mode === 'toggle') { + this.canPan = !this.canPan; + } + } + resetPan(){ this.pan = undefined; } @@ -246,33 +286,48 @@ class Resizer { computeOffsets(stretchFactors){ - if(Debug.debug) + if (Debug.debug) { 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; + var wdiff = actualWidth - this.conf.player.dimensions.width; + var hdiff = actualHeight - this.conf.player.dimensions.height; + var translate = {x: 0, y: 0}; if (this.pan) { - // todo: calculate translate + // don't offset when video is smaller than player + if(wdiff < 0 && hdiff < 0) { + return translate; + } + translate.x = wdiff * this.pan.relativeOffsetX / this.zoom.scale; + translate.y = hdiff * this.pan.relativeOffsetY / this.zoom.scale; } else { if (this.settings.active.miscFullscreenSettings.videoFloat == "left") { - translate.x = (this.conf.player.dimensions.width - actualWidth) * -0.5; + translate.x = wdiff * 0.5; } else if (this.settings.active.miscFullscreenSettings.videoFloat == "right") { - translate.x = (this.conf.player.dimensions.width - actualWidth) * 0.5; + translate.x = wdiff * -0.5; } } + if(Debug.debug) { + console.log("[Resizer::_res_computeOffsets] calculated offsets:", translate); + } + return translate; } applyCss(stretchFactors, translate){ if (! this.video) { - if(Debug.debug) + if(Debug.debug) { console.log("[Resizer::_res_applyCss] Video went missing, doing nothing."); + } + this.conf.destroy(); return; } diff --git a/js/modules/Zoom.js b/js/modules/Zoom.js index 11c503d..6bb7267 100644 --- a/js/modules/Zoom.js +++ b/js/modules/Zoom.js @@ -44,6 +44,12 @@ class Zoom { if (this.scale >= this.maxScale) { this.scale = this.maxScale; } + + if (Debug.debug) { + console.log("[Zoom::zoomStep] changing zoom by", amount, ". New zoom level:", this.scale); + } + + this.conf.restoreAr(); } setZoom(scale){ diff --git a/js/uw-bg.js b/js/uw-bg.js index ce40531..20ebe93 100644 --- a/js/uw-bg.js +++ b/js/uw-bg.js @@ -59,16 +59,16 @@ class UWServer { console.log("[uw-bg::onTabSwitched] TAB CHANGED, GETTING INFO FROM MAIN TAB"); try { - var tabId = activeInfo.tabId; // just for readability + var tabId = activeInfo.tabId; // just for readability - var tab; - if (BrowserDetect.firefox) { - var tab = await browser.tabs.get(tabId); - } else if (BrowserDetect.chrome) { - var tab = await this._promisifyTabsGet(chrome, tabId); - } + var tab; + if (BrowserDetect.firefox) { + var tab = await browser.tabs.get(tabId); + } else if (BrowserDetect.chrome) { + var tab = await this._promisifyTabsGet(chrome, tabId); + } - this.currentSite = this.extractHostname(tab.url); + this.currentSite = this.extractHostname(tab.url); } catch(e) { console.log(e); } diff --git a/manifest.json b/manifest.json index 4a8b7b5..7f1f995 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Ultrawidify", - "version": "3.1.0", + "version": "3.2.0", "applications": { "gecko": { "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}" From a8a84fa4ef1270f015f7333d3dea5d46f36206b5 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 13 Sep 2018 23:51:42 +0200 Subject: [PATCH 02/31] updated readme --- CHANGELOG.md | 4 ++++ README.md | 4 +++- js/conf/ExtensionConf.js | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d0608ac..3277a14 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## v3.x +### v3.2.0 + +* Zoom and panning + ### v3.1.1 (Chrome-only) * Logging was accidentally left on in release version. This was fixed. diff --git a/README.md b/README.md index 82e1186..908b3c7 100644 --- a/README.md +++ b/README.md @@ -18,8 +18,10 @@ If you own an ultrawide monitor, you have probably noticed that sometimes videos * **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** +* **[EXPERIMENTAL!]** Stretch video to fit the screen (4 different approaches) +* **[EXPERIMENTAL!] (3.2.0) custom zooming and panning** + ### Officially supported sites diff --git a/js/conf/ExtensionConf.js b/js/conf/ExtensionConf.js index b876b75..818cb27 100644 --- a/js/conf/ExtensionConf.js +++ b/js/conf/ExtensionConf.js @@ -171,7 +171,7 @@ var ExtensionConf = { action: "pan", arg: 'toggle' // possible: 'enable', 'disable', 'toggle' }, - "Shift": { + "shift": { action: "pan", arg: 'toggle', keyup: { From d7946d40986021b70fcab08b45747beae9372c2c Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Fri, 14 Sep 2018 00:10:57 +0200 Subject: [PATCH 03/31] fix zoom --- js/conf/ExtensionConf.js | 12 ++++++++++-- js/lib/VideoData.js | 4 ++++ js/modules/PageInfo.js | 11 +++++++++-- 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/js/conf/ExtensionConf.js b/js/conf/ExtensionConf.js index 818cb27..816d5d3 100644 --- a/js/conf/ExtensionConf.js +++ b/js/conf/ExtensionConf.js @@ -171,13 +171,21 @@ var ExtensionConf = { action: "pan", arg: 'toggle' // possible: 'enable', 'disable', 'toggle' }, - "shift": { + "shiftKey_shift": { action: "pan", arg: 'toggle', - keyup: { + keyup: { action: 'pan', arg: 'toggle' } + }, + "shift": { + action: "", + arg: "", + keyup: { + action: 'pan', + arg: 'toggle', + } } //#endregion }, diff --git a/js/lib/VideoData.js b/js/lib/VideoData.js index 2352aba..9bf2481 100644 --- a/js/lib/VideoData.js +++ b/js/lib/VideoData.js @@ -106,6 +106,10 @@ class VideoData { this.resizer.setAr(ar, lastAr); } + resetAr() { + this.resizer.reset(); + } + panHandler(event) { this.resizer.panHandler(event); } diff --git a/js/modules/PageInfo.js b/js/modules/PageInfo.js index 3759e1c..913a33e 100644 --- a/js/modules/PageInfo.js +++ b/js/modules/PageInfo.js @@ -220,9 +220,16 @@ class PageInfo { if(ar !== 'auto') { this.stopArDetection(); } + // TODO: find a way to only change aspect ratio for one video - for(var vd of this.videos){ - vd.setAr(ar) + if (ar === 'reset') { + for (var vd of this.videos) { + vd.resetAr(); + } + } else { + for (var vd of this.videos) { + vd.setAr(ar) + } } } From 354b987cb4ca5b085d3fd2dc257aceff0057c1b8 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Fri, 14 Sep 2018 22:21:39 +0200 Subject: [PATCH 04/31] start popup redesign --- res/css/{uw-common.css => common.css} | 167 ++++++++++++----- res/popup/css/popup.css | 59 ++++++ res/popup/js/popup.js | 21 +-- res/popup/popup.html | 258 ++++++++++---------------- 4 files changed, 293 insertions(+), 212 deletions(-) rename res/css/{uw-common.css => common.css} (53%) create mode 100644 res/popup/css/popup.css diff --git a/res/css/uw-common.css b/res/css/common.css similarity index 53% rename from res/css/uw-common.css rename to res/css/common.css index bee5588..4c6235b 100644 --- a/res/css/uw-common.css +++ b/res/css/common.css @@ -1,17 +1,32 @@ -a { - color: #af7f37; -} -a:hover { - color: #c0924e; -} - -.hidden { - display: none !important; +html, body { + color: #f8f8f8; + background-color: #1f1f1f; + font-family: "overpass"; + font-size: 1em; } -/** layout stuff **/ +/* STANDARD WIDTHS AND HEIGHTS */ + +.w100 { + width: 100%; +} + +.w24 { + width: 100px; +} + +.m-t-0-33em { + margin-top: 0.33em; +} + +.x-pad-1em { + padding-left: 1em; + padding-right: 1em; +} + +/* ELEMENT POSITIONING */ .row { display: block; @@ -25,13 +40,109 @@ a:hover { margin-bottom: 10px; } -.w24 { - width: 100px; +.float-left { + float: left; +} +.float-right { + float: right; +} + +.inline-block { + display: inline-block; +} + +.block { + display: block; +} + +.hidden { + display: none !important; +} + +.hide { + display: none !important; } -/** input **/ +/* TEXT FORMATTING (no colors) */ + +small { + font-size: 0.75em; + font-weight: 200; +} + +.small { + font-size: 0.75em; + font-weight: 200; +} + +.medium-small { + font-size: 0.85em; + font-weight: 200; +} + +.smallcaps{ + font-variant: small-caps; +} + +.center{ + text-align: center; + width: 100%; +} + + + + +/* COLORS */ + +a { + color: #af7f37; +} +a:hover { + color: #c0924e; +} + +.color_warn { + color: #d6ba4a; +} + +strike { + opacity: 0.5; +} + +.darker { + color: #666; +} + +.label{ + font-size: 1.1em; + font-weight: 600; + color: #ffe; +} + +.selected{ + color: #ffddaa; + background-color: #433221; +} + +.disabled { + color: #666; +} + +.disabled-button { + color: #666 !important; + cursor: not-allowed !important; +} + +.disabled-button:hover { + color: #777 !important; + background-color: #222 !important; +} + + + +/* BUTTONS AND INPUTS */ input { border: 1px solid #322; @@ -45,11 +156,6 @@ input { background-color: #410 !important; } - - - -/** buttons and stuff ***/ - .button { display: inline-block; padding-top: 8px; @@ -70,32 +176,8 @@ input { - -/** 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; @@ -114,4 +196,3 @@ small{ } - diff --git a/res/popup/css/popup.css b/res/popup/css/popup.css new file mode 100644 index 0000000..938b688 --- /dev/null +++ b/res/popup/css/popup.css @@ -0,0 +1,59 @@ +html, body { + width: 780px !important; + max-width: 800px !important; + padding: 0px; + margin: 0px; +} + +.header { + background-color: #7f1416; + color: #fff; + margin: 0px; + margin-top: 0px; + padding-top: 8px; + padding-left: 15px; + padding-bottom: 1px; + font-size: 2.7em; +} + +.menu-item-inline-desc{ + font-size: 0.60em; + font-weight: 300; + font-variant: normal; +} + +.left-side { + display: inline-block; + width: 39%; + float: left; + font-size: 1.6em; +} + +.right-side { + display: inline-block; + width: 60%; + float: right; +} + +.menu-item { + padding-left: 15px; + padding-top: 5px; + padding-bottom: 5px; + font-variant: small-caps; +} + +.suboption { + display: block; + padding-left: 15px; + padding-right: 15px; + padding-top: 5px; + padding-bottom: 20px; + min-height: 250px; +} + + +#no-videos-display { + height: 100%; + padding-top: 50px; +/* text-align: center; */ +} \ No newline at end of file diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index 91fd0c8..3b84ed0 100644 --- a/res/popup/js/popup.js +++ b/res/popup/js/popup.js @@ -5,21 +5,16 @@ document.getElementById("uw-version").textContent = browser.runtime.getManifest( var Menu = {}; // Menu.noVideo = document.getElementById("no-videos-display"); -Menu.thisSite = document.getElementById("settings-for-current-site"); -Menu.arSettings = document.getElementById("aspect-ratio-settings"); -Menu.autoAr = document.getElementById("autoar-basic-settings"); -Menu.cssHacks = document.getElementById("css-hacks-settings"); -Menu.about = document.getElementById("panel-about"); -Menu.stretchSettings = document.getElementById("stretch-settings") +Menu.extensionSettings = document.getElementById('_menu_settings_ext'); +Menu.siteSettings = document.getElementById('_menu_settings_site'); +Menu.videoSettings = document.getElementById('_menu_settings_video'); +Menu.about = document.getElementById('_menu_about') var MenuTab = {}; -MenuTab.general = document.getElementById("_menu_general"); -MenuTab.thisSite = document.getElementById("_menu_this_site"); -MenuTab.arSettings = document.getElementById("_menu_aspectratio"); -MenuTab.cssHacks = document.getElementById("_menu_hacks"); -MenuTab.about = document.getElementById("_menu_about"); -MenuTab.autoAr = document.getElementById("_menu_autoar"); -MenuTab.stretchSettings = document.getElementById("_menu_stretch"); +MenuTab.extensionSettings = document.getElementById('_menu_tab_settings_ext'); +MenuTab.siteSettings = document.getElementById('_menu_tab_settings_site'); +MenuTab.videoSettings = document.getElementById('_menu_tab_settings_video'); +MenuTab.about = document.getElementById('_menu_tab_about') var ExtPanel = {}; ExtPanel.globalOptions = {}; diff --git a/res/popup/popup.html b/res/popup/popup.html index 8d7a8ea..430d814 100644 --- a/res/popup/popup.html +++ b/res/popup/popup.html @@ -5,137 +5,44 @@ - - + +
Ultrawidify: Quick settings
+ + + +
-
- Settings for this site + +
+ Extension settings
-
- Automatic aspect ratio detection (auto-ar) +
+ Site settings
-
- Crop settings +
+ Video settings +
Crop & stretch options for current video
-
- Stretch settings -
- -
+
About Ultrawidify
See for bug reports
+ + + +
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.
- + + + + - - + + +
+ Video alignment: +
+ left + center + right +
+
@@ -134,20 +154,22 @@ min, max and value need to be implemented in js as this slider should use logarithmic scale --> -
- Zoom: 100% + Zoom: 100%
show shortcutsreset
- + Pan with mouse
@@ -159,7 +181,7 @@

Stretching mode
- Never
 + Normal
 Basic
 Hybrid
 Thin borders
 @@ -169,23 +191,16 @@
Video alignment:
- left - center - right + left + center + right
- - - - - + + +
+ Default stretching mode +
+ Never
 + Basic
 + Hybrid
 + Thin borders
 + Default
 +
+
+
Video alignment:
- left - center - right - default + Left + Center + Right + Default
@@ -129,8 +143,14 @@ 16:9
  Custom
 
+
-
+ -
+ + -
@@ -183,9 +212,9 @@
Video alignment:
- left - center - right + Left + Center + Right
From 5e2611f41067ba5870aba733449714f6176356b6 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Tue, 18 Sep 2018 00:42:30 +0200 Subject: [PATCH 11/31] check for nulls on videodata/panhandler --- js/lib/VideoData.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/js/lib/VideoData.js b/js/lib/VideoData.js index 9bf2481..08f99f9 100644 --- a/js/lib/VideoData.js +++ b/js/lib/VideoData.js @@ -111,6 +111,10 @@ class VideoData { } panHandler(event) { + if(!this.resizer) { + this.destroy(); + return; + } this.resizer.panHandler(event); } From f265799e3c9845b9acc12bf116cdd596bcd168fc Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Tue, 18 Sep 2018 23:37:33 +0200 Subject: [PATCH 12/31] commands for setting zoom from the popup, zoom is logarithmic/exponential rather than linear --- js/lib/Comms.js | 53 +++++------------------------------------- js/lib/VideoData.js | 5 ++++ js/modules/PageInfo.js | 6 +++++ js/modules/Resizer.js | 4 ++++ js/modules/Zoom.js | 42 +++++++++++++++++++-------------- 5 files changed, 46 insertions(+), 64 deletions(-) diff --git a/js/lib/Comms.js b/js/lib/Comms.js index 6b16785..be3d289 100644 --- a/js/lib/Comms.js +++ b/js/lib/Comms.js @@ -76,7 +76,9 @@ class CommsClient { } else if (message.cmd === "resume-processing") { // todo: autoArStatus this.pageInfo.resumeProcessing(message.autoArStatus); - } + } else if (message.cmd === 'set-zoom') { + this.pageInfo.setZoom(message.zoom); + } } async sleep(n){ @@ -238,9 +240,6 @@ class CommsServer { port.postMessage({cmd: "set-config", conf: this.settings.active, site: this.server.currentSite}) } else if (message.cmd === 'set-stretch') { this.sendToActive(message); - } else if (message.cmd === 'set-stretch-default') { - this.settings.active.stretch.initialMode = message.mode; - this.settings.save(); } else if (message.cmd === 'set-ar') { this.sendToActive(message); } else if (message.cmd === 'set-custom-ar') { @@ -248,10 +247,9 @@ class CommsServer { this.settings.save(); } else if (message.cmd === 'set-video-float') { this.sendToActive(message); - this.settings.save(); } else if (message.cmd === 'autoar-start') { this.sendToActive(message); - } else if (message.cmd === "autoar-disable") { // LEGACY - can be removed prolly? + } else if (message.cmd === "autoar-disable") { // LEGACY - can be removed prolly this.settings.active.arDetect.mode = "disabled"; if(message.reason){ this.settings.active.arDetect.disabledReason = message.reason; @@ -259,47 +257,8 @@ class CommsServer { this.settings.active.arDetect.disabledReason = 'User disabled'; } this.settings.save(); - } 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"); - - // set fairly liberal limit - var timeout = message.timeout < 4 ? 4 : message.timeout; - this.settings.active.arDetect.timer_playing = timeout; - this.settings.save(); - } else if (message.cmd === "set-autoar-defaults") { - this.settings.active.arDetect.mode = message.mode; - this.settings.save(); - } 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; - this.settings.save(); - } else { - this.settings.active.sites[this.server.currentSite] = { - status: "default", - arStatus: message.mode, - statusEmbedded: "default" - }; - this.settings.save(); - } - } else if (message.cmd === "set-extension-defaults") { - this.settings.active.extensionMode = message.mode; - this.settings.save(); - } 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; - this.settings.save(); - } else { - this.settings.active.sites[this.server.currentSite] = { - status: message.mode, - arStatus: "default", - statusEmbedded: message.mode - }; - this.settings.save(); - if(Debug.debug) { - console.log("SAVING PER-SITE OPTIONS,", this.server.currentSite, this.settings.active.sites[this.server.currentSite]) - } - } + } else if (message.cmd === 'set-zoom') { + this.setToActive(message); } } diff --git a/js/lib/VideoData.js b/js/lib/VideoData.js index 08f99f9..6a0e16a 100644 --- a/js/lib/VideoData.js +++ b/js/lib/VideoData.js @@ -130,8 +130,13 @@ class VideoData { this.resizer.setStretchMode(stretchMode); } + setZoom(zoomLevel){ + this.resizer.setZoom(zoomLevel); + } + zoomStep(step){ this.resizer.zoomStep(step); } + } \ No newline at end of file diff --git a/js/modules/PageInfo.js b/js/modules/PageInfo.js index 913a33e..f9495ed 100644 --- a/js/modules/PageInfo.js +++ b/js/modules/PageInfo.js @@ -253,6 +253,12 @@ class PageInfo { } } + setZoom(zoomLevel) { + for(var vd of this.videos) { + vd.setZoom(zoomLevel); + } + } + zoomStep(step){ for(var vd of this.videos){ vd.zoomStep(step); diff --git a/js/modules/Resizer.js b/js/modules/Resizer.js index 3f421da..3ea53d7 100644 --- a/js/modules/Resizer.js +++ b/js/modules/Resizer.js @@ -264,6 +264,10 @@ class Resizer { this.pan = undefined; } + setZoom(zoomLevel) { + this.zoom.setZoom(zoomLevel); + } + zoomStep(step){ this.zoom.zoomStep(step); } diff --git a/js/modules/Zoom.js b/js/modules/Zoom.js index 6bb7267..1ef71cb 100644 --- a/js/modules/Zoom.js +++ b/js/modules/Zoom.js @@ -8,9 +8,10 @@ class Zoom { // functions constructor(videoData) { this.scale = 1; + this.logScale = 0; this.scaleStep = 0.1; - this.minScale = 0.5; // not accurate, actually slightly less - this.maxScale = 8; // not accurate, actually slightly more + this.minScale = -1; // 50% (log2(0.5) = -1) + this.maxScale = 3; // 800% (log2(8) = 3) this.conf = videoData; } @@ -19,32 +20,37 @@ class Zoom { } zoomIn(){ - this.scale += this.scaleStep; + this.logScale += this.scaleStep; - if (this.scale >= this.maxScale) { - this.scale = this.maxScale; + if (this.logScale >= this.maxScale) { + this.logScale = this.maxScale; } + + this.scale = Math.pow(2, this.logScale); } zoomOut(){ - this.scale -= this.scaleStep; + this.logScale -= this.scaleStep; - if (this.scale <= this.minScale) { - this.scale = this.minScale; + if (this.logScale <= this.minScale) { + this.logScale = this.minScale; } + this.scale = Math.pow(2, this.logScale); } zoomStep(amount){ - this.scale += amount; + this.logScale += amount; - if (this.scale <= this.minScale) { - this.scale = this.minScale; + if (this.logScale <= this.minScale) { + this.logScale = this.minScale; } - if (this.scale >= this.maxScale) { - this.scale = this.maxScale; + if (this.logScale >= this.maxScale) { + this.logScale = this.maxScale; } + this.scale = Math.pow(2, this.logScale); + if (Debug.debug) { console.log("[Zoom::zoomStep] changing zoom by", amount, ". New zoom level:", this.scale); } @@ -54,12 +60,14 @@ class Zoom { setZoom(scale){ if(scale < this.minScale) { - this.scale = this.minScale; + scale = this.minScale; } else if (scale > this.maxScale) { - this.scale = this.maxScale; - } else { - this.scale = scale; + scale = this.maxScale; } + + this.scale = Math.pow(2, this.logScale); + + this.conf.restoreAr(); } applyZoom(videoDimensions){ From c7cf9b4be75e90aeb8ac539a734fac52d8e3765b Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Tue, 18 Sep 2018 23:48:05 +0200 Subject: [PATCH 13/31] logging --- res/popup/js/popup.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index df6b238..58e8a10 100644 --- a/res/popup/js/popup.js +++ b/res/popup/js/popup.js @@ -118,6 +118,10 @@ port.onMessage.addListener( (m,p) => processReceivedMessage(m,p)); async function processReceivedMessage(message, port){ + if (Debug.debug) { + console.log("[popup.js] received message", message) + } + if(message.cmd === 'set-current-site'){ site = message.site; loadConfig(message.site); @@ -125,6 +129,10 @@ async function processReceivedMessage(message, port){ } async function updateConfig() { + if (Debug.debug) { + console.log("[popup.js] settings changed. updating popup if site exists. Site:", site); + } + if (site) { loadConfig(site); } @@ -227,7 +235,7 @@ function configureSitesTab(site) { if (Debug.debug) { console.log("[popup.js] Configuring sites tab (SitePanel).", "\nsite: ", site, - "extension mode: ", settings.active.sites[site].status, + "\nextension mode: ", settings.active.sites[site].status, "\narDetect mode: ", settings.active.sites[site].arStatus, "\nvideo float mode:", settings.active.sites[site].videoFloat, "\ndefault ar: ", settings.active.sites[site].ar, @@ -355,6 +363,10 @@ async function loadConfig(site){ } async function getSite(){ + if (Debug.debug) { + console.log("[popup.js] requesting current site"); + } + port.postMessage({cmd: 'get-current-site'}); } From c713977bb6288aa0dd881fac3eaf8348f0cc024b Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Wed, 19 Sep 2018 22:52:53 +0200 Subject: [PATCH 14/31] Fixed popup zoom --- js/lib/Comms.js | 2 +- js/modules/Zoom.js | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/js/lib/Comms.js b/js/lib/Comms.js index be3d289..017515b 100644 --- a/js/lib/Comms.js +++ b/js/lib/Comms.js @@ -258,7 +258,7 @@ class CommsServer { } this.settings.save(); } else if (message.cmd === 'set-zoom') { - this.setToActive(message); + this.sendToActive(message); } } diff --git a/js/modules/Zoom.js b/js/modules/Zoom.js index 1ef71cb..fb748fe 100644 --- a/js/modules/Zoom.js +++ b/js/modules/Zoom.js @@ -59,13 +59,14 @@ class Zoom { } setZoom(scale){ - if(scale < this.minScale) { + // NOTE: SCALE IS NOT LOGARITHMIC + if(scale < Math.pow(this.minScale)) { scale = this.minScale; - } else if (scale > this.maxScale) { + } else if (scale > Math.pow(this.maxScale)) { scale = this.maxScale; } - this.scale = Math.pow(2, this.logScale); + this.scale = scale; this.conf.restoreAr(); } From 06cfb9a04e3a0d2eeacd56c6acb62f15c258a27a Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Wed, 19 Sep 2018 23:34:47 +0200 Subject: [PATCH 15/31] Fixes for minor popup bugs --- res/css/common.css | 4 ++- res/popup/js/popup.js | 51 +++++++++++++++++++++++++++---------- res/popup/popup.html | 59 +++++++++++++++++++++++-------------------- 3 files changed, 72 insertions(+), 42 deletions(-) diff --git a/res/css/common.css b/res/css/common.css index 9129fbf..e6f6e14 100644 --- a/res/css/common.css +++ b/res/css/common.css @@ -131,7 +131,9 @@ strike { } .disabled { - color: #666; + pointer-events: none; + /* color: #666; */ + filter: contrast(50%) brightness(40%) grayscale(100%); } .disabled-button { diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index 58e8a10..79cc351 100644 --- a/res/popup/js/popup.js +++ b/res/popup/js/popup.js @@ -178,6 +178,10 @@ function configurePopupTabs(site) { if (! extensionEnabledForSite) { MenuTab.videoSettings.classList.add('disabled'); + + // also disable extra settings for site + document.getElementById("_site_only_when_site_enabled").classList.add("disabled"); + if (! extensionEnabled) { MenuTab.siteSettings.classList.add('disabled'); if (!selectedMenu) { @@ -192,6 +196,7 @@ function configurePopupTabs(site) { } else { MenuTab.videoSettings.classList.remove('disabled'); MenuTab.siteSettings.classList.remove('disabled'); + document.getElementById("_site_only_when_site_enabled").classList.remove("disabled"); // if popup isn't being opened for the first time, there's no reason to switch // we're already in this tab @@ -235,11 +240,11 @@ function configureSitesTab(site) { if (Debug.debug) { console.log("[popup.js] Configuring sites tab (SitePanel).", "\nsite: ", site, - "\nextension mode: ", settings.active.sites[site].status, - "\narDetect mode: ", settings.active.sites[site].arStatus, - "\nvideo float mode:", settings.active.sites[site].videoFloat, - "\ndefault ar: ", settings.active.sites[site].ar, - "\nstretch mode: ", settings.active.sites[site].stretch, + "\nextension mode: ", settings.active.sites[site] ? settings.active.sites[site].status : 'no site-special settings for this site', + "\narDetect mode: ", settings.active.sites[site] ? settings.active.sites[site].arStatus : 'no site-special settings for this site', + "\nvideo float mode:", settings.active.sites[site] ? settings.active.sites[site].videoFloat : 'no site-special settings for this site', + "\ndefault ar: ", settings.active.sites[site] ? settings.active.sites[site].ar : 'no site-special settings for this site', + "\nstretch mode: ", settings.active.sites[site] ? settings.active.sites[site].stretch : 'no site-special settings for this site', "\n...") } @@ -256,17 +261,23 @@ function configureSitesTab(site) { SitePanel.stretch[button].classList.remove("selected"); } - SitePanel.extOptions[settings.active.sites[site].status].classList.add("selected"); - SitePanel.arOptions[settings.active.sites[site].arStatus].classList.add("selected"); + if (settings.active.sites[site] && settings.active.sites[site]) { + console.log("settings for", site, "exist!") + SitePanel.extOptions[settings.active.sites[site].status].classList.add("selected"); + SitePanel.arOptions[settings.active.sites[site].arStatus].classList.add("selected"); + } else { + SitePanel.extOptions.default.classList.add("selected"); + SitePanel.arOptions.default.classList.add("selected"); + } // optional settings: - if (settings.active.sites[site].videoAlignment) { + if (settings.active.sites[site] && settings.active.sites[site].videoAlignment) { SitePanel.alignment[settings.active.sites[site].videoAlignment].classList.add("selected"); } else { SitePanel.alignment.default.classList.add('selected'); } - if(settings.active.sites[site].stretch !== undefined) { // can be 0 + if(settings.active.sites[site] && settings.active.sites[site].stretch !== undefined) { // can be 0 SitePanel.stretch[settings.active.sites[site].stretch].classList.add("selected"); } else { SitePanel.stretch['-1'].classList.add("selected"); @@ -350,16 +361,21 @@ function configureVideoTab() { async function loadConfig(site){ - if(Debug.debug) + if (Debug.debug) { console.log("\n\n-------------------------------------\n[popup.js::loadConfig] loading config. conf object:", settings.active); - + } + + document.getElementById("_menu_tab_settings_site_site_label").textContent = site; + + configurePopupTabs(site); configureGlobalTab(); configureSitesTab(site); configureVideoTab(); - if(Debug.debug) + if (Debug.debug) { console.log("[popup.js::loadConfig] config loaded\n-----------------------\n\n"); + } } async function getSite(){ @@ -749,7 +765,11 @@ document.addEventListener("click", (e) => { - +async function sleep(t) { + return new Promise( (resolve,reject) => { + setTimeout(t, () => resolve()); + }); +} async function popup_init() { // let's init settings and check if they're loaded @@ -778,7 +798,10 @@ async function popup_init() { // }); hideWarning("script-not-running-warning"); - getSite(); + while (!this.site) { + getSite(); + await sleep(5000); + } } popup_init(); \ No newline at end of file diff --git a/res/popup/popup.html b/res/popup/popup.html index 22bc2a1..e282f58 100644 --- a/res/popup/popup.html +++ b/res/popup/popup.html @@ -23,6 +23,7 @@
Site settings +
Settings for
Video settings @@ -93,37 +94,41 @@ Blacklist
-
- Options for this site: -
- Whitelist - Default - Blacklist + + +
+
+ Automatic detection: +
+ Whitelist + Default + Blacklist +
-
+ + - - - -
- Default stretching mode -
- Never
 - Basic
 - Hybrid
 - Thin borders
 - Default
 + +
+ Default stretching mode +
+ Never
 + Basic
 + Hybrid
 + Thin borders
 + Default
 +
-
- -
- Video alignment: -
- Left - Center - Right - Default + +
+ Video alignment: +
+ Left + Center + Right + Default +
From 0f996f30678aacede2c08cc40ffb52efd28aeb17 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 20 Sep 2018 01:11:18 +0200 Subject: [PATCH 16/31] =?UTF-8?q?registering=20tab=20=E2=80=94=20working?= =?UTF-8?q?=20with=20youtube=20only?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/lib/Comms.js | 43 ++++++++++++++++++++++++++++++++++++++++-- js/modules/PageInfo.js | 4 +++- 2 files changed, 44 insertions(+), 3 deletions(-) diff --git a/js/lib/Comms.js b/js/lib/Comms.js index 017515b..225e3e1 100644 --- a/js/lib/Comms.js +++ b/js/lib/Comms.js @@ -128,6 +128,10 @@ class CommsClient { return Promise.resolve(true); } + registerTab() { + this.port.postMessage({cmd: "register-tab", url: location.hostname}); + } + registerVideo(){ this.port.postMessage({cmd: "has-video"}); } @@ -155,8 +159,24 @@ class CommsServer { } } - async getCurrentTabUrl() { + async getCurrentTabHostname() { + const activeTab = await this._getActiveTab(); + const url = activeTab[0].url; + + var hostname; + + if (url.indexOf("://") > -1) { //find & remove protocol (http, ftp, etc.) and get hostname + hostname = url.split('/')[2]; + } + else { + hostname = url.split('/')[0]; + } + + hostname = hostname.split(':')[0]; //find & remove port number + hostname = hostname.split('?')[0]; //find & remove "?" + + return hostname; } sendToAll(message){ @@ -224,7 +244,7 @@ class CommsServer { }); } - processReceivedMessage(message, port){ + async processReceivedMessage(message, port){ if (Debug.debug && Debug.comms) { console.log("[CommsServer.js::processMessage] Received message from background script!", message, "port", port, "\nsettings and server:", this.settings,this.server); } @@ -233,6 +253,25 @@ class CommsServer { port.postMessage({cmd: 'set-current-site', site: this.server.currentSite}); } + if(message.cmd === 'register-tab') { + if(Debug.debug) { // we want to get these messages always when debugging + console.log("[Comms::processReceivedMessage] registering tab with hostname", message.url) + } + + const currentUrl = await this.getCurrentTabHostname(); + if (message.url === currentUrl) { + this.server.url = message.url; + + if(Debug.debug) { // we want to get these messages always when debugging + console.log("[Comms::processReceivedMessage] hostname matches currently active tab. active:", currentUrl, "message:", message.url); + } + } else { + if(Debug.debug) { // we want to get these messages always when debugging + console.log("[Comms::processReceivedMessage] hostnames don't match. active:", currentUrl, "message:", message.url); + } + } + } + if (message.cmd === 'get-config') { if(Debug.debug) { console.log("CommsServer: received get-config. Active settings?", this.settings.active, "\n(settings:", this.settings, ")") diff --git a/js/modules/PageInfo.js b/js/modules/PageInfo.js index f9495ed..c0d30a8 100644 --- a/js/modules/PageInfo.js +++ b/js/modules/PageInfo.js @@ -18,8 +18,11 @@ class PageInfo { } if(this.videos.length > 0){ + console.log("registering video") comms.registerVideo(); } + + comms.registerTab(); } destroy() { @@ -118,7 +121,6 @@ class PageInfo { this.videos = this.videos.filter( vid => vid.destroyed === false); } - scheduleRescan(rescanReason){ if(rescanReason != RescanReason.PERIODIC){ this.rescan(rescanReason); From e05eb27e6ad35935805b3c8ce0372d714d309247 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 20 Sep 2018 21:30:45 +0200 Subject: [PATCH 17/31] updating popup url --- js/lib/Comms.js | 2 +- js/modules/PageInfo.js | 1 + res/popup/js/popup.js | 7 +++++-- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/js/lib/Comms.js b/js/lib/Comms.js index 225e3e1..ff52764 100644 --- a/js/lib/Comms.js +++ b/js/lib/Comms.js @@ -260,7 +260,7 @@ class CommsServer { const currentUrl = await this.getCurrentTabHostname(); if (message.url === currentUrl) { - this.server.url = message.url; + this.server.currentSite = message.url; if(Debug.debug) { // we want to get these messages always when debugging console.log("[Comms::processReceivedMessage] hostname matches currently active tab. active:", currentUrl, "message:", message.url); diff --git a/js/modules/PageInfo.js b/js/modules/PageInfo.js index c0d30a8..936fad2 100644 --- a/js/modules/PageInfo.js +++ b/js/modules/PageInfo.js @@ -175,6 +175,7 @@ class PageInfo { this.rescan(RescanReason.URL_CHANGE); this.lastUrl = window.location.href; + this.comms.registerTab(); } this.scheduleUrlCheck(); diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index 79cc351..cca3f8c 100644 --- a/res/popup/js/popup.js +++ b/res/popup/js/popup.js @@ -361,6 +361,8 @@ function configureVideoTab() { async function loadConfig(site){ + console.log("NEW CONFIG!") + if (Debug.debug) { console.log("\n\n-------------------------------------\n[popup.js::loadConfig] loading config. conf object:", settings.active); } @@ -767,7 +769,7 @@ document.addEventListener("click", (e) => { async function sleep(t) { return new Promise( (resolve,reject) => { - setTimeout(t, () => resolve()); + setTimeout(() => resolve(), t); }); } @@ -798,7 +800,8 @@ async function popup_init() { // }); hideWarning("script-not-running-warning"); - while (!this.site) { + while (true) { + console.log("GETTING SITE") getSite(); await sleep(5000); } From d1d8945aacda303f4224127e5a2b2ffc3b6183e1 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 20 Sep 2018 21:45:09 +0200 Subject: [PATCH 18/31] using tabs API to acquire URL of current tab --- js/lib/Comms.js | 29 +++-------------------------- js/modules/PageInfo.js | 3 --- 2 files changed, 3 insertions(+), 29 deletions(-) diff --git a/js/lib/Comms.js b/js/lib/Comms.js index ff52764..c17b5a2 100644 --- a/js/lib/Comms.js +++ b/js/lib/Comms.js @@ -128,10 +128,6 @@ class CommsClient { return Promise.resolve(true); } - registerTab() { - this.port.postMessage({cmd: "register-tab", url: location.hostname}); - } - registerVideo(){ this.port.postMessage({cmd: "has-video"}); } @@ -192,7 +188,7 @@ class CommsServer { 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) { + chrome.tabs.query({lastFocusedWindow: true, active: true}, function (res) { resolve(res); }); }); @@ -250,26 +246,7 @@ class CommsServer { } if(message.cmd === 'get-current-site') { - port.postMessage({cmd: 'set-current-site', site: this.server.currentSite}); - } - - if(message.cmd === 'register-tab') { - if(Debug.debug) { // we want to get these messages always when debugging - console.log("[Comms::processReceivedMessage] registering tab with hostname", message.url) - } - - const currentUrl = await this.getCurrentTabHostname(); - if (message.url === currentUrl) { - this.server.currentSite = message.url; - - if(Debug.debug) { // we want to get these messages always when debugging - console.log("[Comms::processReceivedMessage] hostname matches currently active tab. active:", currentUrl, "message:", message.url); - } - } else { - if(Debug.debug) { // we want to get these messages always when debugging - console.log("[Comms::processReceivedMessage] hostnames don't match. active:", currentUrl, "message:", message.url); - } - } + port.postMessage({cmd: 'set-current-site', site: await this.getCurrentTabHostname()}); } if (message.cmd === 'get-config') { @@ -349,7 +326,7 @@ class CommsServer { } if(message.cmd === 'get-config') { - sendResponse({extensionConf: JSON.stringify(this.settings.active), site: getCurrentTabUrl()}); + sendResponse({extensionConf: JSON.stringify(this.settings.active), site: this.getCurrentTabHostname()}); // return true; } else if (message.cmd === "autoar-enable") { this.settings.active.arDetect.mode = "blacklist"; diff --git a/js/modules/PageInfo.js b/js/modules/PageInfo.js index 936fad2..1ae5985 100644 --- a/js/modules/PageInfo.js +++ b/js/modules/PageInfo.js @@ -21,8 +21,6 @@ class PageInfo { console.log("registering video") comms.registerVideo(); } - - comms.registerTab(); } destroy() { @@ -175,7 +173,6 @@ class PageInfo { this.rescan(RescanReason.URL_CHANGE); this.lastUrl = window.location.href; - this.comms.registerTab(); } this.scheduleUrlCheck(); From 51c1255eed3fb82d05b0bdd4e84774411d599b74 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 20 Sep 2018 22:02:15 +0200 Subject: [PATCH 19/31] disable other buttons in 'extension settings' tab if extension is disabled --- res/popup/js/popup.js | 9 +++++++- res/popup/popup.html | 51 +++++++++++++++++++++++-------------------- 2 files changed, 35 insertions(+), 25 deletions(-) diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index cca3f8c..470884c 100644 --- a/res/popup/js/popup.js +++ b/res/popup/js/popup.js @@ -176,6 +176,11 @@ function configurePopupTabs(site) { MenuTab.videoSettings.classList.remove('disabled'); } + // we assume that these two can be shown. If extension or site are disabled, we'll + // add 'disabled' class later down the line: + document.getElementById("_site_only_when_site_enabled").classList.remove("disabled"); + document.getElementById("_ext_only_when_ext_enabled").classList.remove("disabled"); + if (! extensionEnabledForSite) { MenuTab.videoSettings.classList.add('disabled'); @@ -184,6 +189,9 @@ function configurePopupTabs(site) { if (! extensionEnabled) { MenuTab.siteSettings.classList.add('disabled'); + + // also disable extra settings for extension + document.getElementById("_ext_only_when_ext_enabled").classList.add("disabled"); if (!selectedMenu) { openMenu('extensionSettings'); } @@ -196,7 +204,6 @@ function configurePopupTabs(site) { } else { MenuTab.videoSettings.classList.remove('disabled'); MenuTab.siteSettings.classList.remove('disabled'); - document.getElementById("_site_only_when_site_enabled").classList.remove("disabled"); // if popup isn't being opened for the first time, there's no reason to switch // we're already in this tab diff --git a/res/popup/popup.html b/res/popup/popup.html index e282f58..6b6dcbd 100644 --- a/res/popup/popup.html +++ b/res/popup/popup.html @@ -52,38 +52,41 @@ Never
-
- Enable autodetection: -
- Always - On whitelisted sites - Never +
+
+ Enable autodetection: +
+ Always + On whitelisted sites + Never +
-
- + - Default stretching mode -
- Never
 - Basic
 - Hybrid
 - Thin borders
 -
-
+
+ Default stretching mode +
+ Never
 + Basic
 + Hybrid
 + Thin borders
 +
+
- -
- Video alignment: -
- Left - Center - Right + +
+ Video alignment: +
+ Left + Center + Right +
+
-