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

Merge branch '4.2.4'

Browse Source
This commit is contained in:
Tamius Han 2019-08-31 22:58:59 +02:00
commit 19cf8477ca
6 changed files with 69 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -7,6 +7,10 @@
* Settings page looks ugly af right now. Maybe fix it some time later
### v4.3.0 (future release)
### 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>
* Added user-friendly way to export/import settings
* Reworked logging

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

@ -14,10 +14,9 @@ var Debug = {
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);
}

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

@ -168,6 +168,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 ){
this.logger.log('info', 'debug', "[PlayerDetect::_pd_getPlayer] element is not valid, doing nothing.", element)
@ -204,18 +205,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){
@ -223,37 +217,49 @@ 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;
grows = trustCandidateAfterGrows;
this.logger.log('info', 'debug', "Found new candidate for player. Dimensions: w:", candidate_width, "h:",candidate_height, "node:", playerCandidateNode);
score = 100;
if (element.id.indexOf('player') !== -1) { // prefer elements with 'player' in id
score += 75;
}
}
else if(grows --<= 0){
this.logger.log('info', 'playerDetect', "Current element grew in comparrison to the child. We probably found the player. breaking loop, returning current result");
break;
if (element.classList.toString().indexOf('player') !== -1) { // prefer elements with 'player' in classlist, but a bit less than id
score += 50;
}
score -= scorePenalty++; // prefer elements closer to <video>
elementQ.push({
element: element,
score: score,
});
}
element = element.parentNode;
}
if (elementQ.length) {
// return element with biggest score
return elementQ.sort( (a,b) => b.score - a.score)[0].element;
}
return playerCandidateNode;
// if no candidates were found, return parent node
return this.video.parentNode;
}
equalish(a,b, tolerance) {
return a > b - tolerance && a < b + tolerance;
}
getPlayerDimensions() {
getPlayerDimensions(){
const isFullScreen = PlayerData.isFullScreen();
const element = this.getPlayer(isFullScreen);
@ -289,6 +295,10 @@ class PlayerData {
}
}
forceRefreshPlayerElement() {
this.getPlayerDimensions();
}
checkPlayerSizeChange(){
// this 'if' is just here for debugging — real code starts later. It's safe to collapse and
// ignore the contents of this if (unless we need to change how logging works)
@ -310,9 +320,11 @@ class PlayerData {
}
}
if (this.element == undefined){
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

@ -48,6 +48,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) {
@ -72,10 +73,12 @@ class VideoData {
} else if (mutation.attributeName === 'style' && mutation.attributeOldValue !== this.video.getAttribute('style')) {
// 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);
@ -138,6 +141,8 @@ class VideoData {
destroy() {
this.logger.log('info', ['debug', 'init'], `[VideoData::destroy] <vdid:${this.vdid}> received destroy command`);
this.video.classList.remove(this.userCssClassName);
this.pause();
this.destroyed = true;
if (this.arDetector){