[web] Replace date library moments.js with luxon

web-src/package-lock.json

@@ -14,9 +14,8 @@
         "axios": "^0.26.1",
         "bulma": "^0.9.3",
         "bulma-switch": "^2.0.4",
+        "luxon": "^2.3.1",
         "mdi": "^2.2.43",
-        "moment": "^2.29.2",
-        "moment-duration-format": "^2.3.2",
         "reconnectingwebsocket": "^1.0.0",
         "spotify-web-api-js": "^1.5.2",
         "string-to-color": "^2.2.2",
@@ -1470,6 +1469,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/luxon": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.3.1.tgz",
+      "integrity": "sha512-I8vnjOmhXsMSlNMZlMkSOvgrxKJl0uOsEzdGgGNZuZPaS9KlefpE9KV95QFftlJSC+1UyCC9/I69R02cz/zcCA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -1496,19 +1503,6 @@
         "node": "*"
       }
     },
-    "node_modules/moment": {
-      "version": "2.29.2",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.2.tgz",
-      "integrity": "sha512-UgzG4rvxYpN15jgCmVJwac49h9ly9NurikMWGPdVxm8GZD6XjkKPxDTjQQ43gtGgnV3X0cAyWDdP2Wexoquifg==",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/moment-duration-format": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/moment-duration-format/-/moment-duration-format-2.3.2.tgz",
-      "integrity": "sha512-cBMXjSW+fjOb4tyaVHuaVE/A5TqkukDWiOfxxAjY+PEqmmBQlLwn+8OzwPiG3brouXKY5Un4pBjAeB6UToXHaQ=="
-    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3138,6 +3132,11 @@
         "yallist": "^4.0.0"
       }
     },
+    "luxon": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.3.1.tgz",
+      "integrity": "sha512-I8vnjOmhXsMSlNMZlMkSOvgrxKJl0uOsEzdGgGNZuZPaS9KlefpE9KV95QFftlJSC+1UyCC9/I69R02cz/zcCA=="
+    },
     "magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -3160,16 +3159,6 @@
         "brace-expansion": "^1.1.7"
       }
     },
-    "moment": {
-      "version": "2.29.2",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.2.tgz",
-      "integrity": "sha512-UgzG4rvxYpN15jgCmVJwac49h9ly9NurikMWGPdVxm8GZD6XjkKPxDTjQQ43gtGgnV3X0cAyWDdP2Wexoquifg=="
-    },
-    "moment-duration-format": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/moment-duration-format/-/moment-duration-format-2.3.2.tgz",
-      "integrity": "sha512-cBMXjSW+fjOb4tyaVHuaVE/A5TqkukDWiOfxxAjY+PEqmmBQlLwn+8OzwPiG3brouXKY5Un4pBjAeB6UToXHaQ=="
-    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

web-src/package.json

@@ -16,9 +16,8 @@
     "axios": "^0.26.1",
     "bulma": "^0.9.3",
     "bulma-switch": "^2.0.4",
+    "luxon": "^2.3.1",
     "mdi": "^2.2.43",
-    "moment": "^2.29.2",
-    "moment-duration-format": "^2.3.2",
     "reconnectingwebsocket": "^1.0.0",
     "spotify-web-api-js": "^1.5.2",
     "string-to-color": "^2.2.2",

web-src/src/App.vue

