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

Vimeo has a non-fs autodetect.

Browse Source
This commit is contained in:
Tamius Han 2017-10-02 00:27:01 +02:00
parent 9b4b6c2ceb
commit 021f5c6580
7 changed files with 285 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

209
js/conf/SitesConf.js Normal file
View File

@ -0,0 +1,209 @@
// functions here. load from storage happens later down the line
var _sc_nonfsAutoar = function() {
var hostname = window.location.hostname;
if( _sc_SITES[hostname] === undefined)
return _sc_SITES["DEFAULT"].autoAr.nonfs;
return _sc_SITES[hostname].autoAr.nonfs;
}
var _sc_getPlayerTag = function(){
var hostname = window.location.hostname;
if( _sc_SITES[hostname] === undefined)
return undefined;
if( _sc_SITES[hostname].autoAr.playerIdentificationType === undefined)
return undefined;
if( _sc_SITES[hostname].autoAr.playerIdentificationType == "id")
return document.getElementById(_sc_SITES[hostname].autoAr.playerIdentificationString);
if( _sc_SITES[hostname].autoAr.playerIdentificationType == "className")
return document.getElementsByClassName(_sc_SITES[hostname].autoAr.playerIdentificationString)[0];
return undefined;
}
// popravi vse, kar je narobe z ne-celozaslonskim predvajalnikom (če je funkcija definirana)
// fix everything that's wrong with the non-fs player, if the function is defined
var _sc_prepareNonfsPlayer = function(){
var hostname = window.location.hostname;
if( _sc_SITES[hostname] === undefined)
return;
if( _sc_SITES[hostname].autoAr.nonfsPlayerMod === undefined )
return;
_sc_SITES[hostname].autoAr.nonfsPlayerMod();
}
// Privzete nastavitve. Kasneje jih zamenjamo s tistimi v localStorage (če obstajajo)
// this is the default config. We replace it with the ones in localStorage (if they exist)
/* Konfiguracija za posamezno stran:
* Config for a given page
*
* <location.hostname>: {
* enabled: bool, // ali to stran omogočimo? Legacy, se bo odstranilo | do we do stuff on this page?
* type: string,
* autoAr: { // konfiguracija za samodejno zaznavanje razmerja stranic | conf for aspect ratio autodetection
* active: bool // aktivno zaznavanje — zaznavamo letterbox na sliki | active detection: scan the image
* passive: bool // pasivno zaznavanje — za ar vprašamo imdb in ostale | passive detection: query imdb for aspect ratio
* nonfs: bool // zaznavanje razmerja stranic izven celozaslonskega načina | detect ar if not in fullscreen?
* playerIdentificationString: string
* playerIdentificationType: string // "className" | "id"
* nonfsExtra: function // non-fs hacks are generally site-specific, which means we need to write site-specific code
* }
* }
*
*/
var _sc_SITES = {
"DEFAULT": {
enabled: true,
type: "nonofficial",
autoAr: {
active: true,
passive: false,
nonfs: false
}
},
"www.youtube.com" : {
enabled: true,
type: "official",
autoAr: {
active: true,
passive: false,
nonfs: false,
}
},
"vimeo.com" : {
enabled: true,
type: "official",
autoAr: {
active: true,
passive: false,
nonfs: true,
playerIdentificationString: "player_area-wrapper js-player_area-wrapper",
playerIdentificationType: "className",
nonfsPlayerMod: function(){
// hack player to take all the width
$("head").append('<style type="text/css">.uw_forceFullWidth {width: 100% !important} .uw_forceCenter{text-align: center;}</style>');
var e = document.getElementsByClassName("player_outro_area")[0];
e.classList.add("uw_forceFullWidth");
e.classList.add("uw_forceCenter");
e = document.getElementsByClassName("player_container")[0];
e.classList.add("uw_forceFullWidth");
e.classList.add("uw_forceCenter");
$("video")[0].style.display = "inline-block";
}
}
}
}
var UW_SITES = {
youtube: {
enabled: true,
type: "official",
urlRules: ["youtu"],
player: {
name: "movie_player",
isClass: false,
},
iframe: {
name: "player",
isClass: false
},
ui: {
uiMode: "native",
uiconf: {
sampleButton: {
class: "ytp-button ytp-settings-button",
index: 0,
buttonSizeBase: "x",
},
uiParent: {
name: "ytp-right-controls",
isClass: true,
insertStrat: "prepend",
},
uiOffset: {
offsetBy: "10vh",
offsetType: "css"
}
}
},
autoar_imdb:{
enabled: false
}
},
netflix: {
enabled: true,
type: "official",
urlRules: ["netflix"],
player: {
name: "placeholder",
isClass: true,
},
ui: {
uiMode: "native",
uiconf: {
sampleButton: {
class: "ytp-button ytp-settings-button",
index: 0,
buttonSizeBase: "x",
},
uiParent: {
name: "player-controls-wrapper",
isClass: true,
insertStrat: "append"
},
uiOffset: {
offsetBy: "0px",
offsetType: "css"
}
}
},
autoar_imdb:{
enabled: true,
title: "player-status-main-title",
isClass: true
}
},
dummy: {
type: "add new site",
urlRules: [""],
player: {
name: "",
isClass: false,
},
sampleButton: {
class: "ytp-button ytp-settings-button",
index: 0,
buttonSizeBase: "x",
},
uiParent: {
name: "",
isClass: false,
insertStrat: "prepend",
},
autoar_imdb:{
enabled: false
}
}
}
var SitesConf = {
nonfsArDetectEnabled: _sc_nonfsAutoar,
getPlayerTag: _sc_getPlayerTag,
prepareNonfsPlayer: _sc_prepareNonfsPlayer
}

