- Make sure we actually poll canvas fps.

TheCacophonyProject · May 29, 2022 · 0cd71be · 0cd71be
1 parent 3da1ad3
commit 0cd71be
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cptv-player-vue",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --target lib --name CptvPlayerVue ./src/CptvPlayer.vue",

diff --git a/src/CptvPlayer.vue b/src/CptvPlayer.vue
@@ -485,6 +485,7 @@ export default class CptvPlayerComponent extends Vue {
   trackExportOptions: TrackExportOption[] = [];
   scale = 1;
   raqFps = 60;
+  polledFps = false;
 
   set frameNum(num: number) {
     this.internalFrameNum = num;
@@ -684,32 +685,37 @@ export default class CptvPlayerComponent extends Vue {
 
     const frameTimes: number[] = [];
     const pollFrameTimes = () => {
-      frameTimes.push(performance.now());
-      if (frameTimes.length < 10) {
-        requestAnimationFrame(pollFrameTimes);
-      } else {
-        const diffs = [];
-        for (let i = 1; i < frameTimes.length; i++) {
-          diffs.push(frameTimes[i] - frameTimes[i - 1]);
-        }
-        let total = 0;
-        for (const val of diffs) {
-          total += val;
-        }
-        // Get the average frame time
-        const multiplier = Math.round(1000 / (total / diffs.length) / 30);
-        if (multiplier === 1) {
-          // 30fps
-          this.raqFps = 30;
-        } else if (multiplier === 2 || multiplier === 3) {
-          // 60fps
-          this.raqFps = 60;
-        } else if (multiplier >= 4) {
-          // 120fps
-          this.raqFps = 120;
+      if (!this.polledFps) {
+        frameTimes.push(performance.now());
+        if (frameTimes.length < 10) {
+          requestAnimationFrame(pollFrameTimes);
+        } else {
+          const diffs = [];
+          for (let i = 1; i < frameTimes.length; i++) {
+            diffs.push(frameTimes[i] - frameTimes[i - 1]);
+          }
+          let total = 0;
+          for (const val of diffs) {
+            total += val;
+          }
+          // Get the average frame time
+          const multiplier = Math.round(1000 / (total / diffs.length) / 30);
+          if (multiplier === 1) {
+            // 30fps
+            this.raqFps = 30;
+          } else if (multiplier === 2 || multiplier === 3) {
+            // 60fps
+            this.raqFps = 60;
+          } else if (multiplier >= 4) {
+            // 120fps
+            this.raqFps = 120;
+          }
+          this.polledFps = true;
         }
       }
     };
+
+    pollFrameTimes();
     window.addEventListener("load", pollFrameTimes);
 
     // This makes button active styles work in safari iOS.