Netflix autoAR: polished, working and in settings. Ready to submit to AMO.

This commit is contained in:
Tamius Han 2017-01-19 21:29:54 +01:00
parent 39d8139e0c
commit 16e855e4ac
4 changed files with 149 additions and 19 deletions

View File

@ -1,5 +1,5 @@
debugmsg = false;
debugmsg_imdb = true;
debugmsg_imdb = false;
url_changed = false;
if(debugmsg){
console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");

View File

@ -1,7 +1,7 @@
var debugmsg = false;
var debugmsg_click = false;
var debugmsg_message = true;
debugmsg_autoar = true;
var debugmsg_message = false;
debugmsg_autoar = false;
var debugmsg_periodic = false;
if(debugmsg || debugmsg_click || debugmsg_message){
console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
@ -243,16 +243,34 @@ var DEFAULT_KEYBINDINGS = {
8: {
action: "char",
targetAR: (4/3),
key: "c",
modifiers: []
},
9: {
action: "autoar",
key: "a",
modifiers: []
}
};
var last_location = "";
var autoar_enabled = true;
browser.storage.local.get("ultrawidify_autoar").then(function(opt){
if(!opt.ultrawidify_autoar){
browser.storage.local.set({ultrawidify_autoar: true});
}
else
this.autoar_enabled = opt.ultrawidify_autoar;
if(!this.autoar_enabled)
var last_whatdo = {type: "reset", what_do:"reset"};
});
var KEYBINDS = {};
var ask4keybinds = browser.storage.local.get("ultrawidify_keybinds");
ask4keybinds.then( (res) => {
if(res.length == 1 && jQuery.isEmptyObject(res[0])){
if(/*res.length == 1 &&*/ (jQuery.isEmptyObject(res[0]) || jQuery.isEmptyObject(res[0].ultrawidify_keybinds)) ){
if(debugmsg)
console.log("uw::<init keybinds> | No keybindings found. Loading default keybinds as keybinds");
@ -260,7 +278,18 @@ ask4keybinds.then( (res) => {
KEYBINDS = DEFAULT_KEYBINDINGS;
}
else{
if(Object.keys(res[0].ultrawidify_keybinds).length == Object.keys(DEFAULT_KEYBINDINGS).length)
KEYBINDS = res[0].ultrawidify_keybinds;
else{
KEYBINDS = res[0].ultrawidify_keybinds;
// remap 4:3 keybind from 'a' to 'c', but only if the keybind wasn't changed
var old_keybinds = Object.keys(res[0].ultrawidify_keybinds);
if(KEYBINDS[old_keybinds-1].key == "a" && KEYBINDS[old_keybinds-1].modifiers == []){
KEYBINDS[old_keybinds-1].key == "c";
}
KEYBINDS[old_keybinds] = {action: "autoar", key: "a", modifiers: []};
}
}
// console.log("res. ", res[0].ultrawidify_keybinds);
});
@ -364,7 +393,7 @@ function periodic() {
}
}
if(page_url.indexOf("netflix.com") != -1){
if(page_url.indexOf("netflix.com") != -1 && autoar_enabled){
//Netflix-specific stuff
var qntitle = document.querySelector(".player-status-main-title");
var ntitle = "";
@ -499,6 +528,10 @@ function keydownSetup(){
changeCSS("char", KEYBINDS[i].targetAR);
return;
}
if(KEYBINDS[i].action == "autoar"){
manual_autoar();
return;
}
changeCSS("anything goes", KEYBINDS[i].action);
return;
}
@ -964,6 +997,29 @@ function onFullscreenOff(){
}
function manual_autoar(){
if(page_url.indexOf("netflix.com") != -1){
var ntitle = document.querySelector(".player-status-main-title");
//querySelector lahko vrne null, zato moramo preveriti, kaj smo dobili — drugače se .textContent pritožuje.
//querySelector can return null, in which case .textContent will complain.
if(!ntitle)
return;
var title = ntitle.textContent;
char_got_ar = false;
last_whatdo = {type: "autoar", what_do:"autoar"};
var sending = browser.runtime.sendMessage({
type: "gibAspectRatio",
title: title
});
sending.then( function(){}, function(err1, err2){console.log("uw::periodic: there was an error while sending a message", err1, err2)} );
}
}
function changeCSS(type, what_do){
if(debugmsg)
console.log("uw::changeCSS | starting function");

View File

@ -59,6 +59,9 @@
.center{
margin: 0 auto;
}
.red{
color: #ff3a00;
}
.left{
text-align: left;
}
@ -106,12 +109,26 @@
}
.uw_shortcuts_line{
padding-top: 0.25em;
padding-left: 10em;
padding-left: 5em;
}
.uw_shortcuts_label{
display: inline-block;
color: #fff;
width: 7.5em;
width: 17.5em;
}
.uw_options_line{
margin-top: 0.25em;
font-size: 1.1em;
width: 80%;
margin-left: 5%;
}
.uw_options_option{
margin-left: 5%;
}
.uw_options_desc{
margin-top: 0.33em;
font-size: 0.69em;
color: #aaa;
}
.buttonbar{
/* width: 100%; */
@ -144,12 +161,22 @@
</div>
<div class="tabline center">
<div class="content left">
<div id="tab_shortcuts" class="block tab tab-selected">Shortcuts</div>
<div id="tab_general_settings" class="block tab tab-selected">General settings</div>
<div id="tab_shortcuts" class="block tab">Shortcuts</div>
<div id="tab_about" class="block tab">About</div>
</div>
</div>
</header>
<div id="uw_shortcuts">
<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>
</div>
<div id="uw_shortcuts" class="hide">
<div class="content left">
<form>
<!-- BEGIN FORM -->
@ -233,6 +260,15 @@
<input type='checkbox' id='ar43_alt' > Alt +
<input type='text' id='ar43_letter' maxlength='1' class='shortcut_input'>
</div>
<!-- try autoar -->
<div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Autodetect aspect ratio (Netflix only)</div>
<input type='checkbox' id='autoar_ctrl' > Ctrl +
<input type='checkbox' id='autoar_shift' > Shift +
<input type='checkbox' id='autoar_alt' > Alt +
<input type='text' id='autoar_letter' maxlength='1' class='shortcut_input'>
</div>
<!-- END FORM -->
</form>
<div class="buttonbar"><div class="button" id="kb_cancel">Cancel</div><div class="button" id="kb_save">Save</div></div>
@ -243,10 +279,10 @@
<div id="about" class="hide">
<div class="content left">
<h2>Ultrawidify - an aspect ratio fixer for youtube</h2>
<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>Plans for the future</h2>
<p>Netflix support, probably.</p>
<p><strike>Netflix support, probably.</strike> we did it lol</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>

View File

@ -1,22 +1,38 @@
function showAbout(){
document.getElementById("uw_shortcuts").classList.add("hide");
document.getElementById("about").classList.remove("hide");
clearPage();
document.getElementById("tab_shortcuts").classList.remove("tab-selected");
document.getElementById("about").classList.remove("hide");
document.getElementById("tab_about").classList.add("tab-selected");
}
function showShortcuts(){
document.getElementById("uw_shortcuts").classList.remove("hide");
document.getElementById("about").classList.add("hide");
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 clearPage(){
// Hide you sections
document.getElementById("uw_shortcuts").classList.add("hide");
document.getElementById("about").classList.add("hide");
document.getElementById("general_settings").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");
}
function saveopts(){
var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43"];
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.
@ -98,6 +114,21 @@ function saveopts(){
}
function saveAutoar(){
console.log("saving autoar. is checked?", document.querySelector("#enable_autoar").checked)
setopt({ultrawidify_autoar: document.querySelector("#enable_autoar").checked});
}
// setopt in getopt. Shranita oz. dobita stvari iz skladišča
// setopt, getopt. They set/get stuff from the storage
function setopt(item){
browser.storage.local.set(item);
}
function getopt(prop, callback){
browser.storage.local.get(prop).then(callback);
}
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).
@ -121,7 +152,7 @@ function printerr(err){
function gotopts(opts){
var KEYBINDS = Object.keys(opts.ultrawidify_keybinds).map(function (key) { return opts.ultrawidify_keybinds[key];});
var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43"];
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;
@ -141,10 +172,17 @@ function loadopts(){
ask4keybinds.then(gotopts, printerr);
}
// 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("#kb_save").addEventListener("click", saveopts);
document.querySelector("#kb_cancel").addEventListener("click",loadopts);
document.querySelector("#enable_autoar").addEventListener("click",saveAutoar);
getopt("ultrawidify_autoar",function(obj){console.log("obj:",obj);document.querySelector("#enable_autoar").checked = obj.ultrawidify_autoar});