@@ -33,7 +33,6 @@ import ModalDialogUpdate from '@/components/ModalDialogUpdate.vue'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 import ReconnectingWebSocket from 'reconnectingwebsocket'
-import moment from 'moment'
 
 export default {
   name: 'App',
@@ -90,7 +89,6 @@ export default {
   },
 
   created: function () {
-    moment.locale(navigator.language)
     this.connect()
 
     //  Start the progress bar on app start

web-src/src/components/ListAlbums.vue

@@ -34,7 +34,7 @@
             v-if="album.item.date_released && album.item.media_kind === 'music'"
             class="subtitle is-7 has-text-grey has-text-weight-normal"
           >
-            {{ $filters.time(album.item.date_released, 'L') }}
+            {{ $filters.date(album.item.date_released) }}
           </h2>
         </div>
       </div>

web-src/src/components/ModalDialogAlbum.vue

@@ -35,7 +35,7 @@
                 <p v-if="album.date_released">
                   <span class="heading">Release date</span>
                   <span class="title is-6">{{
-                    $filters.time(album.date_released, 'L')
+                    $filters.date(album.date_released)
                   }}</span>
                 </p>
                 <p v-else-if="album.year > 0">
@@ -49,7 +49,7 @@
                 <p>
                   <span class="heading">Length</span>
                   <span class="title is-6">{{
-                    $filters.duration(album.length_ms)
+                    $filters.durationInHours(album.length_ms)
                   }}</span>
                 </p>
                 <p>
@@ -61,7 +61,7 @@
                 <p>
                   <span class="heading">Added at</span>
                   <span class="title is-6">{{
-                    $filters.time(album.time_added, 'L LT')
+                    $filters.datetime(album.time_added)
                   }}</span>
                 </p>
               </div>

web-src/src/components/ModalDialogArtist.vue

@@ -27,7 +27,7 @@
                 <p>
                   <span class="heading">Added at</span>
                   <span class="title is-6">{{
-                    $filters.time(artist.time_added, 'L LT')
+                    $filters.datetime(artist.time_added)
                   }}</span>
                 </p>
               </div>

web-src/src/components/ModalDialogComposer.vue

@@ -26,7 +26,7 @@
               <p>
                 <span class="heading">Length</span>
                 <span class="title is-6">{{
-                  $filters.duration(composer.length_ms)
+                  $filters.durationInHours(composer.length_ms)
                 }}</span>
               </p>
             </div>

web-src/src/components/ModalDialogGenre.vue

@@ -23,7 +23,7 @@
                 <p>
                   <span class="heading">Length</span>
                   <span class="title is-6">{{
-                    $filters.duration(genre.length_ms)
+                    $filters.durationInHours(genre.length_ms)
                   }}</span>
                 </p>
               </div>

web-src/src/components/ModalDialogQueueItem.vue

@@ -56,7 +56,7 @@
                 <p>
                   <span class="heading">Length</span>
                   <span class="title is-6">{{
-                    $filters.duration(item.length_ms)
+                    $filters.durationInHours(item.length_ms)
                   }}</span>
                 </p>
                 <p>

web-src/src/components/ModalDialogTrack.vue

@@ -48,7 +48,7 @@
                 <p v-if="track.date_released">
                   <span class="heading">Release date</span>
                   <span class="title is-6">{{
-                    $filters.time(track.date_released, 'L')
+                    $filters.date(track.date_released)
                   }}</span>
                 </p>
                 <p v-else-if="track.year > 0">
@@ -70,7 +70,7 @@
                 <p>
                   <span class="heading">Length</span>
                   <span class="title is-6">{{
-                    $filters.duration(track.length_ms)
+                    $filters.durationInHours(track.length_ms)
                   }}</span>
                 </p>
                 <p>
@@ -107,7 +107,7 @@
                 <p>
                   <span class="heading">Added at</span>
                   <span class="title is-6">{{
-                    $filters.time(track.time_added, 'L LT')
+                    $filters.datetime(track.time_added)
                   }}</span>
                 </p>
                 <p>

web-src/src/components/SpotifyListItemAlbum.vue

@@ -11,7 +11,7 @@
         <b>{{ album.artists[0].name }}</b>
       </h2>
       <h2 class="subtitle is-7 has-text-grey has-text-weight-normal">
-        ({{ album.album_type }}, {{ $filters.time(album.release_date, 'L') }})
+        ({{ album.album_type }}, {{ $filters.date(album.release_date) }})
       </h2>
     </div>
     <div class="media-right">

web-src/src/components/SpotifyModalDialogAlbum.vue

@@ -32,7 +32,7 @@
                 <p>
                   <span class="heading">Release date</span>
                   <span class="title is-6">{{
-                    $filters.time(album.release_date, 'L')
+                    $filters.date(album.release_date)
                   }}</span>
                 </p>
                 <p>

web-src/src/components/SpotifyModalDialogTrack.vue

@@ -28,7 +28,7 @@
                 <p>
                   <span class="heading">Release date</span>
                   <span class="title is-6">{{
-                    $filters.time(album.release_date, 'L')
+                    $filters.date(album.release_date)
                   }}</span>
                 </p>
                 <p>
@@ -40,7 +40,7 @@
                 <p>
                   <span class="heading">Length</span>
                   <span class="title is-6">{{
-                    $filters.duration(track.duration_ms)
+                    $filters.durationInHours(track.duration_ms)
                   }}</span>
                 </p>
                 <p>

web-src/src/filter/index.js

@@ -1,25 +1,47 @@
-import moment from 'moment'
+import { DateTime, Duration } from 'luxon'
-import momentDurationFormatSetup from 'moment-duration-format'
-
-momentDurationFormatSetup(moment)
 
 export const filters = {
-  duration: function (value, format) {
+  durationInHours: function (value_ms) {
-    if (format) {
+    const seconds = Math.floor(value_ms / 1000)
-      return moment.duration(value).format(format)
+    if (seconds > 3600) {
+      return Duration.fromObject({ seconds: seconds })
+        .shiftTo('hours', 'minutes', 'seconds')
+        .toFormat('hh:mm:ss')
     }
-    return moment.duration(value).format('hh:*mm:ss')
+    return Duration.fromObject({ seconds: seconds })
+      .shiftTo('minutes', 'seconds')
+      .toFormat('mm:ss')
   },
 
-  time: function (value, format) {
+  durationInDays: function (value_ms) {
-    if (format) {
+    const minutes = Math.floor(value_ms / 60000)
-      return moment(value).format(format)
+    if (minutes > 1440) {
+      // 60 * 24
+      return Duration.fromObject({ minutes: minutes })
+        .shiftTo('days', 'hours', 'minutes')
+        .toHuman()
+    } else if (minutes > 60) {
+      return Duration.fromObject({ minutes: minutes })
+        .shiftTo('hours', 'minutes')
+        .toHuman()
     }
-    return moment(value).format()
+    return Duration.fromObject({ minutes: minutes })
+      .shiftTo('minutes')
+      .toHuman()
   },
 
-  timeFromNow: function (value, withoutSuffix) {
+  date: function (value) {
-    return moment(value).fromNow(withoutSuffix)
+    return DateTime.fromISO(value).toLocaleString(DateTime.DATE_FULL)
+  },
+
+  datetime: function (value) {
+    return DateTime.fromISO(value).toLocaleString(DateTime.DATETIME_MED)
+  },
+
+  timeFromNow: function (value) {
+    var diff = DateTime.now().diff(DateTime.fromISO(value))
+
+    return this.durationInDays(diff.as('milliseconds'))
   },
 
   number: function (value) {

web-src/src/pages/PageAbout.vue

@@ -61,20 +61,15 @@
                   <tr>
                     <th>Total playtime</th>
                     <td class="has-text-right">
-                      {{
+                      {{ $filters.durationInDays(library.db_playtime * 1000) }}
-                        $filters.duration(
-                          library.db_playtime * 1000,
-                          'y [years], d [days], h [hours], m [minutes]'
-                        )
-                      }}
                     </td>
                   </tr>
                   <tr>
                     <th>Library updated</th>
                     <td class="has-text-right">
-                      {{ $filters.timeFromNow(library.updated_at) }}
+                      {{ $filters.timeFromNow(library.updated_at) }} ago
                       <span class="has-text-grey"
-                        >({{ $filters.time(library.updated_at, 'lll') }})</span
+                        >({{ $filters.datetime(library.updated_at) }})</span
                       >
                     </td>
                   </tr>
@@ -83,7 +78,7 @@
                     <td class="has-text-right">
                       {{ $filters.timeFromNow(library.started_at, true) }}
                       <span class="has-text-grey"
-                        >({{ $filters.time(library.started_at, 'll') }})</span
+                        >({{ $filters.datetime(library.started_at) }})</span
                       >
                     </td>
                   </tr>

web-src/src/pages/PageNowPlaying.vue

@@ -38,8 +38,8 @@
           </p>
           <p class="content">
             <span
-              >{{ $filters.duration(item_progress_ms) }} /
+              >{{ $filters.durationInHours(item_progress_ms) }} /
-              {{ $filters.duration(now_playing.length_ms) }}</span
+              {{ $filters.durationInHours(now_playing.length_ms) }}</span
             >
           </p>
         </div>