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

We have semi-working version. Keybinds aren't rebindable yet. Settings page needs to be remade to accomodate new options.

Browse Source
This commit is contained in:
Tamius Han 2017-10-17 22:17:51 +02:00
parent f582cbe42d
commit 602c5f3418
19 changed files with 158 additions and 2698 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1 +1,2 @@
ultrawidify.zip
old/

3
js/conf/Debug.js
View File

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

29
js/conf/Keybinds.js
View File

@ -62,12 +62,14 @@ var DEFAULT_KEYBINDINGS = {
var _kbd_setup = function() {
StorageManager.getopt("keybinds");
}
var _kbd_setup_stage2 = function(){
// todo: dont do that
var KEYBINDS = DEFAULT_KEYBINDINGS;
if(Debug.debug || Debug.keyboard)
console.log("uw::keydownSetup | starting keybord shortcut setup");
$(document).keydown(function (event) { // Tukaj ugotovimo, katero tipko smo pritisnili
@ -75,7 +77,7 @@ var _kbd_setup_stage2 = function(){
// Tipke upoštevamo samo, če smo v celozaslonskem načinu oz. če ne pišemo komentarja
// v nasprotnem primeru ne naredimo nič.
// We only take actions if we're in full screen or not writing a comment
if( !(inFullScreen || (
if( !(FullScreenDetect.isFullScreen() || (
(document.activeElement.getAttribute("role") != "textbox") &&
(document.activeElement.getAttribute("type") != "text")
))){
@ -95,7 +97,7 @@ var _kbd_setup_stage2 = function(){
});
sending.then( function(){}, function(){console.log("uw/keydown: there was an error while sending a message")} );
console.log("uw/keydown: test message sent! (probably)");
return;
// return;
}
}
@ -124,23 +126,28 @@ var _kbd_setup_stage2 = function(){
console.log("uw::keydown | keys match. Taking action.");
if(KEYBINDS[i].action == "char"){
changeCSS("char", KEYBINDS[i].targetAR);
Status.arStrat = "fixed";
Status["lastAr"] = KEYBINDS[i].targetAR;
Resizer.setAr(KEYBINDS[i].targetAR);
return;
}
if(KEYBINDS[i].action == "autoar"){
manual_autoar();
Status.arStrat = "auto";
return;
}
changeCSS("anything goes", KEYBINDS[i].action);
// changeCSS("anything goes", KEYBINDS[i].action);
Status.arStrat = KEYBINDS[i].action;
Resizer.legacyAr(KEYBINDS[i].action);
return;
}
}
}
});
document.addEventListener("mozfullscreenchange", function( event ) {
onFullScreenChange();
inFullScreen = ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
inFullScreen ? onFullscreenOn() : onFullscreenOff();
});
// document.addEventListener("mozfullscreenchange", function( event ) {
// onFullScreenChange();
// inFullScreen = ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
// inFullScreen ? onFullscreenOn() : onFullscreenOff();
// });
}
_kbd_setup_stage2();

3
js/conf/Status.js Normal file
View File

@ -0,0 +1,3 @@
var Status = {
arStrat: "auto"
}

5
js/dep/require.js
View File

File diff suppressed because one or more lines are too long

2
js/lib/BrowserDetect.js
View File

@ -8,5 +8,5 @@ if(typeof browser === "undefined"){ // This means we're probably not on Firefox.
}
var BrowserDetect = {
usebrowser = _bd_usebrowser;
usebrowser: _bd_usebrowser
}

6
js/lib/StorageManager.js
View File

@ -15,7 +15,7 @@ var _sm_delopt = function(item){
}
var StorageManager = {
setopt = _sm_setopt,
getopt = _sm_getopt,
delopt = _sm_delopt
setopt: _sm_setopt,
getopt: _sm_getopt,
delopt: _sm_delopt
}

12
js/modules-org/browser_autodetect.js
View File

@ -1,12 +0,0 @@
var browser_autodetect = true;
usebrowser = "firefox";
if(typeof browser === "undefined"){ // This means we're probably not on Firefox.
if(chrome){
browser = chrome;
usebrowser = "chrome";
}
}
else{
usebrowser = "firefox";
}

25
js/modules-org/debuginit.js
View File

@ -1,25 +0,0 @@
var debugmsg = true;
var debugmsg_click = false;
var debugmsg_message = false;
var debugmsg_autoar = false;
var debugmsg_periodic = false;
var debugmsg_ui = true;
var force_conf_reload = true;
if(debugmsg || debugmsg_click || debugmsg_message || debugmsg_autoar){
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)
console.log("Logging all");
if(debugmsg_click)
console.log("Logging debugmsg_click");
if(debugmsg_message)
console.log("Logging debugmsg_message");
if(debugmsg_autoar)
console.log("Logging autoar");
console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
}

15
js/modules-org/libopts.js
View File

@ -1,15 +0,0 @@
// setopt, getopt, delopt. Shrani oz. dobi oz. briše stvari iz skladišča
// setopt, getopt, delopt. They set/get/delete stuff from the storage
function setopt(item){
browser.storage.local.set(item);
}
function getopt(prop, callback){
if(usebrowser == "chrome")
browser.storage.local.get(prop, callback);
else
browser.storage.local.get(prop).then(callback);
}
function delopt(item){
browser.storage.local.remove(item);
}

12
js/modules-org/optinit.js
View File

@ -1,12 +0,0 @@
IGNORE_STORAGE_CHANGES = true;
// getopt( "ultrawidify_uiban", function (opt) {
// if(! opt || opt.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});
// }
// }
IGNORE_STORAGE_CHANGES = false;

287
js/modules-org/player_ui.js
View File

