initial commit
BIN
icons/uw-32.png
Normal file
After Width: | Height: | Size: 317 B |
BIN
icons/uw-48.png
Normal file
After Width: | Height: | Size: 402 B |
BIN
icons/uw-96.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
img/fith.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
img/fitw.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
img/reset.png
Normal file
After Width: | Height: | Size: 1.6 KiB |
BIN
img/uzoom.png
Normal file
After Width: | Height: | Size: 6.2 KiB |
BIN
img/zoom.png
Normal file
After Width: | Height: | Size: 6.6 KiB |
5
jquery.js
vendored
Normal file
123
js/jquery.fullscreen.js
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
(function($, window, documentElement, height, width) {
|
||||||
|
|
||||||
|
// browser detection code courtesy of quirksmode, http://www.quirksmode.org/js/detect.html
|
||||||
|
// slightly simplified, as well as minor changes for readability purposes
|
||||||
|
|
||||||
|
var BrowserDetect = {
|
||||||
|
init: function () {
|
||||||
|
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
|
||||||
|
this.version = this.searchVersion(navigator.userAgent)
|
||||||
|
|| this.searchVersion(navigator.appVersion)
|
||||||
|
|| "an unknown version";
|
||||||
|
this.OS = this.searchString(this.dataOS) || "an unknown OS";
|
||||||
|
},
|
||||||
|
|
||||||
|
searchString: function (data) {
|
||||||
|
for (var i=0;i<data.length;i++) {
|
||||||
|
var dataString = data[i].string;
|
||||||
|
var dataProp = data[i].prop;
|
||||||
|
this.versionSearchString = data[i].versionSearch || data[i].identity;
|
||||||
|
if (dataString) {
|
||||||
|
if (dataString.indexOf(data[i].subString) != -1)
|
||||||
|
return data[i].identity;
|
||||||
|
}
|
||||||
|
else if (dataProp)
|
||||||
|
return data[i].identity;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
searchVersion: function (dataString) {
|
||||||
|
var index = dataString.indexOf(this.versionSearchString);
|
||||||
|
if (index == -1) return;
|
||||||
|
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
|
||||||
|
},
|
||||||
|
|
||||||
|
dataBrowser: [
|
||||||
|
{ string: navigator.userAgent, subString: "Chrome", identity: "Chrome" },
|
||||||
|
{ string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version" },
|
||||||
|
{ prop: window.opera, identity: "Opera", versionSearch: "Version" },
|
||||||
|
{ string: navigator.userAgent, subString: "Firefox", identity: "Firefox" },
|
||||||
|
{ string: navigator.userAgent, subString: "MSIE", identity: "Explorer", versionSearch: "MSIE" }
|
||||||
|
],
|
||||||
|
|
||||||
|
dataOS : [
|
||||||
|
{ string: navigator.platform, subString: "Win", identity: "Windows" },
|
||||||
|
{ string: navigator.platform, subString: "Mac", identity: "Mac" },
|
||||||
|
{ string: navigator.platform, subString: "Linux", identity: "Linux" }
|
||||||
|
]
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
BrowserDetect.init();
|
||||||
|
// Browser name: BrowserDetect.browser
|
||||||
|
// Browser version: BrowserDetect.version
|
||||||
|
// OS name: BrowserDetect.OS
|
||||||
|
|
||||||
|
// here are major browsers' keyboard mapping for triggering fullscreen on/off
|
||||||
|
var keys = {
|
||||||
|
"MSIE": {
|
||||||
|
"Windows": { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11", alt: "F11" }
|
||||||
|
},
|
||||||
|
"Firefox": {
|
||||||
|
"Windows": { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11", alt: "F11" },
|
||||||
|
"Linux": { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11", alt: "F11" },
|
||||||
|
"Mac": { ctrlKey: false, altKey: false, metaKey: true, shiftKey: true, which: 70, string: "⇧⌘F", alt: "Shift+Command+F" }
|
||||||
|
},
|
||||||
|
"Chrome": {
|
||||||
|
"Windows": { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11", alt: "F11" },
|
||||||
|
"Linux": { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11", alt: "F11" },
|
||||||
|
"Mac": { ctrlKey: false, altKey: false, metaKey: true, shiftKey: true, which: 70, string: "⇧⌘F", alt: "Shift+Command+F" }
|
||||||
|
},
|
||||||
|
"Safari": { // still missing Safari on Windows... help!
|
||||||
|
"Mac": { ctrlKey: true, altKey: false, metaKey: false, shiftKey: true, which: 70, string: "^⌘F", alt: "Control+Command+F" }
|
||||||
|
},
|
||||||
|
"Opera": {
|
||||||
|
"Windows": { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11", alt: "F11" },
|
||||||
|
"Linux": { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11", alt: "F11" },
|
||||||
|
"Mac": { ctrlKey: false, altKey: false, metaKey: true, shiftKey: true, which: 70, string: "⇧⌘F", alt: "Shift+Command+F" }
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
var
|
||||||
|
isFullScreen = function() {
|
||||||
|
return (documentElement.clientHeight == height && documentElement.clientWidth == width) ||
|
||||||
|
window.fullScreen ||
|
||||||
|
(window.outerHeight == height && window.outerWidth == width) ||
|
||||||
|
(BrowserDetect.browser == "Safari" && window.outerHeight == (height - 40) && window.outerWidth == width)
|
||||||
|
;
|
||||||
|
}
|
||||||
|
,$window = $(window)
|
||||||
|
;
|
||||||
|
|
||||||
|
var thisKeys = keys[BrowserDetect.browser][BrowserDetect.OS];
|
||||||
|
var shortcut = { shortcut: thisKeys.string, longform: thisKeys.alt };
|
||||||
|
|
||||||
|
$window
|
||||||
|
.data('fullscreen-state', isFullScreen())
|
||||||
|
.data('fullscreen-key', shortcut)
|
||||||
|
.resize(function() {
|
||||||
|
var fullscreenState = isFullScreen();
|
||||||
|
|
||||||
|
if ($window.data('fullscreen-state') && !fullscreenState) {
|
||||||
|
$window
|
||||||
|
.data('fullscreen-state', fullscreenState)
|
||||||
|
.trigger('fullscreen-toggle', [false])
|
||||||
|
.trigger('fullscreen-off')
|
||||||
|
;
|
||||||
|
}
|
||||||
|
else if (!$window.data('fullscreen-state') && fullscreenState) {
|
||||||
|
$window
|
||||||
|
.data('fullscreen-state', fullscreenState)
|
||||||
|
.trigger('fullscreen-toggle', [true])
|
||||||
|
.trigger('fullscreen-on')
|
||||||
|
;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.keydown(function(e) {
|
||||||
|
if (thisKeys && e.ctrlKey == thisKeys.ctrlKey && e.altKey == thisKeys.altKey && e.metaKey == thisKeys.metaKey && e.shiftKey == thisKeys.shiftKey && e.which == thisKeys.which)
|
||||||
|
$window.trigger('fullscreen-key', [thisKeys.string, thisKeys.alt]);
|
||||||
|
})
|
||||||
|
;
|
||||||
|
|
||||||
|
})(jQuery, this, document.documentElement, screen.height, screen.width);
|
34
manifest.json
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
|
||||||
|
"manifest_version": 2,
|
||||||
|
"name": "Ultrawidify",
|
||||||
|
"version": "0.9.1",
|
||||||
|
|
||||||
|
"description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
|
||||||
|
|
||||||
|
|
||||||
|
"content_scripts": [
|
||||||
|
{
|
||||||
|
"matches": ["<all_urls>"],
|
||||||
|
"js": [ "jquery.js", "uw.js" ],
|
||||||
|
"all_frames": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"matches": ["*://*.youtube.com/*", "*://youtube.com/*"],
|
||||||
|
"js": [ "jquery.js", "uw.js" ],
|
||||||
|
"all_frames": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
"permissions": [
|
||||||
|
"tabs", "activeTab", "*://*.youtube.com/*", "*://youtube.com/*"
|
||||||
|
],
|
||||||
|
|
||||||
|
"web_accessible_resources": [
|
||||||
|
"img/zoom.png",
|
||||||
|
"img/uzoom.png",
|
||||||
|
"img/fitw.png",
|
||||||
|
"img/fith.png",
|
||||||
|
"img/reset.png"
|
||||||
|
]
|
||||||
|
}
|
434
uw.js
Normal file
@ -0,0 +1,434 @@
|
|||||||
|
var extraClassAdded = false;
|
||||||
|
var inFullScreen = false;
|
||||||
|
|
||||||
|
var cssmod = "";
|
||||||
|
var zoomStep = 0.05;
|
||||||
|
|
||||||
|
var originalcss;
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
// console.log("uw::document.ready | document is ready");
|
||||||
|
var serviceArray = [".video-stream" ]; //Youtube
|
||||||
|
|
||||||
|
// To bo naš dinamičen css
|
||||||
|
// this will be our dynamic css sheet
|
||||||
|
|
||||||
|
$(document).keypress(function (event) { // Tukaj ugotovimo, katero tipko smo pritisnili
|
||||||
|
switch (event.key){
|
||||||
|
case 'w':
|
||||||
|
changeCSS("fitw");
|
||||||
|
break;
|
||||||
|
case 'e':
|
||||||
|
changeCSS("fith");
|
||||||
|
break;
|
||||||
|
case 'r':
|
||||||
|
changeCSS("reset");
|
||||||
|
break;
|
||||||
|
case 'z':
|
||||||
|
changeCSS("zoom");
|
||||||
|
break;
|
||||||
|
case 'u':
|
||||||
|
changeCSS("unzoom");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// console.log("uw::document.ready | loaded shortcuts");
|
||||||
|
|
||||||
|
document.addEventListener("mozfullscreenchange", function( event ) {
|
||||||
|
inFullScreen = ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
|
||||||
|
inFullScreen ? onFullscreenOn() : onFullscreenOff();
|
||||||
|
});
|
||||||
|
|
||||||
|
// $("<style>")
|
||||||
|
// .prop("type", "text/css")
|
||||||
|
// .html(".neueVideo{ display: block !important; margin: 0px auto !important; position: relative !important; transform: none !important; left: 0px !important; }").appendTo("head");
|
||||||
|
//
|
||||||
|
// console.log("uw::document.ready | created new CSS class");
|
||||||
|
});
|
||||||
|
|
||||||
|
function onFullscreenOn(){
|
||||||
|
|
||||||
|
// TODO: show buttons
|
||||||
|
// var button_row = document.getElementsByClassName("ytp-right-controls")[0];
|
||||||
|
//
|
||||||
|
// console.log("uw:: Full screen is now on");
|
||||||
|
// var t = document.createTextNode("but");
|
||||||
|
//
|
||||||
|
// var b_fitw = document.createElement('button');
|
||||||
|
//
|
||||||
|
// b_fitw.appendChild(t);
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// // b_fitw.id = "uw_b_fitw";
|
||||||
|
// b_fitw.className = "ytp_button";
|
||||||
|
// b_fitw.onclick = function() { changeCSS("fitw"); };
|
||||||
|
// // b_fitw.appendChild("<img src='img/fitw.png' height='100%' />");
|
||||||
|
//
|
||||||
|
// button_row.appendChild(b_fitw);
|
||||||
|
//
|
||||||
|
// // var b_fith = document.createElement('button');
|
||||||
|
//
|
||||||
|
// console.log("uw:: added buttons");
|
||||||
|
}
|
||||||
|
function onFullscreenOff(){
|
||||||
|
//TODO: hide buttons
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeCSS(what_do){
|
||||||
|
|
||||||
|
// Če nismo na Youtube, bodo youtube videi v <iframe> elementu — zato najprej pogledamo, če
|
||||||
|
// je element s fokusom iframe
|
||||||
|
|
||||||
|
if(inIframe()){
|
||||||
|
|
||||||
|
var player = document.getElementById("player");
|
||||||
|
changeCSS_nofs(what_do, player);
|
||||||
|
|
||||||
|
// to verjetno pomeni, da nismo na Youtube, zato zaključimo kar tukaj.
|
||||||
|
//
|
||||||
|
// if we're controlling video in an iframe, that probably means we aren't on youtube
|
||||||
|
// so we finish here.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Velikost videa spreminjamo samo, če smo v celozaslonskem načinu ALI če NE pišemo komentarja
|
||||||
|
// Videa ne spreminjamo tudi, če uporabljamo vrstico za iskanje.
|
||||||
|
//
|
||||||
|
// We only change video size when we're in full screen OR if we are NOT writing a comment.
|
||||||
|
// We also leave video alone if we're using the search bar
|
||||||
|
|
||||||
|
var player = document.getElementById("movie_player");
|
||||||
|
if(inFullScreen || (
|
||||||
|
(document.activeElement.getAttribute("role") != "textbox") &&
|
||||||
|
(document.activeElement.getAttribute("type") != "text")
|
||||||
|
))
|
||||||
|
changeCSS_nofs(what_do, player);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeCSS_nofs(what_do, player){
|
||||||
|
|
||||||
|
var w;
|
||||||
|
var h;
|
||||||
|
var top;
|
||||||
|
var left;
|
||||||
|
|
||||||
|
// var player = $('[id*="player"]');
|
||||||
|
// var player = document.getElementById("movie_player");
|
||||||
|
/*
|
||||||
|
if (player = null){
|
||||||
|
console.log("uw::Player is null. retrying...");
|
||||||
|
player = $('[id*="player"]');
|
||||||
|
}*/
|
||||||
|
|
||||||
|
var vs = document.getElementsByClassName("video-stream")[0];
|
||||||
|
var vidwid = vs.scrollWidth;
|
||||||
|
var vidhei = vs.scrollHeight;
|
||||||
|
var ar = vidwid/vidhei;
|
||||||
|
|
||||||
|
if(what_do == "reset"){
|
||||||
|
// $(".video-stream").removeClass("neueVideo");
|
||||||
|
extraClassAdded = false;
|
||||||
|
|
||||||
|
// popraviti je treba še širino, višino in top
|
||||||
|
// we need to fix width, height and top
|
||||||
|
|
||||||
|
var vidwid = document.getElementsByClassName("video-stream")[0].scrollWidth;
|
||||||
|
var vidhei = document.getElementsByClassName("video-stream")[0].scrollHeight;
|
||||||
|
var vidaspect = vidwid / vidhei;
|
||||||
|
var scraspect = player.clientWidth / player.clientHeight;
|
||||||
|
|
||||||
|
if( vidaspect > scraspect ){ // Video je širši od okna | video is wider than window
|
||||||
|
w = player.clientWidth;
|
||||||
|
h = player.clientWidth / vidwid * vidhei;
|
||||||
|
|
||||||
|
top = (player.clientHeight - h) / 2;
|
||||||
|
left = 0;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
h = player.clientHeight;
|
||||||
|
w = player.clientHeight / vidhei * vidwid;
|
||||||
|
|
||||||
|
top = 0; //itak zasedemo 100% višine
|
||||||
|
left = (player.clientWidth - w) / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
top = top + "px";
|
||||||
|
left = left + "px";
|
||||||
|
w = w + "px";
|
||||||
|
h = h + "px";
|
||||||
|
|
||||||
|
$("video").css({"width": w,"height": h,"top": top, "left":left});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(what_do == "fitw"){
|
||||||
|
// 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.
|
||||||
|
//
|
||||||
|
// 100vw = window.innerWidth
|
||||||
|
// [1] window.innerWidth / videoWidth = x
|
||||||
|
//
|
||||||
|
// Če pomnožimo videoHeight z x, dobimo novo višino videa. Nova višina videa je lahko večja ali manjša
|
||||||
|
// kot višina ekrana. Če je višina videa manjša kot višina ekrana, bo top pozitiven, drugače negativen:
|
||||||
|
//
|
||||||
|
// [2] nvideoh = x * videoWidth
|
||||||
|
// [3] top = (window.innerHeight - nvideoh) / 2
|
||||||
|
//
|
||||||
|
// Z 2 delimo, ker hočemo video vertikalno poravnati.
|
||||||
|
|
||||||
|
w = player.clientWidth;
|
||||||
|
h = player.clientWidth / vidwid * vidhei;
|
||||||
|
|
||||||
|
top = (player.clientHeight - h) / 2;
|
||||||
|
left = 0; // Ker zavzamemo vso širino | cos we take up all the width
|
||||||
|
}
|
||||||
|
|
||||||
|
if(what_do == "fith"){
|
||||||
|
h = player.clientHeight;
|
||||||
|
w = player.clientHeight / vidhei * vidwid;
|
||||||
|
|
||||||
|
top = 0; //itak zasedemo 100% višine
|
||||||
|
left = (player.clientWidth - w) / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(what_do == "zoom"){
|
||||||
|
// Video povečujemo na tak način, da sta zoom in unzoom povečata oz. zmanjšata video za enak korak
|
||||||
|
// We do this so zoom and unzoom steps change video sizes for the same amount
|
||||||
|
|
||||||
|
h = vidhei + (player.clientHeight * zoomStep);
|
||||||
|
w = vidwid + (player.clientHeight * zoomStep * ar);
|
||||||
|
/* Zakaj računamo širino na tak način?
|
||||||
|
//
|
||||||
|
// Predstavljajte si, da imamo 2100:900 video v 1600:900 škatli, zoomStep = 0.1. Če bi širino računali po formuli:
|
||||||
|
//
|
||||||
|
// širina = širina_videa + (širina zaslona * zoomStep)
|
||||||
|
//
|
||||||
|
// Potem bi bila nova velikost videa 2260 x 990. Razmerje stranic: 2.28 (moglo bi biti 2.33 — video je popačen).
|
||||||
|
// Zaradi tega novo širino rajši povečamo za razliko_v_višini * razmerje_stranic
|
||||||
|
//
|
||||||
|
// 2100 + (900 * 0.1 * (2100/900)) =
|
||||||
|
// 2100 + (90 * 2.333) = 2310
|
||||||
|
//
|
||||||
|
// Razmerje stranic (2310x990) je tako 2.333 — tako, kot bi moglo biti.
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// ============================================================================================================
|
||||||
|
//
|
||||||
|
// Why did we calculate width this way?
|
||||||
|
//
|
||||||
|
// Imagine we have a 2100x900 video in a 1600:900 container, zoomStep = 0.1. If we calculated width using this:
|
||||||
|
//
|
||||||
|
// width = video_width + (container_width * zoomStep)
|
||||||
|
//
|
||||||
|
// then the new size would be 2260 x 990. This gives us an aspect ratio of 2.28 instead of 2.33 (which is what it
|
||||||
|
// should be). Because of that we rather increase the width by delta_height * aspect_ratio:
|
||||||
|
//
|
||||||
|
// 2100 + (900 * 0.1 * (2100/900)) =
|
||||||
|
// 2100 + (90 * 2.333) = 2310
|
||||||
|
//
|
||||||
|
// This gives us the correct aspect ratio and prevents video deformations.
|
||||||
|
*/
|
||||||
|
|
||||||
|
top = (player.clientHeight - h)/2
|
||||||
|
left = (player.clientWidth - w) / 2;
|
||||||
|
|
||||||
|
if (h > player.clientHeight * 4){
|
||||||
|
console.log("okay mate you took this shit way too far now. I'm not doing shit");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(what_do == "unzoom"){
|
||||||
|
// Video povečujemo na tak način, da sta zoom in unzoom povečata oz. zmanjšata video za enak korak
|
||||||
|
// We do this so zoom and unzoom steps change video sizes for the same amount
|
||||||
|
h = vidhei - (player.clientHeight * zoomStep);
|
||||||
|
w = vidwid - (player.clientHeight * zoomStep * ar);
|
||||||
|
|
||||||
|
top = (player.clientHeight - h)/2
|
||||||
|
left = (player.clientWidth - w) / 2;
|
||||||
|
|
||||||
|
if (h < player.clientHeight * 0.25){
|
||||||
|
console.log("don't you think this is small enough already? You don't need to resize the video all the way down to the size smaller than your penis.");
|
||||||
|
console.log("(if you're a woman, substitute 'penis' with whatever the female equivalent is.)");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
top = top + "px";
|
||||||
|
left = left + "px";
|
||||||
|
w = w + "px";
|
||||||
|
h = h + "px";
|
||||||
|
|
||||||
|
$("video").css({"width": w,"height": h,"top": top, "left": left});
|
||||||
|
}
|
||||||
|
|
||||||
|
function inIframe () {
|
||||||
|
try {
|
||||||
|
return window.self !== window.top;
|
||||||
|
} catch (e) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// // Ta funkcija spreminja CSS v 'full screen' načinu. Is youtube-specific.
|
||||||
|
// // Včasih smo v fullscreen uporabljali to, zdaj uporabljamo changeCSS_nofs
|
||||||
|
// // ker je ta napisana za bolj splošen primer (in dela tudi na fullscreen).
|
||||||
|
// //
|
||||||
|
// // This function modifies CSS in full screen. So far works on youtube.
|
||||||
|
// // We don't use it anymore because changeCSS_nofs also works on fullscreen.
|
||||||
|
// function changeCSS_fs(what_do){
|
||||||
|
//
|
||||||
|
// var w;
|
||||||
|
// var h;
|
||||||
|
// var top;
|
||||||
|
//
|
||||||
|
// // Če hočemo povrniti nastavitve na privzeto, samo pobrišemo naš css
|
||||||
|
// // if we want to restore the default player we just clear our css
|
||||||
|
// if(what_do == "reset"){
|
||||||
|
// $(".video-stream").removeClass("neueVideo");
|
||||||
|
// extraClassAdded = false;
|
||||||
|
//
|
||||||
|
// // popraviti je treba še širino, višino in top
|
||||||
|
// // we need to fix width, height and top
|
||||||
|
//
|
||||||
|
// var vidwid = document.getElementsByClassName("video-stream")[0].scrollWidth;
|
||||||
|
// var vidhei = document.getElementsByClassName("video-stream")[0].scrollHeight;
|
||||||
|
// var vidaspect = vidwid / vidhei;
|
||||||
|
// var scraspect = window.innerWidth / window.innerHeight;
|
||||||
|
//
|
||||||
|
// if( vidaspect > scraspect ){ // Video je širši od okna | video is wider than window
|
||||||
|
// w = "100vw";
|
||||||
|
// h = "auto";
|
||||||
|
// // Razlaga tegale je spodaj | this line of code is explained below
|
||||||
|
// top = (window.innerHeight - ((window.innerWidth / vidwid) * vidhei)) / 2;
|
||||||
|
// top = top + "px";
|
||||||
|
// $("video").css({"width": w,"height": h,"top": top});
|
||||||
|
// }
|
||||||
|
// else{
|
||||||
|
// w = "auto";
|
||||||
|
// h = "100vh";
|
||||||
|
// top = "0px";
|
||||||
|
// $("video").css({"width": w,"height": h,"top": top});
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// console.log("uw::changeCSS | reseting to default view");
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// if (!extraClassAdded){
|
||||||
|
// $(".video-stream").addClass("neueVideo");
|
||||||
|
// extraClassAdded = true;
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// if(what_do == "fitw"){
|
||||||
|
// // 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.
|
||||||
|
// //
|
||||||
|
// // 100vw = window.innerWidth
|
||||||
|
// // [1] window.innerWidth / videoWidth = x
|
||||||
|
// //
|
||||||
|
// // Če pomnožimo videoHeight z x, dobimo novo višino videa. Nova višina videa je lahko večja ali manjša
|
||||||
|
// // kot višina ekrana. Če je višina videa manjša kot višina ekrana, bo top pozitiven, drugače negativen:
|
||||||
|
// //
|
||||||
|
// // [2] nvideoh = x * videoWidth
|
||||||
|
// // [3] top = (window.innerHeight - nvideoh) / 2
|
||||||
|
// //
|
||||||
|
// // Z 2 delimo, ker hočemo video vertikalno poravnati.
|
||||||
|
//
|
||||||
|
// w = "100vw";
|
||||||
|
// h = "auto";
|
||||||
|
//
|
||||||
|
// var vidwid = document.getElementsByClassName("video-stream")[0].scrollWidth;
|
||||||
|
// var vidhei = document.getElementsByClassName("video-stream")[0].scrollHeight;
|
||||||
|
//
|
||||||
|
// // Glej zgornji komentar za pomen [1][2][3] | see above comment for meaning of [1][2][3]
|
||||||
|
// //
|
||||||
|
// // ___________________________[3]____________________________________
|
||||||
|
// // | __________________[2]__________________ |
|
||||||
|
// // | |____________[1]_____________ | |
|
||||||
|
// top = (window.innerHeight - ((window.innerWidth / vidwid) * vidhei)) / 2;
|
||||||
|
//
|
||||||
|
// top = top + "px";
|
||||||
|
// console.log("uw::changeCSS | will try fit to width and center");
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// if(what_do == "fith"){
|
||||||
|
// top = "0"; //itak zasedemo 100% višine
|
||||||
|
// w = "auto";
|
||||||
|
// h = "100vh";
|
||||||
|
//
|
||||||
|
// console.log("uw::changeCSS | will try fit to height");
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// if(what_do == "zoom"){
|
||||||
|
// var vidhei = document.getElementsByClassName("video-stream")[0].scrollHeight;
|
||||||
|
//
|
||||||
|
// w = "auto";
|
||||||
|
//
|
||||||
|
// // Video povečujemo na tak način, da sta zoom in unzoom povečata oz. zmanjšata video za enak korak
|
||||||
|
// // We do this so zoom and unzoom steps change video sizes for the same amount
|
||||||
|
// h = vidhei + (window.innerHeight * zoomStep);
|
||||||
|
//
|
||||||
|
// top = (window.innerHeight - h)/2
|
||||||
|
//
|
||||||
|
// if (h > window.innerHeight * 4){
|
||||||
|
// console.log("okay mate you took this shit way too far now. I'm not doing shit");
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// console.log("uw::changeCSS | zooming in");
|
||||||
|
//
|
||||||
|
// h = h + "px";
|
||||||
|
// top = top + "px";
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// if(what_do == "unzoom"){
|
||||||
|
// var vidhei = document.getElementsByClassName("video-stream")[0].scrollHeight;
|
||||||
|
//
|
||||||
|
// w = "auto";
|
||||||
|
//
|
||||||
|
// // Video povečujemo na tak način, da sta zoom in unzoom povečata oz. zmanjšata video za enak korak
|
||||||
|
// // We do this so zoom and unzoom steps change video sizes for the same amount
|
||||||
|
// h = vidhei - (window.innerHeight * zoomStep);
|
||||||
|
//
|
||||||
|
// top = (window.innerHeight - h)/2
|
||||||
|
//
|
||||||
|
// if (h < window.innerHeight * 0.25){
|
||||||
|
// console.log("don't you think this is small enough already? You don't need to resize the video to the size smaller than your penis.");
|
||||||
|
// console.log("(if you're a woman, just substitute 'penis' with whatever the female equivalent is)");
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// console.log("uw::changeCSS | unzooming");
|
||||||
|
//
|
||||||
|
// h = h + "px";
|
||||||
|
// top = top + "px";
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// $("video").css({"width": w,"height": h,"top": top});
|
||||||
|
//
|
||||||
|
// console.log("uw::changeCSS | applying css");
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// console.log("uw | finished loading");
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// var fitwbutton = document.createElement('button');
|
||||||
|
//
|
||||||
|
// fitwbutton.appendChild(t);
|
||||||
|
// fitwbutton.onclick = function(){ changeCSS("fitw"); };
|
||||||
|
// console.log("testing!3");
|
||||||
|
// document.getElementsByClassName("ytp-right-controls")[0].appendChild(fitwbutton);
|
||||||
|
/*
|
||||||
|
console.log("testing4!");
|
||||||
|
document.body.appendChild('cssmod');
|
||||||
|
console.log("testing 4.1");*/
|