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

Added 'settings menu' — at the moment, the only option in there is to force aspect ratio. (More thorough README.MD changes are coming soon)

Browse Source
This commit is contained in:
Tamius Han 2016-10-23 20:47:14 +02:00
parent 70f11dd86b
commit ed7c76d072
7 changed files with 199 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -8,7 +8,7 @@ The technology has been here for a while, but plenty of people don't know how to
![Demo](img-demo/example-httyd2.png "Should these black bars be here? No [...] But an ultrawide user never forgets.")
I'd demo with [Sintel](https://www.youtube.com/watch?v=eRsGyueVLvQ) but they encoded the video without the black bars. Thanks, Blender Foundation.
I'd demo with [Sintel](https://www.youtube.com/watch?v=eRsGyueVLvQ) but they encoded the video without the black bars. ~~Thanks, Blender Foundation.~~ Actually they're not off the hook.
This extension also allows you to zoom in or out of video (similar to how SMPlayer does it).
@ -24,7 +24,7 @@ This extension also allows you to zoom in or out of video (similar to how SMPlay
### Permanent install
[v0.9.8 — Experimental version — download from here](http://tamius.net/ultrawidify) — If 30 minutes old is stable enough for you, this is it. This version is pretty much code from this repo. It's also unlisted so I don't have to go through AMO for every minor change.
[v0.9.9 — Experimental version — download from here](http://tamius.net/ultrawidify) — If 30 minutes old is stable enough for you, this is it. This version is pretty much code from this repo. It's also unlisted so I don't have to go through AMO for every minor change.
[v0.9.1 — Regular version — download from AMO](https://addons.mozilla.org/en/firefox/addon/ultrawidify/) — more stable and with AMO's approval. No experimental features either.
@ -90,3 +90,7 @@ Keybind `a` just doesn't work at all, so no 16:10.
* Added GUI/buttons on the player.
* Script now only loads on youtube pages (iframes included) (before, this script would run on any page)
###v0.9.9
* The aspect ratio thingy is now also in GUI

BIN
img/setbg.xcf Normal file
View File

Binary file not shown.

BIN
img/settings-bg.xcf Normal file
View File

Binary file not shown.

BIN
img/ytplayer-icons/settings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
js/.uw.js.kate-swp
View File

Binary file not shown.

256
js/uw.js
View File

@ -20,9 +20,30 @@ $("<style>")
.uw-button{\
display: inline-block;\
height: 100% !important; \
background-size: contain; \
background-size: 75% 75%; \
background-repeat: no-repeat;\
background-position: center center;\
}\
.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{\
font-family: \"Oxygen\";\
color: #ffffff !important;\
width: 90%;\
padding-left: 10%;\
}\
.uw-setmenu-item:hover{\
background-color: rgba(192,0,0,0.66);\
}\
.show{\
display: block;\
}")
.appendTo("head");
@ -33,31 +54,31 @@ $(document).ready(function() {
$(document).keypress(function (event) { // Tukaj ugotovimo, katero tipko smo pritisnili
switch (event.key){
case 'w':
changeCSS("fitw");
changeCSS("fit","fitw");
break;
case 'e':
changeCSS("fith");
changeCSS("fit","fith");
break;
case 'r':
changeCSS("reset");
changeCSS("reset","reset");
break;
case 'z':
changeCSS("zoom");
changeCSS("fit","zoom");
break;
case 'u':
changeCSS("unzoom");
changeCSS("fit","unzoom");
break;
case 'd':
changeCSS(0);
changeCSS("char", (21/9));
break;
case 's':
changeCSS(1);
changeCSS("char", (16/9));
break;
case 'a':
changeCSS(2);
changeCSS("char", (16/10));
break;
case 'x':
changeCSS(3);
changeCSS("char", (4/3));
}
});
@ -79,13 +100,8 @@ function addCtlButtons(provider_id){
// 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
var button_width = document.getElementsByClassName("ytp-button ytp-settings-button")[0].scrollWidth;
//NOTE: jQuery tu serje da je tole zgoraj nekaj undefined, ampak skript dela pravilno. Zaenkrat nas jQuery problemi
//zato ne bojo brigal pol kurca
//
//NOTE: jQuery sometimes shits a word salat in the console and the above line seems to be the problem. Since
//everything works just fine, we pretty much ignore that
var button_def = [ "fitw", "fith", "reset", "zoom", "uzoom" ];
var button_def = [ "fitw", "fith", "reset", "zoom", "uzoom", "settings" ];
if(debugmsg)
console.log("uw::addCtlButtons | trying to add buttons");
@ -97,22 +113,100 @@ function addCtlButtons(provider_id){
var rctl = document.getElementsByClassName("ytp-right-controls")[0];
for( var i = 4; i >= 0; i--){
for( var i = 5; i >= 0; i--){
buttons[i] = document.createElement('div');
buttons[i].style.backgroundImage = 'url(' + imageToUrl("/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.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";
$(rctl).prepend(buttons[i]);
}
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() { showMenu("uw-smenu") };
buttons[5].id = "uw-settings-button";
var settings_menu = document.createElement("div");
var smenu_settings = document.createElement("div");
var smenu_ar = document.createElement("div");
var smenu_ar_menu = document.createElement("div");
var smenu_reset = document.createElement("div");
var smenu_ar_options = [];
buttons[5].appendChild(settings_menu);
settings_menu.appendChild(smenu_settings);
settings_menu.appendChild(smenu_ar);
settings_menu.appendChild(smenu_reset);
for(var i = 0; i < 4; i++){
smenu_ar_options[i] = document.createElement("div");
smenu_ar_options[i].className = "uw-setmenu-item";
smenu_ar_menu.appendChild(smenu_ar_options[i]);
}
settings_menu.id = "uw-smenu";
settings_menu.className = "uw-setmenu";
smenu_settings.id = "uw-smenu_settings";
smenu_settings.className = "uw-setmenu-item";
smenu_ar.id = "uw-smenu_ar";
smenu_ar.className = "uw-setmenu-item";
// smenu_reset.id = "uw-smenu_reset;
// smenu_reset.className = "uw-setmenu-item";
smenu_ar_menu.id = "uw-armenu";
smenu_ar_menu.className = "uw-setmenu";
// Stvari, ki se spreminjajo, se določijo tukaj
// Things that can change are defined here
settings_menu.style.bottom = (button_width * 1.5) + "px";
settings_menu.style.width = (button_width * 7.5) + "px";
settings_menu.style.fontSize = (button_width * 0.50) + "px";
smenu_ar_menu.style.right = (button_width * 7.5) + "px";
smenu_ar_menu.style.width = (button_width * 2.5) + "px";
smenu_ar_menu.style.bottom = "0px";
// Tukaj se določa notranji HTML knofov
// Inner HTML of elements is defined here
smenu_ar.innerHTML = "Force aspect ratio";
smenu_ar.appendChild(smenu_ar_menu);
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";
// 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_ar).on("mouseenter", function(){showMenu("uw-armenu")});
$(smenu_ar).on("mouseleave", function(){showMenu("uw-armenu")});
smenu_ar_options[0].onclick = function() { changeCSS("char", ( 4/3 )) };
smenu_ar_options[1].onclick = function() { changeCSS("char", (16/10)) };
smenu_ar_options[2].onclick = function() { changeCSS("char", (16/9 )) };
smenu_ar_options[3].onclick = function() { changeCSS("char", (21/9 )) };
}
buttons[0].onclick = function() { changeCSS("fitw") };
buttons[1].onclick = function() { changeCSS("fith") };
buttons[2].onclick = function() { changeCSS("reset") };
buttons[3].onclick = function() { changeCSS("zoom") };
buttons[4].onclick = function() { changeCSS("unzoom") };
if(debugmsg)
console.log("uw::addCtlButtons | buttons added");
@ -124,11 +218,14 @@ function onFullScreenChange(){
// Popravimo velikost gumbov
// Let's fix the button size:
var button_width = document.getElementsByClassName("ytp-button ytp-settings-button")[0].scrollWidth;
for( var i = 4; i >= 0; i--){
for( var i = 5; i >= 0; i--){
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";
}
document.getElementById("uw-smenu").style.bottom = (button_width * 1.5) + "px";
}
@ -145,8 +242,9 @@ function onFullscreenOff(){
}
function changeCSS(what_do){
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 }
@ -172,15 +270,9 @@ function changeCSS(what_do){
// Handling actions happens below this line
// -----------------------------------------------------------------------------------------
if (what_do >= 0 && what_do < 5){
if( what_do == 0)
set_video_ar((2560/1080), video, player);
if(what_do == 1)
set_video_ar((1920/1080), video, player);
if(what_do == 2)
set_video_ar((16/10), video, player);
if(what_do == 3)
set_video_ar((4/3), video, player);
if (type == "char"){
// char = CHange Aspect Ratio
char(what_do, video, player);
return;
}
@ -208,17 +300,61 @@ function changeCSS(what_do){
}
function char(new_ar, video, player){
// Kot vhodni argument dobimo razmerje stranic. Problem je, ker pri nekaterih ločljivostih lahko razmerje stranic
// videa/našega zaslona minimalno odstopa od idealnega razmerja — npr 2560x1080 ni natanko 21:9, 1920x1080 ni
// natanko 16:9. Zato ob podanem razmerju stranic izračunamo dejansko razmerje stranic.
//
// The aspect ratio we get as an argument is an ideal aspect ratio. Some (most) resolutions' aspect ratios differ
// from that ideal aspect ratio (by a minimal amount) — e.g. 2560x1080 isn't exactly 21:9, 1920x1080 isn't exactly
// 16:9. What is more, both 3440x1440 and 2560x1080 are considered "21:9", but their aspect ratios are slightly
// different. This has the potential to result in annoying black bars, so we correct the aspect ratio we're given
// to something that's slightly more correct.
var ar;
var res_219 = [ [2560,1080], [3440,1440] ];
var res_169 = [ [1920,1080], [1280,720], [1366,768] ];
if(new_ar == (21/9)){
for (var i = 0; i < res_219.length; i++){
if( player.height == res_219[i][1]){
ar = res_219[i][0]/res_219[i][1];
set_video_ar( ar, video, player);
return;
}
}
}
else if(new_ar == (16/9)){
for (var i = 0; i < res_169.length; i++){
if( player.height == res_169[i][1]){
ar = res_169[i][0]/res_169[i][1];
set_video_ar( ar, video, player);
return;
}
}
}
set_video_ar(new_ar, video, player);
}
/* Tukaj povemo, kakšno razmerje stranic ima video.
// Kaj to pomeni:
// Mi rečemo, da ima video razmerje stranic 16:9. Dejanski video
// ima razmerje 4:3. To pomeni, da ima video zgoraj in spodaj črno
// obrobo, ki je nočemo, zato video povečamo toliko, da se ta obroba odreže.
//
// OBROB TUKAJ NE DODAJAMO.
//
// With this function, we specify the aspect ratio of the video.
// What does this mean?
// If we specify that the aspect ratio of a video is 16:9 when video is
// actually 4:3, that means the video has black bars above and below.
// We zoom the video just enough for the black lines to disappear.
//
// WE DO NOT ADD ANY BLACK BORDERS. If we get to a scenario when we'd have to add
// black borders, we do nothing instead.
*/
function set_video_ar(aspect_ratio, video, player){
var video_ar = video.width / video.height;
@ -226,6 +362,7 @@ function set_video_ar(aspect_ratio, video, player){
if(debugmsg)
console.log("uw::set_video_ar | aspect ratio: " + aspect_ratio + "; video_ar: " + video_ar + "; display_ar: " + display_ar);
console.log("uw::set_video_ar | player dimensions: " + player.width + "x" + player.height + "; video dimensions: " + video.width + "x" + video.height);
if( aspect_ratio*1.1 > video_ar && video_ar > aspect_ratio*0.9 ){
// Ta hack nas reši problema, ki ga predstavlja spodnji if stavek — če se legit 21:9 videu na 16:9 monitorju
@ -242,34 +379,6 @@ function set_video_ar(aspect_ratio, video, player){
return;
}
if( display_ar*1.1 < aspect_ratio && aspect_ratio > 1){
/* Ker tukaj video obrežemo tako, da ga povečamo, dokler neželjen del videa gleda čez rob prikazovalnika,
// tako obrezovanje ne bo delovalo, če hočemo nastaviti razmerje stranic na nekaj širšega, kot je naš zaslon.
// Če je temu tako, ne naredimo ničesar.
//
// display_ar*1.1 — zato, da imamo nekaj meje, če se razmerje stranic zaslona ne ujema popolnoma natančno z
// razmerjem stranic, ki smo ga dobili kot argument.
//
// && aspect_ratio > 1 zato, če se zgodi, da se kdaj odločimo podpirati ultraozke zaslone (9/16, itd).
//
// -----------------------------------------------------------------------------------------------------------
//
// Because we crop the video by enlarging it until the unwanted parts of it are over the edges of the display,
// this function obviously won't work if we want to set our aspect ratio to something that's wider than the
// aspect ratio of our display. In such cases we do nothing at all.
//
// display_ar*1.1 — some tolerance for cases where display aspect ratio and the aspect ratio we get as an
// argument differ by a slim margin. (see: 1920x1080 isn't exactly 16:9. 2560x1080 is slightly wider than
// 21:9)
//
// && aspect_ratio > 1 is here in case we decide to support ultrathin monitors (9/16, etc).
*/
if( debugmsg)
console.log("uw::set_video_ar | ar is wider than our monitor. not doing a thing");
return;
}
//Širina, višina, top, left za nov video
//Width, height, top and left for the new video
var nv = { "w":0, "h":0, "top":0, "left":0 };
@ -315,6 +424,9 @@ function set_video_ar(aspect_ratio, video, player){
nv.left = (player.width - nv.w)/2;
}
if(nv.w > (player.width * 1.1) && nv.h > (player.height * 1.1))
return;
applyCSS(nv);
}
@ -440,9 +552,9 @@ function changeCSS_nofs(what_do, video, player){
left = (player.width - w) / 2;
if (h > player.height * 4){
console.log("But this is bigger than some rooms, this is bigger than some people's flats!");
console.log("But this video is ... I mean, it's fucking huge. This is bigger than some rooms, this is bigger than some people's flats!");
// Insert obligatory omnishambles & coffee machine quote here
console.log("(No really, mate, you took this way too far already)");
console.log("(No really, mate, you took this way too far already. Can't let you do that, Dave.)");
return;
}
}
@ -489,3 +601,13 @@ function inIframe(){
function imageToUrl(img){
return chrome.extension.getURL(img);
}
function showMenu(id){
if(debugmsg)
console.log("uw::showMenu | toggling menu with id " + id);
document.getElementById(id).classList.toggle("show");
}
function hideMenu(id){
document.getElementById(id).classList.remove("show");
}

7
manifest.json
View File

@ -1,8 +1,8 @@
{
"manifest_version": 2,
"name": "Ultrawidify",
"version": "0.9.8",
"name": "Ultrawidify-git",
"version": "0.9.9",
"icons": {
"32":"icons/uw-32.png",
@ -29,7 +29,8 @@
"img/ytplayer-icons/uzoom.png",
"img/ytplayer-icons/fitw.png",
"img/ytplayer-icons/fith.png",
"img/ytplayer-icons/reset.png"
"img/ytplayer-icons/reset.png",
"img/ytplayer-icons/settings.png"
],
"applications": {
"gecko": {