If no element fits the criteria for the video player, have extension ignore such videos.
Also, sometimes mutationObserver doesn't catch all mutations/we miss some mutations. Added a delay that validates offsets. If validation fails, retrigger aspect ratio correction to make sure there's no misalignments. (That last bit was mostly needed for new reddit)
This commit is contained in:
parent
40416d74e9
commit
e1e962df04
@ -197,7 +197,11 @@ class PageInfo {
|
||||
|
||||
try {
|
||||
v = new VideoData(video, this.settings, this);
|
||||
v.initArDetection();
|
||||
if (!v.invalid) {
|
||||
v.initArDetection();
|
||||
} else {
|
||||
this.logger.log('error', 'debug', 'Video is invalid. Aard not started.', video);
|
||||
}
|
||||
this.videos.push(v);
|
||||
} catch (e) {
|
||||
this.logger.log('error', 'debug', "rescan error: failed to initialize videoData. Skipping this video.",e);
|
||||
|
||||
@ -39,10 +39,17 @@ class PlayerData {
|
||||
this.video = videoData.video;
|
||||
this.settings = videoData.settings;
|
||||
this.extensionMode = videoData.extensionMode;
|
||||
this.invalid = false;
|
||||
this.element = this.getPlayer();
|
||||
this.dimensions = undefined;
|
||||
this.overlayNode = undefined;
|
||||
|
||||
// this happens when we don't find a matching player element
|
||||
if (!this.element) {
|
||||
this.invalid = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.extensionMode === ExtensionMode.Enabled) {
|
||||
this.checkPlayerSizeChange();
|
||||
}
|
||||
@ -76,15 +83,11 @@ class PlayerData {
|
||||
}
|
||||
|
||||
startChangeDetection(){
|
||||
const ths = this;
|
||||
this.observer = new MutationObserver((m,o) => this.onPlayerDimensionsChanged(m,o,ths));
|
||||
|
||||
const isFullScreen = PlayerData.isFullScreen();
|
||||
this.element = this.getPlayer(isFullScreen);
|
||||
|
||||
if (!this.element) {
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
const ths = this;
|
||||
this.observer = new MutationObserver((m,o) => this.onPlayerDimensionsChanged(m,o,ths));
|
||||
|
||||
const observerConf = {
|
||||
attributes: true,
|
||||
@ -157,7 +160,7 @@ class PlayerData {
|
||||
return false;
|
||||
}
|
||||
|
||||
getPlayer(isFullScreen) {
|
||||
getPlayer() {
|
||||
const host = window.location.host;
|
||||
let element = this.video.parentNode;
|
||||
const videoWidth = this.video.offsetWidth, videoHeight = this.video.offsetHeight;
|
||||
@ -165,112 +168,119 @@ class PlayerData {
|
||||
let scorePenalty = 0;
|
||||
let score;
|
||||
|
||||
if(! element ){
|
||||
this.logger.log('info', 'debug', "[PlayerDetect::_pd_getPlayer] element is not valid, doing nothing.", element)
|
||||
if(this.element) {
|
||||
const ths = this;
|
||||
try {
|
||||
if(! element ){
|
||||
this.logger.log('info', 'debug', "[PlayerDetect::_pd_getPlayer] element is not valid, doing nothing.", element)
|
||||
if(this.element) {
|
||||
const ths = this;
|
||||
}
|
||||
this.element = undefined;
|
||||
this.dimensions = undefined;
|
||||
return;
|
||||
}
|
||||
this.element = undefined;
|
||||
this.dimensions = undefined;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.settings.active.sites[host]
|
||||
&& this.settings.active.sites[host].DOM
|
||||
&& this.settings.active.sites[host].DOM.player
|
||||
&& this.settings.active.sites[host].DOM.player.manual) {
|
||||
if (this.settings.active.sites[host].DOM.player.useRelativeAncestor
|
||||
&& this.settings.active.sites[host].DOM.player.videoAncestor) {
|
||||
if (this.settings.active.sites[host]
|
||||
&& this.settings.active.sites[host].DOM
|
||||
&& this.settings.active.sites[host].DOM.player
|
||||
&& this.settings.active.sites[host].DOM.player.manual) {
|
||||
if (this.settings.active.sites[host].DOM.player.useRelativeAncestor
|
||||
&& this.settings.active.sites[host].DOM.player.videoAncestor) {
|
||||
|
||||
let parentsLeft = this.settings.active.sites[host].DOM.player.videoAncestor - 1;
|
||||
while (parentsLeft --> 0) {
|
||||
element = element.parentNode;
|
||||
}
|
||||
if (element) {
|
||||
return element;
|
||||
}
|
||||
} else if (this.settings.active.sites[host].DOM.player.querySelectors) {
|
||||
const allSelectors = document.querySelectorAll(this.settings.active.sites[host].DOM.player.querySelectors);
|
||||
let parentsLeft = this.settings.active.sites[host].DOM.player.videoAncestor - 1;
|
||||
while (parentsLeft --> 0) {
|
||||
element = element.parentNode;
|
||||
}
|
||||
if (element) {
|
||||
return element;
|
||||
}
|
||||
} else if (this.settings.active.sites[host].DOM.player.querySelectors) {
|
||||
const allSelectors = document.querySelectorAll(this.settings.active.sites[host].DOM.player.querySelectors);
|
||||
// actually we'll also score this branch in a similar way we score the regular, auto branch
|
||||
while (element) {
|
||||
|
||||
// actually we'll also score this branch in a similar way we score the regular, auto branch
|
||||
while (element) {
|
||||
// Let's see how this works
|
||||
if (this.collectionHas(allSelectors, element)) {
|
||||
score = 100; // every matching element gets a baseline 100 points
|
||||
|
||||
// Let's see how this works
|
||||
if (this.collectionHas(allSelectors, element)) {
|
||||
score = 100; // every matching element gets a baseline 100 points
|
||||
// elements that match the size get a hefty bonus
|
||||
if ( (element.offsetWidth >= videoWidth && this.equalish(element.offsetHeight, videoHeight, 2))
|
||||
|| (element.offsetHeight >= videoHeight && this.equalish(element.offsetWidth, videoHeight, 2))) {
|
||||
score += 75;
|
||||
}
|
||||
|
||||
// elements that match the size get a hefty bonus
|
||||
if ( (element.offsetWidth >= videoWidth && this.equalish(element.offsetHeight, videoHeight, 2))
|
||||
|| (element.offsetHeight >= videoHeight && this.equalish(element.offsetWidth, videoHeight, 2))) {
|
||||
score += 75;
|
||||
// elements farther away from the video get a penalty
|
||||
score -= (scorePenalty++) * 20;
|
||||
|
||||
// push the element on the queue/stack:
|
||||
elementQ.push({
|
||||
score: score,
|
||||
element: element,
|
||||
});
|
||||
}
|
||||
|
||||
// elements farther away from the video get a penalty
|
||||
score -= (scorePenalty++) * 20;
|
||||
|
||||
// push the element on the queue/stack:
|
||||
elementQ.push({
|
||||
score: score,
|
||||
element: element,
|
||||
});
|
||||
element = element.parentNode;
|
||||
}
|
||||
|
||||
if (elementQ.length) {
|
||||
// return element with biggest score
|
||||
// if video player has not been found, proceed to automatic detection
|
||||
return elementQ.sort( (a,b) => b.score - a.score)[0].element;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// try to find element the old fashioned way
|
||||
|
||||
while (element){
|
||||
// odstranimo čudne elemente, ti bi pokvarili zadeve
|
||||
// remove weird elements, those would break our stuff
|
||||
if ( element.offsetWidth == 0 || element.offsetHeight == 0){
|
||||
element = element.parentNode;
|
||||
continue;
|
||||
}
|
||||
if (elementQ.length) {
|
||||
// return element with biggest score
|
||||
// if video player has not been found, proceed to automatic detection
|
||||
return elementQ.sort( (a,b) => b.score - a.score)[0].element;
|
||||
|
||||
// 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))) {
|
||||
|
||||
// todo — in case the match is only equalish and not exact, take difference into account when
|
||||
// calculating score
|
||||
|
||||
score = 100;
|
||||
|
||||
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;
|
||||
}
|
||||
score -= scorePenalty++; // prefer elements closer to <video>
|
||||
|
||||
elementQ.push({
|
||||
element: element,
|
||||
score: score,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
while (element){
|
||||
// odstranimo čudne elemente, ti bi pokvarili zadeve
|
||||
// remove weird elements, those would break our stuff
|
||||
if ( element.offsetWidth == 0 || element.offsetHeight == 0){
|
||||
element = element.parentNode;
|
||||
continue;
|
||||
}
|
||||
|
||||
// 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))) {
|
||||
|
||||
// todo — in case the match is only equalish and not exact, take difference into account when
|
||||
// calculating score
|
||||
|
||||
score = 100;
|
||||
|
||||
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;
|
||||
}
|
||||
score -= scorePenalty++; // prefer elements closer to <video>
|
||||
|
||||
elementQ.push({
|
||||
element: element,
|
||||
score: score,
|
||||
});
|
||||
if (elementQ.length) {
|
||||
// return element with biggest score
|
||||
return elementQ.sort( (a,b) => b.score - a.score)[0].element;
|
||||
}
|
||||
|
||||
element = element.parentNode;
|
||||
// if no candidates were found, something is obviously very, _very_ wrong.
|
||||
// we return nothing. Player will be marked as invalid and setup will stop.
|
||||
// VideoData should check for that before starting anything.
|
||||
this.logger.log('warn', 'debug', '[PlayerData::getPlayer] no matching player was found for video', this.video, 'Extension cannot work on this site.');
|
||||
return;
|
||||
} catch (e) {
|
||||
this.logger.log('crit', 'debug', '[PlayerData::getPlayer] something went wrong while detecting player:', e, 'Shutting down extension for this page');
|
||||
}
|
||||
|
||||
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) {
|
||||
|
||||
@ -17,13 +17,13 @@ class VideoData {
|
||||
|
||||
this.userCssClassName = `uw-fuck-you-and-do-what-i-tell-you_${this.vdid}`;
|
||||
|
||||
|
||||
// We'll replace cssWatcher (in resizer) with mutationObserver
|
||||
// We only init observers once player is confirmed valid
|
||||
const observerConf = {
|
||||
attributes: true,
|
||||
// attributeFilter: ['style', 'class'],
|
||||
attributeOldValue: true,
|
||||
};
|
||||
|
||||
const ths = this;
|
||||
this.observer = new MutationObserver( (m, o) => this.onVideoDimensionsChanged(m, o, ths));
|
||||
this.observer.observe(video, observerConf);
|
||||
@ -31,8 +31,14 @@ class VideoData {
|
||||
// POZOR: VRSTNI RED JE POMEMBEN (arDetect mora bit zadnji)
|
||||
// NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last)
|
||||
this.player = new PlayerData(this);
|
||||
this.resizer = new Resizer(this);
|
||||
if (this.player.invalid) {
|
||||
this.invalid = true;
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
this.resizer = new Resizer(this);
|
||||
this.arDetector = new ArDetector(this); // this starts Ar detection. needs optional parameter that prevets ardetdctor from starting
|
||||
// player dimensions need to be in:
|
||||
// this.player.dimensions
|
||||
@ -55,37 +61,66 @@ class VideoData {
|
||||
return;
|
||||
}
|
||||
for (let mutation of mutationList) {
|
||||
if (mutation.type === 'attributes') {
|
||||
if (mutation.attributeName === 'class') {
|
||||
if (!context.video.classList.contains(this.userCssClassName)) {
|
||||
// force the page to include our class in classlist, if the classlist has been removed
|
||||
context.video.classList.add(this.userCssClassName);
|
||||
if (mutation.type === 'attributes'
|
||||
&& mutation.attributeName === 'class'
|
||||
&& !context.video.classList.contains(this.userCssClassName) ) {
|
||||
// force the page to include our class in classlist, if the classlist has been removed
|
||||
// while classList.add() doesn't duplicate classes (does nothing if class is already added),
|
||||
// we still only need to make sure we're only adding our class to classlist if it has been
|
||||
// removed. classList.add() will _still_ trigger mutation (even if classlist wouldn't change).
|
||||
// This is a problem because INFINITE RECURSION TIME, and we _really_ don't want that.
|
||||
|
||||
// } else if () {
|
||||
// this bug should really get
|
||||
} else {
|
||||
context.restoreAr();
|
||||
}
|
||||
} else if (mutation.attributeName === 'style' && mutation.attributeOldValue !== context.video.getAttribute('style')) {
|
||||
// if size of the video has changed, this may mean we need to recalculate/reapply
|
||||
// last calculated aspect ratio
|
||||
context.player.forceRefreshPlayerElement();
|
||||
context.restoreAr();
|
||||
} else if (mutation.attribute = 'src' && mutation.attributeOldValue !== this.video.getAttribute('src')) {
|
||||
// try fixing alignment issue on video change
|
||||
try {
|
||||
context.player.forceRefreshPlayerElement();
|
||||
context.restoreAr();
|
||||
} catch (e) {
|
||||
console.error("[VideoData::onVideoDimensionsChanged] There was an error when handling src change.", e);
|
||||
}
|
||||
}
|
||||
context.video.classList.add(this.userCssClassName);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// adding player observer taught us that if element size gets triggered by a class, then
|
||||
// the 'style' attributes don't necessarily trigger. This means we also need to trigger
|
||||
// restoreAr here, in case video size was changed this way
|
||||
context.player.forceRefreshPlayerElement();
|
||||
context.restoreAr();
|
||||
|
||||
// sometimes something fucky wucky happens and mutations aren't detected correctly, so we
|
||||
// try to get around that
|
||||
setTimeout( () => {
|
||||
context.validateVideoOffsets();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
validateVideoOffsets() {
|
||||
// THIS BREAKS PANNING
|
||||
const cs = window.getComputedStyle(this.video);
|
||||
const pcs = window.getComputedStyle(this.player.element);
|
||||
|
||||
try {
|
||||
const transformMatrix = cs.transform.split(')')[0].split(',');
|
||||
const translateX = +transformMatrix[4];
|
||||
const translateY = +transformMatrix[5];
|
||||
const vh = +(cs.height.split('px')[0]);
|
||||
const vw = +(cs.width.split('px')[0]);
|
||||
const ph = +(pcs.height.split('px')[0]);
|
||||
const pw = +(pcs.width.split('px')[0]);
|
||||
|
||||
// TODO: check & account for panning and alignment
|
||||
if (this.isWithin(vh, (ph - (translateY / 2)), 2)
|
||||
&& this.isWithin(vw, (pw - (translateX / 2)), 2)) {
|
||||
} else {
|
||||
this.player.forceRefreshPlayerElement();
|
||||
this.restoreAr();
|
||||
}
|
||||
|
||||
} catch(e) {
|
||||
// do nothing on fail
|
||||
}
|
||||
}
|
||||
|
||||
isWithin(a, b, diff) {
|
||||
return a < b + diff && a > b - diff
|
||||
}
|
||||
|
||||
firstTimeArdInit(){
|
||||
if(this.destroyed) {
|
||||
if(this.destroyed || this.invalid) {
|
||||
// throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
|
||||
return;
|
||||
}
|
||||
@ -95,7 +130,7 @@ class VideoData {
|
||||
}
|
||||
|
||||
initArDetection() {
|
||||
if(this.destroyed) {
|
||||
if(this.destroyed || this.invalid) {
|
||||
// throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
|
||||
return;
|
||||
}
|
||||
@ -110,7 +145,7 @@ class VideoData {
|
||||
|
||||
startArDetection() {
|
||||
this.logger.log('info', 'debug', "[VideoData::startArDetection] starting AR detection")
|
||||
if(this.destroyed) {
|
||||
if(this.destroyed || this.invalid) {
|
||||
// throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
|
||||
return;
|
||||
}
|
||||
@ -121,7 +156,7 @@ class VideoData {
|
||||
}
|
||||
|
||||
rebootArDetection() {
|
||||
if(this.destroyed) {
|
||||
if(this.destroyed || this.invalid) {
|
||||
// throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
|
||||
return;
|
||||
}
|
||||
@ -179,7 +214,7 @@ class VideoData {
|
||||
}
|
||||
|
||||
resume(){
|
||||
if(this.destroyed) {
|
||||
if(this.destroyed || this.invalid) {
|
||||
// throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
|
||||
return;
|
||||
}
|
||||
@ -214,22 +249,37 @@ class VideoData {
|
||||
}
|
||||
|
||||
setLastAr(lastAr){
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
this.resizer.setLastAr(lastAr);
|
||||
}
|
||||
|
||||
setAr(ar, lastAr){
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
this.resizer.setAr(ar, lastAr);
|
||||
}
|
||||
|
||||
resetAr() {
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
this.resizer.reset();
|
||||
}
|
||||
|
||||
resetLastAr() {
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
this.resizer.setLastAr('original');
|
||||
}
|
||||
|
||||
panHandler(event, forcePan) {
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
if(this.destroyed) {
|
||||
// throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
|
||||
return;
|
||||
@ -242,34 +292,58 @@ class VideoData {
|
||||
}
|
||||
|
||||
setPanMode(mode) {
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
this.resizer.setPanMode(mode);
|
||||
}
|
||||
|
||||
setVideoAlignment(videoAlignment) {
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
this.resizer.setVideoAlignment(videoAlignment);
|
||||
}
|
||||
|
||||
restoreAr(){
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
this.resizer.restore();
|
||||
}
|
||||
|
||||
setStretchMode(stretchMode){
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
this.resizer.setStretchMode(stretchMode);
|
||||
}
|
||||
|
||||
setZoom(zoomLevel, no_announce){
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
this.resizer.setZoom(zoomLevel, no_announce);
|
||||
}
|
||||
|
||||
zoomStep(step){
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
this.resizer.zoomStep(step);
|
||||
}
|
||||
|
||||
announceZoom(scale){
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
this.pageInfo.announceZoom(scale);
|
||||
}
|
||||
|
||||
markPlayer(name, color) {
|
||||
if (this.invalid) {
|
||||
return;
|
||||
}
|
||||
if (this.player) {
|
||||
this.player.markPlayer(name, color)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user