monitor autodetection performance

src/csui/PlayerUiBase.vue

@@ -116,6 +116,13 @@
               :site="site"
             >
             </PlayerDetectionPanel>
+            <AutodetectionSettingsPanel
+              v-if="selectedTab === 'autodetectionSettings'"
+              :settings="settings"
+              :eventBus="eventBus"
+              :site="site"
+            >
+            </AutodetectionSettingsPanel>
             <!-- <ResizerDebugPanel :debugData="debugData">
             </ResizerDebugPanel> -->
           </template>
@@ -127,6 +134,7 @@
 
 <script>
 import VideoSettings from './src/PlayerUiPanels/VideoSettings.vue'
+import AutodetectionSettingsPanel from './src/PlayerUiPanels/AutodetectionSettingsPanel.vue'
 import PlayerDetectionPanel from './src/PlayerUiPanels/PlayerDetectionPanel.vue'
 import { mapState } from 'vuex';
 // import Icon from '../common/components/Icon';
@@ -142,7 +150,8 @@ export default {
     // Icon,
     ResizerDebugPanel,
     VideoSettings,
-    PlayerDetectionPanel
+    PlayerDetectionPanel,
+    AutodetectionSettingsPanel,
   },
   data() {
     return {

src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue

@@ -0,0 +1,420 @@
+<template>
+  <div class="flex flex-column tab-root">
+    <div class="flex flex-row flex-wrap">
+
+      <!-- AARD performance metrics -->
+      <div class="sub-panel">
+        <div class="flex flex-row">
+          <h1><mdicon name="television-play" :size="32" /> Automatic Aspect Ratio Detection</h1>
+        </div>
+        <div class="sub-panel-content">
+          <p>
+            <b>Autodetection performance</b>
+          </p>
+          <p>
+            Automatic aspect ratio detection is a resource-hungry feature.
+            This page allows you to trade autodetection accuracy and/or frequency for
+            better performance.
+          </p>
+          <p>
+            Note that some browsers <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now" target="_blank">limit the accuracy of time measurements</a>.
+          </p>
+          <div class="performance-graph-container">
+            <div class="performance-graph">
+              <div class="time-budget hz144"></div>
+              <div class="time-budget hz120"></div>
+              <div class="time-budget hz60"></div>
+              <div class="time-budget hz30"></div>
+              <div class="time-budget hz24"></div>
+              <div class="time-budget rest"></div>
+
+              <div class="bar-container">
+                <div class="average-case">
+                  <div class="stats">
+                    <b>Average: </b>
+                    <span class="draw">draw (main) {{(performanceData?.imageDraw?.averageTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="draw-blackframe">draw (blackframe) {{(performanceData?.blackFrameDraw?.averageTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="processing">
+                      processing {{
+                        Math.max(
+                          (performanceData?.total?.averageTime ?? 0)
+                            - (performanceData?.imageDraw?.averageTime ?? 0)
+                            - (performanceData?.imageDraw?.averageTime ?? 0),
+                          0
+                        ).toFixed(1)
+                      }} ms
+                    </span>
+                  </div>
+                  <div class="bar">
+                    <div
+                      class="draw"
+                      :style="{'width': (performanceData?.imageDraw?.averageTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="draw-blackframe"
+                      :style="{'width': (performanceData?.blackFrameDraw?.averageTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="processing"
+                      :style="{
+                        'width': Math.max(
+                          (performanceData?.total?.averageTime ?? 0)
+                            - (performanceData?.imageDraw?.averageTime ?? 0)
+                            - (performanceData?.imageDraw?.averageTime ?? 0),
+                          0
+                        ) + '%'
+                      }"
+                    >
+                    </div>
+                  </div>
+                </div>
+                <div class="worst-case">
+                  <div class="stats">
+                    <b>Worst: </b>
+                    <span class="draw">draw (main) {{(performanceData?.imageDraw?.worstTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="draw-blackframe">draw (blackframe) {{(performanceData?.blackFrameDraw?.worstTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="processing">
+                      processing {{
+                        Math.max(
+                          (performanceData?.total?.worstTime ?? 0)
+                            - (performanceData?.imageDraw?.worstTime ?? 0)
+                            - (performanceData?.blackFrameDraw?.worstTime ?? 0),
+                          0
+                        ).toFixed(1)
+                      }} ms
+                    </span>
+                  </div>
+                  <div class="bar">
+                    <div
+                      class="draw"
+                      :style="{'width': (performanceData?.imageDraw?.worstTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="draw-blackframe"
+                      :style="{'width': (performanceData?.blackFrameDraw?.worstTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="processing"
+                      :style="{
+                        'width': Math.max(
+                          (performanceData?.total?.worstTime ?? 0)
+                            - (performanceData?.imageDraw?.worstTime ?? 0)
+                            - (performanceData?.blackFrameDraw?.worstTime ?? 0),
+                          0
+                        ) + '%'
+                      }"
+                    >
+                    </div>
+                  </div>
+                </div>
+
+                <div class="average-case">
+                  <div class="stats">
+                    <b>AR change (average): </b>
+                    <span class="draw">draw (main) {{(performanceData?.imageDraw?.averageTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="draw-blackframe">draw (blackframe) {{(performanceData?.blackFrameDraw?.averageTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="processing">processing {{
+                      (
+                        (performanceData?.blackFrame?.averageTime ?? 0)
+                        + (performanceData?.fastLetterbox?.averageTime ?? 0)
+                        + (performanceData?.edgeDetect?.averageTime ?? 0)
+                      ).toFixed(1)
+                      }} ms</span>
+                  </div>
+                  <div class="bar">
+                    <div
+                      class="draw"
+                      :style="{'width': (performanceData?.imageDraw?.averageTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="draw-blackframe"
+                      :style="{'width': (performanceData?.blackFrameDraw?.averageTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="processing"
+                      :style="{
+                        'width': (
+                          (performanceData?.blackFrame?.averageTime ?? 0)
+                          + (performanceData?.fastLetterbox?.averageTime ?? 0)
+                          + (performanceData?.edgeDetect?.averageTime ?? 0)
+                        ) + '%'
+                      }"
+                    >
+                    </div>
+                  </div>
+                </div>
+                <div class="worst-case">
+                  <div class="stats">
+                    <b>AR change (worst): </b>
+                    <span class="draw">draw (main) {{(performanceData?.imageDraw?.worstTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="draw-blackframe">draw (blackframe) {{(performanceData?.blackFrameDraw?.worstTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="processing">processing {{
+                      (
+                        (performanceData?.blackFrame?.worstTime ?? 0)
+                        + (performanceData?.fastLetterbox?.worstTime ?? 0)
+                        + (performanceData?.edgeDetect?.worstTime ?? 0)
+                      ).toFixed(1)
+                      }} ms</span>
+                  </div>
+                  <div class="bar">
+                    <div
+                      class="draw"
+                      :style="{'width': (performanceData?.imageDraw?.worstTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="draw-blackframe"
+                      :style="{'width': (performanceData?.blackFrameDraw?.worstTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="processing"
+                      :style="{
+                        'width': (
+                          (performanceData?.blackFrame?.worstTime ?? 0)
+                          + (performanceData?.fastLetterbox?.worstTime ?? 0)
+                          + (performanceData?.edgeDetect?.worstTime ?? 0)
+                        ) + '%'
+                      }"
+                    >
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from '../../../common/components/Button.vue'
+import KeyboardShortcutParser from '../../../common/js/KeyboardShortcutParser';
+import ShortcutButton from '../../../common/components/ShortcutButton';
+import EditShortcutButton from '../../../common/components/EditShortcutButton';
+import ExecAction from '../ui-libs/ExecAction';
+import BrowserDetect from '../../../ext/conf/BrowserDetect';
+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';
+
+export default {
+  data() {
+    return {
+      exec: null,
+      performanceData: {},
+      graphRefreshInterval: undefined,
+    }
+  },
+  mixins: [
+  ],
+  props: [
+    'settings',
+    'frame',
+    'eventBus',
+    'site'
+  ],
+  created() {
+    this.exec = new ExecAction(this.settings, window.location.hostname);
+    this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleConfigBroadcast(config)});
+  },
+  mounted() {
+    this.eventBus.sendToTunnel('get-aard-timing');
+    this.graphRefreshInterval = setInterval(() => this.eventBus.sendToTunnel('get-aard-timing'), 500);
+  },
+  destroyed() {
+    clearInterval(this.graphRefreshInterval);
+  },
+  components: {
+    ShortcutButton,
+    EditShortcutButton,
+    Button,
+    AlignmentOptionsControlComponent
+  },
+  computed: {
+  },
+  methods: {
+    async openOptionsPage() {
+      BrowserDetect.runtime.openOptionsPage();
+    },
+    refreshGraph() {
+       this.eventBus.sendToTunnel('get-aard-timing');
+    },
+    handleConfigBroadcast(data) {
+      console.log('GOT CONFIG BROADCAST!', data);
+      if (data.type === 'aard-performance-data') {
+        this.performanceData = data.performanceData;
+        this.$nextTick( () => this.$forceUpdate() );
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" src="../../../res/css/flex.scss" scoped module></style>
+<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="../res-common/common.scss" scoped module></style>
+
+<style lang="scss" scoped module>
+@import '../res-common/variables';
+
+.performance-graph-container {
+  position: relative;
+
+  width: 100%;
+  height: 8rem;
+  padding: 1rem;
+
+  .performance-graph {
+    border: 1px solid #fa6;
+
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    width: 100%;
+    height: 100%;
+
+    // graph is 100 ms wide
+    .time-budget {
+      height: 100%;
+      display: inline-block;
+      position: relative;
+
+      box-sizing: border-box;
+
+      z-index: 100;
+
+      &.hz144 {
+        width: 6.9%;
+        // background-color: rgba(143, 143, 235, 0.47);
+      }
+      &.hz120 {
+        width: 1.39%;
+        // background-color: rgba(108, 108, 211, 0.441);
+      }
+      &.hz60 {
+        width: 8.33%;
+        // background-color: rgba(78, 78, 182, 0.327);
+        border-right: 2px solid rgb(96, 96, 227);
+        &::after {
+          content: '60fps';
+          position: absolute;
+          top: 0;
+          right: -2px;
+
+          border-right: 2px solid rgb(96, 96, 227);
+
+          transform: translateY(-100%);
+
+          font-size: 0.6rem;
+          padding-right: 0.25rem;
+          text-transform: small-caps;
+        }
+      }
+      &.hz30 {
+        width: 16.67%;
+        // background-color: rgba(56, 56, 151, 0.308);
+        border-right: 2px solid #fb772a;
+
+        &::after {
+          content: '30fps';
+          position: absolute;
+          top: 0;
+          right: -2px;
+
+          border-right: 2px solid #fb772a;
+
+          transform: translateY(-100%);
+
+          font-size: 0.6rem;
+          padding-right: 0.25rem;
+          text-transform: small-caps;
+        }
+      }
+      &.hz24 {
+        width: 8.33%;
+        // background-color: rgba(37, 37, 118, 0.269);
+      }
+    }
+
+
+    .bar-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+
+      > div {
+        height: 2.5rem;
+      }
+
+      .stats {
+        background-color: rgba(0, 0, 0, 0.544);
+        font-size: 0.75rem;
+        font-family: 'Overpass Mono';
+        z-index: 11010;
+
+        span {
+          font-size: 0.75rem;
+          z-index: 11011;
+
+          &::before {
+            content: '';
+            display: inline-block;
+            width: 0.75rem;
+            height: 0.75rem;
+            margin-top: 0.25rem;
+            margin-right: 0.5rem;
+          }
+
+          &.draw::before {
+            background-color: #fb772a;
+          }
+          &.draw-blackframe::before {
+            background-color: #e70c0c;
+          }
+          &.processing::before {
+            background-color: rgb(176, 167, 239);
+          }
+        }
+      }
+
+      .bar {
+        width: 100%;
+        height: 0.69rem;
+        background-color: #000;
+
+        overflow: hidden;
+        * {
+          display: inline-block;
+          height: 100%;
+        }
+
+        .draw {
+          background-color: #fb772a;
+        }
+        .draw-blackframe {
+          background-color: #e70c0c;
+        }
+        .processing {
+          background-color: rgb(176, 167, 239);
+        }
+      }
+    }
+  }
+}
+</style>

src/ext/lib/ar-detect/ArDetector.ts

@@ -31,6 +31,7 @@ export interface AardPerformanceMeasurement {
 
 export interface AardPerformanceData {
   total: AardPerformanceMeasurement,
+  theoretical: AardPerformanceMeasurement,
   imageDraw: AardPerformanceMeasurement
   blackFrameDraw: AardPerformanceMeasurement,
   blackFrame: AardPerformanceMeasurement,
@@ -136,6 +137,8 @@ class ArDetector {
     this.settings = videoData.settings;
     this.eventBus = videoData.eventBus;
 
+    this.initEventBus();
+
     this.sampleCols = [];
 
     this.blackLevel = this.settings.active.arDetect.blackbar.blackLevel;
@@ -146,6 +149,15 @@ class ArDetector {
     this.logger.log('info', 'init', `[ArDetector::ctor] creating new ArDetector. arid: ${this.arid}`);
   }
 
+  private initEventBus() {
+    for (const action in this.eventBusCommands) {
+      for (const command of this.eventBusCommands[action]) {
+        this.eventBus.subscribe(action, command);
+      }
+    }
+  }
+
+
   init(){
     this.logger.log('info', 'init', `[ArDetect::init] <@${this.arid}> Initializing autodetection.`);
     this.setup();
@@ -471,6 +483,10 @@ class ArDetector {
     let totalWorst = 0;
     let totalStDev = 0;
 
+    let theoreticalAverage = 0;
+    let theoreticalWorst = 0;
+    let theoreticalStDev = 0;
+
     for (const sample of this.performance.samples) {
       if (sample.imageDrawTime) {
         imageDrawCount++;
@@ -511,12 +527,39 @@ class ArDetector {
       if (execTime > totalWorst) {
         totalWorst = execTime;
       }
+
+      const partialExecTime =
+        sample.imageDrawTime ?? 0
+        + sample.blackFrameDrawTime ?? 0
+        + sample.blackFrameProcessTime ?? 0;
+
+      if (partialExecTime > theoreticalWorst) {
+        theoreticalWorst = partialExecTime;
+      }
     }
 
+    if (imageDrawCount) {
       imageDrawAverage /= imageDrawCount;
+    } else {
+      imageDrawAverage = 0;
+    }
+    if (blackFrameDrawCount) {
       blackFrameDrawAverage /= blackFrameDrawCount;
+    } else {
+      blackFrameDrawAverage = 0;
+    }
+    if (blackFrameProcessCount) {
       blackFrameProcessAverage /= blackFrameProcessCount;
+    } else {
+      blackFrameProcessAverage = 0;
+    }
+    if (this.performance.samples.length) {
       totalAverage /= this.performance.samples.length;
+    } else {
+      totalAverage = 0;
+    }
+
+    theoreticalAverage = imageDrawAverage + blackFrameDrawAverage + blackFrameProcessAverage;
 
     for (const sample of this.performance.lastMeasurements.fastLetterbox.samples) {
       fastLetterboxAverage += sample;
@@ -533,8 +576,19 @@ class ArDetector {
     fastLetterboxCount = this.performance.lastMeasurements.fastLetterbox.samples.length;
     edgeDetectCount = this.performance.lastMeasurements.edgeDetect.samples.length;
 
+    if (fastLetterboxCount) {
       fastLetterboxAverage /= fastLetterboxCount;
+    } else {
+      fastLetterboxAverage = 0;
+    }
+    if (edgeDetectCount) {
       edgeDetectAverage /= edgeDetectCount;
+    } else {
+      edgeDetectAverage = 0;
+    }
+
+    theoreticalWorst += fastLetterboxWorst + edgeDetectWorst;
+    theoreticalAverage += fastLetterboxAverage + edgeDetectAverage;
 
     for (const sample of this.performance.samples) {
       if (sample.imageDrawTime) {
@@ -599,6 +653,7 @@ class ArDetector {
       totalStDev = Math.sqrt(totalStDev / (this.performance.samples.length - 1));
     }
 
+
     const res: AardPerformanceData = {
       total: {
         sampleCount: this.performance.samples.length,
@@ -606,6 +661,12 @@ class ArDetector {
         worstTime: totalWorst,
         stDev: totalStDev,
       },
+      theoretical: {
+        sampleCount: -1,
+        averageTime: theoreticalAverage,
+        worstTime: theoreticalWorst,
+        stDev: theoreticalStDev
+      },
       imageDraw: {
         sampleCount: imageDrawCount,
         averageTime: imageDrawAverage,
@@ -644,7 +705,7 @@ class ArDetector {
       edgeDetectCount
     }
 
-    this.eventBus.send('uw-config-broadcast', {type: 'aard-performance-data', config: res});
+    this.eventBus.send('uw-config-broadcast', {type: 'aard-performance-data', performanceData: res});
   }
   //#endregion