From 0760e1537b98e0a3999e8f94c3d19cc132e3cad2 Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Wed, 10 Aug 2022 15:41:27 -0400
Subject: [PATCH] perf: :zap: Greatly reduce CPU impact while watching videos
 (stage 1/2)

---
 NUXT/components/Player/watchtime.vue | 22 +++++++++++++++++++++-
 NUXT/plugins/vuetube.js              |  1 +
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/NUXT/components/Player/watchtime.vue b/NUXT/components/Player/watchtime.vue
index 56c8ee5..9517500 100644
--- a/NUXT/components/Player/watchtime.vue
+++ b/NUXT/components/Player/watchtime.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="color: #fff; font-size: 0.75rem">
     {{ $vuetube.humanTime(currentTime) }}
-    <span style="color: #aaa"> / {{ $vuetube.humanTime(duration) }} </span>
+    <span style="color: #aaa"> / {{ humanDuration }} </span>
   </div>
 </template>
 
@@ -17,5 +17,25 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      humanDuration: 0,
+    }
+  },
+  methods: {
+    calcDuration() {
+      this.humanDuration = this.$vuetube.humanTime(this.duration);
+    }
+  },
+  mounted() {
+    //---   Only call 'calcDuration()' when 'this.duration' becomes defined   ---//
+    const durationTimer = setInterval(() => {
+      if (this.duration) {
+        this.calcDuration();
+        return clearInterval(durationTimer);
+      }
+    }, 100);
+    //---   END Only call 'calcDuration()' when 'this.duration' becomes defined   ---//
+  }
 };
 </script>
diff --git a/NUXT/plugins/vuetube.js b/NUXT/plugins/vuetube.js
index bb40c6b..cf0f7a8 100644
--- a/NUXT/plugins/vuetube.js
+++ b/NUXT/plugins/vuetube.js
@@ -138,6 +138,7 @@ const module = {
     }
     // join the array into a string with : as a sepatrator
     let returntext = levels.join(":");
+    console.log(returntext);
     return returntext;
   },
   //---   End Convert Time To Human Readable String   ---//