From 3392ff1bd701d4f3ef03986905acd60a381daf05 Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Wed, 10 Aug 2022 16:14:21 -0400
Subject: [PATCH] perf: :zap: Human time is calculated a lot less (2/3)

---
 NUXT/components/Player/index.vue     |  1 +
 NUXT/components/Player/watchtime.vue | 28 ++++++++++++++++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index a89a237..13962a8 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -237,6 +237,7 @@
           v-if="$refs.player"
           :current-time="$refs.player.currentTime"
           :duration="$refs.player.duration"
+          :controls="controls"
         />
         <v-spacer />
         <fullscreen
diff --git a/NUXT/components/Player/watchtime.vue b/NUXT/components/Player/watchtime.vue
index aa604ef..fb53982 100644
--- a/NUXT/components/Player/watchtime.vue
+++ b/NUXT/components/Player/watchtime.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="color: #fff; font-size: 0.75rem">
-    {{ $vuetube.humanTime(currentTime) }}
+    {{ humanWatchTime }}
     <span style="color: #aaa"> / {{ humanDuration }} </span>
   </div>
 </template>
@@ -16,10 +16,17 @@ export default {
       type: Number,
       required: true,
     },
+    controls: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
-      humanDuration: 0,
+      humanWatchTime: "0:00",
+      humanDuration: "0:00",
+
+      runWatchTimeUpdates: null
     }
   },
   mounted() {
@@ -31,6 +38,23 @@ export default {
       }
     }, 100);
     //---   END Only show end duration when 'this.duration' becomes defined   ---//
+  },
+
+  methods: {
+    updateWatchTime() {
+      this.humanWatchTime = this.$vuetube.humanTime(this.currentTime);
+    }
+  },
+
+  watch: {
+    controls(newVal) {
+      if (newVal) { // controls are VISIBLE
+        this.runWatchTimeUpdates = setInterval(this.updateWatchTime, 250);
+      } else { // Controls are INVISIBLE
+        clearInterval(this.runWatchTimeUpdates);
+      }
+    }
   }
+
 };
 </script>