replace filters with methods

src/library/TrackList.vue

@@ -64,7 +64,7 @@
             </router-link>
           </td>
           <td class="text-right d-none d-md-table-cell">
-            {{ item.duration | duration }}
+            {{ $formatDuration(item.duration) }}
           </td>
           <td class="text-right">
             <TrackContextMenu :track="item">

src/player/Player.vue

@@ -38,7 +38,7 @@
         </div>
         <div class="col p-0 text-truncate">
           <div v-if="track" class="pr-3 text-right">
-            <span>{{ currentTime | duration }} / {{ duration | duration }}</span>
+            {{ $formatDuration(currentTime) }} / {{ $formatDuration(duration) }}
           </div>
         </div>
       </div>

src/playlist/RandomSongs.vue

@@ -11,7 +11,7 @@
           </td>
           <td>{{ item.artist }}</td>
           <td>{{ item.album }}</td>
-          <td>{{ item.duration | duration }}</td>
+          <td>{{ $formatDuration(item.duration) }}</td>
         </tr>
       </tbody>
     </table>

src/shared/components/index.ts

@@ -21,3 +21,12 @@ Object.keys(components).forEach((_key) => {
   const key = _key as keyof typeof components
   Vue.component(key, components[key])
 })
+
+Vue.prototype.$formatDuration = (value: number) => {
+  if (!isFinite(value)) {
+    return '∞'
+  }
+  const minutes = Math.floor(value / 60)
+  const seconds = Math.floor(value % 60)
+  return (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds
+}

src/shared/filters.ts

@@ -1,14 +0,0 @@
-import Vue from 'vue'
-
-Vue.filter('duration', (value: number) => {
-  if (!isFinite(value)) {
-    return '∞'
-  }
-  const minutes = Math.floor(value / 60)
-  const seconds = Math.floor(value % 60)
-  return (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds
-})
-
-Vue.filter('dateTime', (value: string) => {
-  return value
-})