Migrate first batch to typescript
This commit is contained in:
parent
d9053e26b5
commit
ee3ccef0e4
@ -4,8 +4,11 @@ import AspectRatio from '../../../common/enums/aspect-ratio.enum';
|
||||
import PlayerNotificationUi from '../uwui/PlayerNotificationUI';
|
||||
import PlayerUi from '../uwui/PlayerUI';
|
||||
import BrowserDetect from '../../conf/BrowserDetect';
|
||||
import _ from 'lodash';
|
||||
import * as _ from 'lodash';
|
||||
import { sleep } from '../../../common/js/utils';
|
||||
import VideoData from './VideoData';
|
||||
import Settings from '../Settings';
|
||||
import Logger from '../Logger';
|
||||
|
||||
if (process.env.CHANNEL !== 'stable'){
|
||||
console.info("Loading: PlayerData.js");
|
||||
@ -40,6 +43,31 @@ if (process.env.CHANNEL !== 'stable'){
|
||||
|
||||
class PlayerData {
|
||||
|
||||
//#region helper objects
|
||||
logger: Logger;
|
||||
videoData: VideoData;
|
||||
settings: Settings;
|
||||
notificationService: PlayerNotificationUi;
|
||||
//#endregion
|
||||
|
||||
//#region HTML objects
|
||||
video: any;
|
||||
element: any;
|
||||
overlayNode: any;
|
||||
//#endregion
|
||||
|
||||
//#region flags
|
||||
invalid: boolean = false;
|
||||
private periodicallyRefreshPlayerElement: boolean = false;
|
||||
halted: boolean = true;
|
||||
|
||||
//#region misc stuff
|
||||
extensionMode: any;
|
||||
dimensions: any;
|
||||
private playerIdElement: any;
|
||||
private observer: MutationObserver;
|
||||
//#endregion
|
||||
|
||||
constructor(videoData) {
|
||||
try {
|
||||
this.logger = videoData.logger;
|
||||
@ -84,7 +112,7 @@ class PlayerData {
|
||||
}
|
||||
|
||||
|
||||
onPlayerDimensionsChanged(mutationList, observer) {
|
||||
onPlayerDimensionsChanged(mutationList?, observer?) {
|
||||
if (this?.checkPlayerSizeChange()) {
|
||||
this.videoData.resizer.restore();
|
||||
}
|
||||
@ -3,11 +3,43 @@ import PlayerData from './PlayerData';
|
||||
import Resizer from '../video-transform/Resizer';
|
||||
import ArDetector from '../ar-detect/ArDetector';
|
||||
import AspectRatio from '../../../common/enums/aspect-ratio.enum';
|
||||
import _ from 'lodash';
|
||||
import * as _ from 'lodash';
|
||||
import BrowserDetect from '../../conf/BrowserDetect';
|
||||
import Logger from '../Logger';
|
||||
import Settings from '../Settings';
|
||||
import PageInfo from './PageInfo';
|
||||
import { sleep } from '../../../common/js/utils';
|
||||
|
||||
class VideoData {
|
||||
|
||||
//#region flags
|
||||
arSetupComplete: boolean = false;
|
||||
destroyed: boolean = false;
|
||||
invalid: boolean = false;
|
||||
videoStatusOk: boolean = false;
|
||||
videoLoaded: boolean = false;
|
||||
videoDimensionsLoaded: boolean = false;
|
||||
paused: boolean = false;
|
||||
//#endregion
|
||||
|
||||
//#region misc stuff
|
||||
vdid: string;
|
||||
video: any;
|
||||
observer: MutationObserver;
|
||||
extensionMode: any;
|
||||
userCssClassName: string;
|
||||
validationId: number;
|
||||
dimensions: any;
|
||||
//#endregion
|
||||
|
||||
//#region helper objects
|
||||
logger: Logger;
|
||||
settings: Settings;
|
||||
pageInfo: PageInfo;
|
||||
player: PlayerData;
|
||||
resizer: Resizer;
|
||||
arDetector: ArDetector;
|
||||
//#endregion
|
||||
|
||||
|
||||
constructor(video, settings, pageInfo){
|
||||
this.vdid = (Math.random()*100).toFixed();
|
||||
@ -267,7 +299,8 @@ class VideoData {
|
||||
if (this.pageInfo.defaultCrop) {
|
||||
this.resizer.setAr(this.pageInfo.defaultCrop);
|
||||
} else {
|
||||
this.resizer.reset();
|
||||
console.log("RESETTING!")
|
||||
this.resizer.reset();
|
||||
|
||||
try {
|
||||
this.stopArDetection();
|
||||
@ -286,7 +319,7 @@ class VideoData {
|
||||
this.validationId = validationId;
|
||||
|
||||
while (!this.destroyed && !this.invalid && this.validationId === validationId) {
|
||||
await this.sleep(500);
|
||||
await sleep(500);
|
||||
this.doPeriodicFallbackChangeDetectionCheck();
|
||||
}
|
||||
}
|
||||
@ -295,11 +328,6 @@ class VideoData {
|
||||
this.validateVideoOffsets();
|
||||
}
|
||||
|
||||
async sleep(timeout) {
|
||||
return new Promise( (resolve) => setTimeout(() => resolve(), timeout));
|
||||
}
|
||||
|
||||
|
||||
onVideoDimensionsChanged(mutationList, observer) {
|
||||
if (!mutationList || this.video === undefined) { // something's wrong
|
||||
if (observer && this.video) {
|
||||
@ -391,7 +419,7 @@ class VideoData {
|
||||
* Gets the contents of the style attribute of the video element
|
||||
* in a form of an object.
|
||||
*/
|
||||
getVideoStyle() {
|
||||
getVideoStyle(): any {
|
||||
// This will _always_ give us an array. Empty string gives an array
|
||||
// that contains one element. That element is an empty string.
|
||||
const styleArray = (this.video.getAttribute('style') || '').split(';');
|
||||
@ -502,7 +530,7 @@ class VideoData {
|
||||
}
|
||||
this.paused = false;
|
||||
try {
|
||||
this.resizer.start();
|
||||
// this.resizer.start();
|
||||
if (this.player) {
|
||||
this.player.start();
|
||||
}
|
||||
@ -9,34 +9,59 @@ import VideoAlignment from '../../../common/enums/video-alignment.enum';
|
||||
import AspectRatio from '../../../common/enums/aspect-ratio.enum';
|
||||
import CropModePersistance from '../../../common/enums/crop-mode-persistence.enum';
|
||||
import { sleep } from '../Util';
|
||||
import Logger from '../Logger';
|
||||
import Settings from '../Settings';
|
||||
import VideoData from '../video-data/VideoData';
|
||||
|
||||
if(Debug.debug) {
|
||||
console.log("Loading: Resizer.js");
|
||||
}
|
||||
|
||||
class Resizer {
|
||||
|
||||
//#region flags
|
||||
canPan: boolean = false;
|
||||
destroyed: boolean = false;
|
||||
//#endregion
|
||||
|
||||
//#region helper objects
|
||||
logger: Logger;
|
||||
settings: Settings;
|
||||
scaler: Scaler;
|
||||
stretcher: Stretcher;
|
||||
zoom: Zoom;
|
||||
conf: VideoData;
|
||||
//#endregion
|
||||
|
||||
//#region HTML elements
|
||||
video: any;
|
||||
//#endregion
|
||||
|
||||
//#region data
|
||||
correctedVideoDimensions: any;
|
||||
currentCss: any;
|
||||
currentStyleString: string;
|
||||
currentPlayerStyleString: any;
|
||||
currentCssValidFor: any;
|
||||
currentVideoSettings: any;
|
||||
lastAr: {type: any, ratio?: number} = {type: AspectRatio.Initial};
|
||||
resizerId: any;
|
||||
videoAlignment: any;
|
||||
userCss: string;
|
||||
userCssClassName: any;
|
||||
pan: any = null;
|
||||
//#endregion
|
||||
|
||||
constructor(videoData) {
|
||||
this.resizerId = (Math.random(99)*100).toFixed(0);
|
||||
this.resizerId = (Math.random()*100).toFixed(0);
|
||||
this.conf = videoData;
|
||||
this.logger = videoData.logger;
|
||||
this.video = videoData.video;
|
||||
this.settings = videoData.settings;
|
||||
this.extensionMode = videoData.extensionMode;
|
||||
|
||||
|
||||
this.scaler = new Scaler(this.conf);
|
||||
this.stretcher = new Stretcher(this.conf);
|
||||
this.zoom = new Zoom(this.conf);
|
||||
|
||||
// load up default values
|
||||
this.correctedVideoDimensions = {};
|
||||
this.currentCss = {};
|
||||
this.currentStyleString = "";
|
||||
this.currentPlayerStyleString = "";
|
||||
this.currentCssValidFor = {};
|
||||
|
||||
this.lastAr = {type: AspectRatio.Initial};
|
||||
this.videoAlignment = this.settings.getDefaultVideoAlignment(window.location.hostname); // this is initial video alignment
|
||||
this.destroyed = false;
|
||||
|
||||
@ -47,7 +72,6 @@ class Resizer {
|
||||
this.canPan = false;
|
||||
}
|
||||
|
||||
this.userCss = '';
|
||||
this.userCssClassName = videoData.userCssClassName;
|
||||
}
|
||||
|
||||
@ -140,7 +164,7 @@ class Resizer {
|
||||
}
|
||||
}
|
||||
|
||||
async setAr(ar, lastAr) {
|
||||
async setAr(ar: {type: any, ratio?: number}, lastAr?: {type: any, ratio?: number}) {
|
||||
if (this.destroyed) {
|
||||
return;
|
||||
}
|
||||
@ -157,6 +181,7 @@ class Resizer {
|
||||
}
|
||||
|
||||
const siteSettings = this.settings.active.sites[window.location.hostname];
|
||||
let stretchFactors: {xFactor: number, yFactor: number, arCorrectionFactor?: number, ratio?: number} | any;
|
||||
|
||||
// reset zoom, but only on aspect ratio switch. We also know that aspect ratio gets converted to
|
||||
// AspectRatio.Fixed when zooming, so let's keep that in mind
|
||||
@ -224,7 +249,7 @@ class Resizer {
|
||||
|| this.stretcher.mode === Stretch.Conditional
|
||||
|| this.stretcher.mode === Stretch.FixedSource){
|
||||
|
||||
var stretchFactors = this.scaler.calculateCrop(ar);
|
||||
stretchFactors = this.scaler.calculateCrop(ar);
|
||||
|
||||
if(! stretchFactors || stretchFactors.error){
|
||||
this.logger.log('error', 'debug', `[Resizer::setAr] <rid:${this.resizerId}> failed to set AR due to problem with calculating crop. Error:`, stretchFactors?.error);
|
||||
@ -255,15 +280,15 @@ class Resizer {
|
||||
);
|
||||
|
||||
} else if (this.stretcher.mode === Stretch.Hybrid) {
|
||||
var stretchFactors = this.stretcher.calculateStretch(ar.ratio);
|
||||
stretchFactors = this.stretcher.calculateStretch(ar.ratio);
|
||||
this.logger.log('info', 'debug', '[Resizer::setAr] Processed stretch factors for hybrid stretch/crop. Stretch factors are:', stretchFactors);
|
||||
} else if (this.stretcher.mode === Stretch.Fixed) {
|
||||
var stretchFactors = this.stretchFactors.calculateStretchFixed(ar.ratio)
|
||||
stretchFactors = this.stretcher.calculateStretchFixed(ar.ratio)
|
||||
} else if (this.stretcher.mode === Stretch.Basic) {
|
||||
var stretchFactors = this.stretcher.calculateBasicStretch();
|
||||
stretchFactors = this.stretcher.calculateBasicStretch();
|
||||
this.logger.log('info', 'debug', '[Resizer::setAr] Processed stretch factors for basic stretch. Stretch factors are:', stretchFactors);
|
||||
} else {
|
||||
var stretchFactors = {xFactor: 1, yFactor: 1};
|
||||
stretchFactors = {xFactor: 1, yFactor: 1};
|
||||
this.logger.log('error', 'debug', '[Resizer::setAr] Okay wtf happened? If you see this, something has gone wrong', stretchFactors,"\n------[ i n f o d u m p ]------\nstretcher:", this.stretcher);
|
||||
}
|
||||
|
||||
@ -272,6 +297,10 @@ class Resizer {
|
||||
this.stretcher.chromeBugMitigation(stretchFactors);
|
||||
|
||||
var translate = this.computeOffsets(stretchFactors);
|
||||
|
||||
|
||||
console.log("aspect ratio will be set. stretch factors:", stretchFactors, "translate:", translate);
|
||||
|
||||
this.applyCss(stretchFactors, translate);
|
||||
}
|
||||
|
||||
@ -279,7 +308,7 @@ class Resizer {
|
||||
toFixedAr() {
|
||||
// converting to fixed AR means we also turn off autoAR
|
||||
this.setAr({
|
||||
ar: this.lastAr.ar,
|
||||
ratio: this.lastAr.ratio,
|
||||
type: AspectRatio.Fixed
|
||||
});
|
||||
}
|
||||
@ -296,7 +325,7 @@ class Resizer {
|
||||
return this.lastAr;
|
||||
}
|
||||
|
||||
setStretchMode(stretchMode, fixedStretchRatio){
|
||||
setStretchMode(stretchMode, fixedStretchRatio?){
|
||||
this.stretcher.setStretchMode(stretchMode, fixedStretchRatio);
|
||||
this.restore();
|
||||
}
|
||||
@ -326,7 +355,7 @@ class Resizer {
|
||||
}
|
||||
|
||||
resetPan() {
|
||||
this.pan = {};
|
||||
this.pan = {x: 0, y: 0};
|
||||
this.videoAlignment = this.settings.getDefaultVideoAlignment(window.location.hostname);
|
||||
}
|
||||
|
||||
@ -334,7 +363,7 @@ class Resizer {
|
||||
// relativeMousePos[X|Y] - on scale from 0 to 1, how close is the mouse to player edges.
|
||||
// use these values: top, left: 0, bottom, right: 1
|
||||
if(! this.pan){
|
||||
this.pan = {};
|
||||
this.pan = {x: 0, y: 0};
|
||||
}
|
||||
|
||||
if (this.settings.active.miscSettings.mousePanReverseMouse) {
|
||||
@ -386,10 +415,6 @@ class Resizer {
|
||||
}
|
||||
}
|
||||
|
||||
resetPan(){
|
||||
this.pan = undefined;
|
||||
}
|
||||
|
||||
setZoom(zoomLevel, no_announce) {
|
||||
this.zoom.setZoom(zoomLevel, no_announce);
|
||||
}
|
||||
@ -489,7 +514,7 @@ class Resizer {
|
||||
const hdiff = this.conf.player.dimensions.height - realVideoHeight;
|
||||
|
||||
if (wdiff < 0 && hdiff < 0 && this.zoom.scale > 1) {
|
||||
this.conf.player.restore();
|
||||
this.conf.resizer.restore();
|
||||
}
|
||||
|
||||
const wdiffAfterZoom = realVideoWidth * stretchFactors.xFactor - this.conf.player.dimensions.width;
|
||||
@ -503,7 +528,7 @@ class Resizer {
|
||||
|
||||
|
||||
|
||||
if (this.pan) {
|
||||
if (this.pan.relativeOffsetX || this.pan.relativeOffsetY) {
|
||||
// don't offset when video is smaller than player
|
||||
if(wdiffAfterZoom >= 0 || hdiffAfterZoom >= 0) {
|
||||
translate.x += wdiffAfterZoom * this.pan.relativeOffsetX * this.zoom.scale;
|
||||
@ -518,7 +543,7 @@ class Resizer {
|
||||
}
|
||||
}
|
||||
|
||||
this.logger.log('info', ['debug', 'resizer'], "[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:\n\n",
|
||||
console.log('info', ['debug', 'resizer'], "[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:\n\n",
|
||||
'---- data in ----',
|
||||
'\nplayer dimensions: ', {w: this.conf.player.dimensions.width, h: this.conf.player.dimensions.height},
|
||||
'\nvideo dimensions: ', {w: this.conf.video.offsetWidth, h: this.conf.video.offsetHeight},
|
||||
@ -1,6 +1,9 @@
|
||||
import Stretch from '../../../common/enums/stretch.enum';
|
||||
import BrowserDetect from '../../conf/BrowserDetect';
|
||||
import AspectRatio from '../../../common/enums/aspect-ratio.enum';
|
||||
import VideoData from '../video-data/VideoData';
|
||||
import Logger from '../Logger';
|
||||
import Settings from '../Settings';
|
||||
|
||||
// računa vrednosti za transform-scale (x, y)
|
||||
// transform: scale(x,y) se uporablja za raztegovanje videa, ne pa za približevanje
|
||||
@ -8,8 +11,20 @@ import AspectRatio from '../../../common/enums/aspect-ratio.enum';
|
||||
// transform: scale(x,y) is used for stretching, not zooming.
|
||||
|
||||
class Stretcher {
|
||||
// internal variables
|
||||
//#region flags
|
||||
|
||||
//#endregion
|
||||
|
||||
//#region helper objects
|
||||
conf: VideoData;
|
||||
logger: Logger;
|
||||
settings: Settings;
|
||||
//#endregion
|
||||
|
||||
//#region misc data
|
||||
mode: any;
|
||||
fixedStretchRatio: any;
|
||||
//#endregion
|
||||
|
||||
// functions
|
||||
constructor(videoData) {
|
||||
@ -20,7 +35,7 @@ class Stretcher {
|
||||
this.fixedStretchRatio = undefined;
|
||||
}
|
||||
|
||||
setStretchMode(stretchMode, fixedStretchRatio) {
|
||||
setStretchMode(stretchMode, fixedStretchRatio?) {
|
||||
if (stretchMode === Stretch.Default) {
|
||||
this.mode = this.settings.getDefaultStretchMode(window.location.hostname);
|
||||
} else {
|
||||
@ -145,7 +160,7 @@ squeezeFactor: ${squeezeFactor}`, '\nvideo', this.conf.video);
|
||||
return arCorrectionFactor;
|
||||
}
|
||||
|
||||
calculateStretch(actualAr, playerArOverride) {
|
||||
calculateStretch(actualAr, playerArOverride?) {
|
||||
const playerAr = playerArOverride || this.conf.player.dimensions.width / this.conf.player.dimensions.height;
|
||||
const streamAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
|
||||
|
||||
@ -153,7 +168,7 @@ squeezeFactor: ${squeezeFactor}`, '\nvideo', this.conf.video);
|
||||
actualAr = playerAr;
|
||||
}
|
||||
|
||||
var stretchFactors = {
|
||||
var stretchFactors: any = {
|
||||
xFactor: 1,
|
||||
yFactor: 1
|
||||
};
|
||||
@ -1,19 +1,32 @@
|
||||
import Debug from '../../conf/Debug';
|
||||
import Logger from '../Logger';
|
||||
import VideoData from '../video-data/VideoData';
|
||||
|
||||
// računa približevanje ter računa/popravlja odmike videa
|
||||
// calculates zooming and video offsets/panning
|
||||
|
||||
class Zoom {
|
||||
// functions
|
||||
//#region flags
|
||||
|
||||
//#endregion
|
||||
|
||||
//#region helper objects
|
||||
conf: VideoData;
|
||||
logger: Logger;
|
||||
//#endregion
|
||||
|
||||
//#region misc data
|
||||
scale: number = 1;
|
||||
logScale: number = 0;
|
||||
scaleStep: number = 0.1;
|
||||
minScale: number = -1; // 50% (log2(0.5) = -1)
|
||||
maxScale: number = 3; // 800% (log2(8) = 3)
|
||||
//#endregion
|
||||
|
||||
|
||||
constructor(videoData) {
|
||||
this.conf = videoData;
|
||||
this.logger = videoData.logger;
|
||||
|
||||
this.scale = 1;
|
||||
this.logScale = 0;
|
||||
this.scaleStep = 0.1;
|
||||
this.minScale = -1; // 50% (log2(0.5) = -1)
|
||||
this.maxScale = 3; // 800% (log2(8) = 3)
|
||||
}
|
||||
|
||||
reset(){
|
||||
@ -41,7 +54,7 @@ class Zoom {
|
||||
this.conf.announceZoom(this.scale);
|
||||
}
|
||||
|
||||
setZoom(scale, no_announce){
|
||||
setZoom(scale: number, no_announce?){
|
||||
this.logger.log('info', 'debug', "[Zoom::setZoom] Setting zoom to", scale, "!");
|
||||
|
||||
// NOTE: SCALE IS NOT LOGARITHMIC
|
||||
Loading…
Reference in New Issue
Block a user