From de2677fdd60d95d4c9f634e94e4a11af14b9f1db Mon Sep 17 00:00:00 2001
From: Tamius Han <zp8324@student.uni-lj.si>
Date: Fri, 29 Dec 2017 23:34:40 +0100
Subject: [PATCH] Added ui/popup window (and it kinda works)

---
 js/conf/Debug.js         |   4 +-
 js/conf/Keybinds.js      |   3 +
 js/conf/Settings.js      |  47 ++++++-
 js/conf/SitesConf.js     |   2 +-
 js/lib/StorageManager.js |  14 +-
 js/modules/ArDetect.js   |  46 +++++--
 js/modules/Resizer.js    | 273 ++++++++++++++-------------------------
 js/uw-bg.js              |  70 ++++++++++
 js/uw.js                 |  52 +++++++-
 manifest.json            |  12 +-
 res/popup/js/popup.js    | 107 ++++++++++++++-
 res/popup/popup.html     |  62 ++++++++-
 12 files changed, 486 insertions(+), 206 deletions(-)
 create mode 100644 js/uw-bg.js

diff --git a/js/conf/Debug.js b/js/conf/Debug.js
index 34a1f4d..cbfac0c 100644
--- a/js/conf/Debug.js
+++ b/js/conf/Debug.js
@@ -1,7 +1,9 @@
 Debug = {
   debug: true,
+  debugResizer: true,
   debugArDetect: true,
-  showArDetectCanvas: false
+  showArDetectCanvas: false,
+  flushStoredSettings: true
 }
 
 if(Debug.debug)
diff --git a/js/conf/Keybinds.js b/js/conf/Keybinds.js
index eacf5a2..0ccab91 100644
--- a/js/conf/Keybinds.js
+++ b/js/conf/Keybinds.js
@@ -1,3 +1,6 @@
+if(Debug.debug)
+  console.log("Loading: Keybinds.js");
+
 // Yeah hi /r/badcode.
 // Anyway, because nazi localstorage flat out refuses to store arrays:
 
diff --git a/js/conf/Settings.js b/js/conf/Settings.js
index 29351bc..3a0c4a4 100644
--- a/js/conf/Settings.js
+++ b/js/conf/Settings.js
@@ -4,15 +4,48 @@
 if(Debug.debug)
   console.log("Loading: Settings.js");
 
