From 89f9b82b4b9ffc113a3ac224fb0edfacf9f1e474 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Mon, 20 Feb 2017 23:40:47 +0100 Subject: [PATCH] UI rewrite complete. TODO: test on netflix, enable UI customization by user. --- js/uw.js | 358 ++++++++++++++++++++++++++++++++++-------- res/css/uw_common.css | 9 ++ res/css/uw_yt.css | 2 - 3 files changed, 299 insertions(+), 70 deletions(-) diff --git a/js/uw.js b/js/uw.js index a87ca27..91e8c7e 100644 --- a/js/uw.js +++ b/js/uw.js @@ -8,7 +8,7 @@ var debugmsg_autoar = false; var debugmsg_periodic = false; var debugmsg_ui = true; if(debugmsg || debugmsg_click || debugmsg_message || debugmsg_autoar){ - console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "); + console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "); console.log("\nLoading ultrawidify (uw)\nIf you can see this, extension at least tried to load\n\nRandom number: ",Math.floor(Math.random() * 20) + 1,"\n"); if(debugmsg) @@ -56,7 +56,7 @@ var UW_UI_BUTTONS = { has_submenu: false, button: true, icon: "/res/img/ytplayer-icons/zoom.png", - text: "Reset", + text: "Zoom", onclick: function(){ changeCSS("fit", "zoom") } }, unzoom: { @@ -64,7 +64,7 @@ var UW_UI_BUTTONS = { has_submenu: false, button: true, icon: "/res/img/ytplayer-icons/unzoom.png", - text: "Reset", + text: "Unzoom", onclick: function(){ changeCSS("fit", "unzoom") } }, zoom: { @@ -91,7 +91,7 @@ var UW_UI_BUTTONS = { submenu: [ "fitw","fith","reset","zoom","unzoom","autoar","ar" ], top_level: true, submenu_id: "uw_settings_menu", - onclick: function(){ showMenu("uw_settings_menu"); } + onclick: function(){ toggleMenu("uw_settings_menu") } }, ar: { native_bar: false, @@ -133,7 +133,12 @@ var UW_UI_BUTTONS = { } var UW_UI_BANLIST = { - youtube: ["autoar"] + youtube: { + autoar: true + }, + netflix: { + settings: true + } } if(browser_autodetect){ @@ -160,8 +165,8 @@ var zoomStep = 0.05; var whatdo_persistence = true; var last_whatdo = {type: "autoar", what_do:"reset"}; -var page_url = window.location.toString(); - +var page_url = window.location.toString(); // S pomočjo page_url določimo, na kateri spletni strani smo. +var SITE; var ctlbar_classnames = ["ytp-chrome-controls"]; var serviceArray = [".video-stream"]; //Youtube @@ -202,6 +207,26 @@ if(usebrowser == "chrome"){ browser = chrome; } +var UW_SITES = { + youtube: { + urlRules: ["youtu"] + }, + netflix: { + urlRules: ["netflix"] + } +} + + +//Na reloadu vselej odstrani vmesnik od prej +//Always remove previous UI on extension reload +var previousElements = document.getElementsByClassName("uw_element"); +if(previousElements){ + while (previousElements.length > 0){ + previousElements[0].parentNode.removeChild(previousElements[0]); + } +} + + function init(force_reload){ if(debugmsg) @@ -218,6 +243,40 @@ function init(force_reload){ } } + var marker = document.getElementById("uw_save_site"); + + if(debugmsg) + console.log("uw | %cpage_url: "+page_url,"color: #99F"); + + + /* Fun fact — če reloadamo razširitev v about:debugging, window.location vrne "javascript:". Fak + // Fun fact — if we reload the extension from about:debugging, window.location returns "javascript:" (which + // obviously isn't the page we're on. Fak. + */ + if(page_url.indexOf("javascript:") != -1){ + if(marker){ + if(debugmsg){ + console.log("uw::init | %csomething went wrong, page_url is not properly defined. Trying to get URL from a marker","color: #000; background-color: #F00", "marker value:",marker.textContent); + } + page_url = marker.textContent; + } + else + console.log("uw::init | %csomething went wrong, page_url is not properly defined. Marker wasn't found either.r","color: #000; background-color: #F00"); + } + else{ + if(!marker && page_url.indexOf("javascript:") == -1){ + var marker = document.createElement('div'); + marker.id = "uw_save_site"; + marker.textContent = page_url; + } + else{ + if(page_url.indexOf("javascript:") == -1) + marker.textContent = page_url; + } + } + + + //Youtube: if(page_url.indexOf("youtu") != -1){ if(debugmsg) @@ -405,64 +464,73 @@ var DEFAULT_KEYBINDINGS = { } }; + + var last_location = ""; var KEYBINDS = {}; -browser.storage.onChanged.addListener(function(){console.log("storage has been updated!"); extSetup() } ); +browser.storage.onChanged.addListener(function(){ + if(debugmsg){ + console.log("uw:: |%c calling extSetup from storage.onChanged","color:#99f"); + } + extSetup(); +}); //END keybind-related stuff //BEGIN comms with uw-bg -if(debugmsg) - console.log("uw | Setting up comms with background scripts"); +function extsetup_comms(){ + if(debugmsg) + console.log("uw | Setting up comms with background scripts"); -var num_of_msg = 0; -browser.runtime.onMessage.addListener(function (message, sender, stuff ) { - if(debugmsg || debugmsg_message) - console.log("uw::onMessage | message number: ", num_of_msg++ , "; message:", message ); - - if(message.message && message.message == "page-change"){ - if(document.getElementsByClassName("uw_element").length === 0){ - if(debugmsg) - console.log("uw::onMessage | page was updated but control buttons aren't there. Trying to readd.") + var num_of_msg = 0; + browser.runtime.onMessage.addListener(function (message, sender, stuff ) { + if(debugmsg || debugmsg_message) + console.log("uw::onMessage | message number: ", num_of_msg++ , "; message:", message ); + + if(message.message && message.message == "page-change"){ + if(document.getElementsByClassName("uw_element").length === 0){ + if(debugmsg) + console.log("uw::onMessage | page was updated but control buttons aren't there. Trying to readd.") + + init(); + addCtlButtons(0); + } - init(); - addCtlButtons(0); + + // We don't do that if we zoomed or unzoomed + if(last_whatdo.what_do != "zoom" && last_whatdo.what_do != "unzoom") + changeCSS(last_whatdo.type, last_whatdo.what_do); + + // Velikost gumbov posodobimo v vsakem primeru + // We update the button size in any case + updateCtlButtonSize(); + + if(debugmsg) + console.log("uw::onMessage | message number:",num_of_msg," »» everything is done. Buttons: ", document.getElementsByClassName("uw-button")); } + if(message.type && message.type == "arInfo"){ + char_got_ar = true; + char_arx = message.arx; + char_ary = message.ary; + if(debugmsg || debugmsg_message || debugmsg_autoar) + console.log("uw::onMessage | got aspect ratio (",char_arx,"/",char_ary,"), launching autochar"); + autochar(); + } - // We don't do that if we zoomed or unzoomed - if(last_whatdo.what_do != "zoom" && last_whatdo.what_do != "unzoom") - changeCSS(last_whatdo.type, last_whatdo.what_do); - - // Velikost gumbov posodobimo v vsakem primeru - // We update the button size in any case - updateCtlButtonSize(); - - if(debugmsg) - console.log("uw::onMessage | message number:",num_of_msg," »» everything is done. Buttons: ", document.getElementsByClassName("uw-button")); - } - - if(message.type && message.type == "arInfo"){ - char_got_ar = true; - char_arx = message.arx; - char_ary = message.ary; - if(debugmsg || debugmsg_message || debugmsg_autoar) - console.log("uw::onMessage | got aspect ratio (",char_arx,"/",char_ary,"), launching autochar"); - autochar(); - } - -}); + }); -// browser.runtime.onMessage.addListener(request => { -// console.log("Message from the background script:"); -// console.log(request.greeting); -// return Promise.resolve({response: "Hi from content script"}); -// }); + // browser.runtime.onMessage.addListener(request => { + // console.log("Message from the background script:"); + // console.log(request.greeting); + // return Promise.resolve({response: "Hi from content script"}); + // }); -if(debugmsg) - console.log("uw | Comms with background scripts: done"); + if(debugmsg) + console.log("uw | Comms with background scripts: done"); +} //END comms with uw-bg //BEGIN periodic functions @@ -558,9 +626,10 @@ function extSetup(){ last_location = window.location; +// SITE = ""; if(debugmsg){ - console.log("uw::extSetup | our current location is:", last_location); + console.log("uw::extSetup | our current location is:", last_location, "(page_url says",page_url,")"); console.log("uw::extSetup | initiating extension"); } var ini = init(); @@ -575,30 +644,95 @@ function extSetup(){ console.log("uw::extSetup | setting up keyboard shortcuts"); loadFromStorage(); - keydownSetup(); - buildUInative(); - updateUICSS(); - if(page_url.indexOf("netflix.com") != -1){ - console.log("uw::extSetup | starting netflix-specific setup steps"); - if(netflix_periodic_timer) - clearInterval(netflix_periodic_timer); - netflix_periodic_timer = setInterval(function(){ periodic(); }, 100); + //extsetup_stage2 gets called in loadFromStorage, on siterules +} + +var extsetup_stage2_state = 0; +var EXTSETUP_STAGE2_REQUIRED_STATE = 3; +function extsetup_stage2(op){ + + if(op == "clear"){ + if(debugmsg) + console.log("uw::extsetup (stage 2) | %cclearing progress (state)","color: #fff"); + extsetup_stage2_state = 0; + return; + } + if(op == "site"){ + if(debugmsg) + console.log("uw::extsetup (stage 2) | %cSITE stage complete","color: #fff"); + extsetup_stage2_state |= 1; + } + if(op == "uiban"){ + if(debugmsg) + console.log("uw::extsetup (stage 2) | %cuiban stage completed. Setting progress","color: #fff"); + extsetup_stage2_state |= 2; } + if(extsetup_stage2_state != EXTSETUP_STAGE2_REQUIRED_STATE){ + if(debugmsg) + console.log("uw::extsetup (stage 2) | %cSome stages are still uncompleted, doing nothing.","color: #fff"); + return; + } + + // SITE se nastavi v funkciji loadFromStorage. Če ni nastavljen, potem nismo na znani/podprti strani + // SITE is set in loadFromStorage. If SITE is still undefined at this point, then we aren't on a known page. + + if(debugmsg){ + console.log("uw::extSetup (stage 2) | --------- ENTERING STAGE 2 OF SETUP -----------"); + } + + if(SITE){ + keydownSetup(); + extsetup_comms(); + buildUInative(); + updateUICSS(); + + if(page_url.indexOf("netflix.com") != -1){ + console.log("uw::extSetup (stage 2) | starting netflix-specific setup steps"); + if(netflix_periodic_timer) + clearInterval(netflix_periodic_timer); + netflix_periodic_timer = setInterval(function(){ periodic(); }, 100); + } + } + else{ + if(debugmsg){ + console.log("uw::extSetup (stage 2) |%c SITE appears to be undefined. This means we aren't on a known/supported site. Ultrawidify shouldn't be loaded.",'background-color: #fa6607; color: #000;',"\n(note: this usually happens once after reloading this extension. If that's the case, chances are everything is fine, since this function runs twice — once with correct page_url and once with wrong one"); + debugger; + } + } if(debugmsg) - console.log("======================================[ setup finished ]======================================"); + console.log("======================================[ setup finished ]======================================\n\n\n\n\n"); } function loadFromStorage(){ if(debugmsg || debugmsg_autoar) console.log("uw::loadFromStorage | loading stuff from storage."); + extsetup_stage2("clear"); + if(usebrowser == "chrome"){ - browser.storage.local.get("ultrawidify_autoar", function(data){ extsetup_autoar(data)}); - browser.storage.local.get("ultrawidify_keybinds", function(data){ extsetup_keybinds(data)}); + browser.storage.local.get("ultrawidify_uiban", function(data){ + extsetup_uiban(data); + extsetup_stage2("uiban"); + }); + browser.storage.local.get("ultrawidify_siterules", function(data){ + extsetup_siterules(data); + extsetup_stage2("site") + }); + browser.storage.local.get("ultrawidify_autoar", function(data){ extsetup_autoar(data) }); + browser.storage.local.get("ultrawidify_keybinds", function(data){ extsetup_keybinds(data) }); } else{ + var ask4uiban = browser.storage.local.get("ultrawidify_uiban").then(function(obj){ + extsetup_uiban(obj); + console.log("uiban finished"); + extsetup_stage2("uiban"); + }); + browser.storage.local.get("ultrawidify_siterules").then(function(obj){ + if(extsetup_siterules(obj)) + extsetup_stage2("site"); + }); browser.storage.local.get("ultrawidify_autoar").then(function(opt){ if(debugmsg || debugmsg_autoar) console.log("uw::loadFromStorage | setting up autoar. opt:",opt) @@ -607,6 +741,7 @@ function loadFromStorage(){ console.log("autoar_enabled:",autoar_enabled); }); var ask4keybinds = browser.storage.local.get("ultrawidify_keybinds").then(extsetup_keybinds); + } } @@ -687,11 +822,62 @@ function keydownSetup(){ }); } -function extsetup_autoar(opt){ +function extsetup_siterules(opt){ + if(debugmsg) + console.log("%cuw::extsetup_siterules | setting up site rules settings","color: #88f;"); + if(usebrowser == "chrome") - obj = opt; + var obj = opt; else - obj = opt[0]; + var obj = opt[0]; + + if(obj.ultrawidify_siterules === undefined){ + if(debugmsg) + console.log("uw::extsetup_siterules | site url rules missing from storage. Setting defaults."); + browser.storage.local.set({ultrawidify_siterules: UW_SITES}); + } + else{ + UW_SITES = obj.ultrawidify_siterules; + } + + if(debugmsg) + console.log("uw::extsetup_siterules | UW_SITES:",UW_SITES,"current site:",SITE); + + var match; + for(key in UW_SITES){ + var el = UW_SITES[key]; + if(debugmsg){ + console.log("uw::extsetup_siterules | key:",key,"; el:",el, location); + } + match = false; + + for (var i = 0; i < el.urlRules.length; i++){ + if(debugmsg) + console.log("uw::extsetup_siterules | page_url:",page_url,"; el.urlRules["+i+"]:",el.urlRules[i],"; last_location.indexOf(el.urlRules["+i+"]):",page_url.indexOf(el.urlRules[i])); + match |= page_url.indexOf(el.urlRules[i]) != -1; + } + if(match){ + if(debugmsg) + console.log("uw::extsetup_siterules | we are on site", key); + + SITE = key; + return true; + } + } + if(debugmsg) + console.log("%cuw::extsetup_siterules | page_url is unknown or incorrect. Stalling extension setup","color:#fa6607","\n(NOTE: In some cases, stalling like that could be result of this extension script running twice)"); + debugging + return false; +} + +function extsetup_autoar(opt){ + if(debugmsg) + console.log("%cuw::extsetup_autoar | setting up autoar settings","color: #88f;"); + + if(usebrowser == "chrome") + var obj = opt; + else + var obj = opt[0]; //Naslov resetiramo v vsakem primeru //We always reset the title @@ -714,11 +900,34 @@ function extsetup_autoar(opt){ last_whatdo = {type: "reset", what_do:"reset"}; } -function extsetup_keybinds(res){ +function extsetup_uiban(opt){ + if(debugmsg) + console.log("%cuw::extsetup_uiban | setting uiban","color: #88f;"); + if(usebrowser == "chrome") - obj = res; + var obj = opt; else - obj = res[0]; + var obj = opt[0]; + + console.log("uiban is here"); + + if(obj.ultrawidify_uiban === undefined){ + if(debugmsg) + console.log("uw::extsetup_uiban | ui ban missing from storage. Setting defaults."); + browser.storage.local.set({ultrawidify_uiban: UW_UI_BANLIST}); + } + else + UW_UI_BANLIST = obj.ultrawidify_uiban; +} + +function extsetup_keybinds(res){ + if(debugmsg) + console.log("%cuw::extsetup_keybinds | setting up autoar settings","color: #88f;"); + + if(usebrowser == "chrome") + var obj = res; + else + var obj = res[0]; if(typeof uw_keybinds_storage_set === "undefined" && (jQuery.isEmptyObject(obj) || jQuery.isEmptyObject(obj.ultrawidify_keybinds)) ){ if(debugmsg) @@ -802,6 +1011,13 @@ function buildUInative(){ for(key in UW_UI_BUTTONS){ el = UW_UI_BUTTONS[key]; + if(UW_UI_BANLIST[SITE][key]){ + if(debugmsg) + console.log("uw::buildUInative | we don't show", key, "on site", SITE, ". Doing nothing."); + + continue; + } + if(!el.native_bar) continue; @@ -831,6 +1047,12 @@ function mksubmenu(el){ submenu.className = "uw_element uw_submenu"; for(var i = 0; i < el.submenu.length; i++){ + if(UW_UI_BANLIST[SITE][el.submenu[i]]){ + if(debugmsg) + console.log("uw::mksubmenu | we don't show", el.submenu[i], "on site", SITE, ". Doing nothing."); + + continue; + } submenu.appendChild(mkmenuitem(el.submenu[i])); } diff --git a/res/css/uw_common.css b/res/css/uw_common.css index 93b8bfa..8aeef2b 100644 --- a/res/css/uw_common.css +++ b/res/css/uw_common.css @@ -12,6 +12,11 @@ position: absolute; background-color: rgba(0,0,0,0.66); } +/* +.uw-setmenu{ + padding-left: 2em !important; + padding-right: 2em !important; +}*/ .uw_submenu_bottom0{ bottom: 0px; @@ -21,6 +26,10 @@ display: relative; } +.uw-setmenu-item{ + padding-right: 2em !important; + padding-left: 2em !important; +} .uw_button{ display: inline-block; diff --git a/res/css/uw_yt.css b/res/css/uw_yt.css index a4e7205..d933f82 100644 --- a/res/css/uw_yt.css +++ b/res/css/uw_yt.css @@ -19,8 +19,6 @@ align-items: center; font-family: "Oxygen"; color: #ffffff !important; - width: 90%; - padding-left: 10%; } .uw-setmenu-item:hover{ background-color: rgba(192,0,0,0.66);