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

Merge branch '4.2.3' into stable

Browse Source
This commit is contained in:
Tamius Han 2019-08-24 23:17:54 +02:00
commit c7847ac626
13 changed files with 241 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "ultravidify",
"version": "4.2.1",
"version": "4.2.3",
"description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
"author": "Tamius Han <tamius.han@gmail.com>",
"scripts": {
@ -13,7 +13,7 @@
"build-edge:dev": "cross-env NODE_ENV=development BROWSER=edge webpack --hide-modules",
"build-zip": "node scripts/build-zip.js",
"watch": "npm run build -- --watch",
"watch-chrome": "npm run build-chrome-- --watch",
"watch-chrome": "npm run build-chrome -- --watch",
"watch-edge": "npm run build-edge -- --watch",
"watch:dev": "cross-env HMR=true npm run build:dev -- --watch",
"watch-chrome:dev": "cross-env HMR=true npm run build-chrome:dev -- --watch",

6
src/ext/conf/Debug.js
View File

@ -1,6 +1,6 @@
// Set prod to true when releasing
const _prod = true;
// const _prod = false;
// const _prod = true;
const _prod = false;
var Debug = {
// performanceMetrics: true, // should not be affected by debug.debug in order to allow benchmarking of the impact logging in console has
@ -19,7 +19,7 @@ var Debug = {
// flushStoredSettings: false,
// playerDetect: true,
// periodic: true,
// videoRescan: true,
// // videoRescan: true,
// mousemove: true,
// arDetect: {
// edgeDetect: true

36
src/ext/lib/ar-detect/ArDetector.js
View File

@ -765,22 +765,34 @@ class ArDetector {
if(Debug.debug && Debug.debugArDetect){
console.log(`%c[ArDetect::frameCheck] Triggering aspect ration change! new ar: ${newAr}`, "color: #aaf");
}
this.processAr(newAr);
// we also know edges for guardline, so set them.
// we need to be mindful of fallbackMode though
if (!this.fallbackMode) {
this.guardLine.setBlackbar({top: edgePost.guardLineTop, bottom: edgePost.guardLineBottom});
} else {
if (this.conf.player.dimensions){
this.guardLine.setBlackbarManual({
top: this.settings.active.arDetect.fallbackMode.noTriggerZonePx,
bottom: this.conf.player.dimensions.height - this.settings.active.arDetect.fallbackMode.noTriggerZonePx - 1
},{
top: edgePost.guardLineTop + this.settings.active.arDetect.guardLine.edgeTolerancePx,
bottom: edgePost.guardLineBottom - this.settings.active.arDetect.guardLine.edgeTolerancePx
})
// if edges are okay and not invalid, we also
// allow automatic aspect ratio correction. If edges
// are bogus, we remain aspect ratio unchanged.
try {
if (!this.fallbackMode) {
// throws error if top/bottom are invalid
this.guardLine.setBlackbar({top: edgePost.guardLineTop, bottom: edgePost.guardLineBottom});
} else {
if (this.conf.player.dimensions){
this.guardLine.setBlackbarManual({
top: this.settings.active.arDetect.fallbackMode.noTriggerZonePx,
bottom: this.conf.player.dimensions.height - this.settings.active.arDetect.fallbackMode.noTriggerZonePx - 1
},{
top: edgePost.guardLineTop + this.settings.active.arDetect.guardLine.edgeTolerancePx,
bottom: edgePost.guardLineBottom - this.settings.active.arDetect.guardLine.edgeTolerancePx
})
}
}
this.processAr(newAr);
} catch (e) {
// edges weren't gucci, so we'll just reset
// the aspect ratio to defaults
this.guardline.reset();
this.conf.resizer.setAr({type: AspectRatio.Automatic, ratio: this.getDefaultAr()});
}
// }

4
src/ext/lib/ar-detect/GuardLine.js
View File

@ -34,9 +34,7 @@ class GuardLine {
// to odstrani vse neveljavne nastavitve in vse možnosti, ki niso smiselne
// this removes any configs with invalid values or values that dont make sense
if (bbTop < 0 || bbBottom >= this.conf.canvas.height ){
console.log("%c[GuardLine::setBlackbar] INVALID SETTINGS IN GUARDLINE","background: #000; color: #fff")
this.reset();
return;
throw "INVALID_SETTINGS_IN_GUARDLINE"
}
this.blackbar = {

160
src/ext/lib/ar-detect/edge-detect/EdgeDetect.js
View File

@ -247,91 +247,91 @@ class EdgeDetect{
var bottomEdgeCount = 0;
try {
for (const sample of samples.res_top){
blackEdgeViolation = false; // reset this
// determine our bounds. Note that sample.col is _not_ corrected for imageData, but halfSample is
sampleStart = (sample.col << 2) - this.halfSample;
if(sampleStart < 0)
sampleStart = 0;
sampleEnd = sampleStart + this.sampleWidthBase;
if(sampleEnd > this.conf.canvasImageDataRowLength)
sampleEnd = this.conf.canvasImageDataRowLength;
// calculate row offsets for imageData array
sampleRow_black = (sample.black - this.settings.active.arDetect.edgeDetection.edgeTolerancePx - 1) * this.conf.canvasImageDataRowLength;
sampleRow_color = (sample.black + this.settings.active.arDetect.edgeDetection.edgeTolerancePx) * this.conf.canvasImageDataRowLength;
// že ena kršitev črnega roba pomeni, da kandidat ni primeren
// even a single black edge violation means the candidate is not an edge
loopEnd = sampleRow_black + sampleEnd;
for (const sample of samples.res_top){
blackEdgeViolation = false; // reset this
// determine our bounds. Note that sample.col is _not_ corrected for imageData, but halfSample is
sampleStart = (sample.col << 2) - this.halfSample;
if(sampleStart < 0)
sampleStart = 0;
sampleEnd = sampleStart + this.sampleWidthBase;
if (sampleEnd > this.conf.canvasImageDataRowLength)
sampleEnd = this.conf.canvasImageDataRowLength;
// calculate row offsets for imageData array
sampleRow_black = (sample.black - this.settings.active.arDetect.edgeDetection.edgeTolerancePx - 1) * this.conf.canvasImageDataRowLength;
sampleRow_color = (sample.black + this.settings.active.arDetect.edgeDetection.edgeTolerancePx) * this.conf.canvasImageDataRowLength;
// že ena kršitev črnega roba pomeni, da kandidat ni primeren
// even a single black edge violation means the candidate is not an edge
loopEnd = sampleRow_black + sampleEnd;
if(Debug.debugCanvas.enabled){
blackEdgeViolation = this._blackbarTest_dbg(image, sampleRow_black + sampleStart, loopEnd);
} else {
blackEdgeViolation = this._blackbarTest(image, sampleRow_black + sampleStart, loopEnd);
}
if (Debug.debugCanvas.enabled){
blackEdgeViolation = this._blackbarTest_dbg(image, sampleRow_black + sampleStart, loopEnd);
} else {
blackEdgeViolation = this._blackbarTest(image, sampleRow_black + sampleStart, loopEnd);
}
// če je bila črna črta skrunjena, preverimo naslednjega kandidata
// if we failed, we continue our search with the next candidate
if (blackEdgeViolation) {
continue;
}
detections = 0;
loopEnd = sampleRow_color + sampleEnd;
// če je bila črna črta skrunjena, preverimo naslednjega kandidata
// if we failed, we continue our search with the next candidate
if (blackEdgeViolation) {
continue;
}
detections = 0;
loopEnd = sampleRow_color + sampleEnd;
if(Debug.debugCanvas.enabled) {
this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesTop)
} else {
this._imageTest(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesTop);
}
}
for (const sample of samples.res_bottom){
blackEdgeViolation = false; // reset this
// determine our bounds. Note that sample.col is _not_ corrected for imageData, but this.halfSample is
sampleStart = (sample.col << 2) - this.halfSample;
if(sampleStart < 0)
sampleStart = 0;
sampleEnd = sampleStart + this.sampleWidthBase;
if(sampleEnd > this.conf.canvasImageDataRowLength)
sampleEnd = this.conf.canvasImageDataRowLength;
// calculate row offsets for imageData array
sampleRow_black = (sample.black + this.settings.active.arDetect.edgeDetection.edgeTolerancePx + 1) * this.conf.canvasImageDataRowLength;
sampleRow_color = (sample.black - this.settings.active.arDetect.edgeDetection.edgeTolerancePx) * this.conf.canvasImageDataRowLength;
// že ena kršitev črnega roba pomeni, da kandidat ni primeren
// even a single black edge violation means the candidate is not an edge
loopEnd = sampleRow_black + sampleEnd;
if(Debug.debugCanvas.enabled){
blackEdgeViolation = this._blackbarTest_dbg(image, sampleRow_black + sampleStart, loopEnd);
} else {
blackEdgeViolation = this._blackbarTest(image, sampleRow_black + sampleStart, loopEnd);
if (Debug.debugCanvas.enabled) {
this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesTop)
} else {
this._imageTest(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesTop);
}
}
// če je bila črna črta skrunjena, preverimo naslednjega kandidata
// if we failed, we continue our search with the next candidate
if (blackEdgeViolation) {
continue;
}
detections = 0;
loopEnd = sampleRow_color + sampleEnd;
for (const sample of samples.res_bottom){
blackEdgeViolation = false; // reset this
// determine our bounds. Note that sample.col is _not_ corrected for imageData, but this.halfSample is
sampleStart = (sample.col << 2) - this.halfSample;
if(sampleStart < 0)
sampleStart = 0;
sampleEnd = sampleStart + this.sampleWidthBase;
if(sampleEnd > this.conf.canvasImageDataRowLength)
sampleEnd = this.conf.canvasImageDataRowLength;
// calculate row offsets for imageData array
sampleRow_black = (sample.black + this.settings.active.arDetect.edgeDetection.edgeTolerancePx + 1) * this.conf.canvasImageDataRowLength;
sampleRow_color = (sample.black - this.settings.active.arDetect.edgeDetection.edgeTolerancePx) * this.conf.canvasImageDataRowLength;
// že ena kršitev črnega roba pomeni, da kandidat ni primeren
// even a single black edge violation means the candidate is not an edge
loopEnd = sampleRow_black + sampleEnd;
if(Debug.debugCanvas.enabled){
blackEdgeViolation = this._blackbarTest_dbg(image, sampleRow_black + sampleStart, loopEnd);
} else {
blackEdgeViolation = this._blackbarTest(image, sampleRow_black + sampleStart, loopEnd);
}
// če je bila črna črta skrunjena, preverimo naslednjega kandidata
// if we failed, we continue our search with the next candidate
if (blackEdgeViolation) {
continue;
}
detections = 0;
loopEnd = sampleRow_color + sampleEnd;
if(Debug.debugCanvas.enabled) {
this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesBottom);
} else {
this._imageTest(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesBottom);
if(Debug.debugCanvas.enabled) {
this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesBottom);
} else {
this._imageTest(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesBottom);
}
}
}
} catch (e) {
console.log("\n\nuwu fucky wucky:", e, "\n\n")
}
@ -623,7 +623,9 @@ class EdgeDetect{
if (reverseSearchDirection) {
increment = -this.conf.canvasImageDataRowLength;
arrayStart = bottom - this.conf.canvasImageDataRowLength;
// don't subtract this.conf.canvasImageDataRowLength — it has already been accounted for
// when we calculated bottom and top
arrayStart = bottom;
arrayEnd = top;
// this is a hack so we get pointer-like things rather than values

5
src/ext/lib/comms/CommsServer.js
View File

@ -220,10 +220,13 @@ class CommsServer {
this.server.injectCss(message.cssString, sender);
return;
}
if (message.cmd === 'remove-css') {
if (message.cmd === 'remove-css' || message.cmd === 'eject-css') {
this.server.removeCss(message.cssString, sender);
return;
}
if (message.cmd === 'replace-css') {
this.server.replaceCss(message.oldCssString, message.newCssString, sender);
}
if (message.forwardToContentScript) {
if (Debug.debug && Debug.comms) {

22
src/ext/lib/video-data/PageInfo.js
View File

@ -41,6 +41,28 @@ class PageInfo {
this.currentZoomScale = 1;
}
injectCss(cssString) {
this.comms.sendMessage({
cmd: 'inject-css',
cssString: cssString
});
}
ejectCss(cssString) {
this.comms.sendMessage({
cmd: 'eject-css',
cssString: cssString
});
}
replaceCss(oldCssString, newCssString) {
this.comms.sendMessage({
cmd: 'replace-css',
newCssString,
oldCssString
});
}
destroy() {
if(Debug.debug || Debug.init){
console.log("[PageInfo::destroy] destroying all videos!")

40
src/ext/lib/video-data/VideoData.js
View File

@ -13,6 +13,18 @@ class VideoData {
this.pageInfo = pageInfo;
this.extensionMode = pageInfo.extensionMode;
this.vdid = (Math.random()*100).toFixed();
this.userCssClassName = `uw-fuck-you-and-do-what-i-tell-you_${this.vdid}`;
// We'll replace cssWatcher (in resizer) with mutationObserver
const observerConf = {
attributes: true,
// attributeFilter: ['style', 'class'],
attributeOldValue: true,
};
this.observer = new MutationObserver(this.onVideoDimensionsChanged);
this.observer.observe(video, observerConf);
// POZOR: VRSTNI RED JE POMEMBEN (arDetect mora bit zadnji)
// NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last)
@ -30,12 +42,38 @@ class VideoData {
this.resizer.reset();
this.vdid = (Math.random()*100).toFixed();
if (Debug.init) {
console.log("[VideoData::ctor] Created videoData with vdid", this.vdid,"\nextension mode:", this.extensionMode);
}
this.pageInfo.initMouseActionHandler(this);
this.video.classList.add(this.userCssClassName); // this also needs to be applied BEFORE we initialize resizer!
}
onVideoDimensionsChanged(mutationList, observer) {
for (let mutation of mutationList) {
if (mutation.type === 'attributes') {
console.log("video attributes were changed:", mutation)
if (mutation.attributeName === 'class') {
if (!this.video.classList.contains(this.userCssClassName)) {
console.log("class changed!")
// force the page to include our class in classlist, if the classlist has been removed
this.video.classList.add(this.userCssClassName);
// } else if () {
// this bug should really get
} else {
this.restoreAr();
}
} else if (mutation.attributeName === 'style' && mutation.attributeOldValue !== this.video.getAttribute('style')) {
console.log("style changed")
// if size of the video has changed, this may mean we need to recalculate/reapply
// last calculated aspect ratio
this.restoreAr();
}
}
}
}
firstTimeArdInit(){

221
src/ext/lib/video-transform/Resizer.js
View File

@ -24,8 +24,6 @@ class Resizer {
this.stretcher = new Stretcher(this.conf);
this.zoom = new Zoom(this.conf);
this.cssCheckDisabled = false;
// load up default values
this.correctedVideoDimensions = {};
this.currentCss = {};
@ -33,16 +31,6 @@ class Resizer {
this.currentPlayerStyleString = "";
this.currentCssValidFor = {};
// restore watchdog. While true, 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.
this.restore_wd = false;
// CSS watcher will trigger _very_ often for this many iterations
this.cssWatcherIncreasedFrequencyCounter = 0;
// this.lastAr = this.settings.getDefaultAr(); // this is the aspect ratio we start with
this.lastAr = {type: AspectRatio.Initial};
this.videoAlignment = this.settings.getDefaultVideoAlignment(window.location.hostname); // this is initial video alignment
this.destroyed = false;
@ -50,21 +38,30 @@ class Resizer {
this.resizerId = (Math.random(99)*100).toFixed(0);
if (this.settings.active.pan) {
console.log("can pan:", this.settings.active.miscSettings.mousePan.enabled, "(default:", this.settings.active.miscSettings.mousePan.enabled, ")")
// console.log("can pan:", this.settings.active.miscSettings.mousePan.enabled, "(default:", this.settings.active.miscSettings.mousePan.enabled, ")")
this.canPan = this.settings.active.miscSettings.mousePan.enabled;
} else {
this.canPan = false;
}
this.userCss = '';
this.userCssClassName = videoData.userCssClassName;
}
start(){
if(!this.destroyed) {
this.startCssWatcher();
}
injectCss(css) {
this.conf.pageInfo.injectCss(css);
}
ejectCss(css) {
this.conf.pageInfo.ejectCss(css);
}
replaceCss(oldCss, newCss) {
this.conf.pageInfo.replaceCss(oldCss, newCss);
}
stop(){
this.stopCssWatcher();
prepareCss(css) {
return `.${this.userCssClassName} {${css}}`;
}
destroy(){
@ -72,7 +69,6 @@ class Resizer {
console.log(`[Resizer::destroy] <rid:${this.resizerId}> received destroy command.`);
}
this.destroyed = true;
this.stopCssWatcher();
}
calculateRatioForLegacyOptions(ar){
@ -211,14 +207,9 @@ class Resizer {
if (! this.video) {
// console.log("No video detected.")
this.videoData.destroy();
this.conf.destroy();
}
if (this.extensionMode === ExtensionMode.Enabled || PlayerData.isFullScreen()) {
this.startCssWatcher();
}
this.cssWatcherIncreasedFrequencyCounter = 20;
// // pause AR on basic stretch, unpause when using other mdoes
// fir sine reason unpause doesn't unpause. investigate that later
try {
@ -248,13 +239,8 @@ class Resizer {
if(Debug.debug){
console.log("[Resizer::setAr] <rid:"+this.resizerId+"> Illegal video dimensions found. We will pause everything.");
}
// if we get illegal video dimensions, cssWatcher goes nuts. This is harmful,
// so we stop it until that sorts itself out
this.stopCssWatcher();
}
return;
} else {
this.startCssWatcher();
}
if(this.stretcher.mode === Stretch.Conditional){
this.stretcher.applyConditionalStretch(stretchFactors, ar.ratio);
@ -354,74 +340,12 @@ class Resizer {
this.restore();
}
startCssWatcher(){
if(Debug.debug) {
console.log("[Resizer.js::startCssWatcher] starting css watcher. Is resizer destroyed?", this.destroyed);
}
if (this.destroyed) {
return;
}
this.cssCheckDisabled = false;
if(!this.cssWatcherTimer){
this.scheduleCssWatcher(1);
} else {
clearTimeout(this.cssWatcherTimer);
this.scheduleCssWatcher(1);
}
}
scheduleCssWatcher(timeout, force_reset) {
if (this.destroyed || (this.extensionMode !== ExtensionMode.Enabled && !PlayerData.isFullScreen())) {
return;
}
if(timeout === undefined) {
this.cssCheck(); // no timeout = one-off
return;
}
// one extra check to ensure we don't run css checks when we aren't supposed to
if (this.cssCheckDisabled) {
return;
}
if(this.cssWatcherTimeout) {
clearTimeout(this.cssWatcherTimer);
}
var ths = this;
this.cssWatcherTimer = setTimeout(function () {
ths.cssWatcherTimer = null;
try {
if (! ths.cssCheckDisabled) {
ths.cssCheck();
}
} catch (e) {
if(Debug.debug) {
console.log("[Resizer.js::scheduleCssWatcher] Css check failed. Error:", e);
}
}
}, timeout);
}
stopCssWatcher() {
if (Debug.debug) {
console.log(`[Resizer.js] <${this.resizerId}> STOPPING CSS WATCHER!`)
}
this.cssCheckDisabled = true;
clearInterval(this.cssWatcherTimeout);
}
restore() {
if(Debug.debug){
console.log("[Resizer::restore] <rid:"+this.resizerId+"> attempting to restore aspect ratio. this & settings:", {'a_lastAr': this.lastAr, 'this': this, "settings": this.settings} );
}
// this is true until we verify that css has actually been applied
this.restore_wd = true;
if(this.lastAr.type === AspectRatio.Initial){
this.setAr({type: AspectRatio.Reset});
}
@ -572,7 +496,7 @@ class Resizer {
for(var i in styleArray) {
if(styleArray[i]) {
styleString += styleArray[i] + "; ";
styleString += styleArray[i] + " !important; ";
}
}
@ -593,7 +517,7 @@ class Resizer {
}
if (Debug.debug && Debug.resizer) {
console.log("[Resizer::applyCss] <rid:"+this.resizerId+"> will apply css.", {stretchFactors, translate});
console.log("[Resizer::applyCss] <rid:"+this.resizerId+"> will apply css.", {stretchFactors, translate, video: this.video});
}
// save stuff for quick tests (before we turn numbers into css values):
@ -603,7 +527,6 @@ class Resizer {
// videoHeight: dimensions.height
}
const styleArrayString = this.video.getAttribute('style');
let extraStyleString;
try {
extraStyleString = this.settings.active.sites[window.location.host].DOM.video.additionalCss;
@ -611,113 +534,31 @@ class Resizer {
// do nothing. It's ok if no special settings are defined for this site, we'll just do defaults
}
const styleArray = this.buildStyleArray(styleArrayString, extraStyleString)
const styleArray = this.buildStyleArray('', extraStyleString)
// add remaining elements
if (stretchFactors) {
styleArray.push(`transform: translate(${translate.x}px, ${translate.y}px) scale(${stretchFactors.xFactor}, ${stretchFactors.yFactor})`);
styleArray.push("top: 0px; left: 0px; bottom: 0px; right: 0px");
styleArray.push("top: 0px !important; left: 0px !important; bottom: 0px !important; right: 0px");
}
const styleString = this.buildStyleString(styleArray);
const styleString = `${this.buildStyleString(styleArray)}${extraStyleString || ''}`; // string returned by buildStyleString() should end with ; anyway
// build style string back
this.setStyleString(styleString);
}
setStyleString (styleString) {
this.video.setAttribute("style", styleString);
this.currentStyleString = styleString;
this.currentCssValidFor = this.conf.player.dimensions;
if (this.restore_wd) {
if (!this.video){
if(Debug.debug)
console.log("[Resizer::_res_setStyleString] <rid:"+this.resizerId+"> Video element went missing, nothing to do here.")
return;
}
// if(
// styleString.indexOf("width: " + this.video.style.width) == -1 ||
// styleString.indexOf("height: " + this.video.style.height) == -1) {
// // css ni nastavljen?
// // css not set?
// if(Debug.debug)
// console.log("[Resizer::_res_setStyleString] Style string not set ???");
// if(count < settings.active.resizer.setStyleString.maxRetries){
// setTimeout( this.setStyleString, settings.active.resizer.setStyleString.retryTimeout, count + 1);
// }
// else if(Debug.debug){
// console.log("[Resizer::_res_setStyleString] we give up. css string won't be set");
// }
// }
// else{
this.restore_wd = false;
// }
}
else{
if(Debug.debug)
console.log("[Resizer::_res_setStyleString] <rid:"+this.resizerId+"> css applied. Style string:", styleString);
}
}
const newCssString = this.prepareCss(styleString);
cssCheck(){
if (this.cssCheckDisabled) {
throw "fucking dont"
return;
}
// this means we haven't set our CSS yet, or that we changed video.
// if(! this.currentCss.tranform) {
// this.scheduleCssWatcher(200);
// return;
// }
// this means video went missing. videoData will be re-initialized when the next video is found
if (!this.video){
if(Debug.debug && Debug.resizer) {
console.log("[Resizer::cssCheck] <rid:"+this.resizerId+"> no video detecting, issuing destroy command");
}
this.conf.destroy();
return;
}
if(this.destroyed) {
if(Debug.debug && Debug.resizer) {
console.log("[Resizer::cssCheck] <rid:"+this.resizerId+"> destroyed flag is set, we shouldnt be running");
}
this.stopCssWatcher();
return;
}
let cssValid = true;
// first, a quick test:
cssValid &= this.currentVideoSettings.validFor.width === this.conf.player.dimensions.width;
if (cssValid) {
const styleString = this.video.getAttribute('style');
cssValid &= this.currentStyleString === styleString;
}
if (cssValid && this.currentPlayerStyleString) { // only check for changes to player element if we applied them before
const playerStyleString = this.player.element.getAttribute('style');
cssValid &= this.currentPlayerStyleString === playerStyleString;
}
if (!cssValid){
if(Debug.debug && Debug.resizer) {
console.log(`%c[Resizer::cssCheck] <rid:${this.resizerId}> something touched our style string. We need to re-apply the style.`, {background: '#ddf', color: '#007'});
}
this.restore();
this.scheduleCssWatcher(10);
return;
}
if (this.cssWatcherIncreasedFrequencyCounter > 0) {
--this.cssWatcherIncreasedFrequencyCounter;
this.scheduleCssWatcher(20);
} else {
this.scheduleCssWatcher(1000);
// inject new CSS or replace existing one
if (!this.userCss) {
this.injectCss(newCssString);
this.userCss = newCssString;
} else if (newCssString !== this.userCss) {
// we only replace css if it
this.replaceCss(this.userCss, newCssString);
this.userCss = newCssString;
}
}
}

22
src/ext/uw-bg.js
View File

@ -58,7 +58,7 @@ class UWServer {
console.log("[uwbg::injectCss] Injecting CSS:", css, sender);
}
if (BrowserDetect.firefox || BrowserDetect.edge) {
await browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
} else if (BrowserDetect.chrome) {
chrome.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
}
@ -68,11 +68,21 @@ class UWServer {
}
}
}
removetCss(css, sender) {
if (BrowserDetect.firefox || BrowserDetect.edge) {
browser.tabs.removeCSS(sender.tab.idd, {code: css, cssOrigin: 'user', frameId: sender.frameId});
} else if (BrowserDetect.chrome) {
chrome.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
async removeCss(css, sender) {
try {
if (BrowserDetect.firefox || BrowserDetect.edge) {
browser.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
} else if (BrowserDetect.chrome) {
// this doesn't work currently, but hopefully chrome will get this feature in the future
chrome.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
}
} catch (e) { }
}
async replaceCss(oldCss, newCss, sender) {
if (oldCss !== newCss) {
this.injectCss(newCss, sender);
this.removeCss(oldCss, sender);
}
}

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"manifest_version": 2,
"name": "Ultrawidify",
"description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
"version": "4.2.2",
"version": "4.2.3",
"applications": {
"gecko": {
"id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

2
src/options/AutodetectionSettings.vue
View File

@ -517,7 +517,7 @@
<div class="flex flex-input">
<input type="checkbox"
v-model="settings.active.arDetect.guardLine.enabled"
/> Enable guardline</span>
/> Enable guardline
</div>
</div>
<div class="flex flex-row row-padding">

26
src/popup/panels/WhatsNewPanel.vue
View File

@ -2,22 +2,28 @@
<div>
<h2>What's new</h2>
<p>Full changelog for older versions <a href="https://github.com/xternal7/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p>
<p class="label">4.2.2</p>
<p class="label">4.2.3</p>
<ul>
<li>Fixed alignment issues for reddit on videos from v.reddit</li>
<li>Some people reported issues with inconsistent video alignment on youtube. While I've not been able to make that bug happen to me,
(which means I haven't been able to fix it either), reports describe behaviour similar to what was going on with Iridium. Examining
the Iridium issue revealed an issue that could be potentially blamed for this behaviour. That issue was fixed. Since I've never been able to make this problem
happen to me, I'm not being able to verify whether that issue is gone. <b>If you're still experiencing issues with inconsistent video alignment,
please contact me via github, reddit or email.</b> See 'Report a problem' tab for more details.</li>
<li>Fixed twitchy behaviour on Twitch, Facebook and Twatter. Here's a <a href="https://stuff.tamius.net/sacred-texts/2019/08/24/ultrawidify-the-twitchy-twitch-problem/" target="_blank">blog post</a> that covers the issue in more detail.</li>
<li>Cropping now uses user styles (as opposed to modifying element's style attribute)</li>
<li>Fixed the issue where one-pixel letterbox would result in constant aspect ratio corrections.</li>
<li>Started using mutation observers to watch for anything modifying the size of our video.</li>
</ul>
<p>As you can tell, I don't leave reddit and youtube much. To be fair, the twitching issue was intermittent on twitch.</p>
<p v-if="BrowserDetect.Chrome"><b>Chrome users:</b> as a result of Chrome's shortcomings, there now exists one potential performance issue.
If you notice any performance issues, please contact me via github, email or reddit (see: 'report a problem' tab
of this popup).</p>
</div>
</template>
<script>
export default {
import BrowserDetect from '../../ext/conf/BrowserDetect';
export default {
data () {
return {
BrowserDetect: BrowserDetect
}
}
}
</script>