-var _se_init = function(){
-  console.log("pls load settings from localstorage here");
+var _se_init = async function(neverFlushStored){
+  
+  if(Debug.flushStoredSettings && neverFlushStored === false)
+    StorageManager.delopt("uw-settings");
+  
+  if(Debug.debug)
+    console.log("[Settings::_se_init()] -------- starting init! ---------");
+  
+  
+  var newSettings = await StorageManager.getopt_async("uw-settings");
+  if (Debug.debug)
+    console.log("[Settings::_se_init()] settings saved in localstorage are ", (newSettings === {} ? ("nonexistent (", newSettings, ")") : newSettings ));
+  
+  if (newSettings === {}){
+    StorageManager.setopt({"uw-settings": this});
+  }
+  else{
+    for (var k in newSettings) 
+      this[k] = newSettings[k];
+  }
+  
+  if(Debug.debug)
+    console.log("[Settings::_se_init] settings have been loaded/reloaded. Current state: ", this);
+  
 }
 
-Settings = {
+var _se_save = function(){
+  StorageManager.delopt("uw-settings");
+  StorageManager.setopt({"uw-settings": this});
+}
+
+var _se_reload = function(){
+  this.init(true);
+}
+
+var Settings = {
   arDetect: {
-    enabled: "global",
+    enabled: "global",        // thats my csgo rank kappa
     allowedMisaligned: 0.01,  // top and bottom letterbox thickness can differ by this much. Any more and we don't adjust ar.
     allowedArVariance: 0.025, // % by which old ar can differ from the new
+    timer_playing: 30,
+    timer_paused: 3000,
     blacklist: [],            // banned on enabled: "global" 
     whitelist: []             // enabled on enabled: "whitelist-only", disabled on "disabled"
   },
@@ -20,7 +53,9 @@ Settings = {
     samenessTreshold: 0.025,  // if aspect ratios are within 2.5% within each other, don't resize
   },
   miscFullscreenSettings: {
-    videoFloat: "center",
+    videoFloat: "center"
   },
-  init: _se_init
+  init: _se_init,
+  save: _se_save,
+  reload: _se_reload,
 }
diff --git a/js/conf/SitesConf.js b/js/conf/SitesConf.js
index 5e179fa..f5fdaf2 100644
--- a/js/conf/SitesConf.js
+++ b/js/conf/SitesConf.js
@@ -42,7 +42,7 @@ var _sc_prepareNonfsPlayer = function(){
 }
 
 var _sc_getMode = function(site){
-  if(! this.sites[site] )
+  if(! this || !this.sites || ! this.sites[site] )
     return "global";
   
   return this.sites[site].enabled;
diff --git a/js/lib/StorageManager.js b/js/lib/StorageManager.js
index ab2ba07..6a2bdbf 100644
--- a/js/lib/StorageManager.js
+++ b/js/lib/StorageManager.js
@@ -9,7 +9,16 @@ var _sm_getopt = function(prop, callback){
     return browser.storage.local.get(prop, callback);
   else
     return browser.storage.local.get(prop).then(callback);
-} 
+}
+
+
+var _sm_getopt_async = async function(prop){
+  if(BrowserDetect.usebrowser == "chrome")
+    return await browser.storage.local.get(prop);
+  else
+    return await browser.storage.local.get(prop);
+}
+
 var _sm_delopt = function(item){
   return browser.storage.local.remove(item);
 }
@@ -17,5 +26,6 @@ var _sm_delopt = function(item){
 var StorageManager = {
   setopt: _sm_setopt,
   getopt: _sm_getopt,
-  delopt: _sm_delopt
+  delopt: _sm_delopt,
+  getopt_async: _sm_getopt_async
 }
diff --git a/js/modules/ArDetect.js b/js/modules/ArDetect.js
index 7d6f1d4..efd1db8 100644
--- a/js/modules/ArDetect.js
+++ b/js/modules/ArDetect.js
@@ -1,14 +1,18 @@
 if(Debug.debug)
   console.log("Loading: ArDetect");
 
-
-
+var _ard_console_stop = "background: #000; color: #f41";
+var _ard_console_start = "background: #000; color: #00c399";
 
 
 // global-ish variables
 var _ard_oldAr;
 var _ard_currentAr;
 
+
+var _ard_setup_timer;
+var _ard_timer
+
 // kjer vzemamo vzorce za blackbox/stuff. 9 vzorcev. Če spremenimo velikost vzorca, moramo spremeniti tudi vrednosti v tej tabeli
 // vrednosti v tabeli so na osminskih intervalih od [0, <sample height * 4> - 4].
 // we sample these lines in blackbox/stuff. 9 samples. If we change the canvas sample size, we have to correct these values as well
@@ -21,10 +25,13 @@ var _ard_sampleLines = [ 0, 360, 720, 1080, 1440, 1800, 2160, 2520, 2876]
 // **** FUNCTIONS **** //
 
 var _arSetup = function(){
+  if(Debug.debug)
+    console.log("%c[ArDetect::_ard_setup] Starting automatic aspect ratio detection", _ard_console_start);
+  
   var vid = document.getElementsByTagName("video")[0];
   
   if(vid === undefined){
-    setTimeout(_arSetup, 1000);
+    _ard_setup_timer = setTimeout(_arSetup, 1000);
     return;
   }
   
@@ -32,7 +39,7 @@ var _arSetup = function(){
   // we have a video, but also a problem. This problem will prolly be fixed very soon, so setup is called with
   // less delay than before
   if(vid.videoWidth == 0){
-    setTimeout(_arSetup, 100);
+    _ard_setup_timer = setTimeout(_arSetup, 100);
     return;
   }
   
@@ -75,6 +82,7 @@ var _arSetup = function(){
   _ard_oldAr = vid.videoWidth / vid.videoHeight;
   _ard_currentAr = _ard_oldAr;
   
+  this._forcehalt = false;
   _ard_vdraw(vid, context, canvasWidth, canvasHeight, false);
 };
 
@@ -134,13 +142,18 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w){
 }
 
 var _ard_vdraw = function (vid, context, w, h, conf){
+  if(this._forcehalt)
+    return;
+  
   var blackbar_tresh = 10;  // how non-black can the bar be
   var how_far_treshold = 8; // how much can the edge pixel vary (*4)
-  var msec_pause = 33;     // how long is the pause between two executions — 33ms ~ 30fps
+  
+  if(Debug.debug)
+    Settings.arDetect.timer_playing = 1000;     // how long is the pause between two executions — 33ms ~ 30fps
   
   if(vid === undefined || vid.paused || vid.ended || Status.arStrat != "auto"){
     // we slow down if paused, no detection
-    setTimeout(_ard_vdraw, 3000, vid, context, w, h);
+    _ard_timer = setTimeout(_ard_vdraw, 3000, vid, context, w, h);
     return false;
   }
   
@@ -175,7 +188,7 @@ var _ard_vdraw = function (vid, context, w, h, conf){
     // corrected mode.
     _ard_processAr(vid, w, h);
     
-    setTimeout(_ard_vdraw, msec_pause, vid, context, w, h); //no letterbox, no problem
+    _ard_timer = setTimeout(_ard_vdraw, Settings.arDetect.timer_playing, vid, context, w, h); //no letterbox, no problem
     return;
   }
 
@@ -312,7 +325,7 @@ var _ard_vdraw = function (vid, context, w, h, conf){
   if(blackPoints > (blackPointsMax >> 1)){
     // if more than half of those points are black, we consider the entire frame black (or too dark to get anything useful
     // out of it, anyway)
-    setTimeout(_ard_vdraw, msec_pause, vid, context, w, h); //no letterbox, no problem
+    _ard_timer = setTimeout(_ard_vdraw, Settings.arDetect.timer_playing, vid, context, w, h); //no letterbox, no problem
     return;
   }
 
@@ -321,7 +334,7 @@ var _ard_vdraw = function (vid, context, w, h, conf){
     // why exactly are we here again?
     
     _ard_processAr(vid, w, h);
-    setTimeout(_ard_vdraw, msec_pause, vid, context, w, h); //no letterbox, no problem
+    _ard_timer = setTimeout(_ard_vdraw, Settings.arDetect.timer_playing, vid, context, w, h); //no letterbox, no problem
     return;
   }
   
@@ -399,13 +412,24 @@ var _ard_vdraw = function (vid, context, w, h, conf){
   if(isLetter)
     _ard_processAr(vid, w, h, topPixel);
   
-  setTimeout(_ard_vdraw, msec_pause, vid, context, w, h);
+  _ard_timer = setTimeout(_ard_vdraw, Settings.arDetect.timer_playing, vid, context, w, h);
 }
 
+var _ard_stop = function(){
+  if(Debug.debug){
+    console.log("%c[ArDetect::_ard_stop] Stopping automatic aspect ratio detection", _ard_console_stop);    
+  }
+  this._forcehalt = true;
+  clearTimeout(_ard_timer);
+  clearTimeout(_ard_setup_timer);
+}
 
 var ArDetect = {
+  _forcehalt: false,
+
   arSetup: _arSetup,
   vdraw: _ard_vdraw,
   detectedAr: 1,
-  arChangedCallback: function() {}
+  arChangedCallback: function() {},
+  stop: _ard_stop,
 }
diff --git a/js/modules/Resizer.js b/js/modules/Resizer.js
index ec4eb4c..4c367f2 100644
--- a/js/modules/Resizer.js
+++ b/js/modules/Resizer.js
@@ -337,6 +337,8 @@ var _res_legacyAr = function(action){
   var ar = screen.width / screen.height;
   var fileAr = vid.videoWidth / vid.videoHeight;
   
+  
+  
   if(action == "fitw"){
     _res_setAr_kbd( ar > fileAr ? ar : fileAr);
     return;
@@ -346,24 +348,32 @@ var _res_legacyAr = function(action){
     return;
   }
   if(action == "reset"){
-    _res_setAr_kbd(fileAr);
+//     _res_setAr_kbd(fileAr);
+    this.reset(true);
     return;
   }
   
 }
 
-var _res_reset = function(){
+var _res_reset = function(force){
   dimensions = {top: "", left: "", width: "100%", height: "100%"};
   
   $("video").css({"position": "relative", "width": dimensions.width,"height": dimensions.height,"top": dimensions.top, "left": dimensions.left});
   
   if(Debug.debug)
-    console.log("[Resizer::_res_applyCss] css applied. Dimensions/pos: w:",dimensions.width,"; h:",dimensions.height,"; top:",dimensions.top,"; left:",dimensions.left);
+    console.log("[Resizer::_res_reset] css applied. Dimensions/pos: w:",dimensions.width,"; h:",dimensions.height,"; top:",dimensions.top,"; left:",dimensions.left);
+  
+  if(force)
+    this._currentAr = -1;
 }
 
 var _res_setAr_kbd = function(ar){
-  if(FullScreenDetect.isFullScreen())
+  if(FullScreenDetect.isFullScreen()){
+    if(Debug.debug)
+      console.log("[Resizer::_res_setAr_kbd] We're in full screen. Setting ar to ", ar);
+    
     _res_setAr(ar, {width: screen.width, height: screen.height} );
+  }
 //   else
 //     _res_setAr_nonfs(ar);
 // TODO: check if site supports non-fs ar
@@ -376,6 +386,9 @@ var _res_setAr = function(ar, playerDimensions){
   // Actual aspect ratio of the file/<video> tag
   var fileAr = vid.videoWidth / vid.videoHeight;
   
+  if(ar == "default")
+    ar = fileAr;
+  
   // Zabavno dejstvo: ta funkcija se kliče samo v fullscreen. Za ne-fs verzijo bo posebna funkcija, ker bo včasih verjetno treba 
   // spremeniti velikost predvajalnika
   // 
@@ -424,6 +437,10 @@ var _res_setAr = function(ar, playerDimensions){
 }
 
 var _res_computeOffsets = function(vidDim, playerDim){
+  
+  if(Debug.debug)
+    console.log("[Resizer::_res_computeOffsets] video will be aligned to ", Settings.miscFullscreenSettings.videoFloat);
+  
   var offsets = {
     width: vidDim.width,
     height: vidDim.height,
@@ -458,195 +475,59 @@ var _res_setAr_nonfs = function(ar){
   _res_setAr(ar, playerDimensions);
 }
 
-
-function resetCSS(video, player){
-  if(debugmsg)
-    console.log("uw::resetCSS | resetting video size");
+var _res_align = function(float){
+  if(! float)
+    float = Settings.miscFullscreenSettings.videoFloat;
   
+  var dimensions = {left: 0};
   
-  var nv = {"w": 0, "h": 0, "top": 0, "left": 0};
-  
-  var vidaspect = video.width / video.height;
-  var scraspect = player.width / player.height;
-  
-  if( vidaspect > scraspect ){  // Video je širši od okna | video is wider than window
-    nv.w = player.width;
-    nv.h = player.width / video.width * video.height;
-    
-    // Lahko se zgodi, da je prišlo do zaokroževalne napake ter da je dejanska višina videa le nekaj pikslov drugačna,
-    // kot višina predvajalnika. V tem primeru zavržemo prej dobljeni rezultat in namesto tega privzamemo, da je višina
-    // videa enaka višini predvajalnika.
-    // 
-    // It's possible to have a rounding error where calculated height of the video is only a few pixels different from
-    // the player height. In such cases, we discard the calculated video height and use player height instead.
-    
-    if( player.height - 4 < nv.h && nv.h < player.height + 4 )
-      nv.h = player.height;
-    
-    nv.top = (player.height - nv.h) / 2;
-    nv.left = 0;
+  if(float == "left"){
+    _res_applyCss(dimensions);
+    return;
   }
-  else{
-    nv.h = player.height;
-    nv.w = player.height / video.height * video.width;
-    
-    if( player.width - 4 < nv.w && nv.w < player.width + 4)
-      nv.w = player.width;
-    
-    nv.top = 0;   //itak zasedemo 100% višine
-    nv.left = (player.width - nv.w) / 2;
+  if(float == "center"){
+//     dimensions.left = 
+//     _res_applyCss(
   }
-  
-  _res_applyCss(nv);
-}
-
-function changeCSS_nofs(what_do, video, player){
-  if(debugmsg){
-    console.log("uw::changeCSS_nofs | arguments: what_do:",what_do,"; video:", video,"; player:", player);
-  }
-  
-  var w;
-  var h;
-  var top;
-  var left;
-  
-  var evideo = $("video")[0];
-  var video = {width: evideo.videoWidth, height: evideo.videoHeight, scrollw: evideo.scrollWidth, scrollh: evideo.scrollWidth};
-  
-  var ar = video.width / video.height;
-  
-  if(debugmsg){
-    console.log("uw::changeCSS_nofs | video dimensions:", video.width, "x", video.height, "; ar:",ar);
-  }
-  
-  if(what_do == "fitw" || what_do == "fit-width"){
-    // Ker bi bilo lepo, da atribut 'top' spremenimo hkrati z width in height, moramo najprej naračunati,
-    // za kakšen faktor se poviša višina. To potrebujemo, da se pravilno izračuna offset.
-    // 
-    //        100vw = window.innerWidth
-    //        window.innerWidth / videoWidth = x
-    // 
-    // Če pomnožimo videoHeight z x, dobimo novo višino videa. Nova višina videa je lahko večja ali manjša
-    // kot višina ekrana. Če je višina videa manjša kot višina ekrana, bo top pozitiven, drugače negativen:
-    // 
-    //        nvideoh = x * videoWidth
-    //        top = (window.innerHeight - nvideoh) / 2
-    //
-    // Z 2 delimo, ker hočemo video vertikalno poravnati.
-    
-    w = player.width;
-    h = player.width / video.width * video.height;
-    
-    if(debugmsg)
-      console.log("uw::changeCSS_nofs | w:",w,"; h:",h);
-    
-    top = (player.height - h) / 2;
-    left = 0;            // Ker zavzamemo vso širino | cos we take up all the width
-  }
-  
-  if(what_do == "fith" || what_do == "fit-height"){
-    h = player.height;
-    w = player.height / video.height * video.width;
-    
-    top = 0;   //itak zasedemo 100% višine
-    left = (player.width - w) / 2;
-  }
-  
-  if(what_do == "zoom"){    
-    // Video povečujemo na tak način, da sta zoom in unzoom povečata oz. zmanjšata video za enak korak
-    // We do this so zoom and unzoom steps change video sizes for the same amount
-    
-    h = video.scrollh + (player.height * zoomStep);
-    w = video.scrollw + (player.height * zoomStep * ar);
-    /* Zakaj računamo širino na tak način?
-    *   // 
-    *   // Predstavljajte si, da imamo 2100:900 video v 1600:900 škatli, zoomStep = 0.1. Če bi širino računali po formuli:
-    *   // 
-    *   //     širina = širina_videa + (širina zaslona * zoomStep)
-    *   //     
-    *   // Potem bi bila nova velikost videa 2260 x 990. Razmerje stranic: 2.28 (moglo bi biti 2.33 — video je popačen).
-    *   // Zaradi tega novo širino rajši povečamo za razliko_v_višini * razmerje_stranic
-    *   // 
-    *   //     2100 + (900 * 0.1 * (2100/900)) =
-    *   //                 2100 + (90 * 2.333) = 2310
-    *   //
-    *   // Razmerje stranic (2310x990) je tako 2.333 — tako, kot bi moglo biti.
-    *   // 
-    *   // 
-    *   // ============================================================================================================
-    *   // 
-    *   // Why did we calculate width this way?
-    *   // 
-    *   // Imagine we have a 2100x900 video in a 1600:900 container, zoomStep = 0.1. If we calculated width using this:
-    *   //
-    *   //     width = video_width + (container_width * zoomStep)
-    *   //     
-    *   // then the new size would be 2260 x 990. This gives us an aspect ratio of 2.28 instead of 2.33 (which is what it
-    *   // should be). Because of that we rather increase the width by delta_height * aspect_ratio:
-    *   //
-    *   //     2100 + (900 * 0.1 * (2100/900)) =
-    *   //                 2100 + (90 * 2.333) = 2310 
-    *   //
-    *   // This gives us the correct aspect ratio and prevents video deformations.
-    */
-    
-    top = (player.height - h)/2
-    left = (player.width - w) / 2;
-    
-    if (h > player.height * 4){
-      if(debugmsg){
-        console.log("But this video is ... I mean, it's fucking huge. This is bigger than some rooms, this is bigger than some people's flats!");
-        // Insert obligatory omnishambles & coffee machine quote here
-        console.log("(No really, mate, you took this way too far already. Can't let you do that, Dave.)");
-      }
-      return;
-    }
-  }
-  
-  if(what_do == "unzoom"){
-    // Video povečujemo na tak način, da sta zoom in unzoom povečata oz. zmanjšata video za enak korak
-    // We do this so zoom and unzoom steps change video sizes for the same amount
-    h = video.scrollh - (player.height * zoomStep);
-    w = video.scrollw - (player.height * zoomStep * ar);
-    
-    top = (player.height - h) / 2;
-    left = (player.width - w) / 2;
-    
-    if (h < player.height * 0.25){
-      if(debugmsg){
-        console.log("don't you think this is small enough already? You don't need to resize the video all the way down to the size smaller than your penis.");
-        console.log("(if you're a woman, substitute 'penis' with whatever the female equivalent is.)");
-      }
-      return;
-    }
-  }
-  var dimensions = { h: h, w: w, top: top, left: left };
-  _res_applyCss(dimensions);
 }
 
 function _res_applyCss(dimensions){
-  dimensions.top = "top: " + Math.round(dimensions.top) + "px !important";
-  dimensions.left = "left: " + Math.round(dimensions.left) + "px !important";
-  dimensions.width = "width: " + Math.round(dimensions.width) + "px !important";
-  dimensions.height = "height: " + Math.round(dimensions.height) + "px !important";
   
+  if(Debug.debug)
+    console.log("[Resizer::_res_applyCss] Starting to apply css. this is what we're getting in:", dimensions);
+  
+  if(dimensions.top !== undefined)
+    dimensions.top = "top: " + Math.round(dimensions.top) + "px !important";
+  
+  if(dimensions.left !== undefined)
+    dimensions.left = "left: " + Math.round(dimensions.left) + "px !important";
+  
+  if(dimensions.width !== undefined)
+    dimensions.width = "width: " + Math.round(dimensions.width) + "px !important";
+  
+  if(dimensions.height !== undefined)
+    dimensions.height = "height: " + Math.round(dimensions.height) + "px !important";
+ 
   // misc.
   dimensions.position = "position: absolute !important";
-  dimensions.objectFit = "object-fit: cover !important";
-  
-  console.log("trying to apply css. dimensions: ", dimensions);
+//   dimensions.objectFit = "object-fit: cover !important";
   
   var vid = $("video")[0];
+  
+  if(Debug.debug)
+    console.log("[Resizer::_res_applyCss] trying to apply css. Css strings: ", dimensions, "video tag: ", vid);
+  
+  
   var styleArrayStr = vid.getAttribute('style');
   
   if (styleArrayStr !== null && styleArrayStr !== undefined){
     
-    var styleArray = styleArrayStr.split("; ");
+    var styleArray = styleArrayStr.split(";");
     for(var i in styleArray){
       
       styleArray[i] = styleArray[i].trim();
       
-      if     (styleArray[i].startsWith("top:")){
+      if (styleArray[i].startsWith("top:")){
         styleArray[i] = dimensions.top;
         delete dimensions.top;
       }
@@ -678,6 +559,29 @@ function _res_applyCss(dimensions){
   for(var key in dimensions)
     styleArray.push( dimensions[key] );
   
+  // problem: last element can get duplicated a lot.
+  // solution: check if last element is a duplicate. if it is, remove first occurence (keep last)
+  // repeat until no element is removed
+  var dups = false;
+  
+//   debugger;
+  
+  
+  do{
+    dups = false;
+    var last = styleArray.length - 1;
+    var i = last;
+    while(i --> 0){
+      if(styleArray[i] === styleArray[last]){
+        dups = true;
+        styleArray.splice(i, 1);
+        
+        --last; // correct the index
+      }
+    }
+  } while(dups);
+  
+  
   // build style string back
   var styleString = "";
   for(var i in styleArray)
@@ -687,13 +591,32 @@ function _res_applyCss(dimensions){
   vid.setAttribute("style", styleString);
   
   if(Debug.debug)
-    console.log("[Resizer::_res_applyCss] css applied. Dimensions: ", styleString);
+    console.log("[Resizer::_res_applyCss] css applied. Style string:", styleString);
+}
+
+var _res_setFsAr = function(ar){
+  this._currentAr = ar;
+}
+
+var _res_restore = function(){
+  if(Debug.debug){
+    console.log("[Resizer::_res_restore] attempting to restore aspect ratio. this & settings:", {'this': this, "settings": Settings} );
+  }
+  
+  if(this._currentAr > 0)
+    _res_setAr_kbd(this._currentAr);
+  else
+    _res_setAr_kbd("default");
 }
 
 var Resizer = {
+  _currentAr: -1,
+  align: _res_align,
   setAr: _res_setAr_kbd,
   setAr_fs: _res_setAr,
   setAr_nonfs: _res_setAr_nonfs,
   legacyAr: _res_legacyAr,
-  reset: _res_reset
+  reset: _res_reset,
+  restore: _res_restore,
+  setFsAr: _res_setFsAr
 }
diff --git a/js/uw-bg.js b/js/uw-bg.js
new file mode 100644
index 0000000..eaeaaa6
--- /dev/null
+++ b/js/uw-bg.js
@@ -0,0 +1,70 @@
+async function main(){
+  if(Debug.debug)
+    console.log("[uw-bg::main] setting up background script");
+  
+  await Settings.init();
+  
+  browser.runtime.onMessage.addListener(_uwbg_rcvmsg);
+  
+  if(Debug.debug)
+    console.log("[uw-bg::main] listeners registered");
+}
+
+async function sendMessage(message){
+  var tabs = await browser.tabs.query({currentWindow: true, active: true});
+  
+  if(Debug.debug)
+    console.log("[uw-bg::sendMessage] trying to send message", message, " to tab ", tabs[0], ". (all tabs:", tabs,")");
+
+    browser.tabs.sendMessage(tabs[0].id, message);
+}
+
+async function _uwbg_rcvmsg(message){
+  
+  if(Debug.debug){
+    console.log("received message", message);
+    
+  }
+  /*
+  message.sender = "uwbg";
+  message.receiver = "uw";*/
+  
+  if(message.cmd == "debug-ping"){
+    
+  }
+  else if(message.cmd == "force-ar"){
+    sendMessage(message);  // args: {cmd: string, newAr: number/"auto"}
+  }
+  else if(message.cmd == "stop-autoar"){
+    sendMessage(message);
+  }
+  else if(message.cmd == "force-video-float"){
+    if(message.global){
+      Settings.miscFullscreenSettings.videoFloat = message.newFloat;
+      sendMessage(message);
+    }
+    else{
+      sendMessage(message);
+    }
+  }
+  
+  else if(message.cmd == "disable-autoar"){
+    Settings.arDetect.enabled = "no";
+    Settings.save();
+    sendMessage("reload-settings");
+  }
+  else if(message.cmd == "disable-autoar-whitelist-only"){
+    Settings.arDetect.enabled = "whitelist";
+    Settings.save();
+    sendMessage("reload-settings");
+  }
+  else if(message.cmd == "enable-autoar"){
+    Settings.arDetect.enabled = "global";
+    Settings.save();
+    sendMessage("reload-settings");
+  }
+  
+}
+
+
+main();
diff --git a/js/uw.js b/js/uw.js
index a841f02..00d6815 100644
--- a/js/uw.js
+++ b/js/uw.js
@@ -5,13 +5,13 @@ if(Debug.debug)
 
 async function main(){
   if(Debug.debug)
-    console.log("loading configuration ...");
+    console.log("[uw::main] loading configuration ...");
 
   // load settings
-  Settings.init();
+  await Settings.init();
   var scpromise = SitesConf.init();
   var kbpromise = Keybinds.init();
-
+  
   ExtensionConf.init();
   console.log(scpromise);
 
@@ -50,18 +50,64 @@ async function main(){
     return;
   }
   
+  
+  
+  
   ArDetect.arSetup();
   
   document.addEventListener("mozfullscreenchange", function( event ) {
+    if(Debug.debug){
+//       console.log("[uw::mozfullscreenchange] full screen state is changing. event:", event);
+      console.log("[uw::mozfullscreenchange] are we in full screen?", FullScreenDetect.isFullScreen());
+    }
+    
     if(FullScreenDetect.isFullScreen()){
       // full screen is on
+      Resizer.restore();
     }
     else{
       Resizer.reset();
     }
   });
   
+  browser.runtime.onMessage.addListener(receiveMessage);
 // });
 }
 
+
+// comms
+function receiveMessage(message) {
+  if(Debug.debug)
+    console.log("[uw::receiveMessage] we received a message.", message);
+  
+  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.newAr == "auto"){
+      ArDetect.stop();        // just in case
+      ArDetect.arSetup();
+    }
+    else{
+      ArDetect.stop();
+      
+      // we aren't in full screen, but we will want aspect ratio to be fixed when we go to 
+      Resizer.setFsAr(message.newAr);
+    }
+  }  
+  if(message.cmd == "force-video-float"){
+    if(Debug.debug)
+      console.log("[uw::receiveMessage] we're aligning video to", message.newFloat);
+    
+    Settings.miscFullscreenSettings.videoFloat = message.newFloat;
+    Settings.save();
+  }
+  if(message.cmd == "stop-autoar"){
+    ArDetect.stop();
+  }
+  if(message.cmd == "reload-settings"){
+    Settings.reload();
+  }
+}
+
 main();
diff --git a/manifest.json b/manifest.json
index 3ec90d4..8872d6b 100644
--- a/manifest.json
+++ b/manifest.json
@@ -10,7 +10,17 @@
   
   "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
   
-  
+  "background": {
+    "scripts": [
+      "js/lib/BrowserDetect.js",
+      "js/lib/StorageManager.js",
+      
+      "js/conf/Debug.js",
+      "js/conf/Settings.js",
+      
+      "js/uw-bg.js"
+    ]
+  },
   
   "content_scripts": [{
     "matches": ["*://*/*"],
diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js
index 8d1c8b6..750833d 100644
--- a/res/popup/js/popup.js
+++ b/res/popup/js/popup.js
@@ -1 +1,106 @@
- 
+if(Debug.debug)
+  console.log("[popup.js] loading popup script!");
+
+
+async function test(){
+  await StorageManager.getopt_async("uw-settings");
+  console.log("popup: settings machine :b:roke?", Settings);
+  
+}
+
+function changeAr(ar){
+  if(Debug.debug)
+    console.log("[popup.js] changing ar to ", ar)
+}
+
+test();
+
+// browser.runtime.sendMessage("test");
+
+
+
+document.addEventListener("click", (e) => {
+  
+  console.log("we clicked. e?",e);
+  
+  function getcmd(e){
+    console.log("extracting command from e", e);
+    
+    var command = {};
+    command.sender = "popup";
+    command.receiver = "uwbg";
+    
+    if(e.target.classList.contains("_changeAr")){
+      if(e.target.classList.contains("_ar_auto")){
+        command.cmd = "force-ar";
+        command.newAr = "auto";
+        return command;
+      }
+      if(e.target.classList.contains("_ar_reset")){
+        command.cmd = "force-ar";
+        command.newAr = "reset";
+        return command;
+      }
+      if(e.target.classList.contains("_ar_219")){
+        command.cmd = "force-ar";
+        command.newAr = 2.39;
+        return command;
+      }
+      if(e.target.classList.contains("_ar_189")){
+        command.cmd = "force-ar";
+        command.newAr = 2.0;
+        return command;
+      }
+      if(e.target.classList.contains("_ar_169")){
+        command.cmd = "force-ar";
+        command.newAr = 1.78;
+        return command;
+      }
+      if(e.target.classList.contains("_ar_1610")){
+        command.cmd = "force-ar";
+        command.newAr = 1.6;
+        return command;
+      }
+    }
+    
+    if(e.target.classList.contains("_autoar")){
+      if(e.target.classList.contains("_autoar_temp-disable")){
+        return {cmd: "stop-autoar", sender: "popup", receiver: "uwbg"};
+      }
+      if(e.target.classList.contains("_autoar_disable")){
+        return {cmd: "disable-autoar", sender: "popup", receiver: "uwbg"};
+      }
+      if(e.target.classList.contains("_autoar_enable")){
+        return {cmd: "enable-autoar", sender: "popup", receiver: "uwbg"};
+      }
+    }
+    
+    if(e.target.classList.contains("_align")){
+      
+      command.global = true;
+      
+      if(e.target.classList.contains("_align_left")){
+        command.cmd = "force-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_center")){
+        command.cmd = "force-video-float"
+        command.newFloat = "center"
+        return command;
+      }
+      if(e.target.classList.contains("_align_right")){
+        command.cmd = "force-video-float";
+        command.newFloat = "right";
+        return command;
+      }
+    }
+  }
+  
+  var command = getcmd(e);  
+  console.log("command: ", command);
+  browser.runtime.sendMessage(command);
+});
diff --git a/res/popup/popup.html b/res/popup/popup.html
index ba0459f..698b4b6 100644
--- a/res/popup/popup.html
+++ b/res/popup/popup.html
@@ -66,6 +66,28 @@
       padding-top: 5px;
     }
     
+    .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;
+    }
+    
+    .row {
+      display: block;
+      margin-top: 20px;
+      margin-bottom: 10px;
+    }
+    .button-row {
+      display: block;
+      margin-top: 5px;
+      margin-bottom: 10px;
+    }
+    
     </style>
   </head>
   <body>
@@ -84,7 +106,7 @@
       </div>
     </div>
     <div class="right-side">
-      <div id="extension-mode" class="suboption">
+      <div id="extension-mode" class="suboption hidden">
         <p>How should extension work in general?<br/><small>NOTE: settings will be applied when page is reloaded.</small></p>
       
         <form action="">
@@ -101,8 +123,33 @@
         </form>
       </div>
       
-      <div id="aspect-ratio-settings" class="suboption hidden">
-        <input type="checkbox" id="arDetectEnabled"><label for="arDetectEnabled">Enable active aspect ratio autodetection</label>
+      <div id="aspect-ratio-settings" class="suboption">
+        <div class="row">
+          Force aspect ratio:<br/>
+          <div class="button-row">
+            <a class="button _changeAr _ar_auto">Auto-detect</a>
+            <a class="button _changeAr _ar_reset">Reset</a>
+            <a class="button _changeAr _ar_219">21:9</a>
+            <a class="button _changeAr _ar_189">2:1 (18:9)</a>
+            <a class="button _changeAr _ar_169">16:9</a>
+          </div>
+        </div>
+        <div class="row">
+          Automatic aspect ratio autodetection:
+          <div class="button-row">
+            <a id="ard_temporary_disable" class="button _autoar _autoar_temp-disable">Temporarily disable</a><br/>
+            <a id="ard_disable"           class="button _autoar _autoar_disable">Disable</a>
+            <a id="ard_enable"            class="button _autoar _autoar_enable hidden">Enable</a>
+          </div>
+        </div>
+        <div class="row">
+        Video alignment:
+        <div class="button-row">
+          <a class="button _align _align_left">left</a>
+          <a class="button _align _align_center">center</a>
+          <a class="button _align _align_right">right</a>
+        </div>
+        <div>
       </div>
       
       
@@ -114,6 +161,10 @@
     <!-- load all scripts. ordering is important!  -->
     
     <script src="../../js/dep/jquery-3.1.1.js" ></script>
+    <script src="../../js/conf/Debug.js"></script>
+    
+    <script src="../../js/lib/BrowserDetect.js"></script>
+    <script src="../../js/lib/StorageManager.js"></script>
     
 <!--     the following scripts aren't included yet. if they're needed, they need to be added in this order -->
 <!--    "js/conf/Debug.js",
@@ -121,8 +172,9 @@
     "js/conf/SitesConf.js",
     "js/conf/Status.js",-->
     
-    <script src="../../js/lib/StorageManager.js"></script>
-    <script src="./settings.js"></script>
+    <script src="../../js/conf/Settings.js"></script>
+    
+    <script src="./js/popup.js"></script>
   </body>
 </html>