[web] Simplify the about page

web-src/src/filter/index.js

@@ -32,6 +32,10 @@ export const filters = {
     }
     return null
   },
+  duration(value) {
+    const diff = DateTime.now().diff(DateTime.fromISO(value))
+    return this.durationInDays(diff.as('seconds'))
+  },
   durationInDays(value) {
     const minutes = Math.floor(value / 60)
     if (minutes > 1440) {
@@ -53,7 +57,8 @@ export const filters = {
     return value.toLocaleString(locale.value)
   },
   timeFromNow(value) {
-    const diff = DateTime.now().diff(DateTime.fromISO(value))
+    return DateTime.fromISO(value).toRelative({
-    return this.durationInDays(diff.as('seconds'))
+      unit: ['years', 'months', 'days', 'hours', 'minutes', 'seconds']
+    })
   }
 }

web-src/src/i18n/de.json

@@ -125,19 +125,11 @@
   },
   "page": {
     "about": {
-      "albums": "Albums",
-      "artists": "Künstler",
       "built-with": "Oberfläche erstellt mit {bulma}, {mdi}, {vuejs}, {axios} und {others}.",
       "compiled-with": "Compiliert mit Unterstützung von {options}.",
       "library": "Bibliothek",
       "more": "mehr",
-      "name": "Name",
-      "total-playtime": "Gesamte Spielzeit",
-      "tracks": "Tracks",
       "update": "Neu einlesen",
-      "updated-on": "vor {time}",
-      "updated": "Neu eingelesen",
-      "uptime": "Laufzeit",
       "version": "Version {version}"
     },
     "album": {
@@ -463,14 +455,17 @@
     "album": "Album",
     "albums": "Alben",
     "album-artist": "Album-Künstler",
-    "artist": "Album Künstler",
+    "artist": "Künstler",
+    "artists": "Künstler",
     "comment": "Kommentar",
     "composer": "Komponist",
     "duration": "Dauer",
     "genre": "Genre",
     "genres": "Genres",
+    "name": "Name",
     "owner": "Besitzer",
     "path": "Pfad",
+    "playtime": "Spielzeit",
     "popularity": "Popularität / Followers",
     "position": "Disc / Track",
     "quality": "Qualität",
@@ -478,6 +473,8 @@
     "release-date": "Erscheinungsdatum",
     "tracks": "Tracks",
     "type": "Art",
+    "updated": "Neu eingelesen",
+    "uptime": "Laufzeit",
     "year": "Jahr"
   },
   "server": {

web-src/src/i18n/en.json

@@ -125,19 +125,11 @@
   },
   "page": {
     "about": {
-      "albums": "Albums",
-      "artists": "Artists",
       "built-with": "Web interface built with {bulma}, {mdi}, {vuejs}, {axios} and {others}.",
       "compiled-with": "Compiled with support for {options}.",
       "library": "Library",
       "more": "more",
-      "name": "Name",
-      "total-playtime": "Total playtime",
-      "tracks": "Tracks",
       "update": "Update",
-      "updated-on": "{time} ago",
-      "updated": "Updated",
-      "uptime": "Uptime",
       "version": "Version {version}"
     },
     "album": {
@@ -464,13 +456,16 @@
     "albums": "Albums",
     "album-artist": "Album Artist",
     "artist": "Artist",
+    "artists": "Artists",
     "comment": "Comment",
     "composer": "Composer",
     "duration": "Duration",
     "genre": "Genre",
     "genres": "Genres",
+    "name": "Name",
     "owner": "Owner",
     "path": "Path",
+    "playtime": "Playtime",
     "popularity": "Popularity / Followers",
     "position": "Disc / Track",
     "quality": "Quality",
@@ -478,6 +473,8 @@
     "release-date": "Release Date",
     "tracks": "Tracks",
     "type": "Type",
+    "updated": "Updated",
+    "uptime": "Uptime",
     "year": "Year"
   },
   "server": {

web-src/src/i18n/fr.json

@@ -125,19 +125,11 @@
   },
   "page": {
     "about": {
-      "albums": "Albums",
-      "artists": "Artistes",
       "built-with": "Interface utilisateur construite avec {bulma}, {mdi}, {vuejs}, {axios} et {others}.",
       "compiled-with": "Compilé avec les options {options}.",
       "library": "Bibliothèque",
       "more": "plus",
-      "name": "Nom",
-      "total-playtime": "Durée totale de lecture",
-      "tracks": "Pistes",
       "update": "Actualiser",
-      "updated-on": "il y a {time}",
-      "updated": "Mis à jour",
-      "uptime": "Temps de fonctionnement",
       "version": "Version {version}"
     },
     "album": {
@@ -464,13 +456,16 @@
     "albums": "Albums",
     "album-artist": "Artiste de l’album",
     "artist": "Artiste",
+    "artists": "Artistes",
     "comment": "Commentaire",
     "composer": "Compositeur",
     "duration": "Durée",
     "genre": "Genre",
     "genres": "Genres",
+    "name": "Nom",
     "owner": "Propriétaire",
     "path": "Emplacement",
+    "playtime": "Temps de lecture",
     "popularity": "Popularité / Abonnements",
     "position": "Disque / Piste",
     "quality": "Qualité",
@@ -478,6 +473,8 @@
     "release-date": "Date de sortie",
     "tracks": "Pistes",
     "type": "Type",
+    "updated": "Mise à jour",
+    "uptime": "Temps de fonctionnement",
     "year": "Année"
   },
   "server": {

web-src/src/i18n/zh-CN.json

@@ -125,19 +125,11 @@
   },
   "page": {
     "about": {
-      "albums": "专辑",
-      "artists": "艺人",
       "built-with": "界面贡献者包括 {bulma}，{mdi}，{vuejs}，{axios} 和 {others}",
       "compiled-with": "编译支持来自于 {options}",
       "library": "资料库",
       "more": "更多",
-      "name": "名称",
-      "total-playtime": "总播放时长",
-      "tracks": "曲目总数",
       "update": "更新",
-      "updated-on": "{time} 前",
-      "updated": "更新于",
-      "uptime": "运行时长",
       "version": "版本 {version}"
     },
     "album": {
@@ -464,13 +456,16 @@
     "albums": "张专辑",
     "album-artist": "专辑艺人",
     "artist": "专辑艺人",
+    "artists": "艺人",
     "comment": "评论",
     "composer": "作曲家",
     "duration": "时长",
     "genre": "流派",
     "genres": "流派",
+    "name": "名称",
     "owner": "所有者",
     "path": "路径",
+    "playtime": "总播放时长",
     "popularity": "流行度 / 粉丝数",
     "position": "盘符 / 曲目",
     "quality": "质量",
@@ -478,6 +473,8 @@
     "release-date": "发行日期",
     "tracks": "只曲目",
     "type": "类型",
+    "updated": "更新于",
+    "uptime": "运行时长",
     "year": "年份"
   },
   "server": {

web-src/src/i18n/zh-TW.json

@@ -125,19 +125,11 @@
   },
   "page": {
     "about": {
-      "albums": "專輯",
-      "artists": "藝人",
       "built-with": "界面貢獻者包括 {bulma}，{mdi}，{vuejs}，{axios} 和 {others}",
       "compiled-with": "編譯支持來自於 {options}",
       "library": "資料庫",
       "more": "更多",
-      "name": "名稱",
-      "total-playtime": "總播放時長",
-      "tracks": "曲目總數",
       "update": "更新",
-      "updated-on": "{time} 前",
-      "updated": "更新於",
-      "uptime": "運行時長",
       "version": "版本 {version}"
     },
     "album": {
@@ -464,13 +456,16 @@
     "albums": "張專輯",
     "album-artist": "專輯藝人",
     "artist": "專輯藝人",
+    "artists": "藝人",
     "comment": "評論",
     "composer": "作曲家",
     "duration": "時長",
     "genre": "音樂類型",
     "genres": "音樂類型",
+    "name": "名稱",
     "owner": "所有者",
     "path": "路徑",
+    "playtime": "總播放時長",
     "popularity": "流行度 / 粉絲數",
     "position": "盤符 / 曲目",
     "quality": "品質",
@@ -478,6 +473,8 @@
     "release-date": "發行日期",
     "tracks": "曲目",
     "type": "類型",
+    "updated": "更新於",
+    "uptime": "運行時長",
     "year": "年份"
   },
   "server": {

web-src/src/pages/PageAbout.vue

@@ -11,7 +11,7 @@
                 </div>
               </div>
               <div class="level-right">
-                <div v-if="library.updating">
+                <div v-if="libraryStore.updating">
                   <a
                     class="button is-small is-rounded is-loading"
                     v-text="$t('page.about.update')"
@@ -26,83 +26,22 @@
                 </div>
               </div>
             </nav>
-            <div class="media">
+            <div
+              v-for="property in properties"
+              :key="property.label"
+              class="media is-align-items-center mb-0"
+            >
               <div
                 class="media-content has-text-weight-bold"
-                v-text="$t('page.about.name')"
+                v-text="$t(property.label)"
-              />
-              <div class="media-right" v-text="configuration.library_name" />
-            </div>
-            <div class="media">
-              <div
-                class="media-content has-text-weight-bold"
-                v-text="$t('page.about.artists')"
-              />
-              <div
-                class="media-right"
-                v-text="$filters.number(library.artists)"
-              />
-            </div>
-            <div class="media">
-              <div
-                class="media-content has-text-weight-bold"
-                v-text="$t('page.about.albums')"
-              />
-              <div
-                media="media-right"
-                v-text="$filters.number(library.albums)"
-              />
-            </div>
-            <div class="media">
-              <div
-                class="media-content has-text-weight-bold"
-                v-text="$t('page.about.tracks')"
-              />
-              <div
-                class="media-right"
-                v-text="$filters.number(library.songs)"
-              />
-            </div>
-            <div class="media">
-              <div
-                class="media-content has-text-weight-bold"
-                v-text="$t('page.about.total-playtime')"
-              />
-              <div
-                class="media-right"
-                v-text="$filters.durationInDays(library.db_playtime)"
-              />
-            </div>
-            <div class="media">
-              <div
-                class="media-content has-text-weight-bold"
-                v-text="$t('page.about.updated')"
               />
               <div class="media-right">
+                <span v-text="property.value" />
                 <span
-                  v-text="
+                  v-if="property.alternate"
-                    $t('page.about.updated-on', {
-                      time: $filters.timeFromNow(library.updated_at)
-                    })
-                  "
-                />
-                (<span
                   class="has-text-grey"
-                  v-text="$filters.datetime(library.updated_at)"
+                  v-text="` (${property.alternate})`"
-                />)
-              </div>
-            </div>
-            <div class="media">
-              <div
-                class="media-content has-text-weight-bold"
-                v-text="$t('page.about.uptime')"
                 />
-              <div class="media-right">
-                <span v-text="$filters.timeFromNow(library.started_at, true)" />
-                (<span
-                  class="has-text-grey"
-                  v-text="$filters.datetime(library.started_at)"
-                />)
               </div>
             </div>
           </div>
@@ -118,14 +57,16 @@
             <p
               class="is-size-7"
               v-text="
-                $t('page.about.version', { version: configuration.version })
+                $t('page.about.version', {
+                  version: configurationStore.version
+                })
               "
             />
             <p
               class="is-size-7"
               v-text="
                 $t('page.about.compiled-with', {
-                  options: configuration.buildoptions.join(', ')
+                  options: configurationStore.buildoptions.join(', ')
                 })
               "
             />
@@ -170,7 +111,6 @@ import { useUIStore } from '@/stores/ui'
 
 export default {
   name: 'PageAbout',
-
   setup() {
     return {
       configurationStore: useConfigurationStore(),
@@ -178,16 +118,42 @@ export default {
       uiStore: useUIStore()
     }
   },
-
   computed: {
-    configuration() {
+    properties() {
-      return this.configurationStore.$state
+      return [
+        {
+          label: 'property.name',
+          value: this.configurationStore.library_name
         },
-    library() {
+        {
-      return this.libraryStore.$state
+          label: 'property.artists',
+          value: this.$filters.number(this.libraryStore.artists)
+        },
+        {
+          label: 'property.albums',
+          value: this.$filters.number(this.libraryStore.albums)
+        },
+        {
+          label: 'property.tracks',
+          value: this.$filters.number(this.libraryStore.songs)
+        },
+        {
+          label: 'property.playtime',
+          value: this.$filters.durationInDays(this.libraryStore.db_playtime)
+        },
+        {
+          label: 'property.updated',
+          value: this.$filters.timeFromNow(this.libraryStore.updated_at),
+          alternate: this.$filters.datetime(this.libraryStore.updated_at)
+        },
+        {
+          label: 'property.uptime',
+          value: this.$filters.duration(this.libraryStore.started_at),
+          alternate: this.$filters.datetime(this.libraryStore.started_at)
+        }
+      ]
     }
   },
-
   methods: {
     showUpdateDialog() {
       this.uiStore.show_update_dialog = true

web-src/src/stores/configuration.js

@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 export const useConfigurationStore = defineStore('ConfigurationStore', {
   state: () => ({
     buildoptions: [],
+    library_name: '',
     version: '',
     websocket_port: 0,
     allow_modifying_stored_playlists: false,