Fixed bug with popup buttons for forcing aspect ratio not always working. Autodetection can no longer get triggered by small changes in aspect ratio (but will get triggered if change is a small amount over the treshold still)
This commit is contained in:
Tamius Han
parent
5ad7144e67
commit
d8ee278491
@ -1,6 +1,6 @@
|
||||
// Set prod to true when releasing
|
||||
_prod = true;
|
||||
// _prod = false;
|
||||
// _prod = true;
|
||||
_prod = false;
|
||||
|
||||
Debug = {
|
||||
debug: true,
|
||||
|
||||
@ -126,6 +126,10 @@ var _kbd_fetch = async function(){
|
||||
await _kbd_load();
|
||||
}
|
||||
|
||||
if(Debug.debug){
|
||||
console.log("[Keybinds::_kbd_fetch] We'll be returning this:", _kbd_keybinds);
|
||||
}
|
||||
|
||||
return _kbd_keybinds;
|
||||
}
|
||||
|
||||
|
||||
@ -42,8 +42,8 @@ var _se_reload = function(){
|
||||
var Settings = {
|
||||
arDetect: {
|
||||
enabled: "global", // thats my csgo rank kappa
|
||||
allowedMisaligned: 0.01, // top and bottom letterbox thickness can differ by this much. Any more and we don't adjust ar.
|
||||
allowedArVariance: 0.025, // % by which old ar can differ from the new
|
||||
allowedMisaligned: 0.05, // top and bottom letterbox thickness can differ by this much. Any more and we don't adjust ar.
|
||||
allowedArVariance: 0.075, // amount by which old ar can differ from the new (1 = 100%)
|
||||
timer_playing: 30,
|
||||
timer_paused: 3000,
|
||||
timer_error: 3000,
|
||||
|
||||
@ -185,11 +185,21 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w, fallbackMode
|
||||
if (arDiff < 0)
|
||||
arDiff = -arDiff;
|
||||
|
||||
var arDiff_percent = arDiff / trueAr;
|
||||
|
||||
// ali je sprememba v mejah dovoljenega? Če da -> fertik
|
||||
// is ar variance within acceptable levels? If yes -> we done
|
||||
if (arDiff < trueAr * Settings.arDetect.allowedVariance)
|
||||
return;
|
||||
if(Debug.debug && Debug.debugArDetect)
|
||||
console.log("%c[ArDetect::_ard_processAr] new aspect ratio varies from the old one by this much:\n","color: #aaf","old Ar", _ard_oldAr, "current ar", trueAr, "arDiff (absolute):",arDiff,"ar diff (relative to new ar)", arDiff_percent);
|
||||
|
||||
if (arDiff < trueAr * Settings.arDetect.allowedArVariance){
|
||||
if(Debug.debug && Debug.debugArDetect)
|
||||
console.log("%c[ArDetect::_ard_processAr] aspect ratio change denied — diff %:", "background: #740; color: #fa2", arDiff_percent)
|
||||
return;
|
||||
}
|
||||
else if(Debug.debug && Debug.debugArDetect){
|
||||
console.log("%c[ArDetect::_ard_processAr] aspect ratio change accepted — diff %:", "background: #153; color: #4f9", arDiff_percent)
|
||||
}
|
||||
// če je sprememba več od dovoljenega, spremeni razmerje stranic. Stvari se razlikujejo glede na to, ali smo v fullscreen ali ne
|
||||
// if change is greater than allowed, change the aspect ratio. Whether we do that depends on whether we're in fullscreen.
|
||||
if( FullScreenDetect.isFullScreen() ){
|
||||
@ -219,8 +229,8 @@ var _ard_vdraw = function (vid, context, w, h, conf){
|
||||
var blackbar_tresh = 10; // how non-black can the bar be
|
||||
var how_far_treshold = 8; // how much can the edge pixel vary (*4)
|
||||
|
||||
if(Debug.debug)
|
||||
Settings.arDetect.timer_playing = 1000; // how long is the pause between two executions — 33ms ~ 30fps
|
||||
// if(Debug.debug)
|
||||
// Settings.arDetect.timer_playing = 1000; // how long is the pause between two executions — 33ms ~ 30fps
|
||||
|
||||
if(vid === undefined || vid.paused || vid.ended || Status.arStrat != "auto"){
|
||||
// we slow down if paused, no detection
|
||||
@ -441,6 +451,9 @@ var _ard_vdraw = function (vid, context, w, h, conf){
|
||||
if(blackPoints > (blackPointsMax >> 1)){
|
||||
// if more than half of those points are black, we consider the entire frame black (or too dark to get anything useful
|
||||
// out of it, anyway)
|
||||
if(Debug.debug && Debug.debugArDetect)
|
||||
console.log("%c[ArDetect::_ard_vdraw] Frame too dark, doing nothing. (Over 50% of the points are black)", "color: #99f");
|
||||
|
||||
_ard_timer = setTimeout(_ard_vdraw, Settings.arDetect.timer_playing, vid, context, w, h); //no letterbox, no problem
|
||||
return;
|
||||
}
|
||||
@ -449,8 +462,8 @@ var _ard_vdraw = function (vid, context, w, h, conf){
|
||||
// zakaj smo potem sploh tukaj?
|
||||
// why exactly are we here again?
|
||||
|
||||
if(Debug.debug){
|
||||
console.log("%c[ArDetect.js] aspect ratio change is being triggered by an event we thought shouldn't be triggering it. Strange.\n\n","color: #4af", "color_lowermost (8=bad):", color_lowermost, "color_uppermost (0=bad):", color_uppermost);
|
||||
if(Debug.debug && Debug.debugArDetect){
|
||||
console.log("%c[ArDetect::_ard_vdraw] aspect ratio change is being triggered by an event we thought shouldn't be triggering it. Strange.\n\n","color: #4af", "color_lowermost (8=bad):", color_lowermost, "color_uppermost (0=bad):", color_uppermost);
|
||||
}
|
||||
|
||||
// _ard_processAr(vid, w, h);
|
||||
@ -476,9 +489,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
|
||||
cols[ cu_col[i] ][ j+1 ] > blackbar_tresh &&
|
||||
cols[ cu_col[i] ][ j+2 ] > blackbar_tresh ){
|
||||
|
||||
if(Debug.debug)
|
||||
console.log("detecting value higher than blackbar_tresh!");
|
||||
|
||||
tmpEndPixel = j >> 2;
|
||||
break;
|
||||
}
|
||||
@ -520,6 +530,8 @@ var _ard_vdraw = function (vid, context, w, h, conf){
|
||||
bottomPixel = endPixelBottom[i];
|
||||
}
|
||||
|
||||
|
||||
|
||||
// preveri, če sta odmika zgoraj in spodaj podobno velika. Če nista, potem gledamo objekt, ne letterboxa
|
||||
// check if black borders match; if the line isn't horizontal we could be looking at an object in
|
||||
// the actual video that shouldn't be cropped out.
|
||||
@ -532,6 +544,9 @@ var _ard_vdraw = function (vid, context, w, h, conf){
|
||||
|
||||
if(isLetter)
|
||||
_ard_processAr(vid, w, h, topPixel, null, fallbackMode);
|
||||
else if(Debug.debug && Debug.debugArDetect)
|
||||
console.log("%c[ArDetect::_ard_vdraw] Black bars at the top and at the bottom differ in size more than we allow", "color: #99f");
|
||||
|
||||
|
||||
_ard_timer = setTimeout(_ard_vdraw, Settings.arDetect.timer_playing, vid, context, w, h);
|
||||
}
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
if(Debug.debug)
|
||||
console.log("Loading: Resizer.js");
|
||||
|
||||
// restore watchdog. While true, _res_applyCss() tries to re-apply new css until this value becomes false again
|
||||
// value becomes false when width and height of <video> tag match with what we want to set. Only necessary when
|
||||
// calling _res_restore() for some weird reason.
|
||||
var _res_restore_wd = false;
|
||||
|
||||
var _res_manual_autoar = function(siteProps){
|
||||
if(! siteProps.autoar_imdb.enabled)
|
||||
return;
|
||||
@ -360,8 +365,8 @@ var _res_legacyAr = function(action){
|
||||
return;
|
||||
}
|
||||
if(action == "reset"){
|
||||
// _res_setAr_kbd(fileAr);
|
||||
this.reset(true);
|
||||
_res_setAr_kbd(fileAr);
|
||||
// this.reset(true);
|
||||
return;
|
||||
}
|
||||
if(action == "autoar"){
|
||||
@ -493,6 +498,39 @@ var _res_align = function(float){
|
||||
}
|
||||
}
|
||||
|
||||
var _res_setStyleString_maxRetries = 3;
|
||||
|
||||
var _res_setStyleString = function(vid, styleString, count){
|
||||
vid.setAttribute("style", styleString);
|
||||
|
||||
if(_res_restore_wd){
|
||||
var vid2 = $("video")[0];
|
||||
|
||||
if(
|
||||
styleString.indexOf("width: " + vid2.style.width) == -1 ||
|
||||
styleString.indexOf("height: " + vid2.style.height) == -1) {
|
||||
// css ni nastavljen?
|
||||
// css not set?
|
||||
if(Debug.debug)
|
||||
console.log("[Resizer::_res_setStyleString] Style string not set ???");
|
||||
|
||||
if(count++ < _res_setStyleString_maxRetries){
|
||||
setTimeout( _res_setStyleString, 200, count);
|
||||
}
|
||||
else if(Debug.debug){
|
||||
console.log("[Resizer::_res_setStyleString] we give up. css string won't be set");
|
||||
}
|
||||
}
|
||||
else{
|
||||
_res_restore_wd = false;
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(Debug.debug)
|
||||
console.log("[Resizer::_res_setStyleString] css applied. Style string:", styleString);
|
||||
}
|
||||
}
|
||||
|
||||
function _res_applyCss(dimensions){
|
||||
|
||||
if(Debug.debug)
|
||||
@ -590,12 +628,11 @@ function _res_applyCss(dimensions){
|
||||
if(styleArray[i] !== undefined && styleArray[i] !== "")
|
||||
styleString += styleArray[i] + "; ";
|
||||
|
||||
vid.setAttribute("style", styleString);
|
||||
|
||||
if(Debug.debug)
|
||||
console.log("[Resizer::_res_applyCss] css applied. Style string:", styleString);
|
||||
_res_setStyleString(vid, styleString);
|
||||
}
|
||||
|
||||
|
||||
|
||||
var _res_setFsAr = function(ar){
|
||||
this._currentAr = ar;
|
||||
}
|
||||
@ -605,6 +642,9 @@ var _res_restore = function(){
|
||||
console.log("[Resizer::_res_restore] attempting to restore aspect ratio. this & settings:", {'this': this, "settings": Settings} );
|
||||
}
|
||||
|
||||
// this is true until we verify that css has actually been applied
|
||||
_res_restore_wd = true;
|
||||
|
||||
if(this._currentAr > 0)
|
||||
_res_setAr_kbd(this._currentAr);
|
||||
else
|
||||
|
||||
@ -44,6 +44,11 @@ async function _uwbg_rcvmsg(message){
|
||||
config.arConf = {};
|
||||
config.arConf.enabled_global = Settings.arDetect.enabled == "global";
|
||||
|
||||
var keybinds = await Keybinds.fetch();
|
||||
if(Debug.debug)
|
||||
console.log("[uw-bg::_uwbg_rcvmsg] Keybinds.fetch returned this:", keybinds);
|
||||
|
||||
config.keyboardShortcuts = keybinds;
|
||||
|
||||
|
||||
// predvidevajmo, da je enako. Če je drugače, bomo popravili ko dobimo odgovor
|
||||
|
||||
69
js/uw.js
69
js/uw.js
@ -1,6 +1,9 @@
|
||||
if(Debug.debug)
|
||||
console.log("\n\n\n\n\n\n ——— Sᴛλʀᴛɪɴɢ Uʟᴛʀᴀᴡɪᴅɪꜰʏ ———\n << ʟᴏᴀᴅɪɴɢ ᴍᴀɪɴ ꜰɪʟᴇ >>\n\n\n\n");
|
||||
|
||||
// global-ish
|
||||
var _main_last_fullscreen;
|
||||
|
||||
// load all settings from localStorage:
|
||||
|
||||
async function main(){
|
||||
@ -61,25 +64,75 @@ async function main(){
|
||||
console.log("[uw::main] Aspect ratio detection is disabled. This is in settings:", Settings.arDetect.enabled);
|
||||
}
|
||||
|
||||
// preden karkoli delamo, se pozanimamo, ali smo v celozaslonskem načinu.
|
||||
// ne bi smeli biti, načeloma
|
||||
// je možnost, da smo i guess?
|
||||
//
|
||||
// before we add this event, determine initial fullscreen state.
|
||||
// we shouldn't be
|
||||
// there's a chance that we are tho, I guess
|
||||
|
||||
_main_last_fullscreen = FullScreenDetect.isFullScreen();
|
||||
|
||||
document.addEventListener("mozfullscreenchange", function( event ) {
|
||||
|
||||
if(Debug.debug){
|
||||
// console.log("[uw::mozfullscreenchange] full screen state is changing. event:", event);
|
||||
console.log("[uw::mozfullscreenchange] are we in full screen?", FullScreenDetect.isFullScreen());
|
||||
console.log("%c[uw::mozfullscreenchange] are we in full screen?","color: #aaf", FullScreenDetect.isFullScreen());
|
||||
}
|
||||
fullScreenCheck(0);
|
||||
|
||||
if(FullScreenDetect.isFullScreen()){
|
||||
// full screen is on
|
||||
Resizer.restore();
|
||||
}
|
||||
else{
|
||||
Resizer.reset();
|
||||
}
|
||||
});
|
||||
|
||||
browser.runtime.onMessage.addListener(receiveMessage);
|
||||
// });
|
||||
}
|
||||
|
||||
var _main_fscheck_tries = 3;
|
||||
|
||||
function fullScreenCheck(count) {
|
||||
if(count >= _main_fscheck_tries){
|
||||
if(Debug.debug){
|
||||
console.log("[uw::fullScreenCheck] ok really, I guess.");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
var fsnow = FullScreenDetect.isFullScreen();
|
||||
if(fsnow){
|
||||
// full screen is on
|
||||
Resizer.restore();
|
||||
}
|
||||
else{
|
||||
Resizer.reset();
|
||||
}
|
||||
|
||||
// kaj pa, če je FullScreenDetect vrnil narobno vrednost?
|
||||
// what if FullScreenDetect was not right? Let's verify; if it was wrong we re-trigger it in about 100 ms.
|
||||
|
||||
if(fsnow != _main_last_fullscreen){
|
||||
|
||||
// posodobimo vrednost / update value
|
||||
_main_last_fullscreen = fsnow;
|
||||
|
||||
// če je to res, count pa je večji kot 0, potem smo imeli prav.
|
||||
// if that's the case and count is greater than 0, then we were right at some point.
|
||||
if(Debug.debug && count > 0){
|
||||
console.log("[uw::fullScreenCheck] fucking knew it")
|
||||
}
|
||||
return;
|
||||
}
|
||||
else{
|
||||
// dobili smo event za spremembo celozaslonskega stanja. Stanje se ni spremenilo. Hmmm.
|
||||
// we got an event for fullscreen state change. State is unchanged. Hmmm.
|
||||
if(Debug.debug){
|
||||
console.log("[uw::fullScreenCheck] oh _really_? 🤔🤔🤔 -- fullscreen state", FullScreenDetect.isFullScreen());
|
||||
}
|
||||
count++;
|
||||
setTimeout(fullScreenCheck, 200, count);
|
||||
}
|
||||
console.log("-------------------------------");
|
||||
}
|
||||
|
||||
// comms
|
||||
function receiveMessage(message) {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"manifest_version": 2,
|
||||
"name": "Ultrawidify-git",
|
||||
"version": "2.0",
|
||||
"version": "2.0.1",
|
||||
|
||||
"icons": {
|
||||
"32":"res/icons/uw-32.png",
|
||||
@ -12,11 +12,14 @@
|
||||
|
||||
"background": {
|
||||
"scripts": [
|
||||
"js/dep/jquery-3.1.1.js",
|
||||
|
||||
"js/lib/BrowserDetect.js",
|
||||
"js/lib/StorageManager.js",
|
||||
|
||||
"js/conf/Debug.js",
|
||||
"js/conf/Settings.js",
|
||||
"js/conf/Keybinds.js",
|
||||
|
||||
"js/uw-bg.js"
|
||||
]
|
||||
|
||||
@ -32,6 +32,7 @@ var selectedMenu = "arSettings";
|
||||
var hasVideos = false;
|
||||
|
||||
var _config;
|
||||
var _changeAr_button_shortcuts = { "autoar":"none", "reset":"none", "219":"none", "189":"none", "169":"none" }
|
||||
|
||||
async function check4videos(){
|
||||
var command = {};
|
||||
@ -78,6 +79,24 @@ async function check4conf(){
|
||||
});
|
||||
}
|
||||
|
||||
function stringToKeyCombo(key_in){
|
||||
var keys_in = key_in.split("_");
|
||||
var keys_out = "";
|
||||
|
||||
for(key of keys_in){
|
||||
if(key == "ctrlKey")
|
||||
keys_out += "ctrl + ";
|
||||
else if(key == "shiftKey")
|
||||
keys_out += "shift + ";
|
||||
else if(key == "altKey")
|
||||
keys_out += "alt + ";
|
||||
else
|
||||
keys_out += key;
|
||||
}
|
||||
|
||||
return keys_out;
|
||||
}
|
||||
|
||||
function loadConfig(config){
|
||||
if(Debug.debug)
|
||||
console.log("[popup.js::loadConfig] loading config. conf object:",config);
|
||||
@ -92,6 +111,44 @@ function loadConfig(config){
|
||||
ArPanel.alignment[config.videoAlignment].classList.add("selected");
|
||||
}
|
||||
|
||||
// process keyboard shortcuts:
|
||||
if(config.keyboardShortcuts){
|
||||
for(var key in config.keyboardShortcuts){
|
||||
var shortcut = config.keyboardShortcuts[key];
|
||||
var keypress = stringToKeyCombo(key);
|
||||
|
||||
|
||||
try{
|
||||
if(shortcut.action == "char"){
|
||||
if(shortcut.targetAr == 2.0){
|
||||
_changeAr_button_shortcuts["189"] = keypress;
|
||||
}
|
||||
else if(shortcut.targetAr == 2.39){
|
||||
_changeAr_button_shortcuts["219"] = keypress;
|
||||
}
|
||||
else if(shortcut.targetAr == 1.78){
|
||||
_changeAr_button_shortcuts["169"] = keypress;
|
||||
}
|
||||
}
|
||||
else{
|
||||
_changeAr_button_shortcuts[shortcut.action] = keypress;
|
||||
}
|
||||
}
|
||||
catch(Ex){
|
||||
//do nothing if key doesn't exist
|
||||
}
|
||||
}
|
||||
for(var key in _changeAr_button_shortcuts){
|
||||
try{
|
||||
document.getElementById("_b_changeAr_" + key + "_key").textContent = "(" + _changeAr_button_shortcuts[key] + ")";
|
||||
}
|
||||
catch(ex){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// process aspect ratio settings
|
||||
showArctlButtons();
|
||||
}
|
||||
|
||||
@ -23,6 +23,13 @@
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.darker {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.label{
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
@ -96,6 +103,10 @@
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
color: #dbb;
|
||||
text-align: center;
|
||||
}
|
||||
.w24 {
|
||||
width: 100px;
|
||||
}
|
||||
.button:hover {
|
||||
color: #fff;
|
||||
@ -170,11 +181,11 @@
|
||||
<div class="row">
|
||||
<span class="label">Force aspect ratio:</span>
|
||||
<div class="button-row">
|
||||
<a class="button _changeAr _ar_auto">Auto-detect</a>
|
||||
<a class="button _changeAr _ar_reset">Reset</a>
|
||||
<a class="button _changeAr _ar_219">21:9</a>
|
||||
<a class="button _changeAr _ar_189">2:1 (18:9)</a>
|
||||
<a class="button _changeAr _ar_169">16:9</a>
|
||||
<a class="button _changeAr _ar_auto w24">Auto-detect<br/><span id="_b_changeAr_autoar_key" class="smallcaps small darker"></span></a>
|
||||
<a class="button _changeAr _ar_reset w24">Reset<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
|
||||
<a class="button _changeAr _ar_219 w24">21:9<br/><span id="_b_changeAr_219_key" class="smallcaps small darker"></span></a>
|
||||
<a class="button _changeAr _ar_189 w24">2:1 (18:9)<br/><span id="_b_changeAr_189_key" class="smallcaps small darker"></span></a>
|
||||
<a class="button _changeAr _ar_169 w24">16:9<br/><span id="_b_changeAr_169_key" class="smallcaps small darker"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
@ -5,3 +5,15 @@ A quick list of videos where letterbox is encoded in the file.
|
||||
## Vimeo:
|
||||
|
||||
https://vimeo.com/channels/staffpicks/169599296
|
||||
|
||||
|
||||
## Youtube
|
||||
|
||||
### Variable aspect ratio
|
||||
|
||||
https://www.youtube.com/watch?v=-IHzprfs6tw
|
||||
https://www.youtube.com/watch?v=L_u97PqWX6g (also dark at the start)
|
||||
|
||||
### Dark or triggering minor AR corrections
|
||||
|
||||
https://www.youtube.com/watch?v=NaTGwlfRB_c (dark, triggers minor corrections)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user