91
js/conf/sitesconf.js
View File

@ -1,91 +0,0 @@
var UW_SITES = {
youtube: {
enabled: true,
type: "official",
urlRules: ["youtu"],
player: {
name: "movie_player",
isClass: false,
},
iframe: {
name: "player",
isClass: false
},
ui: {
uiMode: "native",
uiconf: {
sampleButton: {
class: "ytp-button ytp-settings-button",
index: 0,
buttonSizeBase: "x",
},
uiParent: {
name: "ytp-right-controls",
isClass: true,
insertStrat: "prepend",
},
uiOffset: {
offsetBy: "10vh",
offsetType: "css"
}
}
},
autoar_imdb:{
enabled: false
}
},
netflix: {
enabled: true,
type: "official",
urlRules: ["netflix"],
player: {
name: "placeholder",
isClass: true,
},
ui: {
uiMode: "native",
uiconf: {
sampleButton: {
class: "ytp-button ytp-settings-button",
index: 0,
buttonSizeBase: "x",
},
uiParent: {
name: "player-controls-wrapper",
isClass: true,
insertStrat: "append"
},
uiOffset: {
offsetBy: "0px",
offsetType: "css"
}
}
},
autoar_imdb:{
enabled: true,
title: "player-status-main-title",
isClass: true
}
},
dummy: {
type: "add new site",
urlRules: [""],
player: {
name: "",
isClass: false,
},
sampleButton: {
class: "ytp-button ytp-settings-button",
index: 0,
buttonSizeBase: "x",
},
uiParent: {
name: "",
isClass: false,
insertStrat: "prepend",
},
autoar_imdb:{
enabled: false
}
}
}

3
js/lib/FullScreenDetect.js
View File

@ -6,6 +6,5 @@ var _fsd_isFullScreen = function(){
}
var FullScreenDetect = {
isFullScreen: _fsd_isFullScreen,
inFullScreen: _fsd_isFullScreen
isFullScreen: _fsd_isFullScreen
}

60
js/modules/ArDetect.js
View File

