Allow toggling chrome hardware acceleration bug workaround for people not experiencing it

This commit is contained in:
Tamius Han 2021-04-04 03:42:18 +02:00
parent 902f880a68
commit c6e4d06fa1
4 changed files with 147 additions and 5 deletions

View File

@ -181,6 +181,18 @@ interface SettingsInterface {
pan?: any,
version?: string,
preventReload?: boolean,
// -----------------------------------------
// ::: MITIGATIONS :::
// -----------------------------------------
// Settings for browser bug workarounds.
mitigations?: {
zoomLimit?: {
enabled?: boolean,
fullscreenOnly: boolean,
limit?: number,
}
}
// -----------------------------------------
// ::: ACTIONS :::
// -----------------------------------------

View File

@ -108,6 +108,7 @@ class PlayerData {
}
static isFullScreen(){
console.info(window.innerHeight, window.screen.height, 'x', window.innerWidth, window.screen.width);
return ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
}

View File

@ -271,16 +271,23 @@ squeezeFactor: ${squeezeFactor}`, '\nvideo', this.conf.video);
* style attribute does).
*/
chromeBugMitigation(stretchFactors) {
if (BrowserDetect.anyChromium && this.conf.player?.dimensions?.fullscreen) {
console.log("limit zoom?", BrowserDetect.anyChromium, this.conf.player?.dimensions, this.settings?.active?.mitigations?.zoomLimit?.enabled);
if (
BrowserDetect.anyChromium
&& (this.conf.player?.dimensions?.fullscreen || !
this.settings?.active?.mitigations?.zoomLimit?.fullscreenOnly)
&& this.settings?.active?.mitigations?.zoomLimit?.enabled
) {
const playerAr = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
const streamAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
let maxSafeAr;
let arLimitFactor = this.settings?.active?.mitigations?.zoomLimit?.limit ?? 0.997;
if (playerAr >= (streamAr * 1.1)) {
maxSafeAr = (window.innerWidth * 0.997) / window.innerHeight;
maxSafeAr = (window.innerWidth * arLimitFactor) / window.innerHeight;
} else if (playerAr < (streamAr * 0.95)) {
maxSafeAr = window.innerWidth / (window.innerHeight * 0.997);
maxSafeAr = window.innerWidth / (window.innerHeight * arLimitFactor);
} else {
// in some cases, we tolerate minor stretch to avoid tiny black bars
return;

View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-column" style="padding-bottom: 20px">
<div class="flex flex-column" style="padding-bottom: 20px; position: relative">
<!-- <div class="">
<div class="label">Player picker</div>
<div class="desc">
@ -122,6 +122,67 @@
/>
</div>
<div class="label">
Browser quirk mitigations
</div>
<div class="description">
Sometimes, the extension may misbehave as a result of issues and bugs present in your browser, operating system or your GPU driver.
Some of the issues can be fixed by limiting certain functionalities of this addon.
</div>
<div class="flex flex-column">
<div
v-if="BrowserDetect.anyChromium"
class="workaround flex flex-column"
>
<div class="flex label-secondary form-label">
<input :checked="settings?.active?.mitigations?.zoomLimit?.enabled"
@change="setMitigation(['zoomLimit', 'enabled'], $event.target.checked)"
type="checkbox"
/> Limit zoom.
</div>
<div class="flex flex-row">
<div class="label-secondary form-label">
<small>Limit zoom to % of width (1=100%):</small>
</div>
<input type="number"
:value="settings?.active?.mitigations?.zoomLimit?.limit || 0.997"
step="0.001"
min="0.5"
@change="setMitigation(['zoomLimit', 'limit'], +$event.target.value)"
@blur="updateVideoQuerySelector"
:disabled="!settings?.active?.mitigations?.zoomLimit?.enabled"
/>
</div>
<div class="flex label-secondary form-label">
<input :checked="settings?.active?.mitigations?.zoomLimit?.fullscreenOnly"
@change="setMitigation(['zoomLimit', 'fullscreenOnly'], $event.target.checked)"
type="checkbox"
/> Limit zoom only while in fullscreen
</div>
<div class="description">
<small>
<b>Fix for:</b> Chrome and Edge used to have a bug where videos would get incorrectly stretched when zoomed in too far.
The issue only appeared in fullscreen, on nVidia GPUs, and with hardware acceleration enabled. While this option only
needs to be applied in fullscreen, fullscreen detection in Chrome can be a bit unreliable (depending on your OS and/or
display scaling settings).
</small>
</div>
</div>
</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
</div>
<div id="save-banner-observer-bait">
&nbsp;
</div>
<div
id="save-banner"
class="save-banner"
>
<div class="button">Save settings</div>
</div>
</div>
</template>
@ -133,6 +194,8 @@ import QuerySelectorSetting from '../../common/components/QuerySelectorSetting.v
import ExtensionMode from '../../common/enums/ExtensionMode.enum';
import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
import StretchType from '../../common/enums/StretchType.enum';
import BrowserDetect from '../../ext/conf/BrowserDetect';
export default {
components: {
QuerySelectorSetting,
@ -149,6 +212,7 @@ export default {
playerCss: '',
playerByNodeIndex: false,
playerParentNodeIndex: undefined,
BrowserDetect
};
},
props: {
@ -179,7 +243,24 @@ export default {
// that's here just in case relevant settings for this site don't exist yet
}
},
mounted() {
this.createObserver();
},
methods: {
createObserver() {
const saveButtonBait = document.getElementById('save-banner-observer-bait');
const saveButton = document.getElementById('save-banner');
const observer = new IntersectionObserver(
([e]) => {
// console.log('observer triggered. intersection ratio?', e.intersectionRatio)
saveButton.classList.toggle('floating', e.intersectionRatio < 0.95);
},
{threshold: [0, 0.5, 0.9, 0.95, 1]}
);
observer.observe(saveButtonBait);
},
ensureSettings(scope) {
if (! this.settings.active.sites[this.site]) {
this.settings.active.sites[this.site] = {
@ -248,12 +329,39 @@ export default {
this.settings.active.sites[this.site].DOM.player.useRelativeAncestor = this.playerByNodeIndex;
this.settings.save();
},
setMitigation(mitigation, value) {
// ensure mitigations object exists.
// it may not exist in the settings on first load
if (! this.settings.active.mitigations) {
this.settings.active.mitigations = {};
}
if (Array.isArray(mitigation)) {
let currentMitigationsParent = this.settings.active.mitigations;
for (let i = 0; i < mitigation.length - 1; i++) {
if (!currentMitigationsParent[mitigation[i]]) {
currentMitigationsParent[mitigation[i]] = {};
}
currentMitigationsParent = currentMitigationsParent[mitigation[i]];
}
currentMitigationsParent[mitigation[mitigation.length - 1]] = value;
} else {
this.settings.active.mitigations[mitigation] = value;
}
this.settings.save();
}
}
}
</script>
<style>
<style lang="scss">
@import '../../res/css/colors.scss';
.pp_video {
margin: 2px;
padding: 5px;
@ -279,4 +387,18 @@ export default {
padding: 2px;
border: 2px solid #f00;
}
.save-banner {
display: block;
position: sticky;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #131313;
text-align: center;
&.floating {
box-shadow: 0 2rem 3rem 1rem $selected-color;
}
}
</style>