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

211
js/uw.js
View File

@ -1,10 +1,10 @@
var debugmsg = false;
var debugmsg = true;
if(debugmsg){
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(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
}
const playercheck_recursion_depth_limit = 3;
var extraClassAdded = false;
var inFullScreen = false;
@ -22,6 +22,73 @@ var serviceArray = [".video-stream" ]; //Youtube
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
@ -60,9 +127,13 @@ addLink("res/css/uw_common.css");
if(page_url.indexOf("youtu") != -1){
addLink("res/css/uw_yt.css");
}
if(page_url.indexOf("netflix.com") != -1){
addLink("res/css/uw_netflix.css");
}
//END ADDING CSS
//BEGIN keybind-related stuff
// Yeah hi /r/badcode.
// Anyway, because nazi localstorage flat out refuses to store arrays:
var DEFAULT_KEYBINDINGS = {
@ -133,6 +204,9 @@ ask4keybinds.then( (res) => {
// console.log("res. ", res[0].ultrawidify_keybinds);
});
//END keybind-related stuff
//BEGIN comms with uw-bg
if(debugmsg)
console.log("uw | Setting up comms with background scripts");
@ -153,6 +227,7 @@ browser.runtime.onMessage.addListener(function (message, sender, stuff ) {
if(debugmsg)
console.log("uw | Comms with background scripts: done");
//END comms with uw-bg
$(document).ready(function() {
@ -178,6 +253,7 @@ function extSetup(){
if(debugmsg)
console.log("uw::extSetup | setting up keyboard shortcuts");
if(init())
keydownSetup();
addCtlButtons(0);
if(debugmsg)
@ -254,9 +330,9 @@ function keydownSetup(){
//BEGIN UI
function check4player(provider_id){
function check4player(recursion_depth){
try{
var button_width = document.getElementsByClassName(buttonClass)[0].scrollWidth;
var button_width = document.getElementsByClassName(sample_button_class)[sample_button_index].scrollWidth;
return true;
}
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.
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.");
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;
}
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
// Settings button is more or less always there, so we use its width as width of our buttons
try{
console.log(2);
var button_width = document.getElementsByClassName(buttonClass)[0].scrollWidth;
console.log(3);
// Na različnih straneh širino gumba poberemo na različne načine.
if(button_size_base == "y")
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){
// 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.
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.");
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;
}
console.log(4);
var button_def = [ "fitw", "fith", "reset", "zoom", "uzoom", "settings" ];
if(debugmsg)
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
// uw_element, prek katerega jih naberemo na kup. Ta del kode je tu bolj ali manj zaradi debugiranja.
//
@ -339,43 +426,65 @@ function addCtlButtons(provider_id){
previousElements[0].parentNode.removeChild(previousElements[0]);
}
// If we're on youtube:
if(provider_id == 0){
var check_width = false;
var e_player;
// If we're on youtube:
if(page_url.indexOf("youtu") != -1){
check_width = true;
var rctl;
var rctl_width;
var lctl_width;
var ctlbar_width;
if(inIframe())
e_player = document.getElementById("player");
player = document.getElementById("player");
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;
lctl_width = document.getElementsByClassName("ytp-left-controls")[0].offsetWidth;
ctlbar_width = document.getElementsByClassName("ytp-chrome-controls")[0].offsetWidth;
// Tukaj dodamo gumbe na stran
// Here we add the buttons
}
for( var i = 5; i >= 0; i--){
// 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";
$(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;
// 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( (rctl_width + lctl_width) * 1.1 > ctlbar_width){
if(check_width && (rctl_width + lctl_width) * 1.1 > ctlbar_width){
for( var i = 4; i >= 0; i--){
buttons[i].classList.add("uw_hide");
}
@ -445,7 +554,7 @@ function addCtlButtons(provider_id){
// 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;
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.
@ -531,7 +640,7 @@ function addCtlButtons(provider_id){
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(){
// Popravimo velikost gumbov
// 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--){
buttons[i].style.width = (button_width * 0.75) + "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
//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-smenu");
var e_video = document.getElementsByClassName("video-stream")[0];
var video = { "width": e_video.scrollWidth, "height": e_video.scrollHeight }
var e_player;
if(inIframe())
e_player = document.getElementById("player")
else
e_player = document.getElementById("movie_player");
var video = { "width": $("video")[0].scrollWidth, "height": $("video")[0].scrollHeight };
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,
// da ga lahko onFullscreenOff/onFullscreenOn uveljavita.
@ -622,8 +725,10 @@ function changeCSS(type, what_do){
// -----------------------------------------------------------------------------------------
if (type == "char"){
if(debugmsg)
console.log("uw::changeCSS | trying to change aspect ratio.");
// char = CHange Aspect Ratio
char(what_do, video, player);
char(what_do, video, nplayer);
return;
}
@ -631,7 +736,7 @@ function changeCSS(type, what_do){
if(debugmsg)
console.log("uw::changeCSS | issuing reset.");
resetCSS(video, player);
resetCSS(video, nplayer);
return;
}
@ -644,9 +749,11 @@ function changeCSS(type, what_do){
if(inFullScreen || (
(document.activeElement.getAttribute("role") != "textbox") &&
(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,14 +931,24 @@ function resetCSS(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 h;
var top;
var left;
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"){
// Ker bi bilo lepo, da atribut 'top' spremenimo hkrati z width in height, moramo najprej naračunati,
// za kakšen faktor se poviša višina. To potrebujemo, da se pravilno izračuna offset.
@ -943,7 +1060,7 @@ function applyCSS(dimensions){
$("video").css({"width": dimensions.w,"height": dimensions.h,"top": dimensions.top, "left": dimensions.left});
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(){

4
manifest.json
View File

@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "Ultrawidify-git",
"version": "1.0.2",
"version": "1.0.3",
"icons": {
"32":"res/icons/uw-32.png",
@ -13,7 +13,7 @@
"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" ],
"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
* implementing netflix support. This will probably happen by
* the end of 2016 (depends on how and when I get to getting
* my free month of netflix */
.uw-button{
display: inline-block;
/* height: 100% !important; */
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);
}