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

Merge branch '4.2.4' into stable

Browse Source
This commit is contained in:
Tamius Han 2019-08-31 22:55:03 +02:00
commit 50e0d7aa59
9 changed files with 71 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -6,6 +6,11 @@
* Settings page looks ugly af right now. Maybe fix it some time later
### v4.2.4
* Improvements to player detection. More details in the [blog post](https://stuff.tamius.net/sacred-texts/2019/08/31/ultrawidify-and-the-improper-cropping/).</li>
### v4.2.3 / 4.2.3.1
* Fixed twitchy behaviour on Twitch, Facebook and Twatter. Here's a [blog post](https://stuff.tamius.net/sacred-texts/2019/08/24/ultrawidify-the-twitchy-twitch-problem/) that covers the issue in more detail.

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "ultravidify",
"version": "4.2.3",
"version": "4.2.4",
"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": {

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

@ -10,16 +10,14 @@ var Debug = {
// resizer: true,
// debugArDetect: true,
// scaler: true,
// debugStorage: false,
// debugStorage: true,
// comms: false,
// comms: true,
// showArDetectCanvas: true,
// flushStoredSettings: true,
// flushStoredSettings: false,
// playerDetect: true,
// periodic: true,
// // videoRescan: true,
// videoRescan: true,
// mousemove: true,
// arDetect: {
// edgeDetect: true

4
src/ext/conf/ExtConfPatches.js
View File

@ -10,7 +10,7 @@ const ExtensionConfPatch = {
player: {
manual: true,
useRelativeAncestor: false,
querySelectors: '.media-preview-content, .reddit-video-player-root'
querySelectors: '.reddit-video-player-root, .media-preview-content'
}
},
css: '',
@ -21,7 +21,7 @@ const ExtensionConfPatch = {
player: {
manual: true,
useRelativeAncestor: false,
querySelectors: '.media-preview-content, .reddit-video-player-root'
querySelectors: '.reddit-video-player-root, .media-preview-content'
}
},
css: '',

25
src/ext/lib/Settings.js
View File

@ -78,7 +78,9 @@ class Settings {
const settings = await this.get();
// |—> on first setup, settings is undefined & settings.version is haram
const oldVersion = (settings && settings.version) || '0.0.0';
// | since new installs ship with updates by default, no patching is
// | needed. In this case, we assume we're on the current version
const oldVersion = (settings && settings.version) || this.getExtensionVersion();
const currentVersion = this.getExtensionVersion();
if(Debug.debug) {
@ -90,43 +92,43 @@ class Settings {
if (Debug.flushStoredSettings) {
console.log("%c[Settings::init] Debug.flushStoredSettings is true. Using default settings", "background: #d00; color: #ffd");
Debug.flushStoredSettings = false; // don't do it again this session
this.setDefaultSettings();
this.active = this.getDefaultSettings();
this.active.version = currentVersion;
this.set(this.active);
return this.active;
}
}
// if there's no settings saved, return default settings.
if(! settings || (Object.keys(settings).length === 0 && settings.constructor === Object)) {
this.setDefaultSettings();
this.active = this.getDefaultSettings();
this.active.version = currentVersion;
this.set(this.active);
return this.active;
}
// if last saved settings was for version prior to 4.x, we reset settings to default
// it's not like people will notice cos that version didn't preserve settings at all
if (settings.version && !settings.version.startsWith('4')) {
this.setDefaultSettings();
this.active = this.getDefaultSettings();
this.active.version = currentVersion;
this.set(this.active);
return this.active;
}
// in every case, we'll update the version number:
settings.version = currentVersion;
// if there's settings, set saved object as active settings
this.active = settings;
// from some point to 4.2.3.1, settings version wasn't saved. Fix that.
if (!settings.version) {
this.active.version = currentVersion;
}
// check if extension has been updated. If not, return settings as they were retreived
if(oldVersion === currentVersion) {
if (oldVersion == currentVersion) {
if(Debug.debug) {
console.log("[Settings::init] extension was saved with current version of ultrawidify. Returning object as-is.");
}
return this.active;
}
@ -223,6 +225,7 @@ class Settings {
}
setDefaultSettings() {
this.default.version = this.getExtensionVersion();
this.set(this.default);
}

71
src/ext/lib/video-data/PlayerData.js
View File

@ -236,6 +236,7 @@ class PlayerData {
getPlayer(isFullScreen) {
const host = window.location.host;
let element = this.video.parentNode;
const videoWidth = this.video.offsetWidth, videoHeight = this.video.offsetHeight;
if(! element ){
if(Debug.debug) {
@ -274,18 +275,11 @@ class PlayerData {
}
}
const elementQ = [];
let scorePenalty = 0;
let score;
var trustCandidateAfterGrows = 2; // if candidate_width or candidate_height increases in either dimensions this many
// times, we say we found our player. (This number ignores weird elements)
// in case our <video> is bigger than player in one dimension but smaller in the other
// if site is coded properly, player can't be wider than that
var candidate_width = Math.max(element.offsetWidth, window.innerWidth);
var candidate_height = Math.max(element.offsetHeight, window.innerHeight);
var playerCandidateNode = element;
// if we haven't found element using fancy methods, we resort to the good old fashioned way
var grows = trustCandidateAfterGrows;
while(element != undefined){
while (element != undefined){
// odstranimo čudne elemente, ti bi pokvarili zadeve
// remove weird elements, those would break our stuff
if ( element.offsetWidth == 0 || element.offsetHeight == 0){
@ -293,40 +287,47 @@ class PlayerData {
continue;
}
if ( element.offsetHeight <= candidate_height &&
element.offsetWidth <= candidate_width ){
// element je player, če je ena stranica enako velika kot video, druga pa večja ali enaka.
// za enakost dovolimo mala odstopanja
// element is player, if one of the sides is as long as the video and the other bigger (or same)
// we allow for tiny variations when checking for equality
if ( (element.offsetWidth >= videoWidth && this.equalish(element.offsetHeight, videoHeight, 2))
|| (element.offsetHeight >= videoHeight && this.equalish(element.offsetWidth, videoHeight, 2))) {
// if we're in fullscreen, we only consider elements that are exactly as big as the monitor.
if( ! isFullScreen ||
(element.offsetWidth == window.innerWidth && element.offsetHeight == window.innerHeight) ){
// todo — in case the match is only equalish and not exact, take difference into account when
// calculating score
playerCandidateNode = element;
candidate_width = element.offsetWidth;
candidate_height = element.offsetHeight;
score = 100;
grows = trustCandidateAfterGrows;
if(Debug.debug){
console.log("Found new candidate for player. Dimensions: w:", candidate_width, "h:",candidate_height, "node:", playerCandidateNode);
if (element.id.indexOf('player') !== -1) { // prefer elements with 'player' in id
score += 75;
}
if (element.classList.toString().indexOf('player') !== -1) { // prefer elements with 'player' in classlist, but a bit less than id
score += 50;
}
}
else if(grows --<= 0){
score -= scorePenalty++; // prefer elements closer to <video>
if(Debug.debug && Debug.playerDetect){
console.log("Current element grew in comparrison to the child. We probably found the player. breaking loop, returning current result");
}
break;
elementQ.push({
element: element,
score: score,
});
}
element = element.parentNode;
}
return playerCandidateNode;
if (elementQ.length) {
// return element with biggest score
return elementQ.sort( (a,b) => b.score - a.score)[0].element;
}
// if no candidates were found, return parent node
return this.video.parentNode;
}
equalish(a,b, tolerance) {
return a > b - tolerance && a < b + tolerance;
}
getPlayerDimensions(){
const isFullScreen = PlayerData.isFullScreen();
@ -366,6 +367,10 @@ class PlayerData {
}
}
forceRefreshPlayerElement() {
this.getPlayerDimensions();
}
checkPlayerSizeChange(){
if(Debug.debug){
if(this.element == undefined){
@ -394,8 +399,10 @@ class PlayerData {
}
if(this.element == undefined){
this.element = this.getPlayer();
return true;
} else if(this.dimensions.width != this.element.offsetWidth || this.dimensions.height != this.element.offsetHeight ){
this.element = this.getPlayer();
return true;
}

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

@ -49,6 +49,7 @@ class VideoData {
this.pageInfo.initMouseActionHandler(this);
this.video.classList.add(this.userCssClassName); // this also needs to be applied BEFORE we initialize resizer!
}
onVideoDimensionsChanged(mutationList, observer) {
@ -74,10 +75,12 @@ class VideoData {
console.log("style changed")
// if size of the video has changed, this may mean we need to recalculate/reapply
// last calculated aspect ratio
this.player.forceRefreshPlayerElement();
this.restoreAr();
} else if (mutation.attribute = 'src' && mutation.attributeOldValue !== this.video.getAttribute('src')) {
// try fixing alignment issue on video change
try {
this.player.forceRefreshPlayerElement();
this.restoreAr();
} catch (e) {
console.error("[VideoData::onVideoDimensionsChanged] There was an error when handling src change.", e);
@ -144,6 +147,8 @@ class VideoData {
console.log(`[VideoData::destroy] <vdid:${this.vdid}> received destroy command`);
}
this.video.classList.remove(this.userCssClassName);
this.pause();
this.destroyed = true;
if (this.arDetector){

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

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

@ -2,17 +2,10 @@
<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.3[.x]</p>
<p class="label">4.2.4</p>
<ul>
<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>
<li><b>[4.2.3.1]</b> fixed some bugs in popup.</li>
<li><b>[4.2.3.2]</b> fixed settings initialization for new users.</li>
<li><b>[4.2.3.3]</b> fixed autodetection not starting.</li>
<li>Improvements to player detection. More details in the <a href="https://stuff.tamius.net/sacred-texts/2019/08/31/ultrawidify-and-the-improper-cropping/" target="_blank">blog post</a>.</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>