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

Some things break youtube, so baseClass is split off into its own component differently

Browse Source
This commit is contained in:
Tamius Han 2020-11-06 00:03:11 +01:00
parent 691675bdc2
commit 0848b2fe67
2 changed files with 46 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,43 +72,6 @@ class PlayerData {
return new Promise( (resolve, reject) => setTimeout(() => resolve(), timeout));
}
setBaseClass() {
if (!this.dimensions) {
// TODO: determine how to handle this edge case. Fallback to 'base-wide-screen' might
// be better option than doing nothing
return;
}
// note that we should never allow both narrow-screen and wide-screen classes on the video
// element at _any_ time. That may break some sites even more.
// We should also only set/unset css classes when they change, otherwise mutation observer
// will trigger. Triggering mutation observer is problematic because this function may be
// called from said mutation observer, and that is bad.
const isNarrowScreen = this.video.videoWidth / this.video.videoHeight > this.dimensions.width / this.dimensions.height;
console.warn('setting base class. Is narrow screen?', isNarrowScreen, 'was narrow screen?', this.isNarrowScreen, "video:", this.video, ":", this.video.videoWidth, "x", this.video.videoHeight, "video file ar:", this.video.videoWidth / this.video.videoHeight, "player ar:", this.dimensions.width / this.dimensions.height)
if (this.isNarrowScreen != isNarrowScreen) {
if (!isNarrowScreen) {
this.video.classList.remove('uw-ultrawidify-base-narrow-screen');
this.video.classList.add('uw-ultrawidify-base-wide-screen');
} else {
this.video.classList.remove('uw-ultrawidify-base-wide-screen');
this.video.classList.add('uw-ultrawidify-base-narrow-screen');
}
}
this.isNarrowScreen = isNarrowScreen;
}
unsetBaseClass() {
this.video.classList.remove('uw-ultrawidify-base-narrow-screen');
this.video.classList.remove('uw-ultrawidify-base-wide-screen');
}
static isFullScreen(){
return ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
}

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

@ -6,6 +6,7 @@ import AspectRatio from '../../../common/enums/aspect-ratio.enum';
class VideoData {
constructor(video, settings, pageInfo){
this.vdid = (Math.random()*100).toFixed();
this.logger = pageInfo.logger;
@ -27,16 +28,7 @@ class VideoData {
height: this.video.offsetHeight,
};
// this is in case extension loads before the video
video.addEventListener('loadeddata', () => {
this.logger.log('info', 'init', '[VideoData::ctor->video.onloadeddata] Video fired event "loaded data!"');
this.onVideoLoaded();
});
// this one is in case extension loads after the video is loaded
video.addEventListener('timeupdate', () => {
this.onVideoLoaded();
});
this.setupStageOne();
}
async onVideoLoaded() {
@ -60,6 +52,41 @@ class VideoData {
}
}
async injectBaseCss() {
try {
await this.pageInfo.injectCss(`
.uw-ultrawidify-base-wide-screen {
margin: 0px 0px 0px 0px !important; width: initial !important; align-self: start !important; justify-self: start !important;
}
`);
} catch (e) {
console.error('Failed to inject base css!', e);
}
}
unsetBaseClass() {
this.video.classList.remove('uw-ultrawidify-base-wide-screen');
}
async setupStageOne() {
this.logger.log('info', 'init', '%c[VideoData::setupStageOne] ——————————— Starting setup stage one! ———————————', 'color: #0f9');
// ensure base css is loaded before doing anything
this.injectBaseCss();
// this is in case extension loads before the video
this.video.addEventListener('loadeddata', () => {
this.logger.log('info', 'init', '[VideoData::ctor->video.onloadeddata] Video fired event "loaded data!"');
this.onVideoLoaded();
});
// this one is in case extension loads after the video is loaded
this.video.addEventListener('timeupdate', () => {
this.onVideoLoaded();
});
this.logger.log('info', 'init', '%c[VideoData::setupStageOne] ——————————— Setup stage one complete! ———————————', 'color: #0f9');
}
async setupStageTwo() {
// POZOR: VRSTNI RED JE POMEMBEN (arDetect mora bit zadnji)
// NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last)
@ -98,8 +125,13 @@ class VideoData {
this.logger.log('info', ['debug', 'init'], '[VideoData::ctor] Created videoData with vdid', this.vdid, '\nextension mode:', this.extensionMode)
this.pageInfo.initMouseActionHandler(this);
// NOTE — since base class for our <video> element depends on player aspect ratio,
// we handle it in PlayerData class.
this.video.classList.add('uw-ultrawidify-base-wide-screen');
this.video.classList.add(this.userCssClassName); // this also needs to be applied BEFORE we initialize resizer!
// start fallback video/player size detection
this.fallbackChangeDetection();
@ -123,6 +155,7 @@ class VideoData {
}
}
restoreCrop() {
this.logger.log('info', 'debug', '[VideoData::restoreCrop] Attempting to reset aspect ratio.')
// if we have default crop set for this page, apply this.
@ -175,7 +208,8 @@ class VideoData {
// 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.
context.video.classList.add(this.userCssClassName);
context.video.classList.add(this.userCssClassName);
context.video.classList.add('uw-ultrawidify-base-wide-screen');
}
// always trigger refresh on class changes, since change of classname might trigger change
// of the player size as well.
@ -298,6 +332,7 @@ class VideoData {
if (this.video) {
this.video.classList.remove(this.userCssClassName);
this.video.classList.remove('uw-ultrawidify-base-wide-screen');
}
this.pause();