@ -1,6 +1,10 @@
if(Debug.debug)
console.log("Loading: ArDetect");
// global-ish variables
var _ard_oldAr;
var _ard_currentAr;
@ -24,31 +28,44 @@ var _arSetup = function(){
return;
}
// imamo video, pa tudi problem. Ta problem bo verjetno kmalu popravljen, zato setup začnemo hitreje kot prej
// we have a video, but also a problem. This problem will prolly be fixed very soon, so setup is called with
// less delay than before
if(vid.videoWidth == 0){
setTimeout(_arSetup, 100);
return;
}
var canvas = document.createElement("canvas");
canvas.style.position = "absolute";
//todo: change those values to push canvas off-screen
canvas.style.top = "1080px";
canvas.style.zIndex = 10000;
if(Debug.debug){
canvas.style.left = "200px";
canvas.style.top = "780px";
canvas.style.zIndex = 10000;
}
else{
canvas.style.left = "-20000px";
canvas.style.top = "-1080px";
canvas.style.zIndex = -10000;
}
canvas.id = "uw_ArDetect_canvas";
// var test = document.getElementsByClassName("content style-scope ytd-video-secondary-info-renderer")[0]
var test = document.getElementsByTagName("body")[0];
test.appendChild(canvas);
console.log("test: ", test, "vid: ", vid, "canvas: ", canvas);
// vid.append(canvas);
var context = canvas.getContext("2d");
// do setup once
// tho we could do it for every frame
var canvasScaleFactor = 1280 / vid.videoWidth;
var canvasWidth = vid.videoWidth * canvasScaleFactor;
var canvasHeight = vid.videoHeight * canvasScaleFactor;
console.log("canvasScaleFactor, vid.videoWidth: ", canvasScaleFactor, vid.videoWidth);
canvas.width = canvasWidth;
canvas.height = canvasHeight;
@ -82,7 +99,7 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w){
var trueAr = width / trueHeight;
ArDetect.detectedAr = trueAr;
// poglejmo, če se je razmerje stranic spremenilo
// check if aspect ratio is changed:
@ -104,6 +121,15 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w){
_ard_oldAr = trueAr;
Resizer.setAr_fs(trueAr);
}
else{
// če nismo v fullscreen, potem preverimo, ali naša stran dovoljuje ne-fs?
// first, we'll check if our site allows for non-fs autoar detection
if( SitesConf.nonfsArDetectEnabled() ){
_ard_oldAr = trueAr;
Resizer.setAr_nonfs(trueAr);
}
}
}
@ -142,8 +168,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
// should also check bottom
}
console.log("11");
if(!isLetter){
// tudi če ne zaznamo letterboxa, še vedno poženemo processAr. Lahko, da smo v preteklosti popravili letterbox, to pa moramo
// sedaj razveljaviti
@ -172,8 +196,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
var cl_col = [];
var cu_col = [];
console.log("22");
// if (pixel is black)
for(var i in cols){
@ -285,7 +307,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
}
console.log("33");
if(blackPoints > (blackPointsMax >> 1)){
@ -295,8 +316,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
return;
}
console.log("color_uppermost:",color_uppermost,"color_lowermost:",color_lowermost);
if( color_lowermost == 8 || color_uppermost == 0){
// zakaj smo potem sploh tukaj?
// why exactly are we here again?
@ -306,7 +325,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
return;
}
console.log("44");
// pa poglejmo, kje se končajo črne letvice na vrhu in na dnu videa.
@ -336,8 +354,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
endPixelTop.push(tmpEndPixel);
}
console.log("777");
for(var i in cl_col){
var tmpEndPixel = _ard_sampleLines[color_lowermost] >> 2;
var j = _ard_sampleLines[color_lowermost];
@ -356,8 +372,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
endPixelBottom.push(tmpEndPixel);
}
console.log("888");
// dobi najvišji in najnižji piksel
var bottomPixel = 0;
var topPixel = 222222;
@ -382,8 +396,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
isLetter = (letterDiff < h * Settings.arDetect.allowedMisaligned);
console.log("pixels top: ", topPixel, "pixels bottom:", (h-bottomPixel), " (", bottomPixel,") — difference: ",letterDiff,"max allowed difference:", (h * Settings.arDetect.allowedMisaligned), "(",h,Settings.arDetect.allowedMisaligned,"), isLetter:",isLetter, "\n\n all candidates (top):", endPixelTop, "(bottom):",endPixelBottom);
if(isLetter)
_ard_processAr(vid, w, h, topPixel);
@ -391,11 +403,9 @@ var _ard_vdraw = function (vid, context, w, h, conf){
}
var ArDetect = {
arSetup: _arSetup,
vdraw: _ard_vdraw,
detectedAr: 1,
arChangedCallback: function() {}
}

