diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js index df5824f..cf67834 100644 --- a/src/ext/lib/video-data/PlayerData.js +++ b/src/ext/lib/video-data/PlayerData.js @@ -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); } diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js index 2fbf15f..25eb991 100644 --- a/src/ext/lib/video-data/VideoData.js +++ b/src/ext/lib/video-data/VideoData.js @@ -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