diff --git a/src/common/interfaces/SettingsInterface.ts b/src/common/interfaces/SettingsInterface.ts index 88161f4..34f5c19 100644 --- a/src/common/interfaces/SettingsInterface.ts +++ b/src/common/interfaces/SettingsInterface.ts @@ -54,12 +54,20 @@ export type SettingsReloadFlags = true | SettingsReloadComponent; export interface AardSettings { aardType: 'webgl' | 'legacy' | 'auto'; + earlyStopOptions: { + stopAfterFirstDetection: boolean; + stopAfterTimeout: boolean; + stopTimeout: number; + }, + + disabledReason: string, // if automatic aspect ratio has been disabled, show reason allowedMisaligned: number, // top and bottom letterbox thickness can differ by this much. // Any more and we don't adjust ar. allowedArVariance: number, // amount by which old ar can differ from the new (1 = 100%) timers: { // autodetection frequency playing: number, // while playing + playingReduced: number, // while video/player element has insufficient size paused: number, // while paused error: number, // after error minimumTimeout: number, @@ -86,51 +94,6 @@ export interface AardSettings { }, }, - // NOTE: Black Frame is currently not in use. - blackframe: { - sufficientColorVariance: number, // calculate difference between average intensity and pixel, for every pixel for every color - // component. Average intensity is normalized to where 0 is black and 1 is biggest value for - // that component. If sum of differences between normalized average intensity and normalized - // component varies more than this % between color components, we can afford to use less strict - // cumulative threshold. - cumulativeThresholdLax: number, - cumulativeThresholdStrict: number,// if we add values of all pixels together and get more than this, the frame is bright enough. - // (note: blackframe is 16x9 px -> 144px total. cumulative threshold can be reached fast) - blackPixelsCondition: number, // How much pixels must be black (1 all, 0 none) before we consider frame as black. Takes - // precedence over cumulative threshold: if blackPixelsCondition is met, the frame is dark - // regardless of whether cumulative threshold has been reached. - }, - - // Used by old aspect ratio detection algorithm. Pls remove. - blackbar: { - blackLevel: number, // everything darker than 10/255 across all RGB components is considered black by - // default. blackLevel can decrease if we detect darker black. - threshold: number, // if pixel is darker than the sum of black level and this value, we count it as black - // on 0-255. Needs to be fairly high (8 might not cut it) due to compression - // artifacts in the video itself - frameThreshold: number, // threshold, but when doing blackframe test - imageThreshold: number, // in order to detect pixel as "not black", the pixel must be brighter than - // the sum of black level, threshold and this value. - gradientThreshold: number, // When trying to determine thickness of the black bars, we take 2 values: position of - // the last pixel that's darker than our threshold, and position of the first pixel that's - // brighter than our image threshold. If positions are more than this many pixels apart, - // we assume we aren't looking at letterbox and thus don't correct the aspect ratio. - gradientSampleSize: number, // How far do we look to find the gradient - maxGradient: number, // if two neighboring pixels in gradientSampleSize differ by more than this, then we aren't - // looking at a gradient - gradientNegativeTreshold: number, - gradientMaxSD: number, // reserved for future use - antiGradientMode: AntiGradientMode - }, - // Also not in use, probs. - variableBlackbarThresholdOptions: { // In case of poor bitrate videos, jpeg artifacts may cause us issues - // FOR FUTURE USE - enabled: boolean, // allow increasing blackbar threshold - disableArDetectOnMax: boolean, // disable autodetection when threshold goes over max blackbar threshold - maxBlackbarThreshold: number, // max threshold (don't increase past this) - thresholdStep: number, // when failing to set aspect ratio, increase threshold by this much - increaseAfterConsecutiveResets: number // increase if AR resets this many times in a row - }, blackLevels: { defaultBlack: number, // By default, pixels darker than this are considered black. // (If detection algorithm detects darker blacks, black is considered darkest detected pixel) @@ -144,20 +107,6 @@ export interface AardSettings { randomCols: number, // we add this many randomly selected columns to the static columns staticRows: number, // forms grid with staticSampleCols. Determined in the same way. For black frame checks, }, - guardLine: { // all pixels on the guardline need to be black, or else we trigger AR recalculation - // (if AR fails to be recalculated, we reset AR) - enabled: boolean, - ignoreEdgeMargin: number, // we ignore anything that pokes over the black line this close to the edge - // (relative to width of the sample) - imageTestThreshold: number, // when testing for image, this much pixels must be over blackbarThreshold - edgeTolerancePx: number, // black edge violation is performed this far from reported 'last black pixel' - edgeTolerancePercent: null // unused. same as above, except use % of canvas height instead of pixels - }, - arSwitchLimiter: { // to be implemented - switches: number, // we can switch this many times - period: number // per this period - }, - // pls deprecate and move things used edgeDetection: { diff --git a/src/csui/PlayerOverlay.vue b/src/csui/PlayerOverlay.vue index 22991b1..b747818 100644 --- a/src/csui/PlayerOverlay.vue +++ b/src/csui/PlayerOverlay.vue @@ -321,95 +321,107 @@ export default { this.handleMessage(event); }); - this.eventBus.subscribe('uw-config-broadcast', {function: (data) => { - switch (data.type) { - case 'drm-status': - this.statusFlags.hasDrm = data.hasDrm; - break; - case 'aard-error': - this.statusFlags.aardErrors = data.aardErrors; - break; - case 'player-dimensions': - this.playerDimensionsUpdate(data.data); - break; - } - }}); - - this.eventBus.subscribe('uw-set-ui-state', { function: (data) => { - if (data.globalUiVisible !== undefined) { - if (this.isGlobal) { - if (data.globalUiVisible) { - this.showUwWindow(); - } else { - this.hideUwWindow(true); - } - // this.showPlayerUIAfterClose = data.showPlayerUIAfterClose; - } else { - // non global UIs are hidden while global overlay - // is visible and vice versa - // this.disabled = data.globalUiVisible; - this.saveState = { - uwWindowVisible: this.uwWindowVisible, - uwWindowFadeOutDisabled: this.uwWindowFadeOutDisabled, - uwWindowFadeOut: this.uwWindowFadeOut - }; - this.uwWindowFadeOutDisabled = false; - this.hideUwWindow(true); - } - } - }}); - - this.eventBus.subscribe( - 'uw-restore-ui-state', + this.eventBus.subscribeMulti( { - function: (data) => { - if (this.saveState) { - if (this.saveState.uwWindowVisible) { - this.showUwWindow(); + 'uw-config-broadcast': { + function: + (data) => { + switch (data.type) { + case 'drm-status': + this.statusFlags.hasDrm = data.hasDrm; + break; + case 'aard-error': + this.statusFlags.aardErrors = data.aardErrors; + break; + case 'player-dimensions': + this.playerDimensionsUpdate(data.data); + break; + } + } + }, + 'uw-set-ui-state': { + function: (data) => { + if (data.globalUiVisible !== undefined) { + if (this.isGlobal) { + if (data.globalUiVisible) { + this.showUwWindow(); + } else { + this.hideUwWindow(true); + } + // this.showPlayerUIAfterClose = data.showPlayerUIAfterClose; + } else { + // non global UIs are hidden while global overlay + // is visible and vice versa + // this.disabled = data.globalUiVisible; + this.saveState = { + uwWindowVisible: this.uwWindowVisible, + uwWindowFadeOutDisabled: this.uwWindowFadeOutDisabled, + uwWindowFadeOut: this.uwWindowFadeOut + }; + this.uwWindowFadeOutDisabled = false; + this.hideUwWindow(true); + } } - this.uwWindowFadeOutDisabled = this.saveState.uwWindowFadeOutDisabled; - this.uwWindowFadeOut = this.saveState.uwWindowFadeOut; } - this.saveState = {}; - } - } - ); - - this.eventBus.subscribe('ui-trigger-zone-update', { - function: (data) => { - this.showTriggerZonePreview = data.previewZoneVisible; - // this.; - } - }); - - this.eventBus.subscribe( - 'start-trigger-zone-edit', - { - function: () => { - this.triggerZoneEditorVisible = true; - this.uwWindowVisible = false; - } - } - ); - - this.eventBus.subscribe( - 'finish-trigger-zone-edit', - { - function: () => { - this.triggerZoneEditorVisible = false; - this.showUwWindow('playerUiSettings'); - } - } + }, + 'uw-restore-ui-state': { + function: (data) => { + if (this.saveState) { + if (this.saveState.uwWindowVisible) { + this.showUwWindow(); + } + this.uwWindowFadeOutDisabled = this.saveState.uwWindowFadeOutDisabled; + this.uwWindowFadeOut = this.saveState.uwWindowFadeOut; + } + this.saveState = {}; + } + }, + 'uw-restore-ui-state': { + function: (data) => { + if (this.saveState) { + if (this.saveState.uwWindowVisible) { + this.showUwWindow(); + } + this.uwWindowFadeOutDisabled = this.saveState.uwWindowFadeOutDisabled; + this.uwWindowFadeOut = this.saveState.uwWindowFadeOut; + } + this.saveState = {}; + } + }, + 'ui-trigger-zone-update': { + function: (data) => { + this.showTriggerZonePreview = data.previewZoneVisible; + // this.; + } + }, + 'start-trigger-zone-edit': { + function: () => { + this.triggerZoneEditorVisible = true; + this.uwWindowVisible = false; + } + }, + 'finish-trigger-zone-edit': { + function: () => { + this.triggerZoneEditorVisible = false; + this.showUwWindow('playerUiSettings'); + } + }, + }, + this ); this.sendToParentLowLevel('uwui-get-role', null); this.sendToParentLowLevel('uwui-get-theme', null); + console.log('player overlay created — get player dims:') this.sendToParentLowLevel('uw-bus-tunnel', { action: 'get-player-dimensions' }); }, + destroyed() { + this.eventBus.unsubscribeAll(this) + }, methods: { /** * Gets URL of the browser settings page (i think?) diff --git a/src/csui/Popup.vue b/src/csui/Popup.vue index 06917ac..c0b38c7 100644 --- a/src/csui/Popup.vue +++ b/src/csui/Popup.vue @@ -148,6 +148,7 @@ export default { this.eventBus.subscribe( 'set-current-site', { + source: this, function: (config, context) => { if (this.site) { if (!this.site.host) { @@ -169,7 +170,7 @@ export default { this.loadFrames(this.site); } - } + }, ); this.comms = new CommsClient('popup-port', this.logger, this.eventBus); diff --git a/src/csui/src/PlayerUIWindow.vue b/src/csui/src/PlayerUIWindow.vue index 9d194d4..d16efb5 100644 --- a/src/csui/src/PlayerUIWindow.vue +++ b/src/csui/src/PlayerUIWindow.vue @@ -204,13 +204,19 @@ export default { this.eventBus.subscribe( 'uw-show-ui', - () => { - if (this.inPlayer) { - return; // show-ui is only intended for global overlay - } + { + source: this, + function: () => { + if (this.inPlayer) { + return; // show-ui is only intended for global overlay + } + }, } ) }, + destroyed() { + this.eventBus.unsubscribeAll(this); + }, methods: { /** * Gets URL of the browser settings page (i think?) diff --git a/src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue b/src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue index d5c3b30..62db4f5 100644 --- a/src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue +++ b/src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue @@ -3,222 +3,252 @@
-
+
-

Automatic Aspect Ratio Detection

+

Automatic Aspect Ratio Detection

-
-

- Autodetection performance -

-

- Automatic aspect ratio detection is a resource-hungry feature. - This page allows you to trade autodetection accuracy and/or frequency for - better performance. -

-

- Note that some browsers limit the accuracy of time measurements, though once the bars go past the blue line those limitations are largely inconsequential. -

-
-
-
-
-
-
-
-
+
-
-
-
- Average: - draw (main) {{(performanceData?.imageDraw?.averageTime ?? 0).toFixed(1)}} ms | - blackframe {{(performanceData?.blackFrame?.averageTime ?? 0).toFixed(1)}} ms | - - processing {{ - Math.max( - (performanceData?.total?.averageTime ?? 0) - - (performanceData?.imageDraw?.averageTime ?? 0) - - (performanceData?.blackFrame?.averageTime ?? 0), - 0 - ).toFixed(1) - }} ms - -
-
-
-
-
-
-
-
-
-
-
-
- Worst: - draw (main) {{(performanceData?.imageDraw?.worstTime ?? 0).toFixed(1)}} ms | - blackframe {{(performanceData?.blackFrame?.worstTime ?? 0).toFixed(1)}} ms | - - processing {{ - Math.max( - (performanceData?.total?.worstTime ?? 0) - - (performanceData?.imageDraw?.worstTime ?? 0) - - (performanceData?.blackFrame?.worstTime ?? 0), - 0 - ).toFixed(1) - }} ms - -
-
-
-
-
-
-
-
-
-
+ +
+

+ Autodetection performance +

+

+ Automatic aspect ratio detection is a resource-hungry feature. + This page allows you to trade autodetection accuracy and/or frequency for + better performance. +

+

+ Note that some browsers limit the accuracy of time measurements, though once the bars go past the blue line those limitations are largely inconsequential. +

+
+
+
+
+
+
+
+
-
-
- AR change (average): - draw (main) {{(performanceData?.imageDraw?.averageTime ?? 0).toFixed(1)}} ms | - blackframe {{(performanceData?.blackFrame?.averageTime ?? 0).toFixed(1)}} ms | - processing {{ - ( - (performanceData?.fastLetterbox?.averageTime ?? 0) - + (performanceData?.edgeDetect?.averageTime ?? 0) - ).toFixed(1) - }} ms +
+
+
+ Average: + draw (main) {{(performanceData?.imageDraw?.averageTime ?? 0).toFixed(1)}} ms | + blackframe {{(performanceData?.blackFrame?.averageTime ?? 0).toFixed(1)}} ms | + + processing {{ + Math.max( + (performanceData?.total?.averageTime ?? 0) + - (performanceData?.imageDraw?.averageTime ?? 0) + - (performanceData?.blackFrame?.averageTime ?? 0), + 0 + ).toFixed(1) + }} ms + +
+
+
+
+
+
+
+
+
-
-
+
+
+ Worst: + draw (main) {{(performanceData?.imageDraw?.worstTime ?? 0).toFixed(1)}} ms | + blackframe {{(performanceData?.blackFrame?.worstTime ?? 0).toFixed(1)}} ms | + + processing {{ + Math.max( + (performanceData?.total?.worstTime ?? 0) + - (performanceData?.imageDraw?.worstTime ?? 0) + - (performanceData?.blackFrame?.worstTime ?? 0), + 0 + ).toFixed(1) + }} ms +
-
+
+
+
+
+
+
+
-
+
+ AR change (average): + draw (main) {{(performanceData?.imageDraw?.averageTime ?? 0).toFixed(1)}} ms | + blackframe {{(performanceData?.blackFrame?.averageTime ?? 0).toFixed(1)}} ms | + processing {{ + ( (performanceData?.fastLetterbox?.averageTime ?? 0) + (performanceData?.edgeDetect?.averageTime ?? 0) - ) + '%' - }" - > + ).toFixed(1) + }} ms +
+
+
+
+
+
+
+
-
-
-
- AR change (worst): - draw (main) {{(performanceData?.imageDraw?.worstTime ?? 0).toFixed(1)}} ms | - blackframe {{(performanceData?.blackFrame?.worstTime ?? 0).toFixed(1)}} ms | - processing {{ - ( - (performanceData?.fastLetterbox?.worstTime ?? 0) - + (performanceData?.edgeDetect?.worstTime ?? 0) - ).toFixed(1) - }} ms -
-
-
-
-
-
-
+
+ AR change (worst): + draw (main) {{(performanceData?.imageDraw?.worstTime ?? 0).toFixed(1)}} ms | + blackframe {{(performanceData?.blackFrame?.worstTime ?? 0).toFixed(1)}} ms | + processing {{ + ( (performanceData?.fastLetterbox?.worstTime ?? 0) + (performanceData?.edgeDetect?.worstTime ?? 0) - ) + '%' - }" - > + ).toFixed(1) + }} ms +
+
+
+
+
+
+
+
-
+
-
-

Basic settings

-
-
- Autodetection frequency + +
+ + + + +
+
Autodetection frequency (time between samples)
+
+ + +
ms
-
-
- Autodetection sensitivity -
-
+
+
Frame extraction canvas type:
+
+
@@ -227,30 +257,13 @@
-
+
Ultrawidify detects letterbox only if video is vertically centered. Some people are bad at vertically centering the content, though. This is how off-center the video can be before autodetection will - refuse to crop it. + refuse to crop it (% of total height).
- -
-
Video sample size
-
- x -
-
- -
-
Sample columns:
-
-
-
-
Sample rows:
-
-
-
@@ -285,7 +298,16 @@ export default { 'site' ], created() { - this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleConfigBroadcast(config)}); + this.eventBus.subscribe( + 'uw-config-broadcast', + { + source: this, + function: (config) => this.handleConfigBroadcast(config) + } + ); + }, + destroyed() { + this.eventBus.unsubscribeAll(this); }, mounted() { this.eventBus.sendToTunnel('get-aard-timing'); @@ -306,6 +328,9 @@ export default { async openOptionsPage() { BrowserDetect.runtime.openOptionsPage(); }, + setArCheckFrequency(event) { + this.settings.active.arDetect.timers.playing = Math.floor(Math.pow(Math.E, event)); + }, refreshGraph() { this.eventBus.sendToTunnel('get-aard-timing'); }, @@ -326,6 +351,10 @@ export default {