perf: ⚡ Greatly reduce CPU impact while watching videos (stage 1/2)

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>

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   ---//