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

Added ui/popup window (and it kinda works)

Browse Source
This commit is contained in:
Tamius Han 2017-12-29 23:34:40 +01:00
parent c9719a163a
commit de2677fdd6
12 changed files with 486 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/conf/Debug.js
View File

@ -1,7 +1,9 @@
Debug = {
debug: true,
debugResizer: true,
debugArDetect: true,
showArDetectCanvas: false
showArDetectCanvas: false,
flushStoredSettings: true
}
if(Debug.debug)

3
js/conf/Keybinds.js
View File

@ -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:

47
js/conf/Settings.js
View File

@ -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,
}

2
js/conf/SitesConf.js
View File

@ -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;

14
js/lib/StorageManager.js
View File

@ -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
}

46
js/modules/ArDetect.js
View File

@ -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,
}

273
js/modules/Resizer.js
View File

@ -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
}

70
js/uw-bg.js Normal file
View File

@ -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();

52
js/uw.js
View File

@ -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();

12
manifest.json
View File

@ -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": ["*://*/*"],

107
res/popup/js/popup.js
View File

@ -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);
});

62
res/popup/popup.html
View File

@ -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>