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

For a brief moment, I got this extension to autoremove unnecessary black bars. Progress!

Browse Source
This commit is contained in:
Tamius Han 2017-01-17 00:15:03 +01:00
parent 90fdfe1a2c
commit f64993a0d1
4 changed files with 231 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -77,6 +77,10 @@ At the moment, I'm not aware of anything that this extension advertises not work
## Changelog
###v1.2.0 (this repo, unstable as fuck)
* After an afternoon's worth of work, I managed to get the Rube Goldberg machine (that automagically removes unnecessary black borders on ultrawide videos — on netflix only) working for a few moments before the background script crashed. Now that feature only needs a bit of a polish (and by 'a bit', I mean a metric ton of it). gg
###v1.1.1 (waiting for approval)
* Fixed zooming issue on netflix

136
js/uw-bg.js
View File

@ -1,7 +1,11 @@
debugmsg = true;
debugmsg = false;
debugmsg_imdb = true;
url_changed = false;
if(debugmsg){
console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
console.log("\nLoading ultrawidify background script (uw-bg)\nIf you can see this, extension at least tried to load\n\nRandom number: ",Math.floor(Math.random() * 20) + 1,"\n");
console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
}
/********************************************
**** script-related stuff starts here ****
********************************************/
@ -22,14 +26,128 @@ function notifyChange(){
});
}
browser.tabs.onUpdated.addListener(notifyChange);
browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(debugmsg)
console.log("content script gibed: ", request.test);
//BEGIN Goldberg machine that gets aspect ratio data off imdb
function getAspectRatio(title, sender_tab){
// presledki morajo biti zamenjani s +
// spaces need to be replaced with +
var rektitle = title.replace(/ /g, '+');
// Zdaj lahko pošljemo zahtevek na omdbapi
// now we can send a request to omdbapi
httpGET("http://www.omdbapi.com/?t=" + rektitle,
function(response, sender_tab) {
if(debugmsg || debugmsg_imdb)
console.log("uw-bg::getAspectRatio | omdbapi gave us this: ", response);
var info = JSON.parse(response);
if(debugmsg || debugmsg_imdb){
console.log("uw-bg::getAspectRatio | movie title: »»", info.Title, "«« | imdb ID:", info.imdbID,"\nTrying to get technical specs off IMDB");
}
httpGET("https://www.imdb.com/title/" + info.imdbID + "/technical",
function(response, sender_tab){
var lines = response.split('\n');
if(debugmsg || debugmsg_imdb){
console.log("uw-bg::getAspectRatio | we just got something off IMDB, it's",lines.length,"long. Here's what we got:\n",response);
}
// IMDB nam zraven da veliko nepotrebnega sranja. Na testni strani je bil relevanten podatek
// 700+ (!) vrstic globoko. Stvar, ki nam jo da IMDB ima 1500+ vrstic. Iskanje bomo zato začeli
// od sredine
//
// IMDB gives us a lot of unnecessary shit along with the data we want. On our test page the
// relevant data was buried 700+ lines deep (1500+ lines total). Because we don't want to
// pointlessly search half the page, the best place to start seems to be the middle.
var lines_nr = lines.length;
if(lines_nr % 2 == 1)
++lines_nr;
var i = lines_nr / 2;
var j = i;
var ar_found = 0;
while(i > 400 && j < lines_nr){
if(lines[i].indexOf("Aspect Ratio") != -1){
if(debugmsg || debugmsg_imdb)
console.log("uw-bg::getAspectRatio | »Aspect Ratio« has been found on line",i," — searching for aspect ratio ...");
ar_found = i;
break;
}
if(lines[j].indexOf("Aspect Ratio") != -1){
if(debugmsg || debugmsg_imdb)
console.log("uw-bg::getAspectRatio | »Aspect Ratio« has been found on line",j," — searching for aspect ratio ...");
ar_found = j;
break;
}
--i;
++j;
}
if(ar_found){
var ar_limit = ar_found + 5;
for(var i = ar_found; i < ar_limit; ++i){
if(debugmsg || debugmsg_imdb)
console.log("uw-bg::getAspectRatio | scanning lines for aspect ratio number. Line:",lines[i],"has ar:", lines[i].indexOf(":"));
if(lines[i].indexOf(":") != -1){
// To pomeni, da smo našli razmerje stranic. gg ez
// This means we found our aspect ratio, gg ez
var ar = lines[i].trim().split(":");
ar[0] = ar[0].trim();
ar[1] = ar[1].trim();
if(debugmsg || debugmsg_imdb)
console.log("uw-bg::getAspectRatio | Aspect ratio found:",ar[0],":",ar[1]);
// Pa povejmo to naši strani:
// Let's break the news:
browser.tabs.sendMessage(sender_tab.id, {type:"arInfo", arx:ar[0], ary:ar[1]});
}
}
}
else
if(debugmsg || debugmsg_imdb)
console.log("uw-bg::getAspectRatio | Aspect ratio hasn't been found");
},
sender_tab
); //httpGET end
},
sender_tab
); //httpGET end
}
function httpGET(url, callback, callback_args){
var rek = new XMLHttpRequest();
rek.onreadystatechange = function(){
if(rek.readyState == 4 && rek.status == 200){
callback(rek.responseText, callback_args);
}
}
rek.open("GET", url, true);
rek.send(null);
}
//END 3rd party snooping for aspect ratios
browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
//Stvari delamo samo, če ima naše sporočilce tip
//We only do stuff if our message has a type
if(request.type){
if(request.type == "debug"){
console.log("uw-bg::onMessage | got a message. It was a debugging message. Here's the full message:",request);
}
if(request.type == "gibAspectRatio"){
if(debugmsg || debugmsg_imdb)
console.log("uw-bg::onMessage | got a message, we want to set aspect ratio. message:",request,"sender:",sender);
var result = getAspectRatio(request.title, sender.tab);
}
}
});