@ -1,287 +0,0 @@
var UICONF;
function uinit(){
if(debugmsg)
console.log("player_ui::uinit | initializing elements from the webpage");
var site = UW_SITES[SITE];
if(debugmsg)
console.log("player_ui::uinit | site data:",site,"\n\n\nsite.player.name:", site.player.name,"\nsite.player.isClass:", site.player.isClass);
SITE_ENABLED = site.enabled;
SITE_TYPE = site.type;
SITE_URL_RULES = site.urlRules;
SITE_PROPS = site;
if(debugmsg)
console.log("player_ui::uinit | are we in iframe?", inIframe(), "does the site have a separate config for iframe?", site.iframe ? true : false );
if(inIframe() && site.iframe){
console.log("player_ui::uinit | we're in iframe.");
PLAYER = site.iframe.isClass ? document.getElementsByClassName(site.iframe.name)[0] : document.getElementById(site.iframe.name);
}
else{
PLAYER = site.player.isClass ? document.getElementsByClassName(site.player.name)[0] : document.getElementById(site.player.name);
}
//
if( site.ui.uiMode == "native")
NATIVE_UI = true;
else
NATIVE_UI = false;
UICONF = site.ui.uiconf;
console.log("player_ui::uinit |\nsite.ui.uiMode: ", site.ui.uiMode,"\nsite.ui.uiMode.uiconf:",site.ui.uiconf,"\nUICONF: ", UICONF);
IMDB_AUTOAR_ALLOWED = site.autoar_imdb.enabled;
if(debugmsg)
console.log("player_ui::uinit | initializing elements from the webpage");
}
function buildUInative(){
/** This function builds UI in the native bar.
*
*/
if(debugmsg || debugmsg_ui)
console.log("player_ui::buildUInative | starting ...");
if(ui_anchor){
console.log("player_ui::buildUInative | anchor found, doing nothing");
return;
}
if(!ui_anchor)
mkanchor();
if(UW_UI_MODE == "none"){
if(debugmsg || debugmsg_ui)
console.log("player_ui::buildUInative | usersettings say UI shouldn't be displayed. UI will not be built.");
return;
}
if(UW_UI_MODE == "compact"){
if(debugmsg || debugmsg_ui)
console.log("player_ui::buildUInative | usersettings say UI should be compact if possible. Checking if possible.");
if(UW_UI_BANLIST[SITE].settings !== undefined && UW_UI_BANLIST[SITE].settings != "noban"){
if(debugmsg || debugmsg_ui)
console.log("player_ui::buildUInative | compact ui is not possible on this site. Reverting to full.");
UW_UI_MODE == "all";
}
}
if(debugmsg || debugmsg_ui )
console.log("player_ui::buildUInative | starting to build UI");
var el;
if(UW_UI_MODE == "compact"){ // no need for loop if all we add is the 'settings' buton
el = UW_UI_BUTTONS.settings;
uiel = mkbutton(el);
uiel.appendChild(mksubmenu(el));
ui_anchor.appendChild(uiel);
}
else{
for(key in UW_UI_BUTTONS){
el = UW_UI_BUTTONS[key];
if(UW_UI_BANLIST[SITE][key]){
if(debugmsg)
console.log("player_ui::buildUInative | we don't show", key, "on site", SITE, ". Doing nothing.");
continue;
}
if(!el.native_bar)
continue;
var uiel; //ui element
if(el.button){
uiel = mkbutton(el);
}
if(!uiel)
continue;
ui_anchor.appendChild(uiel);
if(el.has_submenu){
uiel.appendChild(mksubmenu(el));
}
}
}
if(debugmsg || debugmsg_ui )
console.log("player_ui::buildUInative | ui finished");
}
function mksubmenu(el){
var submenu = document.createElement("div");
submenu.id = el.submenu_id;
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("player_ui::mksubmenu | we don't show", el.submenu[i], "on site", SITE, ". Doing nothing.");
continue;
}
submenu.appendChild(mkmenuitem(el.submenu[i]));
}
return submenu;
}
function mkmenuitem(key){
var el = UW_UI_BUTTONS[key];
var item = document.createElement("div");
item.textContent = el.text;
item.className = "uw-setmenu-item uw_element";
item.onclick = function(event){ event.stopPropagation(); el.onclick(); hideAllMenus(); };
if(el.has_submenu){
item.appendChild(mksubmenu(el));
if(debugmsg){
console.log("player_ui::mkmenuitem | we are:", el, "; do we have parent?",el.parent,"parent id:",UW_UI_BUTTONS[el.parent].submenu_id, UW_UI_BUTTONS[el.parent].submenu_id === "uw_settings_menu");
}
if(el.parent)
$(item).on("mouseenter", function(){
// We determine where the submenu goes - to the left or to the right. showMenu handles position,
// this function gets sizes of all objects
var div = document.getElementById(UW_UI_BUTTONS[el.parent].submenu_id);
var supmenusize = div.getBoundingClientRect();
div = document.getElementById(el.submenu_id);
var submenusize = div.getBoundingClientRect();
var playersize = player.getBoundingClientRect();
if(debugmsg)
console.log("player_ui::mouseenter | parent menu size:",supmenusize,"submenu size:",submenusize,"player size:",playersize);
showMenu(el.submenu_id, {parent:supmenusize, submenu:submenusize, player:playersize});
});
else
$(item).on("mouseenter", function(){showMenu(el.submenu_id)});
$(item).on("mouseleave", function(){hideMenu(el.submenu_id)});
}
return item;
}
function mkanchor(){
if (debugmsg || debugmsg_ui)
console.log("player_ui::mkanchor | starting.\nNATIVE_UI: ",NATIVE_UI);
if( NATIVE_UI !== true ){
if(debugmsg || debugmsg_ui)
console.log("player_ui::mkanchor | we don't use native UI, calling mkanchor_notify(common=true) to take over");
mkanchor_notify(true);
return;
}
else{
if(debugmsg || debugmsg_ui)
console.log("player_ui::mkanchor | will make anchor for notifications, calling mkanchor_notify(common=false)");
mkanchor_notify(false);
}
if (debugmsg || debugmsg_ui)
console.log("player_ui::mkanchor | anchor for notifications created.");
ui_anchor = document.createElement("div");
ui_anchor.className = "uw_ui_anchor";
ui_anchor.id = "uw_ui_anchor";
if(UICONF.uiParent.insertStrat == "prepend"){
$(document.getElementsByClassName(UICONF.uiParent.name)[0]).prepend(ui_anchor);
}
else{
document.getElementsByClassName(UICONF.uiParent.name)[0].appendChild(ui_anchor);
}
if (debugmsg || debugmsg_ui)
console.log("player_ui::mkanchor | anchor created.");
}
function mkanchor_notify(common){
if (debugmsg || debugmsg_ui)
console.log("player_ui::mkanchor_common | starting.\n\ncommon anchor: ",common,"\nUICONF: ",UICONF,"\nUICONF.uiOffset: ",UICONF.uiOffset);
if( document.getElementById("uw_common_anchor") )
return;
var anchor = document.createElement("div");
anchor.className = "uw_common_anchor";
anchor.id = "uw_common_anchor";
// Izračunamo zamik zaradi drugih elementov na zaslonu
// Let's calculate offset due to other elements on the screen
var offsetTop = "0px";
if ( UICONF.uiOffset.offsetType == "element_id" || UICONF.uiOffset.offsetType == "element_class"){
var blockingElement;
if( UICONF.uiOffset.offsetType == "element_id" )
blockingElement = document.getElementById(UICONF.uiOffset.offsetBy);
else
blockingElement = document.getElementsByClassName(UICONF.uiOffset.offsetBy)[0];
offsetTop = blockingElement.offsetTop + blockingElement.offsetHeight + "px";
}
else if( UICONF.uiOffset.offsetType == "css" )
offsetTop = UICONF.uiOffset.offsetBy;
if(debugmsg || debugmsg_ui)
console.log("player_ui::mkanchor_notify | notification box will be offset by this much:", offsetTop);
var padding = document.createElement("div");
padding.style.width = "100%";
padding.style.height = offsetTop;
anchor.appendChild(padding);
var notification_box = document.createElement("div");
notification_box.style.width = "50%";
notification_box.style.height = "25%";
notification_box.textContent = "test box";
if(debugmsg)
console.log("player_ui::mkanchor_notify | this is our notification box: ", notification_box);
anchor.appendChild(notification_box);
PLAYER.appendChild(anchor);
}
function mkbutton(el){
if(debugmsg | debugmsg_ui)
console.log("player_ui::mkbutton | trying to make a button", el.text);
var button = document.createElement("div");
button.style.backgroundImage = 'url(' + resourceToUrl(el.icon) + ')';
button.className += " uw_button uw_element";
button.onclick = function(event) {event.stopPropagation(); el.onclick() };
if(debugmsg | debugmsg_ui)
console.log("player_ui::mkbutton | button completed");
return button;
}

