Twitching issue was fixed but performance is shite

This commit is contained in:
Tamius Han 2019-08-23 02:25:48 +02:00
parent 3f8def5268
commit 68b3589e77
7 changed files with 62 additions and 47 deletions

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

View File

@ -220,7 +220,7 @@ 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;
}

View File

@ -41,6 +41,20 @@ 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
});
}
destroy() {
if(Debug.debug || Debug.init){
console.log("[PageInfo::destroy] destroying all videos!")

View File

@ -13,6 +13,8 @@ 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}`;
// POZOR: VRSTNI RED JE POMEMBEN (arDetect mora bit zadnji)
// NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last)
@ -30,12 +32,13 @@ 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);
}
firstTimeArdInit(){

View File

@ -55,6 +55,9 @@ class Resizer {
} else {
this.canPan = false;
}
this.userCss = '';
this.userCssClassName = videoData.userCssClassName;
}
start(){
@ -67,6 +70,18 @@ class Resizer {
this.stopCssWatcher();
}
injectCss(css) {
this.conf.pageInfo.injectCss(css);
}
ejectCss(css) {
this.conf.pageInfo.ejectCss(css);
}
prepareCss(css) {
return `.${this.userCssClassName} {${css}}`;
}
destroy(){
if(Debug.debug || Debug.init){
console.log(`[Resizer::destroy] <rid:${this.resizerId}> received destroy command.`);
@ -211,7 +226,7 @@ class Resizer {
if (! this.video) {
// console.log("No video detected.")
this.videoData.destroy();
this.conf.destroy();
}
if (this.extensionMode === ExtensionMode.Enabled || PlayerData.isFullScreen()) {
@ -572,7 +587,7 @@ class Resizer {
for(var i in styleArray) {
if(styleArray[i]) {
styleString += styleArray[i] + "; ";
styleString += styleArray[i] + " !important; ";
}
}
@ -593,7 +608,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 +618,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,51 +625,42 @@ 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.video.setAttribute("style", styleString);
// remove old CSS
if (this.userCss) {
this.ejectCss(this.userCss);
}
// this.currentStyleString = styleString;
this.currentCssValidFor = this.conf.player.dimensions;
this.userCss = this.prepareCss(styleString);
// inject new CSS
this.injectCss(this.userCss);
this.video.classList.add(this.userCssClassName);
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;
// }
this.restore_wd = false;
}
else{
if(Debug.debug)
@ -697,8 +702,7 @@ class Resizer {
cssValid &= this.currentVideoSettings.validFor.width === this.conf.player.dimensions.width;
if (cssValid) {
const styleString = this.video.getAttribute('style');
cssValid &= this.currentStyleString === styleString;
cssValid &= this.video.classList.contains(this.userCssClassName);
}
if (cssValid && this.currentPlayerStyleString) { // only check for changes to player element if we applied them before
const playerStyleString = this.player.element.getAttribute('style');

View File

@ -70,7 +70,7 @@ class UWServer {
}
removetCss(css, sender) {
if (BrowserDetect.firefox || BrowserDetect.edge) {
browser.tabs.removeCSS(sender.tab.idd, {code: css, cssOrigin: 'user', frameId: sender.frameId});
browser.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
} else if (BrowserDetect.chrome) {
chrome.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
}

View File

@ -2,17 +2,11 @@
<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.</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>
</div>
</template>
<script>