119
js/uw.js
View File

@ -1,13 +1,17 @@
var debugmsg = false;
var debugmsg_click = false;
var debugmsg_message = true;
var debugmsg_periodic = false;
if(debugmsg || debugmsg_click){
if(debugmsg || debugmsg_click || debugmsg_message){
console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
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_click)
console.log("Logging debugmsg_click only");
if(debugmsg_message)
console.log("Logging debugmsg_message only");
console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
}
const playercheck_recursion_depth_limit = 3;
@ -34,15 +38,20 @@ var control_bar;
var ui_anchor;
var player;
var vid_el;
var sample_button_class; // Class of a sample button
var sample_button_index = 0; // index of a sample button
var button_size_base = "x"; // Determines if size of extension buttons is defined by width or height of sample button
var sample_button_class; // Class of a sample button
var sample_button_index = 0; // index of a sample button
var button_size_base = "x"; // Determines if size of extension buttons is defined by width or height of sample button
var char_strat = "contain";
var video_wrap;
// Here we store the window size, so we know when to trigger css change.
var winsize = {w: window.innerWidth, h: window.innerHeight};
// Video title for third party
var title = "";
// provider-specific variables
var netflix_cltbar_visibility = -1; // -1 for invisible, anything non-negative for visible
@ -260,10 +269,10 @@ if(debugmsg)
var num_of_msg = 0;
browser.runtime.onMessage.addListener(function (message, sender, stuff ) {
if(debugmsg)
console.log("uw::onMessage | message number: ", num_of_msg++ , "; message:", message.message, "player-status elements:", document.getElementsByClassName("player-status").length, document.getElementsByClassName("player-status"), "uw_elements:", document.getElementsByClassName("uw_element").length, document.getElementsByClassName("uw_element") );
if(debugmsg || debugmsg_message)
console.log("uw::onMessage | message number: ", num_of_msg++ , "; message:", message );
if(message.message == "page-change"){
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.")
@ -284,8 +293,24 @@ browser.runtime.onMessage.addListener(function (message, sender, stuff ) {
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_imdb(message.arx, message.ary);
}
});
// 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");
//END comms with uw-bg
//BEGIN periodic functions
//Because onUpdated event isn't reliable enough for what we're doing on netflix.
function periodic() {
if(debugmsg_periodic)
@ -329,18 +354,32 @@ function periodic() {
updateCtlButtonSize();
}
}
if(page_url.indexOf("netflix.com") != -1){
//Netflix-specific stuff
var qntitle = document.querySelector(".player-status-main-title");
var ntitle = "";
//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(qntitle)
ntitle = qntitle.textContent;
if(ntitle && ntitle != title){
if(debugmsg || debugmsg_message)
console.log("uw::periodic | title changed. New title:",ntitle,"Old title:",title);
title = ntitle;
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)} );
}
}
}
//END periodic functions
// 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");
//END comms with uw-bg
$(document).ready(function() {
@ -403,13 +442,14 @@ function keydownSetup(){
console.log("We're writing a comment or something. Doing nothing");
return;
}
if(debugmsg){
if(debugmsg || debugmsg_message){
// console.log(KEYBINDS);
console.log("we pressed a key: ", event.key , " | keydown: ", event.keydown);
if(event.key == 'p'){
console.log("uw/keydown: attempting to send message")
var sending = browser.runtime.sendMessage({
test: "test message pls dont ignore"
type: "debug",
message: "Test message, please ignore"
});
sending.then( function(){}, function(){console.log("uw/keydown: there was an error while sending a message")} );
console.log("uw/keydown: test message sent! (probably)");
@ -771,10 +811,10 @@ function addCtlButtons(recursion_depth){
// Press the button, something awesome has to happen.
// — Bioware
// ( https://www.youtube.com/watch?v=hMcVZQI6ybw | [NSFW] )
$(smenu_el[6]).on("mouseenter", function(){showMenu("uw-armenu")});
$(smenu_el[6]).on("mouseleave", function(){hideMenu("uw-armenu")});
if(smenu_el[6]){
$(smenu_el[6]).on("mouseenter", function(){showMenu("uw-armenu")});
$(smenu_el[6]).on("mouseleave", function(){hideMenu("uw-armenu")});
}
// event.stopPropagation, ker nočemo togglati še funkcij od knofa za popup z nastavitvami
// event.stopPropagation, because we don't want to trigger onclick functions of the settings popup button in
// the player bar
@ -1023,6 +1063,41 @@ function char(new_ar, video, player){
set_video_ar(new_ar, video, player);
}
function char_imdb(arx, ary){
var ar = arx / ary;
var nplayer = { width: player.clientWidth, height: player.clientHeight };
var calc_width = nplayer.height * ar;
var calc_height = nplayer.width / ar;
var nv = {w: "", h: ""};
var evideo = $("video")[0];
var video = {width: evideo.videoWidth, height: evideo.videoHeight};
var vidar = video.width / video.height;
// V tem primeru zapolnimo po višini
// In this case, we calculate new dimension based on player height
// NOTE: Everything below this line (in this function) is TODO/FIXME
// if(calc_width > player.width){
nv.w = nplayer.width;
nv.h = nplayer.height * (ar / vidar);
// }
// else{
// nv.h = player.width * (vidar / a
// }
nv.top = (nplayer.height - nv.h)/2;
nv.left = (nplayer.width - nv.w)/2;
if(debugmsg || debugmsg_message)
console.log("uw::char_imdb | nv:",nv);
applyCSS(nv);
}
/* Tukaj povemo, kakšno razmerje stranic ima video.
// Kaj to pomeni:
// Mi rečemo, da ima video razmerje stranic 16:9. Dejanski video

6
manifest.json
View File

@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "Ultrawidify-git",
"version": "1.1.1",
"version": "1.2.0dev",
"icons": {
"32":"res/icons/uw-32.png",
@ -20,11 +20,11 @@
],
"background": {
"scripts": ["js/uw-bg.js"]
"scripts": ["js/jquery-3.1.1.js", "js/uw-bg.js"]
},
"permissions": [
"tabs", "storage", "activeTab", "*://*.youtube.com/*", "*://youtube.com/*"
"tabs", "storage", "activeTab", "webrequest", "*://*.youtube.com/*", "*://youtube.com/*", "*://imdb.com/*", "*://*.imdb.com/*"
],
"web_accessible_resources": [