From f64993a0d1d27f61a0b9b0e89fc9eeb126774a7f Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Tue, 17 Jan 2017 00:15:03 +0100 Subject: [PATCH] For a brief moment, I got this extension to autoremove unnecessary black bars. Progress! --- README.md | 4 ++ js/uw-bg.js | 136 ++++++++++++++++++++++++++++++++++++++++++++++---- js/uw.js | 119 +++++++++++++++++++++++++++++++++++-------- manifest.json | 6 +-- 4 files changed, 231 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index e4a5356..41c2eae 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/js/uw-bg.js b/js/uw-bg.js index 6da1acc..b65d92e 100644 --- a/js/uw-bg.js +++ b/js/uw-bg.js @@ -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); + } + } }); diff --git a/js/uw.js b/js/uw.js index 0d766e8..7a9b306 100644 --- a/js/uw.js +++ b/js/uw.js @@ -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 diff --git a/manifest.json b/manifest.json index 00a5579..0ae3a5e 100644 --- a/manifest.json +++ b/manifest.json @@ -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": [