Fix problem with video sometimes being offset to the side

This commit is contained in:
Tamius Han 2020-02-11 19:54:41 +01:00
parent f028af8b98
commit c88247df25
2 changed files with 25 additions and 26 deletions

View File

@ -136,9 +136,7 @@ class PlayerData {
doPeriodicPlayerElementChangeCheck() {
if (this.periodicallyRefreshPlayerElement) {
if (this.forceDetectPlayerElementChange()) {
this.videoData.resizer.restore();
}
this.forceDetectPlayerElementChange();
}
}
@ -208,11 +206,22 @@ class PlayerData {
updatePlayerDimensions(element) {
const isFullScreen = PlayerData.isFullScreen();
this.dimensions = {
width: element.offsetWidth,
height: element.offsetHeight,
fullscreen: isFullScreen
};
if (element.offsetWidth !== this.dimensions?.width
|| element.offsetHeight !== this.dimensions?.height
|| isFullScreen !== this.dimensions?.fullscreen) {
// update dimensions only if they've changed, _before_ we do a restore (not after)
this.dimensions = {
width: element.offsetWidth,
height: element.offsetHeight,
fullscreen: isFullScreen
};
// actually re-calculate zoom when player size changes, but only if videoData.resizer
// is defined. Since resizer needs a PlayerData object to exist, videoData.resizer will
// be undefined the first time this function will run.
this.videoData.resizer?.restore();
}
}
getPlayer() {
@ -373,17 +382,11 @@ class PlayerData {
}
forceDetectPlayerElementChange() {
// save current dimensions before refreshing the player object
const oldDimensions = this.dimensions;
// Player dimension changes get calculated every time updatePlayerDimensions is called (which happens
// every time getPlayer() detects an element). If updatePlayerDimension detects dimensions were changed,
// it will always re-apply current crop, rendering this function little more than a fancy alias for
// getPlayer().
this.getPlayer();
// compare new player object dimensions with the old dimensions
// don't fucking trigger changes if nothing changed
if (this.dimensions.width === this.dimensions.width && this.dimensions.height === this.dimensions.height) {
return false;
} else {
return true;
}
}
forceRefreshPlayerElement() {

View File

@ -28,13 +28,15 @@ class VideoData {
// POZOR: VRSTNI RED JE POMEMBEN (arDetect mora bit zadnji)
// NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last)
// NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last)
this.player = new PlayerData(this);
if (this.player.invalid) {
this.invalid = true;
return;
}
this.resizer = new Resizer(this);
const ths = this;
this.observer = new MutationObserver( (m, o) => this.onVideoDimensionsChanged(m, o, ths));
this.observer.observe(video, observerConf);
@ -44,7 +46,6 @@ class VideoData {
height: this.video.offsetHeight,
};
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:
@ -158,12 +159,7 @@ class VideoData {
&& this.isWithin(vh, (ph - (translateY * 2)), 2)
&& this.isWithin(vw, (pw - (translateX * 2)), 2)) {
} else {
if (this.player.forceDetectPlayerElementChange()) {
this.logger.log('info', 'debug', "Video dimensions changed. Triggering restoreAr()");
this.restoreAr();
} else {
this.logger.log('info', 'playerRescan', "Video dimensions didn't change.");
}
this.player.forceDetectPlayerElementChange();
}
} catch(e) {