diff --git a/src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue b/src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue index 18ad35c..8286d33 100644 --- a/src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue +++ b/src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue @@ -269,8 +269,27 @@

Debug options

-
- +
+
+
+ +
+
+
Show debug overlay on startup
+ +
+
+
+ + + +
@@ -289,14 +308,15 @@ import AspectRatioType from '../../../common/enums/AspectRatioType.enum'; import StretchType from '../../../common/enums/StretchType.enum'; import CropModePersistence from '../../../common/enums/CropModePersistence.enum'; import AlignmentOptionsControlComponent from './AlignmentOptionsControlComponent.vue'; +import JsonEditor from '@csui/src/components/JsonEditor'; export default { - data() { - return { - exec: null, - performanceData: {}, - graphRefreshInterval: undefined, - } + components: { + ShortcutButton, + EditShortcutButton, + Button, + AlignmentOptionsControlComponent, + JsonEditor }, mixins: [ ], @@ -306,6 +326,16 @@ export default { 'eventBus', 'site' ], + data() { + return { + exec: null, + performanceData: {}, + graphRefreshInterval: undefined, + settingsJson: {}, + } + }, + computed: { + }, created() { this.eventBus.subscribe( 'uw-config-broadcast', @@ -315,24 +345,15 @@ export default { } ); }, - destroyed() { - this.eventBus.unsubscribeAll(this); - }, mounted() { this.eventBus.sendToTunnel('get-aard-timing'); this.graphRefreshInterval = setInterval(() => this.eventBus.sendToTunnel('get-aard-timing'), 500); + this.resetSettingsEditor(); }, destroyed() { + this.eventBus.unsubscribeAll(this); clearInterval(this.graphRefreshInterval); }, - components: { - ShortcutButton, - EditShortcutButton, - Button, - AlignmentOptionsControlComponent - }, - computed: { - }, methods: { async openOptionsPage() { BrowserDetect.runtime.openOptionsPage(); @@ -349,7 +370,15 @@ export default { this.$nextTick( () => this.$forceUpdate() ); } }, - } + resetSettingsEditor() { + this.settingsJson = JSON.parse(JSON.stringify(this.settings?.active.ui.dev.aardDebugOverlay ?? {})); + }, + saveDebugUiSettings() { + this.settings.active.ui.dev.aardDebugOverlay = JSON.parse(JSON.stringify(this.settingsJson)); + this.settings.saveWithoutReload(); + } + }, + } diff --git a/src/ext/lib/aard/Aard.ts b/src/ext/lib/aard/Aard.ts index 41faf57..6f2e82d 100644 --- a/src/ext/lib/aard/Aard.ts +++ b/src/ext/lib/aard/Aard.ts @@ -219,7 +219,6 @@ import { AardTimers, initAardTimers } from './interfaces/aard-timers.interface'; * */ export class Aard { - //#region configuration parameters private logger: Logger; private videoData: VideoData; @@ -269,6 +268,7 @@ export class Aard { private debugConfig: any = {}; private timer: AardTimer; + private lastAnimationFrameTime: number = Infinity; //#endregion //#region getters @@ -304,8 +304,7 @@ export class Aard { // we can tick manually, for debugging this.logger.log('info', 'init', `[ArDetector::ctor] creating new ArDetector. arid: ${this.arid}`); - this.timer = new AardTimer() - + this.timer = new AardTimer(); this.init(); } @@ -337,6 +336,14 @@ export class Aard { // console.error('FALIED TO CREATE DEBUGG CANVAS', e); // } + try { + if (this.settings.active.ui.dev?.aardDebugOverlay?.showOnStartup) { + this.showDebugCanvas(); + } + } catch (e) { + console.error(`[uw::aard] failed to create debug UI:`, e); + } + this.startCheck(); } @@ -407,6 +414,7 @@ export class Aard { * Checks whether autodetection can run */ startCheck() { + console.log('aard - starting checks') if (!this.videoData.player) { console.warn('Player not detected!'); console.log('--- video data: ---\n', this.videoData); @@ -453,7 +461,6 @@ export class Aard { this.verticalTestResults = initAardTestResults(this.settings.active.arDetect); } - this.main(); } @@ -648,7 +655,7 @@ export class Aard { do { if (this.testResults.notLetterbox) { // console.log('————not letterbox') - console.warn('DETECTED NOT LETTERBOX! (resetting)') + // console.warn('DETECTED NOT LETTERBOX! (resetting)') this.timer.arChanged(); this.updateAspectRatio(this.defaultAr); break; @@ -659,7 +666,7 @@ export class Aard { // console.info('aspect ratio not certain:', this.testResults.aspectRatioUncertainReason); // console.warn('check finished:', JSON.parse(JSON.stringify(this.testResults)), JSON.parse(JSON.stringify(this.canvasSamples)), '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'); - console.warn('ASPECT RATIO UNCERTAIN, GUARD LINE INVALIDATED (resetting)') + // console.warn('ASPECT RATIO UNCERTAIN, GUARD LINE INVALIDATED (resetting)') this.timer.arChanged(); this.updateAspectRatio(this.defaultAr); @@ -669,11 +676,11 @@ export class Aard { // TODO: emit debug values if debugging is enabled this.testResults.isFinished = true; - console.warn( - `[${(+new Date() % 10000) / 100} | ${this.arid}]`,'check finished — aspect ratio updated:', this.testResults.aspectRatioUpdated, - '\ndetected ar:', this.testResults.activeAspectRatio, '->', this.getAr(), - '\nis video playing?', this.getVideoPlaybackState() === VideoPlaybackState.Playing, - '\n\n', JSON.parse(JSON.stringify(this.testResults)), JSON.parse(JSON.stringify(this.canvasSamples)), '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'); + // console.warn( + // `[${(+new Date() % 10000) / 100} | ${this.arid}]`,'check finished — aspect ratio updated:', this.testResults.aspectRatioUpdated, + // '\ndetected ar:', this.testResults.activeAspectRatio, '->', this.getAr(), + // '\nis video playing?', this.getVideoPlaybackState() === VideoPlaybackState.Playing, + // '\n\n', JSON.parse(JSON.stringify(this.testResults)), JSON.parse(JSON.stringify(this.canvasSamples)), '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'); // if edge width changed, emit update event. // except aspectRatioUpdated doesn't get set reliably, so we just call update every time, and update diff --git a/src/ext/lib/aard/AardDebugUi.ts b/src/ext/lib/aard/AardDebugUi.ts index 5a50fe8..01e79a0 100644 --- a/src/ext/lib/aard/AardDebugUi.ts +++ b/src/ext/lib/aard/AardDebugUi.ts @@ -7,9 +7,15 @@ export class AardDebugUi { uiAnchorElement: HTMLDivElement; pauseOnArCheck: boolean = false; + uiVisibility: any = {}; + constructor(aard: any) { this.aard = aard; + this.uiVisibility = { + detectionDetails: aard.settings.active.ui.dev.aardDebugOverlay.showDetectionDetails + }; + (window as any).ultrawidify_uw_aard_debug_tools = { enableStopOnChange: () => this.changePauseOnCheck(true), disableStopOnChange: () => this.changePauseOnCheck(false), @@ -26,7 +32,13 @@ export class AardDebugUi { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; display: flex; flex-direction: column; pointer-events: none; z-index: 9999; font-size: 16px; font-family: 'Overpass Mono', monospace; ">
-

Aard debug overlay

+
+

Aard debug overlay

+
+
+ + +