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

Netflix is now supported (kinda, there's some issues with extension loading). Keyboard shortcuts are broken across the board.

Browse Source
This commit is contained in:
Tamius Han 2017-01-02 12:29:43 +01:00
parent fe4fdcf0fe
commit 5bd797895c
3 changed files with 375 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

551
js/uw.js
View File

@ -1,10 +1,10 @@
var debugmsg = false; var debugmsg = true;
if(debugmsg){ if(debugmsg){
console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "); 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"); 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");
console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "); console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
} }
const playercheck_recursion_depth_limit = 3;
var extraClassAdded = false; var extraClassAdded = false;
var inFullScreen = false; var inFullScreen = false;
@ -22,6 +22,73 @@ var serviceArray = [".video-stream" ]; //Youtube
var buttons = []; var buttons = [];
//BEGIN determining which site we're on and the associated names
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 video_wrap;
function init(){
if(debugmsg)
console.log("uw::init | starting init");
//Youtube:
if(page_url.indexOf("youtu") != -1){
if(debugmsg)
console.log("uw::init | we're on youtube. Page url:", page_url);
control_bar = "ytp-chrome-controls";
// ui_anchor =
sample_button_class = "ytp-button ytp-settings-button";
if(inIframe())
player = document.getElementById("player")
else
player = document.getElementById("movie_player");
video_wrap = "video-stream";
return;
}
//Netflix:
if(page_url.indexOf("netflix.com") != -1){
if(debugmsg)
console.log("uw::init | we're on netflix. Page url:", page_url);
player = document.getElementById("playerContainer");
var tmp = document.getElementsByClassName("player-status")[0];
if(!tmp)
return false;
ui_anchor = document.getElementsByClassName("uw-button-row")[0];
console.log(ui_anchor);
if(!ui_anchor){
ui_anchor = document.createElement("div");
ui_anchor.className = "uw-button-row";
}
if(debugmsg)
console.log("uw::init | we're on netflix. ui anchor: ",ui_anchor, "; ui anchor parent:", tmp);
tmp.appendChild(ui_anchor);
vid_el = document.getElementsByTagName("video")[0];
sample_button_class = "player-control-button player-fill-screen";
video_wrap = "player-video-wrapper";
button_size_base = "y";
}
}
//END
//BEGIN ADDING CSS //BEGIN ADDING CSS
@ -60,9 +127,13 @@ addLink("res/css/uw_common.css");
if(page_url.indexOf("youtu") != -1){ if(page_url.indexOf("youtu") != -1){
addLink("res/css/uw_yt.css"); addLink("res/css/uw_yt.css");
} }
if(page_url.indexOf("netflix.com") != -1){
addLink("res/css/uw_netflix.css");
}
//END ADDING CSS //END ADDING CSS
//BEGIN keybind-related stuff
// Yeah hi /r/badcode. // Yeah hi /r/badcode.
// Anyway, because nazi localstorage flat out refuses to store arrays: // Anyway, because nazi localstorage flat out refuses to store arrays:
var DEFAULT_KEYBINDINGS = { var DEFAULT_KEYBINDINGS = {
@ -133,6 +204,9 @@ ask4keybinds.then( (res) => {
// console.log("res. ", res[0].ultrawidify_keybinds); // console.log("res. ", res[0].ultrawidify_keybinds);
}); });
//END keybind-related stuff
//BEGIN comms with uw-bg
if(debugmsg) if(debugmsg)
console.log("uw | Setting up comms with background scripts"); console.log("uw | Setting up comms with background scripts");
@ -153,6 +227,7 @@ browser.runtime.onMessage.addListener(function (message, sender, stuff ) {
if(debugmsg) if(debugmsg)
console.log("uw | Comms with background scripts: done"); console.log("uw | Comms with background scripts: done");
//END comms with uw-bg
$(document).ready(function() { $(document).ready(function() {
@ -178,7 +253,8 @@ function extSetup(){
if(debugmsg) if(debugmsg)
console.log("uw::extSetup | setting up keyboard shortcuts"); console.log("uw::extSetup | setting up keyboard shortcuts");
keydownSetup(); if(init())
keydownSetup();
addCtlButtons(0); addCtlButtons(0);
if(debugmsg) if(debugmsg)
console.log("======================================[ setup finished ]======================================"); console.log("======================================[ setup finished ]======================================");
@ -254,9 +330,9 @@ function keydownSetup(){
//BEGIN UI //BEGIN UI
function check4player(provider_id){ function check4player(recursion_depth){
try{ try{
var button_width = document.getElementsByClassName(buttonClass)[0].scrollWidth; var button_width = document.getElementsByClassName(sample_button_class)[sample_button_index].scrollWidth;
return true; return true;
} }
catch(e){ catch(e){
@ -267,22 +343,28 @@ function check4player(provider_id){
// In that case, the above statement craps out, throws an exception and trashes the extension. // In that case, the above statement craps out, throws an exception and trashes the extension.
if(debugmsg) if(debugmsg)
console.log("uw::addCtlButtons | seems there was a fuckup and no buttons were found on this page. No player (and therefore no buttons) found."); console.log("uw::addCtlButtons | seems there was a fuckup and no buttons were found on this page. No player (and therefore no buttons) found.");
return false;
if(!recursion_depth)
recursion_depth = 0;
// If buttons weren't found, we relaunch init() just
init();
return recursion_depth < playercheck_recursion_depth_limit ? check4player(++recursion_depth) : false;
} }
return false; return false;
} }
function addCtlButtons(provider_id){ function addCtlButtons(recursion_depth){
var buttonClass = "ytp-button ytp-settings-button";
console.log("\n\n\n\n\n\n1");
// Gumb za nastavitve je bolj kot ne vselej prisoten, zato širino tega gumba uporabimo kot širino naših gumbov // Gumb za nastavitve je bolj kot ne vselej prisoten, zato širino tega gumba uporabimo kot širino naših gumbov
// Settings button is more or less always there, so we use its width as width of our buttons // Settings button is more or less always there, so we use its width as width of our buttons
try{ try{
console.log(2); // Na različnih straneh širino gumba poberemo na različne načine.
var button_width = document.getElementsByClassName(buttonClass)[0].scrollWidth; if(button_size_base == "y")
console.log(3); var button_width = document.getElementsByClassName(sample_button_class)[sample_button_index].scrollHeight;
else
var button_width = document.getElementsByClassName(sample_button_class)[sample_button_index].scrollWidth;
} }
catch(e){ catch(e){
// Zato, ker predvajalnik ni vselej prisoten. Če predvajalnik ni prisoten, // Zato, ker predvajalnik ni vselej prisoten. Če predvajalnik ni prisoten,
@ -292,17 +374,22 @@ function addCtlButtons(provider_id){
// In that case, the above statement craps out, throws an exception and trashes the extension. // In that case, the above statement craps out, throws an exception and trashes the extension.
if(debugmsg) if(debugmsg)
console.log("uw::addCtlButtons | seems there was a fuckup and no buttons were found on this page. No player (and therefore no buttons) found."); console.log("uw::addCtlButtons | seems there was a fuckup and no buttons were found on this page. No player (and therefore no buttons) found.");
if(!recursion_depth)
recursion_depth = 0;
// If buttons weren't found, we relaunch init() just
init();
return recursion_depth < playercheck_recursion_depth_limit ? check4player(++recursion_depth) : false;
return false; return false;
} }
console.log(4);
var button_def = [ "fitw", "fith", "reset", "zoom", "uzoom", "settings" ]; var button_def = [ "fitw", "fith", "reset", "zoom", "uzoom", "settings" ];
if(debugmsg) if(debugmsg)
console.log("uw::addCtlButtons | trying to add buttons"); console.log("uw::addCtlButtons | trying to add buttons");
var button_panel;
// Če je ta dodatek že nameščen, potem odstranimo vse elemente. Vsi top-level elementi imajo definiran prazen razred // Če je ta dodatek že nameščen, potem odstranimo vse elemente. Vsi top-level elementi imajo definiran prazen razred
// uw_element, prek katerega jih naberemo na kup. Ta del kode je tu bolj ali manj zaradi debugiranja. // uw_element, prek katerega jih naberemo na kup. Ta del kode je tu bolj ali manj zaradi debugiranja.
// //
@ -339,199 +426,221 @@ function addCtlButtons(provider_id){
previousElements[0].parentNode.removeChild(previousElements[0]); previousElements[0].parentNode.removeChild(previousElements[0]);
} }
var check_width = false;
// If we're on youtube: // If we're on youtube:
if(provider_id == 0){ if(page_url.indexOf("youtu") != -1){
check_width = true;
var e_player; var rctl;
var rctl_width;
var lctl_width;
var ctlbar_width;
if(inIframe()) if(inIframe())
e_player = document.getElementById("player"); player = document.getElementById("player");
else else
e_player = document.getElementById("movie_player"); player = document.getElementById("movie_player");
var rctl = document.getElementsByClassName("ytp-right-controls")[0]; rctl = document.getElementsByClassName("ytp-right-controls")[0];
rctl_width = rctl.offsetWidth;
// Tukaj dodamo gumbe na stran lctl_width = document.getElementsByClassName("ytp-left-controls")[0].offsetWidth;
// Here we add the buttons ctlbar_width = document.getElementsByClassName("ytp-chrome-controls")[0].offsetWidth;
for( var i = 5; i >= 0; i--){
buttons[i] = document.createElement('div');
buttons[i].style.backgroundImage = 'url(' + resourceToUrl("/res/img/ytplayer-icons/" + button_def[i] + ".png") + ')';
buttons[i].style.width = (button_width * 0.75) + "px";
// buttons[i].style.marginLeft = (button_width * 0.3) + "px";
buttons[i].style.paddingLeft = (button_width *0.15 ) + "px";
buttons[i].style.paddingRight = (button_width * 0.15) + "px";
buttons[i].className += " uw-button uw_element";
$(rctl).prepend(buttons[i]);
}
// Let's check if we're too wide.
var rctl_width = rctl.offsetWidth;
var lctl_width = document.getElementsByClassName("ytp-left-controls")[0].offsetWidth;
var ctlbar_width = document.getElementsByClassName("ytp-chrome-controls")[0].offsetWidth;
// Če na ctlbar ni prostora za vse knofe, potem skrijemo vse knofe razen tistega, ki ima popup z vsemi možnostmi
//
// If ctlbar doesn't have the space for all the buttons, we hide all except the one that contains the popup
// with all the options
if( (rctl_width + lctl_width) * 1.1 > ctlbar_width){
for( var i = 4; i >= 0; i--){
buttons[i].classList.add("uw_hide");
}
}
buttons[0].onclick = function() { changeCSS("fit", "fitw") };
buttons[1].onclick = function() { changeCSS("fit", "fith") };
buttons[2].onclick = function() { changeCSS("reset", "reset") };
buttons[3].onclick = function() { changeCSS("fit", "zoom") };
buttons[4].onclick = function() { changeCSS("fit", "unzoom") };
// Knof za nastavitve ima še vgnezden meni, ki ga dodamo tu (privzeto je ta meni skrit)
// Settings button contains a menu that's nested in the element. By default, that menu is
// hidden.
buttons[5].onclick = function() { toggleMenu("uw-smenu") };
buttons[5].id = "uw-settings-button";
var settings_menu = document.createElement("div");
var smenu_ar_menu = document.createElement("div");
var smenu_el = [];
for(var i = 0; i < 7; i++){
smenu_el[i] = document.createElement("div");
}
var smenu_ar_options = [];
buttons[5].appendChild(settings_menu);
//Če rabimo skriti gumb za nastavitve, potem mora biti i=1
//If we need to hide settings button, then we should make i=1
//FIXME: knof za nastavitve ne radi (nastavitve se ne odprejo)
//FIXME: 'settings' button on the player doesn't work
for(var i = 1; i < smenu_el.length; i++){
settings_menu.appendChild(smenu_el[i]);
smenu_el[i].className += "uw-setmenu-item";
}
for(var i = 0; i < 4; i++){
smenu_ar_options[i] = document.createElement("div");
smenu_ar_options[i].className = "uw-setmenu-item uw_element";
smenu_ar_menu.appendChild(smenu_ar_options[i]);
}
settings_menu.id = "uw-smenu";
settings_menu.className = "uw-setmenu uw_element";
smenu_el[0].id = "uw-smenu_settings";
smenu_el[6].id = "uw-smenu_ar";
smenu_ar_menu.id = "uw-armenu";
smenu_ar_menu.className = "uw-setmenu uw_element";
// Stvari, ki se spreminjajo, se določijo tukaj
//
// Things that can change are defined here.
var smenu_item_width = (button_width * 7.5);
var smenu_item_fontSize = (button_width * 0.5);
var smenu_ar_item_width = (smenu_item_width / 3);
var smenu_item_height = button_width;
// Popup meni je lahko visok največ 75% višine predvajalnika
// Popup menu can be at most 75% of the video player tall
var smenu_max_h = e_player.clientHeight * 0.75;
// Če je popup večji, kot 80% predvajalnika, potem ga pomanjšamo. Višina elementa na popupu je približno enaka
// višini knofa. Gumbi so načeloma kvadratni, zato je višina enaka širini.
// If the popup menu is taller than 80% of the player, we resize it. height of an element in the popup is roughly
// equal to the height of a button. Buttons are generally squares, so width is equal to heigth. (And if it's not,
// that's still close enough for us!)
var smenu_default_h = button_width * smenu_el.length;
if(smenu_max_h < smenu_default_h){
var scale_factor = smenu_max_h / smenu_default_h;
smenu_item_width *= scale_factor;
smenu_item_fontSize *= scale_factor;
smenu_item_height = button_width * scale_factor;
smenu_ar_item_width *= scale_factor;
}
settings_menu.style.bottom = (button_width * 1.5) + "px";
settings_menu.style.width = smenu_item_width + "px";
settings_menu.style.fontSize = smenu_item_fontSize + "px";
smenu_ar_menu.style.right = smenu_item_width + "px";
smenu_ar_menu.style.width = smenu_ar_item_width + "px";
smenu_ar_menu.style.bottom = "0px";
for(var i = 0; i < smenu_el.length; i++){
smenu_el[i].style.width = smenu_item_width + "px";
smenu_el[i].style.height = smenu_item_height + "px";
smenu_el[i].style.fontSize = smenu_item_fontSize + "px";
}
for(var i = 0; i < smenu_ar_options.length; i++){
smenu_ar_options[0].height = smenu_item_height + "px";
}
// Tukaj se določa notranji HTML knofov
// Inner HTML of elements is defined here
smenu_el[6].innerHTML = "Force aspect ratio";
smenu_el[6].appendChild(smenu_ar_menu);
smenu_el[0].innerHTML = "Settings";
smenu_ar_options[0].innerHTML = "4:3";
smenu_ar_options[1].innerHTML = "16:10";
smenu_ar_options[2].innerHTML = "16:9";
smenu_ar_options[3].innerHTML = "21:9";
smenu_el[5].innerHTML = "Fit width";
smenu_el[4].innerHTML = "Fit height";
smenu_el[3].innerHTML = "Reset";
smenu_el[1].innerHTML = "Zoom in";
smenu_el[2].innerHTML = "Zoom out";
// Pritisneš gumb, nekej zakon se more narest.
// — Bioware
// ( https://www.youtube.com/watch?v=hMcVZQI6ybw | [NVZD] )
//
// 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")});
// 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
smenu_ar_options[0].onclick = function(event) {event.stopPropagation(); changeCSS("char", ( 4/3 )); };
smenu_ar_options[1].onclick = function(event) {event.stopPropagation(); changeCSS("char", (16/10)); };
smenu_ar_options[2].onclick = function(event) {event.stopPropagation(); changeCSS("char", (16/9 )); };
smenu_ar_options[3].onclick = function(event) {event.stopPropagation(); changeCSS("char", (21/9 )); };
// smenu_el[0].onclick = function (event) {event.stopPropagation(); showSettings() };
smenu_el[5].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"fitw" ) };
smenu_el[4].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"fith" ) };
smenu_el[3].onclick = function (event) {event.stopPropagation(); changeCSS("reset","reset" ) };
smenu_el[1].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"zoom" ) };
smenu_el[2].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"unzoom") };
} }
// Ker na različne strani knofe dodajamo na različne načine, določanje lastnosti in dodajanje gumbov na
// vmesnik izvedemo posebej
// Because different pages require adding buttons to the UI in a different order, we handle defining button
// properties and adding buttons to the UI in different loops.
for(var i = 0; i < 6; i++){
buttons[i] = document.createElement('div');
buttons[i].style.backgroundImage = 'url(' + resourceToUrl("/res/img/ytplayer-icons/" + button_def[i] + ".png") + ')';
buttons[i].style.width = (button_width * 0.75) + "px";
buttons[i].style.height = (button_width) + "px";
// buttons[i].style.marginLeft = (button_width * 0.3) + "px";
buttons[i].style.paddingLeft = (button_width *0.15 ) + "px";
buttons[i].style.paddingRight = (button_width * 0.15) + "px";
buttons[i].className += " uw-button uw_element";
}
// Tukaj dodamo gumbe na stran
// Here we add the buttons
if(page_url.indexOf("netflix.com") != -1){
for( var i = 0; i < 6; i++){
ui_anchor.appendChild(buttons[i]);
}
}
else{
for( var i = 5; i >= 0; i--){
$(rctl).prepend(buttons[i]);
}
}
// Če na ctlbar ni prostora za vse knofe, potem skrijemo vse knofe razen tistega, ki ima popup z vsemi možnostmi
//
// If ctlbar doesn't have the space for all the buttons, we hide all except the one that contains the popup
// with all the options
if(check_width && (rctl_width + lctl_width) * 1.1 > ctlbar_width){
for( var i = 4; i >= 0; i--){
buttons[i].classList.add("uw_hide");
}
}
buttons[0].onclick = function() { changeCSS("fit", "fitw") };
buttons[1].onclick = function() { changeCSS("fit", "fith") };
buttons[2].onclick = function() { changeCSS("reset", "reset") };
buttons[3].onclick = function() { changeCSS("fit", "zoom") };
buttons[4].onclick = function() { changeCSS("fit", "unzoom") };
// Knof za nastavitve ima še vgnezden meni, ki ga dodamo tu (privzeto je ta meni skrit)
// Settings button contains a menu that's nested in the element. By default, that menu is
// hidden.
buttons[5].onclick = function() { toggleMenu("uw-smenu") };
buttons[5].id = "uw-settings-button";
var settings_menu = document.createElement("div");
var smenu_ar_menu = document.createElement("div");
var smenu_el = [];
for(var i = 0; i < 7; i++){
smenu_el[i] = document.createElement("div");
}
var smenu_ar_options = [];
buttons[5].appendChild(settings_menu);
//Če rabimo skriti gumb za nastavitve, potem mora biti i=1
//If we need to hide settings button, then we should make i=1
//FIXME: knof za nastavitve ne radi (nastavitve se ne odprejo)
//FIXME: 'settings' button on the player doesn't work
for(var i = 1; i < smenu_el.length; i++){
settings_menu.appendChild(smenu_el[i]);
smenu_el[i].className += "uw-setmenu-item";
}
for(var i = 0; i < 4; i++){
smenu_ar_options[i] = document.createElement("div");
smenu_ar_options[i].className = "uw-setmenu-item uw_element";
smenu_ar_menu.appendChild(smenu_ar_options[i]);
}
settings_menu.id = "uw-smenu";
settings_menu.className = "uw-setmenu uw_element";
smenu_el[0].id = "uw-smenu_settings";
smenu_el[6].id = "uw-smenu_ar";
smenu_ar_menu.id = "uw-armenu";
smenu_ar_menu.className = "uw-setmenu uw_element";
// Stvari, ki se spreminjajo, se določijo tukaj
//
// Things that can change are defined here.
var smenu_item_width = (button_width * 7.5);
var smenu_item_fontSize = (button_width * 0.5);
var smenu_ar_item_width = (smenu_item_width / 3);
var smenu_item_height = button_width;
// Popup meni je lahko visok največ 75% višine predvajalnika
// Popup menu can be at most 75% of the video player tall
var smenu_max_h = player.clientHeight * 0.75;
// Če je popup večji, kot 80% predvajalnika, potem ga pomanjšamo. Višina elementa na popupu je približno enaka
// višini knofa. Gumbi so načeloma kvadratni, zato je višina enaka širini.
// If the popup menu is taller than 80% of the player, we resize it. height of an element in the popup is roughly
// equal to the height of a button. Buttons are generally squares, so width is equal to heigth. (And if it's not,
// that's still close enough for us!)
var smenu_default_h = button_width * smenu_el.length;
if(smenu_max_h < smenu_default_h){
var scale_factor = smenu_max_h / smenu_default_h;
smenu_item_width *= scale_factor;
smenu_item_fontSize *= scale_factor;
smenu_item_height = button_width * scale_factor;
smenu_ar_item_width *= scale_factor;
}
settings_menu.style.bottom = (button_width * 1.5) + "px";
settings_menu.style.width = smenu_item_width + "px";
settings_menu.style.fontSize = smenu_item_fontSize + "px";
smenu_ar_menu.style.right = smenu_item_width + "px";
smenu_ar_menu.style.width = smenu_ar_item_width + "px";
smenu_ar_menu.style.bottom = "0px";
for(var i = 0; i < smenu_el.length; i++){
smenu_el[i].style.width = smenu_item_width + "px";
smenu_el[i].style.height = smenu_item_height + "px";
smenu_el[i].style.fontSize = smenu_item_fontSize + "px";
}
for(var i = 0; i < smenu_ar_options.length; i++){
smenu_ar_options[0].height = smenu_item_height + "px";
}
// Tukaj se določa notranji HTML knofov
// Inner HTML of elements is defined here
smenu_el[6].innerHTML = "Force aspect ratio";
smenu_el[6].appendChild(smenu_ar_menu);
smenu_el[0].innerHTML = "Settings";
smenu_ar_options[0].innerHTML = "4:3";
smenu_ar_options[1].innerHTML = "16:10";
smenu_ar_options[2].innerHTML = "16:9";
smenu_ar_options[3].innerHTML = "21:9";
smenu_el[5].innerHTML = "Fit width";
smenu_el[4].innerHTML = "Fit height";
smenu_el[3].innerHTML = "Reset";
smenu_el[1].innerHTML = "Zoom in";
smenu_el[2].innerHTML = "Zoom out";
// Pritisneš gumb, nekej zakon se more narest.
// — Bioware
// ( https://www.youtube.com/watch?v=hMcVZQI6ybw | [NVZD] )
//
// 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")});
// 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
smenu_ar_options[0].onclick = function(event) {event.stopPropagation(); changeCSS("char", ( 4/3 )); };
smenu_ar_options[1].onclick = function(event) {event.stopPropagation(); changeCSS("char", (16/10)); };
smenu_ar_options[2].onclick = function(event) {event.stopPropagation(); changeCSS("char", (16/9 )); };
smenu_ar_options[3].onclick = function(event) {event.stopPropagation(); changeCSS("char", (21/9 )); };
// smenu_el[0].onclick = function (event) {event.stopPropagation(); showSettings() };
smenu_el[5].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"fitw" ) };
smenu_el[4].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"fith" ) };
smenu_el[3].onclick = function (event) {event.stopPropagation(); changeCSS("reset","reset" ) };
smenu_el[1].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"zoom" ) };
smenu_el[2].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"unzoom") };
@ -565,7 +674,7 @@ function showSettings(){
function onFullScreenChange(){ function onFullScreenChange(){
// Popravimo velikost gumbov // Popravimo velikost gumbov
// Let's fix the button size: // Let's fix the button size:
var button_width = document.getElementsByClassName("ytp-button ytp-settings-button")[0].scrollWidth; var button_width = document.getElementsByClassName(sample_button_class)[sample_button_index].scrollWidth;
for( var i = 5; i >= 0; i--){ for( var i = 5; i >= 0; i--){
buttons[i].style.width = (button_width * 0.75) + "px"; buttons[i].style.width = (button_width * 0.75) + "px";
buttons[i].style.paddingLeft = (button_width *0.15 ) + "px"; buttons[i].style.paddingLeft = (button_width *0.15 ) + "px";
@ -576,7 +685,7 @@ function onFullScreenChange(){
//Sedaj poglejmo še, če lahko v nadzorno vrstico spravimo vse gumbe //Sedaj poglejmo še, če lahko v nadzorno vrstico spravimo vse gumbe
//Let's see if we can get all the buttons in the control bar //Let's see if we can get all the buttons in the control bar
var rctl = document.getElementsByClassName("ytp-right-controls")[0]; // var rctl = document.getElementsByClassName("ytp-right-controls")[0];
} }
@ -597,16 +706,10 @@ function changeCSS(type, what_do){
hideMenu("uw-armenu"); hideMenu("uw-armenu");
hideMenu("uw-smenu"); hideMenu("uw-smenu");
var e_video = document.getElementsByClassName("video-stream")[0];
var video = { "width": e_video.scrollWidth, "height": e_video.scrollHeight }
var e_player;
if(inIframe()) var video = { "width": $("video")[0].scrollWidth, "height": $("video")[0].scrollHeight };
e_player = document.getElementById("player")
else
e_player = document.getElementById("movie_player");
var player = { "width": e_player.clientWidth, "height": e_player.clientHeight } var nplayer = { "width": player.clientWidth, "height": player.clientHeight }
// Youtube predvajalnik privzeto resetira CSS ob prehodu v/iz fullscreen. Tukaj shranimo zadnje dejanje, // Youtube predvajalnik privzeto resetira CSS ob prehodu v/iz fullscreen. Tukaj shranimo zadnje dejanje,
// da ga lahko onFullscreenOff/onFullscreenOn uveljavita. // da ga lahko onFullscreenOff/onFullscreenOn uveljavita.
@ -622,8 +725,10 @@ function changeCSS(type, what_do){
// ----------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------
if (type == "char"){ if (type == "char"){
if(debugmsg)
console.log("uw::changeCSS | trying to change aspect ratio.");
// char = CHange Aspect Ratio // char = CHange Aspect Ratio
char(what_do, video, player); char(what_do, video, nplayer);
return; return;
} }
@ -631,7 +736,7 @@ function changeCSS(type, what_do){
if(debugmsg) if(debugmsg)
console.log("uw::changeCSS | issuing reset."); console.log("uw::changeCSS | issuing reset.");
resetCSS(video, player); resetCSS(video, nplayer);
return; return;
} }
@ -644,9 +749,11 @@ function changeCSS(type, what_do){
if(inFullScreen || ( if(inFullScreen || (
(document.activeElement.getAttribute("role") != "textbox") && (document.activeElement.getAttribute("role") != "textbox") &&
(document.activeElement.getAttribute("type") != "text") (document.activeElement.getAttribute("type") != "text")
)) )){
changeCSS_nofs(what_do, video, player); if(debugmsg)
console.log("uw::changeCSS | trying to fit width or height");
changeCSS_nofs(what_do, video, nplayer);
}
} }
@ -824,13 +931,23 @@ function resetCSS(video, player){
} }
function changeCSS_nofs(what_do, video, player){ function changeCSS_nofs(what_do, video, player){
if(debugmsg){
console.log("uw::changeCSS_nofs | arguments: what_do:",what_do,"; video:", video,"; player:", player);
}
var w; var w;
var h; var h;
var top; var top;
var left; var left;
var ar = video.width/video.height; var evideo = $("video")[0];
var video = {width: evideo.videoWidth, height: evideo.videoHeight};
var ar = video.width / video.height;
if(debugmsg){
console.log("uw::changeCSS_nofs | video dimensions:", video.width, "x", video.height, "; ar:",ar);
}
if(what_do == "fitw" || what_do == "fit-width"){ if(what_do == "fitw" || what_do == "fit-width"){
// Ker bi bilo lepo, da atribut 'top' spremenimo hkrati z width in height, moramo najprej naračunati, // Ker bi bilo lepo, da atribut 'top' spremenimo hkrati z width in height, moramo najprej naračunati,
@ -943,7 +1060,7 @@ function applyCSS(dimensions){
$("video").css({"width": dimensions.w,"height": dimensions.h,"top": dimensions.top, "left": dimensions.left}); $("video").css({"width": dimensions.w,"height": dimensions.h,"top": dimensions.top, "left": dimensions.left});
if(debugmsg) if(debugmsg)
console.log("uw::applycss | css applied"); console.log("uw::applycss | css applied. Dimensions/pos: w:",dimensions.w,"; h:",dimensions.h,"; top:",dimensions.top,"; left:",dimensions.left);
} }
function inIframe(){ function inIframe(){

4
manifest.json
View File

@ -1,7 +1,7 @@
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "Ultrawidify-git", "name": "Ultrawidify-git",
"version": "1.0.2", "version": "1.0.3",
"icons": { "icons": {
"32":"res/icons/uw-32.png", "32":"res/icons/uw-32.png",
@ -13,7 +13,7 @@
"content_scripts": [ "content_scripts": [
{ {
"matches": ["*://*.youtube.com/*", "*://youtube.com/*", "*://youtu.be/*"], "matches": ["*://*.youtube.com/*", "*://youtube.com/*", "*://youtu.be/*","*://www.netflix.com/watch/*"],
"js": [ "js/jquery-3.1.1.js", "js/uw.js" ], "js": [ "js/jquery-3.1.1.js", "js/uw.js" ],
"all_frames": true "all_frames": true
} }

43
res/css/uw_netflix.css
View File

@ -1,4 +1,39 @@
/* this is a placeholder file until I get around to actually .uw-button{
* implementing netflix support. This will probably happen by display: inline-block;
* the end of 2016 (depends on how and when I get to getting /* height: 100% !important; */
* my free month of netflix */ background-size: 75% 75%;
background-repeat: no-repeat;
background-position: center center;
}
.uw-button-row {
display: inline-block !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
width: 99% !important;
height: 100% !important;
z-index: 1337 !important;
text-align: right;
}
.uw-button:hover{
background-color: rgba(192,0,0,0.66);
}
.uw-setmenu{
display: none;
position: absolute;
background-color: rgba(0,0,0,0.66);
right: 0px;
}
.uw-setmenu-item{
display: flex;
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);
}