From 021f5c65800bbccce3b02980562c2b16c211a597 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Mon, 2 Oct 2017 00:27:01 +0200 Subject: [PATCH] Vimeo has a non-fs autodetect. --- js/conf/SitesConf.js | 209 +++++++++++++++++++++++++++++++++++++ js/conf/sitesconf.js | 91 ---------------- js/lib/FullScreenDetect.js | 3 +- js/modules/ArDetect.js | 62 ++++++----- js/modules/Resizer.js | 39 +++++-- manifest.json | 1 + test/TEST_VIDEOS.md | 7 ++ 7 files changed, 285 insertions(+), 127 deletions(-) create mode 100644 js/conf/SitesConf.js delete mode 100644 js/conf/sitesconf.js create mode 100644 test/TEST_VIDEOS.md diff --git a/js/conf/SitesConf.js b/js/conf/SitesConf.js new file mode 100644 index 0000000..f403e51 --- /dev/null +++ b/js/conf/SitesConf.js @@ -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 + * + * : { + * 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(''); + + 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 +} diff --git a/js/conf/sitesconf.js b/js/conf/sitesconf.js deleted file mode 100644 index 94afbb4..0000000 --- a/js/conf/sitesconf.js +++ /dev/null @@ -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 - } - } -} diff --git a/js/lib/FullScreenDetect.js b/js/lib/FullScreenDetect.js index 2d95176..b417441 100644 --- a/js/lib/FullScreenDetect.js +++ b/js/lib/FullScreenDetect.js @@ -6,6 +6,5 @@ var _fsd_isFullScreen = function(){ } var FullScreenDetect = { - isFullScreen: _fsd_isFullScreen, - inFullScreen: _fsd_isFullScreen + isFullScreen: _fsd_isFullScreen } diff --git a/js/modules/ArDetect.js b/js/modules/ArDetect.js index ee9f220..41d32e5 100644 --- a/js/modules/ArDetect.js +++ b/js/modules/ArDetect.js @@ -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; -// var test = document.getElementsByClassName("content style-scope ytd-video-secondary-info-renderer")[0] + 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.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() {} } diff --git a/js/modules/Resizer.js b/js/modules/Resizer.js index 1060212..29d9e2e 100644 --- a/js/modules/Resizer.js +++ b/js/modules/Resizer.js @@ -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/