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

Merge branch 'master' into feature/player-ui

Browse Source
This commit is contained in:
Tamius Han 2021-04-04 03:59:08 +02:00
commit 0bc1254ce0
9 changed files with 168 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -11,12 +11,16 @@
## v7.0 (planned major)
* WebGL autodetection
## v6.0 (planned major)
## v6.0 (next major)
* in-player GUI
* Fix UI logger
## v5.x (next major)
## v5.x (current major)
### v5.0.1
* Turned off zoom limitations for Edge and Chrome.
* Added an option for users to manually re-enable (and configure) Chrome/Edge's zoom limiter.
### v5.0.0

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "ultrawidify",
"version": "5.0.0",
"version": "5.0.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "ultrawidify",
"version": "5.0.0",
"version": "5.0.1",
"description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
"author": "Tamius Han <tamius.han@gmail.com>",
"scripts": {

12
src/common/interfaces/SettingsInterface.ts
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 :::
// -----------------------------------------

1
src/ext/lib/video-data/PlayerData.ts
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);
}

13
src/ext/lib/video-transform/Stretcher.ts
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;

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": "5.0.0.1",
"version": "5.0.1",
"applications": {
"gecko": {
"id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

126
src/popup/panels/SiteDetailsPanel.vue
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>

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

@ -2,30 +2,24 @@
<div>
<h2>What's new</h2>
<p>Full changelog for older versions <a href="https://github.com/tamius-han/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p>
<p class="label">5.0.0</p>
<p class="label">5.0.1</p>
<ul>
<li>
Under the hood: the extension has been moved over to typescript (except UI bits, which remain javascript).
Disabled Chrome's and Edge's zoom limitation.
</li>
<li>
webextension-polyfill is now used everywhere (if only because typescript throws a hissy fit with <code>browser</code> and <code>chrome</code> otherwise) (<a href="https://github.com/tamius-han/ultrawidify/issues/114">#114</a>).
</li>
<li>
Fix some bugs that I didn't even know I had, but typescript kinda shone some light on them
</li>
<li>
Manual zoom and panning are now back. (<a href="https://github.com/tamius-han/ultrawidify/issues/135">#135</a> and <a href="https://github.com/tamius-han/ultrawidify/issues/138">#138</a>)
</li>
<li>
Fix issue when video would be scaled incorrectly if video element uses <code>height:auto</code>.
</li>
<li>
<b>[5.0.0.1]</b> Fixed the issue where settings were reset on page load.
</li>
<li>
<b>[5.0.0.1]</b> Fixed the issue where settings page wouldn't load.
Added an option to toggle and further configure zoom limitation.
</li>
</ul>
<p>
<small><b>NOTE:</b> zoom limitations were introduced as a workaround for a bug caused by Chrome's/Edge's faulty hardware acceleration
which caused videos to be incorrectly stretched on nVidia GPUs while in fullscreens. While this issue is reportedly fixed as
of few weeks ago, a few people reported having this issue within the past two weeks.</small>
</p>
<p>
<small>If you experience issues with videos being stretched incorrectly at certain zoom levels, go to:</small><br/>
<small><code>extension popup > Advanced Settings > Browser quirk mitigations > limit zoom.</code></small>
</p>
</div>
</template>
<script>