refactor(time utils): move getRuntime to function in timeutils

components/Item/TimeSlider.vue

@@ -15,15 +15,15 @@
   >
     <template #prepend>
       <span class="mt-1">
-        {{ getRuntime(realPosition) }}
+        {{ formatTime(realPosition) }}
       </span>
     </template>
     <template #thumb-label>
-      {{ getRuntime(sliderValue) }}
+      {{ formatTime(sliderValue) }}
     </template>
     <template #append>
       <span class="mt-1">
-        {{ getRuntime(runtime) }}
+        {{ formatTime(runtime) }}
       </span>
     </template>
   </v-slider>
@@ -74,23 +74,6 @@ export default Vue.extend({
     onClick(): void {
       this.currentInput = this.realPosition;
       this.clicked = !this.clicked;
-    },
-    getRuntime(seconds: number): string {
-      const minutes = Math.floor(seconds / 60);
-      seconds = Math.floor(seconds - minutes * 60);
-
-      /**
-       * Formats the second number
-       * E.g. 7 -> 07
-       *
-       * @param {string} seconds - Number to format
-       * @returns {string} Formatted seconds number
-       */
-      function formatSeconds(seconds: string): string {
-        return ('0' + seconds).slice(-2);
-      }
-
-      return `${minutes}:${formatSeconds(seconds.toString())}`;
     }
   }
 });

mixins/__tests__/timeUtils.spec.ts

@@ -13,4 +13,18 @@ describe('timeUtils', () => {
   test('converts time from ticks to ms', () => {
     expect(TestComponent.msToTicks(1)).toEqual(10000);
   });
+
+  test('formats time properly', () => {
+    expect(TestComponent.formatTime(5)).toEqual('0:05');
+
+    expect(TestComponent.formatTime(10)).toEqual('0:10');
+
+    expect(TestComponent.formatTime(65)).toEqual('1:05');
+
+    expect(TestComponent.formatTime(70)).toEqual('1:10');
+
+    expect(TestComponent.formatTime(3665)).toEqual('1:01:05');
+
+    expect(TestComponent.formatTime(4210)).toEqual('1:10:10');
+  });
 });

mixins/timeUtils.ts

@@ -32,11 +32,13 @@ declare module '@nuxt/types' {
   interface Context {
     ticksToMs: (ticks: number) => number;
     msToTicks: (ms: number) => number;
+    formatTime: (seconds: number) => number;
   }
 
   interface NuxtAppOptions {
     ticksToMs: (ticks: number) => number;
     msToTicks: (ms: number) => number;
+    formatTime: (seconds: number) => number;
   }
 }
 
@@ -44,6 +46,7 @@ declare module 'vue/types/vue' {
   interface Vue {
     ticksToMs: (ticks: number | null | undefined) => number;
     msToTicks: (ms: number) => number;
+    formatTime: (seconds: number) => number;
   }
 }
 
@@ -66,6 +69,29 @@ const timeUtils = Vue.extend({
      */
     msToTicks(ms: number): number {
       return msToTicks(ms);
+    },
+    formatTime(seconds: number): string {
+      let minutes = Math.floor(seconds / 60);
+      const hours = Math.floor(minutes / 60);
+      minutes = minutes - hours * 60;
+      seconds = Math.floor(seconds - (minutes * 60 + hours * 60 * 60));
+
+      /**
+       * Formats Time
+       * E.g. 7 -> 07
+       *
+       * @param {number} number - Number to format
+       * @returns {string} Formated seconds number
+       */
+      function formatDigits(number: number): string {
+        return ('0' + number).slice(-2);
+      }
+
+      if (hours) {
+        return `${hours}:${formatDigits(minutes)}:${formatDigits(seconds)}`;
+      } else {
+        return `${minutes}:${formatDigits(seconds)}`;
+      }
     }
   }
 });