1
js/modules-org/uiutils.js
View File

@ -1 +0,0 @@

6
js/modules/ArDetect.js
View File

@ -42,7 +42,7 @@ var _arSetup = function(){
//todo: change those values to push canvas off-screen
if(Debug.debug){
if(Debug.showArDetectCanvas){
canvas.style.left = "200px";
canvas.style.top = "780px";
canvas.style.zIndex = 10000;
@ -136,9 +136,9 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w){
var _ard_vdraw = function (vid, context, w, h, conf){
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 = 333; // how long is the pause between two executions — 33ms ~ 30fps
var msec_pause = 33; // how long is the pause between two executions — 33ms ~ 30fps
if(vid === undefined || vid.paused || vid.ended){
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);
return false;

169
js/modules/Resizer.js
View File

@ -258,76 +258,106 @@ var setVideoAr = function(aspect_ratio, video, player){
// Ta funkcija ugotovi, kako se kvadrat s podanim razmerjem stranic najbolj prilega ekranu
// Predpostavimo, da so ćrne obrobe vselej zgoraj in spodaj, nikoli levo in desno.
//
// This function determines how a rectangle with a given aspect ratio best fits the monitor
// We assume letterbox is always letterbox, never pillarbox.
var _res_setBestFit = function(ar){
if(debugmsg || debugmsg_autoar)
console.log("uw::setBestFit | got ar:",ar);
// // Ta funkcija ugotovi, kako se kvadrat s podanim razmerjem stranic najbolj prilega ekranu
// // Predpostavimo, da so ćrne obrobe vselej zgoraj in spodaj, nikoli levo in desno.
// //
// // This function determines how a rectangle with a given aspect ratio best fits the monitor
// // We assume letterbox is always letterbox, never pillarbox.
// var _res_setBestFit = function(ar){
// if(debugmsg || debugmsg_autoar)
// console.log("uw::setBestFit | got ar:",ar);
//
// var player = {width: PLAYER.clientWidth, height: PLAYER.clientHeight};
// var player_ar = player.width / player.height;
//
// var evideo = $("video")[0];
// var video = {width: evideo.videoWidth, height: evideo.videoHeight};
// var video_ar = video.width / video.height;
//
// // Ob predpostavki, da je argument 'ar' pravilen, naračunamo dimenzije videa glede na širino in višino predvajalnika
// // Kot rezultat laho dobimo dve možnosti:
// // A: naračunana širina je širša, kot naš zaslon —> za računanje uporabimo širino (letterbox zgoraj/spodaj,
// // levo/desno pa ne)
// // B: naračunana širina je ožja, kot naš zaslon —> za računanje uporabimo višino (letterbox levo/desno,
// // zgoraj/spodaj pa ne)
//
// if(debugmsg || debugmsg_autoar)
// console.log("uw::setBestFit | here's all we got. ar:",ar,"player:",player,"video:",video);
//
// var tru_width = player.height * ar;
// var tru_height = player.width / ar;
//
// var nv = {w: "", h: "", top: "", left: ""};
//
// if(ar >= video_ar){
// if(ar >= player_ar){
// if(debugmsg || debugmsg_autoar)
// console.log("uw::setBestFit | aspect ratio is wider than player ar.")
// nv.h = player.width / video_ar;
// nv.w = nv.h * ar;
// }
// else{
// if(debugmsg || debugmsg_autoar)
// console.log("uw::setBestFit | aspect ratio is narrower than player ar.", (player.height * ar), nv)
// nv.w = player.height * ar;
// nv.h = nv.w / video_ar;
// }
// }
// else{
// if(ar >= player_ar){
// if(debugmsg || debugmsg_autoar)
// console.log("uw::setBestFit | aspect ratio is wider than player ar.")
// nv.h = player.width / ar;
// nv.w = nv.h * video_ar;
// }
// else{
// if(debugmsg || debugmsg_autoar)
// console.log("uw::setBestFit | aspect ratio is narrower than player ar.", (player.height * ar), nv)
// nv.w = player.height * video_ar;
// nv.h = nv.w / ar;
// }
// }
// if(debugmsg || debugmsg_autoar)
// console.log("uw::setBestFit | new video width and height processed. nv so far:", nv)
//
// nv.top = (player.height - nv.h)/2;
// nv.left = (player.width - nv.w)/2;
//
// if(debugmsg || debugmsg_autoar)
// console.log("uw::setBestFit | tru width:",tru_width,"(player width:",player.width,"); new video size:",nv);
//
// _res_applyCss(nv);
// console.log("uw::setBestFit | css applied");
// }
// Skrbi za "stare" možnosti, kot na primer "na širino zaslona", "na višino zaslona" in "ponastavi". Približevanje opuščeno.
// handles "legacy" options, such as 'fit to widht', 'fit to height' and 'reset'. No zoom tho
var _res_legacyAr = function(action){
var vid = $("video")[0];
var ar = screen.width / screen.height;
var fileAr = vid.videoWidth / vid.videoHeight;
var player = {width: PLAYER.clientWidth, height: PLAYER.clientHeight};
var player_ar = player.width / player.height;
var evideo = $("video")[0];
var video = {width: evideo.videoWidth, height: evideo.videoHeight};
var video_ar = video.width / video.height;
// Ob predpostavki, da je argument 'ar' pravilen, naračunamo dimenzije videa glede na širino in višino predvajalnika
// Kot rezultat laho dobimo dve možnosti:
// A: naračunana širina je širša, kot naš zaslon —> za računanje uporabimo širino (letterbox zgoraj/spodaj,
// levo/desno pa ne)
// B: naračunana širina je ožja, kot naš zaslon —> za računanje uporabimo višino (letterbox levo/desno,
// zgoraj/spodaj pa ne)
if(debugmsg || debugmsg_autoar)
console.log("uw::setBestFit | here's all we got. ar:",ar,"player:",player,"video:",video);
var tru_width = player.height * ar;
var tru_height = player.width / ar;
var nv = {w: "", h: "", top: "", left: ""};
if(ar >= video_ar){
if(ar >= player_ar){
if(debugmsg || debugmsg_autoar)
console.log("uw::setBestFit | aspect ratio is wider than player ar.")
nv.h = player.width / video_ar;
nv.w = nv.h * ar;
}
else{
if(debugmsg || debugmsg_autoar)
console.log("uw::setBestFit | aspect ratio is narrower than player ar.", (player.height * ar), nv)
nv.w = player.height * ar;
nv.h = nv.w / video_ar;
}
if(action == "fitw"){
_res_setAr_kbd( ar > fileAr ? ar : fileAr);
return;
}
else{
if(ar >= player_ar){
if(debugmsg || debugmsg_autoar)
console.log("uw::setBestFit | aspect ratio is wider than player ar.")
nv.h = player.width / ar;
nv.w = nv.h * video_ar;
}
else{
if(debugmsg || debugmsg_autoar)
console.log("uw::setBestFit | aspect ratio is narrower than player ar.", (player.height * ar), nv)
nv.w = player.height * video_ar;
nv.h = nv.w / ar;
}
if(action == "fith"){
_res_setAr_kbd( ar < fileAr ? ar : fileAr);
return;
}
if(action == "reset"){
_res_setAr_kbd(fileAr);
return;
}
if(debugmsg || debugmsg_autoar)
console.log("uw::setBestFit | new video width and height processed. nv so far:", nv)
nv.top = (player.height - nv.h)/2;
nv.left = (player.width - nv.w)/2;
if(debugmsg || debugmsg_autoar)
console.log("uw::setBestFit | tru width:",tru_width,"(player width:",player.width,"); new video size:",nv);
_res_applyCss(nv);
console.log("uw::setBestFit | css applied");
}
var _res_setAr_kbd = function(ar){
if(FullScreenDetect.isFullScreen())
_res_setAr(ar, {width: screen.width, height: screen.height} );
// else
// _res_setAr_nonfs(ar);
// TODO: check if site supports non-fs ar
}
var _res_setAr = function(ar, playerDimensions){
@ -341,6 +371,9 @@ var _res_setAr = function(ar, playerDimensions){
// spremeniti velikost predvajalnika
//
if(Debug.debug)
console.log("[Resizer::_res_setArFs] ar is " ,ar, ", playerDimensions are ", playerDimensions);
var videoDimensions = {
width: 0,
height: 0
@ -595,6 +628,8 @@ function _res_applyCss(dimensions){
}
var Resizer = {
setAr: _res_setAr_kbd,
setAr_fs: _res_setAr,
setAr_nonfs: _res_setAr_nonfs
setAr_nonfs: _res_setAr_nonfs,
legacyAr: _res_legacyAr
}

744
js/settings.js
View File

@ -1,744 +0,0 @@
#location res
#include lib/libopts.js
#include lib/uiutils.js
#include conf/sitesconf.js
var browser_autodetect = true;
var usebrowser = "chrome";
var debugmsg = true;
if(browser_autodetect){
if(typeof browser === "undefined"){
if(chrome){
browser = chrome;
usebrowser = "chrome";
}
}
else
usebrowser = "firefox";
}
else{
if(usebrowser == "chrome")
browser = chrome;
}
var UW_SITES = {};
function showAbout(){
clearPage();
document.getElementById("about").classList.remove("hide");
document.getElementById("tab_about").classList.add("tab-selected");
}
function showShortcuts(){
clearPage();
document.getElementById("uw_shortcuts").classList.remove("hide");
document.getElementById("tab_shortcuts").classList.add("tab-selected");
}
function showGeneralSettings(){
clearPage();
document.getElementById("general_settings").classList.remove("hide");
document.getElementById("tab_general_settings").classList.add("tab-selected");
}
function showSites(){
clearPage();
document.getElementById("uw_sites").classList.remove("hide");
document.getElementById("tab_sites").classList.add("tab-selected");
}
function clearPage(){
// Hide you sections
document.getElementById("uw_shortcuts").classList.add("hide");
document.getElementById("about").classList.add("hide");
document.getElementById("general_settings").classList.add("hide");
document.getElementById("uw_sites").classList.add("hide");
// Hide you tabs
document.getElementById("tab_shortcuts").classList.remove("tab-selected");
document.getElementById("tab_about").classList.remove("tab-selected");
document.getElementById("tab_general_settings").classList.remove("tab-selected");
document.getElementById("tab_sites").classList.remove("tab-selected");
}
function saveopts(){
var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43", "autoar"];
var new_keybinds = {};
// Preberemo naš obrazec in iz njega naredimo nov objekt z bližnjicami.
// Let's read our form and make a new object with keybinds.
for(var i = 0; i < actions.length; i++){
var action = actions[i];
var targetAR = "";
if(action == "ar219"){
action = "char";
targetAR = (21/9);
}
if(action == "ar169"){
action = "char";
targetAR = (16/9);
}
if(action == "ar1610"){
action = "char";
targetAR = (16/10);
}
if(action == "ar43"){
action = "char";
targetAR = (4/3);
}
if(targetAR != ""){
var keybind = {
action: action,
targetAR: targetAR,
key: document.querySelector("#" + actions[i] + "_letter").value.toLowerCase().replace(/[^a-z0-9]/,""),
modifiers: []
}
}
else{
var keybind = {
action: action,
key: document.querySelector("#" + actions[i] + "_letter").value.toLowerCase().replace(/[^a-z0-9]/,""),
modifiers: []
}
}
if(document.querySelector("#" + actions[i] + "_ctrl").checked)
keybind.modifiers.push("ctrl");
if(document.querySelector("#" + actions[i] + "_alt").checked)
keybind.modifiers.push("alt");
if(document.querySelector("#" + actions[i] + "_shift").checked)
keybind.modifiers.push("shift");
new_keybinds[i] = keybind;
}
// Preveriti moramo, da nismo dvema možnostima dodali isto bližnjico.
// We need to check if all keybinds are unique.
var fail = false;
for(var i = 0; i < actions.length; i++)
document.querySelector("#" + actions[i] + "_letter").classList.remove("dup_keybinds");
for(var i = 0; i < actions.length; i++){
if(new_keybinds[i].key == "")
continue;
for(var j = i + 1; j < actions.length; j++){
if(new_keybinds[i].key == new_keybinds[j].key){
if(compareModifiers(new_keybinds[i].modifiers, new_keybinds[j].modifiers)){
fail = true;
document.querySelector("#" + actions[i] + "_letter").classList.add("dup_keybinds");
document.querySelector("#" + actions[j] + "_letter").classList.add("dup_keybinds");
}
}
}
}
if (!fail){
browser.storage.local.set({ultrawidify_keybinds:new_keybinds});
}
}
function saveAutoar(){
setopt({ultrawidify_autoar: document.querySelector("#enable_autoar").checked});
}
function saveUI(){
var show_ui = document.querySelector("#enable_ui");
var ui_compact = document.querySelector("#enable_ui_compact");
var optionLine = document.getElementById("compact_ui_suboption");
if(show_ui.checked){
ui_compact.disabled = false;
optionLine.classList.remove("hide");
setopt({ultrawidify_ui: ui_compact.checked ? "compact" : "all" });
}
else{
ui_compact.disabled = true;
optionLine.classList.add("hide");
setopt({ultrawidify_ui: "none"});
}
}
function compareModifiers(a,b){
//NOTE: to je precej slab in neprenoslijv način primerjanja dveh tabel, ampak za naš primer deluje dovolj
// dobro, saj 'ctrl' vedno pride pred 'alt' in 'alt' vedno pride pred 'shift' (če se sploh pojavijo).
//NOTE: this is bad and totally unfoolproof practice. In our example comparing arrays the way we do works
// because values ALWAYS appear in the same order: 'ctrl' always appears before 'alt' (or it doesn't
// appear at all). 'alt' always appears before 'shift' (or it doesn't appear at all).
if(a.length != b.length)
return false;
var match = true;
for(var i = 0; i < a.length; i++)
match &= a[i] == b[i]
return match;
}
function printerr(err){
console.log(err);
}
function gotopts(opts){
if(!opts.ultrawidify_keybinds){
console.log("ultrawidify keybinds are undefined. the fuck?",opts);
return;
}
var KEYBINDS = Object.keys(opts.ultrawidify_keybinds).map(function (key) { return opts.ultrawidify_keybinds[key];});
// google chrome is really the untermensch browse // google chrome is really the untermensch browserr
var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43", "autoar"];
for(var i = 0; i < actions.length; i++){
document.querySelector("#" + actions[i] + "_letter").classList.remove("dup_keybinds");
document.querySelector("#" + actions[i] + "_letter").value = KEYBINDS[i].key;
for(var j = 0; j < KEYBINDS[i].modifiers.length; j++){
if(KEYBINDS[i].modifiers[j] == "ctrl")
document.querySelector("#" + actions[i] + "_ctrl").checked = true;
if(KEYBINDS[i].modifiers[j] == "alt")
document.querySelector("#" + actions[i] + "_alt").checked = true;
if(KEYBINDS[i].modifiers[j] == "shift")
document.querySelector("#" + actions[i] + "_shift").checked = true;
}
}
}
function gotar(opts){
}
function gotui(opts){
var show_ui = document.querySelector("#enable_ui");
var ui_compact = document.querySelector("#enable_ui_compact");
var optionLine = document.getElementById("compact_ui_suboption");
if(opts.ultrawidify_ui == "all"){
show_ui.checked = true;
ui_compact.checked = false;
optionLine.classList.remove("hide");
}
else if(opts.ultrawidify_ui == "compact"){
show_ui.checked = true;
ui_compact.checked = true;
optionLine.classList.remove("hide");
}
else if(opts.ultrawidify_ui == "none"){
show_ui.checked = false;
ui_compact.checked = false;
optionLine.classList.add("hide");
}
}
function gotsites(opts){
var list = document.getElementById("uw_sites_list");
if(list)
list.remove();
var anchor = document.getElementById("uw_sites_body");
// at the top of the list, there is this option to reset site config
resetLink = document.createElement("a");
resetLink.onclick = function(){ delopt("ultrawidify_siterules"); setopt({"ultrawidify_siterules":UW_SITES}); };
resetLink.textContent = "Reset site options to default";
anchor.appendChild(resetLink);
list = document.createElement("div");
list.id = "uw_sites_list";
list.className = "uw_sites";
anchor.appendChild(list);
uw_sites = opts.ultrawidify_siterules;
UW_SITES = uw_sites;
if(debugmsg)
console.log("uw settings::gotopts | site opts:",opts);
for (type in {"official":1,"non-official":1,"custom":1, "add new site":1} ) { // unparalleled laziness!
if(debugmsg){
console.log("uw settings::gotopts | adding sites of type" , type);
}
var head = document.createElement("div");
head.className = "sites_header";
head.textContent = type.charAt(0).toUpperCase() + type.slice(1);
var category_desc = document.createElement("div");
if(type == "official"){
category_desc.innerHTML = "These sites are officially supported by the extension developer. These sites should always work. <small>(Pro tip: if you don't want extension to run on some of the following sites, uncheck the checkbox for that site)</small>";
}
else if(type == "non-official"){
category_desc.textContent = "Sites in this category have been contribued by third parties. These sites will probably work, but the developer couldn't test whether they work or not.";
}
else if(type == "custom"){
category_desc.textContent = "In this section, you can define rules for sites that aren't supported either officially or non-officially. See [todo: link] contributing for details. If you define a custom site, please consider sharing configuration on github (see contributing for details).";
}
else if(type == "add new site"){
category_desc.textContent = "Add a custom site by filling the form below.";
}
list.append(head);
list.append(category_desc);
var category_counter = 0;
for (site in uw_sites) {
if(debugmsg)
console.log("we're at site %s of type %s. We're %s this site.",site, uw_sites[site].type, uw_sites[site].type == type ? "processing" : "ignoring");
if(uw_sites[site].type == type){
var entry = document.createElement("div");
var header = document.createElement("div");
header.id = site + "_display";
header.className = "uw_options_line site_details";
var siteTitle = document.createElement("div");
siteTitle.className = "site_name";
{
var sitecb = mkcb(site, uw_sites[site].enabled, "siteEnabled", true);
var editTitle = mkebox(site, site, "title");
editTitle.className = "site_title_ebox";
siteTitle.append(sitecb);
siteTitle.append(editTitle);
var editBtn = document.createElement("div");
editBtn.textContent = "« edit »";
editBtn.className = "inline_button";
editBtn.id = site + "_edit_button";
editBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_edit_button", ""); enableEditing(site)});
var saveBtn = document.createElement("div");
saveBtn.textContent = "« save »";
saveBtn.className = "inline_button hide";
saveBtn.id = site + "_save_button";
saveBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_save_button", ""); saveEdited(site)});
var cancelBtn = document.createElement("div");
cancelBtn.textContent = "« cancel »";
cancelBtn.className = "inline_button hide";
cancelBtn.id = site + "_cancel_button";
cancelBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_cancel_button", ""); cancelEditing(site)});
siteTitle.append(editBtn);
siteTitle.append(saveBtn);
siteTitle.append(cancelBtn);
}
header.appendChild(siteTitle);
entry.appendChild(header);
var body = document.createElement("div");
var jsonForm = document.createElement("textarea");
jsonForm.cols = 64;
jsonForm.rows = 32;
jsonForm.value = JSON.stringify(uw_sites[site], null, 2);
body.appendChild(jsonForm);
// body.classNamež
entry.appendChild(body);
list.append(entry);
category_counter++;
}
}
// for (site in uw_sites){
// if(debugmsg)
// console.log("we're at site %s of type %s. We're %s this site.",site, uw_sites[site].type, uw_sites[site].type == type ? "processing" : "ignoring");
//
// if(uw_sites[site].type == type){
//
// var entry = document.createElement("div");
// var displayedInfo = document.createElement("div");
// displayedInfo.id = site + "_display";
// displayedInfo.className = "uw_options_line site_details";
//
// var siteTitle = document.createElement("div");
// siteTitle.className = "site_name";
//
// {
// var sitecb = mkcb(site, uw_sites[site].enabled, "siteEnabled", true);
// var editTitle = mkebox(site, site, "title");
// editTitle.className = "site_title_ebox";
// siteTitle.append(sitecb);
// siteTitle.append(editTitle);
//
// var editBtn = document.createElement("div");
// editBtn.textContent = "« edit »";
// editBtn.className = "inline_button";
// editBtn.id = site + "_edit_button";
// editBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_edit_button", ""); enableEditing(site)});
//
// var saveBtn = document.createElement("div");
// saveBtn.textContent = "« save »";
// saveBtn.className = "inline_button hide";
// saveBtn.id = site + "_save_button";
// saveBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_save_button", ""); saveEdited(site)});
//
// var cancelBtn = document.createElement("div");
// cancelBtn.textContent = "« cancel »";
// cancelBtn.className = "inline_button hide";
// cancelBtn.id = site + "_cancel_button";
// cancelBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_cancel_button", ""); cancelEditing(site)});
//
// siteTitle.append(editBtn);
// siteTitle.append(saveBtn);
// siteTitle.append(cancelBtn);
// }
//
// var siteDetails = document.createElement("div");
// siteDetails.id = site + "_conf_details";
// siteDetails.classList = "hide";
//
// var urlRules = document.createElement("div");
// {
// var urlRulesLabel = document.createElement("span");
// urlRulesLabel.textContent = "URL rule: ";
//
// urlRulesEbox = mkebox(site, uw_sites[site].urlRules[0], "url_rules");
//
// urlRules.append(urlRulesLabel);
// urlRules.append(urlRulesEbox);
// }
//
// var playerElement = document.createElement("div");
//
// {
// var playerName = document.createElement("div");
//
// var playerNameLabel = document.createElement("span");
//
// playerNameLabel.textContent = "id of the player container:";
// var playerNameEbox = mkebox(site, uw_sites[site].player.name, "player_name");
//
// playerName.append(playerNameLabel);
// playerName.append(playerNameEbox);
//
// var playerClass = document.createElement("div");
// var pcb = document.createElement("input");
// pcb.className = site + "_ebox";
// pcb.type = "checkbox";
// pcb.name = site + "_pccb_name";
// pcb.id = site + "_pccb_id";
// pcb.checked = uw_sites[site].player.isClass;
// pcb.disabled = true;
//
// var pcblabel = document.createElement("span");
// pcblabel.textContent = " Name of the player container is a class";
//
// playerClass.append(pcb);
// playerClass.append(pcblabel);
// playerElement.append(playerName);
// playerElement.append(playerClass);
// }
//
// var iframe_playerName = document.createElement("div");
// var ipn_label = document.createElement("span");
// ipn_label.textContent = "id of the player container when in an iframe:";
// ipn_ebox = mkebox(site, uw_sites[site].iframe ? uw_sites[site].iframe.name : "", "iframe_name");
// iframe_playerName.append(ipn_label);
// iframe_playerName.append(ipn_ebox);
//
// var iframe_playerClass = document.createElement("div");
// var ipc_label = document.createElement("span");
// ipc_label.textContent = " Name of the player container is a class";
// var ipc_cb = mkcb(site, uw_sites[site].iframe ? uw_sites[site].iframe.isClass : false, "iframe_class");
// iframe_playerClass.append(ipc_cb);
// iframe_playerClass.append(ipc_label);
//
//
// var sampleButton = document.createElement("div");
// var sbc = document.createElement("div");
// var sbi = document.createElement("div");
// var sbo = document.createElement("div");
// var sbc_label = document.createElement("span");
// var sbi_label = document.createElement("span");
// var sbo_label = document.createElement("span");
// sbc_label.textContent = "Sample button class:";
// sbi_label.textContent = "Sample button index:";
// sbo_label.textContent = "Use height for UI scaling";
// var sampleButtonClass = mkebox(site, uw_sites[site].sampleButton.class, "sample_button_class");
// var sampleButtonIndex = mkebox(site, uw_sites[site].sampleButton.index, "sample_button_index");
// var buttonSizeBase = mkcb(site, uw_sites[site].sampleButton.buttonSizeBase == "y", "sample_button_size_base");
//
// sbc.append(sbc_label);
// sbc.append(sampleButtonClass);
// sampleButton.append(sbc);
//
// sbi.append(sbi_label);
// sbi.append(sampleButtonIndex);
// sampleButton.append(sbi);
//
// sbo.append(buttonSizeBase);
// sbo.append(sbo_label);
// sampleButton.append(sbo);
//
// var imdbar = document.createElement("div");
// var imdbar_cb = mkcb(site, uw_sites[site].autoar_imdb, "imdbar");
// var imdbar_label = document.createElement("span");
// imdbar_label.textContent = " This site supports automatic aspect ratio detection";
// imdbar.append(imdbar_cb);
// imdbar.append(imdbar_label);
//
// var imdbar_title = document.createElement("div");
// var it_label = document.createElement("span");
// it_label.textContent = "id of the element containing video title:";
// it_ebox = mkebox(site, uw_sites[site].iframe ? uw_sites[site].iframe.name : "", "imdbar_title");
// imdbar_title.append(it_label);
// imdbar_title.append(it_ebox);
//
// var imdbar_class = document.createElement("div");
// var ic_label = document.createElement("span");
// ic_label.textContent = " Name of the title container is a class";
// var ic_cb = mkcb(site, uw_sites[site].iframe ? uw_sites[site].iframe.isClass : false, "imdbar_class");
// imdbar_class.append(ic_cb);
// imdbar_class.append(ic_label);
//
//
//
//
//
// var optionspad = document.createElement("div");
// optionspad.textContent = "-------------";
//
//
// siteDetails.append(urlRules);
// siteDetails.append(playerElement);
// siteDetails.append(optionspad);
// siteDetails.append(iframe_playerName);
// siteDetails.append(iframe_playerClass);
// siteDetails.append(optionspad);
//
// siteDetails.append(sampleButton);
//
// siteDetails.append(imdbar);
// siteDetails.append(imdbar_title);
// siteDetails.append(imdbar_class);
// // siteDetails.append(optionspad);
//
//
// displayedInfo.append(siteTitle);
// displayedInfo.append(siteDetails);
//
// entry.append(displayedInfo);
//
// list.append(entry);
//
// category_counter++;
//
// if(site == "dummy" && type == "add new site"){
// if(debugmsg)
// console.log("uw settings::gotsites | we are adding dummy site");
// enableEditing("dummy");
// document.getElementById("dummy_title_ebox").disabled = false;
// }
// }
// }
if(! category_counter){
var noEntriesMsg = document.createElement("div");
noEntriesMsg.textContent = "There's no entries in this category yet";
noEntriesMsg.classList = "red";
list.append(noEntriesMsg);
}
}
}
function mkebox(site, value, id){
var ebox = document.createElement("input");
ebox.className = "site_details details_ebox " + site + "_ebox",
ebox.id = site + "_" + id + "_ebox";
ebox.type = "text";
ebox.value = value;
ebox.disabled = true;
return ebox;
}
function mkcb(site, checked, id, forceEnable){
var cb = document.createElement("input");
cb.type = "checkbox";
cb.name = site + "_cb_name";
cb.id = site + "_" + id + "_cb";
cb.checked = checked;
if(!forceEnable){
cb.disabled = true;
cb.className = site + "_ebox";
}
return cb;
}
function enableEditing(site){
showSiteDetails(site);
if(debugmsg)
console.log("uw settings :: enableEditing | enabling editing for",site);
var formElements = document.getElementsByClassName(site + "_ebox");
if(!formElements)
return;
if(debugmsg)
console.log("form elements: ", formElements);
for(var i = 0; i < formElements.length; i++){
formElements[i].disabled = false;
}
var editButton = document.getElementById(site + "_edit_button");
if( editButton )
editButton.classList.add("hide");
else
return;
try{
document.getElementById(site + "_save_button").classList.remove("hide");
document.getElementById(site + "_cancel_button").classList.remove("hide");
} catch (e){};
}
function disableEditing(site){
var formElements = document.getElementsByClassName(site + "_ebox");
if(!formElements)
return;
for(var i = 0; i < formElements.length; i++){
formElements[i].disabled = true;
}
var editButton = document.getElementById(site + "_edit_button");
if( editButton )
editButton.classList.remove("hide");
else
return;
try{
document.getElementById(site + "_save_button").classList.add("hide");
document.getElementById(site + "_cancel_button").classList.add("hide");
} catch (e){};
}
function cancelEditing(site){
if(site != "dummy"){
disableEditing(site);
hideSiteDetails(site);
}
setSiteOpts(site, UW_SITES[site]);
}
function saveEdited(site){
console.log("uw settings::saveEdited | this is our site:",site,"is this 'dummy'?", site == "dummy");
if(site == "dummy"){
var newsite = getSiteOpts(site);
newsite.type = "custom";
newsite.enabled = true;
UW_SITES[document.getElementById("dummy_title_ebox").value] = newsite;
}
else{
UW_SITES[site] = getSiteOpts(site);
// disableEditing(site);
// hideSiteDetails(site);
}
setopt({ultrawidify_siterules: UW_SITES});
if(site == "dummy")
gotsites({ultrawidify_siterules: UW_SITES});
}
function showSiteDetails(site){
try{
document.getElementById(site + "_conf_details").classList.remove("hide");
}catch(me_outside_how_about_that){}
}
function hideSiteDetails(site){
try{
document.getElementById(site + "_conf_details").classList.add("hide");
}catch(me_outside_how_about_that){}
}
function getSiteOpts(site){
var newOptions = {};
newOptions.urlRules = [ document.getElementById(site + "_url_rules_ebox").value ];
newOptions.player = {};
newOptions.player.name = document.getElementById(site + "_player_name_ebox").value;
newOptions.player.isClass = document.getElementById(site + "_pccb_id").checked;
newOptions.iframe = {};
newOptions.iframe.name = document.getElementById(site + "_iframe_name_ebox").value;
newOptions.iframe.isClass = document.getElementById(site + "_iframe_class_cb").checked;
newOptions.autoar_imdb = {};
newOptions.autoar_imdb.enabled = document.getElementById(site + "_imdbar_cb").value;
newOptions.autoar_imdb.title = document.getElementById(site + "_imdbar_title_ebox").value;
newOptions.autoar_imdb.isClass = document.getElementById(site + "_imdbar_class_cb").checked;
return newOptions;
}
function setSiteOpts(site, opts){
document.getElementById(site + "_url_rules_ebox").value = opts.urlRules[0];
document.getElementById(site + "_player_name_ebox").value = opts.player.name;
document.getElementById(site + "_pccb_id").checked = opts.player.isClass;
if(opts.iframe){
document.getElementById(site + "_iframe_name_ebox").value = opts.iframe.name;
document.getElementById(site + "_iframe_class_cb").checked = opts.iframe.isClass;
}
if(opts.autoar_imdb){
document.getElementById(site + "_imdbar_cb").checked = opts.autoar_imdb.enabled;
if(opts.autoar_imdb.enabled){
document.getElementById(site + "_imdbar_title_ebox").value = opts.autoar_imdb.title;
document.getElementById(site + "_imdbar_class_cb").value = opts.autoar_imdb.isClass
}
}
}
function loadopts(){
getopt("ultrawidify_keybinds", gotopts);
// getopt("ultrawidify_autoar", gotar)
getopt("ultrawidify_ui", gotui);
getopt("ultrawidify_siterules", gotsites);
// We build ui for 'site options' here
// buildSites();
}
// page init
document.addEventListener("DOMContentLoaded", loadopts);
document.querySelector("#tab_shortcuts").addEventListener("click", showShortcuts);
document.querySelector("#tab_about").addEventListener("click", showAbout);
document.querySelector("#tab_general_settings").addEventListener("click",showGeneralSettings);
document.querySelector("#tab_sites").addEventListener("click", showSites);
document.querySelector("#kb_save").addEventListener("click", saveopts);
document.querySelector("#kb_cancel").addEventListener("click",loadopts);
document.querySelector("#enable_autoar").addEventListener("click",saveAutoar);
document.querySelector("#enable_ui").addEventListener("click", saveUI);
document.querySelector("#enable_ui_compact").addEventListener("click", saveUI);
getopt("ultrawidify_autoar",function(obj){document.querySelector("#enable_autoar").checked = obj.ultrawidify_autoar});

1493
js/uw-org.js
View File

File diff suppressed because it is too large Load Diff

9
manifest.json
View File

@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "Ultrawidify-git",
"version": "2a1",
"version": "2.0a1",
"icons": {
"32":"res/icons/uw-32.png",
@ -20,21 +20,18 @@
"js/conf/Debug.js",
"js/conf/Settings.js",
"js/conf/SitesConf.js",
"js/conf/Status.js",
"js/lib/FullScreenDetect.js",
"js/modules/ArDetect.js",
"js/modules/Resizer.js",
"js/conf/Keybinds.js",
"js/uw.js" ],
"all_frames": true
}],
"background": {
"scripts": ["js/jquery-3.1.1.js", "js/uw-bg.js"]
},
"permissions": [
"tabs", "storage", "activeTab", "all_urls", "*://*.youtube.com/*", "*://youtube.com/*", "*://imdb.com/*", "*://*.imdb.com/*"
],

34
res/settings.html
View File

@ -237,28 +237,37 @@
<div id="general_settings">
<div class="content left">
<div class="uw_options_line">
<div class="uw_options_option"><input type="checkbox" id='enable_autoar'> Enable automatic aspect ratio detection</div>
<div class="uw_options_desc">This option uses 3rd party websites to determine aspect ratio. It may not work all the time or even properly. It only works with Netflix. <span class="red">This option is <b>NOT</b> available on Youtube.</span></div>
</div>
<div class="uw_options_option"><input type="checkbox" id='enable_autoar'> <strike>Enable automatic aspect ratio detection</strike></div>
<div class="uw_options_desc"><strike>This option uses 3rd party websites to determine aspect ratio. It may not work all the time or even properly. It only works with Netflix. <span class="red">This option is <b>NOT</b> available on Youtube. Also deprecated probably, tamius pls remove</span></strike></div>
</div>
<div class="uw_options_line">
<div class="uw_options_option"><input type="checkbox" id="enable_ui"> Show UI in the player bar</div>
<div class="uw_options_desc">If this option is enabled, the extension will add some extra buttons to the player bar. If this option is disabled, setting video fit and aspect ratio is only possible via keyboard shortcuts.</div>
<div class="uw_suboption_line" id="compact_ui_suboption">
<div class="uw_suboption"><input type="checkbox" id="enable_ui_compact"> If possible, use compact UI</div>
<div class="uw_suboption_desc">With this option enabled, only 'more settings' button is enabled. Note that this option doesn't work on every site.</div>
</div>
<div class="uw_options_option"><input type="checkbox" id='enable_ardetect'> Enable brute-force automatic aspect ratio detection</div>
<div class="uw_options_desc">Pretend that this checkbox is checked and that you can't uncheck it. <br/><br/>This option works by checking where black pixels end on _every_ frame (technically every ~30ms). Because of this, this option may cause lagginess and increased CPU usage. <span class="red">also you can't not use it because we're doing a total rewrite lol</span></div>
</div>
<div class="uw_options_line">
<div class="uw_options_option">Yes, the UI is gone. [..] but why is the UI gone?</div>
<!-- <div class="uw_options_option"><input type="checkbox" id="enable_ui"> Show UI in the player bar</div> -->
<!-- <div class="uw_options_desc">If this option is enabled, the extension will add some extra buttons to the player bar. If this option is disabled, setting video fit and aspect ratio is only possible via keyboard shortcuts.</div> -->
<!-- <div class="uw_suboption_line" id="compact_ui_suboption"> -->
<!-- <div class="uw_suboption"><input type="checkbox" id="enable_ui_compact"> If possible, use compact UI</div> -->
<!-- <div class="uw_suboption_desc">With this option enabled, only 'more settings' button is enabled. Note that this option doesn't work on every site.</div> -->
<!-- </div> -->
</div>
</div>
</div>
<div id="uw_sites" class="hide">
<h1>PLEASE NOTE: THIS IS COMPLETELY NON-FUNCTIONAL ATM. YOU CANT SET SITE-SPECIFIC OPTIONS ATM</h1>
<div id="uw_sites_body" class="content left">
</div>
</div>
<div id="uw_shortcuts" class="hide">
<h1>Guess which thing doesn't do shit at the moment either?</h1>
<h2>If you guessed this page ... well.</h2>
<div class="content left">
<form>
<!-- BEGIN FORM -->
@ -364,12 +373,13 @@
<h2>Ultrawidify - an aspect ratio fixer for youtube <small>(and netflix)</small></h2>
<p>Created by Tamius Han (me). If something is broken, you can shout at me on <a href="https://github.com/xternal7/ultrawidify">github</a> (shout nicely, though. Open an issue or bug report or something). If you're curious to see the source code, <a href="https://github.com/xternal7/ultrawidify">github's here</a>. If you're looking at this page because you're bored and want to be bored some more, <a href="http://tamius.net">my website's here</a>.</p>
<h2>So you want to help?</h2>
<p>There's a lot of sites where you can stream videos. A lot of these sites keep failing to handle aspect ratios correctly, which means it would be great if this extension worked elsewhere. Unfortunately, a lot of these sites require me to pony up some money (ayy lmao) OR just flat out block anyone who's not from the US (or their small selection of approved regions). Some sites even do both.</p>
<p>This means I'd need some help. There's two ways. One of them is to use 'inspect element' option of your browser to pick up IDs (or classnames) of certain elements. More detail here(TODO: add a link to quick tutorial).</p>
<p><strike>There's a lot of sites where you can stream videos. A lot of these sites keep failing to handle aspect ratios correctly, which means it would be great if this extension worked elsewhere. Unfortunately, a lot of these sites require me to pony up some money (ayy lmao) OR just flat out block anyone who's not from the US (or their small selection of approved regions). Some sites even do both.</strike></p>
<p><strike>This means I'd need some help. There's two ways. One of them is to use 'inspect element' option of your browser to pick up IDs (or classnames) of certain elements. More detail here(TODO: add a link to quick tutorial).</strike>probably wont be necessary</p>
<p>The second one is, well. I won't shy away from donations either. <small>Bonus respect for dank amounts!</small></p>
<p>Needless to say, I'll be happy and thankful regardless of the way you contribute.</p>
<h2>Plans for the future</h2>
<p>Support for more sizes. More flexible/customizable UI. Maybe (but absolutely no promises here) a bit more advanced autodetection.</p>
<p><strike>Support for more sizes. More flexible/customizable UI. Maybe (but absolutely no promises here) a bit more advanced autodetection.</strike></p>
<p>this is the future lol. (at least as far as autodetection goes, keybinds need to make a comeback)</p>
<h2>Acknowledgements</h2>
<p>This extension uses font <a href="https://fonts.google.com/specimen/Oxygen">Oxygen</a>.</p>
<p>Special thanks to CD Project Red (The Witcher 2), Anet (Guild Wars 2), and Valve (CS:GO), which made it possible for me to untrigger myself after seeing so many improperly encoded videos.</p>