39
js/modules/Resizer.js
View File

@ -330,7 +330,7 @@ var _res_setBestFit = function(ar){
console.log("uw::setBestFit | css applied");
}
var _res_setArFs = function(ar){
var _res_setAr = function(ar, playerDimensions){
var vid = $("video")[0];
// Dejansko razmerje stranic datoteke/<video> značke
@ -346,24 +346,30 @@ var _res_setArFs = function(ar){
height: 0
}
var playerDimensions = {
width: screen.width,
height: screen.height
if(Debug.debug){
console.log("[Resizer::_res_setArFs] Player dimensions?",playerDimensions);
}
if(playerDimensions === undefined){
playerDimensions = {
width: screen.width,
height: screen.height
}
}
if( fileAr < ar ){
// imamo letterbox zgoraj in spodaj -> spremenimo velikost videa (ampak nikoli na več, kot je širina zaslona)
// letterbox -> change video size (but never to wider than monitor width)
videoDimensions.width = Math.min(screen.height * ar, screen.width);
videoDimensions.width = Math.min(playerDimensions.height * ar, playerDimensions.width);
videoDimensions.height = videoDimensions.width * (1/fileAr);
}
else{
videoDimensions.height = Math.min(screen.width * (1/ar), screen.height);
videoDimensions.height = Math.min(playerDimensions.width * (1/ar), playerDimensions.height);
videoDimensions.width = videoDimensions.height * fileAr;
}
if(Debug.debug){
console.log("[Resizer::_res_setArFs] Video dimensions: ",videoDimensions);
console.log("[Resizer::_res_setArFs] Video dimensions: ",videoDimensions, "playerDimensions:",playerDimensions);
}
var cssValues = _res_computeOffsets(videoDimensions, playerDimensions);
@ -394,6 +400,22 @@ var _res_computeOffsets = function(vidDim, playerDim){
return offsets;
}
var _res_setAr_nonfs = function(ar){
var player = SitesConf.getPlayerTag();
SitesConf.prepareNonfsPlayer();
if(! player)
player = $("video")[0].parentNode;
var playerDimensions = {
width: player.offsetWidth,
height: player.offsetHeight
}
_res_setAr(ar, playerDimensions);
}
function resetCSS(video, player){
if(debugmsg)
@ -573,5 +595,6 @@ function _res_applyCss(dimensions){
}
var Resizer = {
setAr_fs: _res_setArFs
setAr_fs: _res_setAr,
setAr_nonfs: _res_setAr_nonfs
}

1
manifest.json
View File

@ -19,6 +19,7 @@
"js/conf/Debug.js",
"js/conf/Settings.js",
"js/conf/SitesConf.js",
"js/lib/FullScreenDetect.js",

7
test/TEST_VIDEOS.md Normal file
View File

@ -0,0 +1,7 @@
#List of test/sample videos
A quick list of videos where letterbox is encoded in the file.
##Vimeo:
https://vimeo.com/channels/staffpicks/169599296