From a35c94cf0332ee614e7aa3808978063a4d2c069a Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 18 Jan 2025 14:24:44 -0600
Subject: [PATCH] Update numbers to use Intl.NumberFormat with selected locale
 #1427

---
 components/home/BookshelfToolbar.vue     | 4 ++--
 components/stats/DailyListeningChart.vue | 8 ++++----
 pages/stats.vue                          | 6 +++---
 plugins/i18n.js                          | 4 ++++
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/components/home/BookshelfToolbar.vue b/components/home/BookshelfToolbar.vue
index ff3cbef7..98cbb86d 100644
--- a/components/home/BookshelfToolbar.vue
+++ b/components/home/BookshelfToolbar.vue
@@ -2,8 +2,8 @@
   <div class="w-full h-9 bg-bg relative z-20">
     <div id="bookshelf-toolbar" class="absolute top-0 left-0 w-full h-full z-20 flex items-center px-2">
       <div class="flex items-center w-full text-sm">
-        <p v-show="!selectedSeriesName" class="pt-1">{{ totalEntities }} {{ entityTitle }}</p>
-        <p v-show="selectedSeriesName" class="ml-2 pt-1">{{ selectedSeriesName }} ({{ totalEntities }})</p>
+        <p v-show="!selectedSeriesName" class="pt-1">{{ $formatNumber(totalEntities) }} {{ entityTitle }}</p>
+        <p v-show="selectedSeriesName" class="ml-2 pt-1">{{ selectedSeriesName }} ({{ $formatNumber(totalEntities) }})</p>
         <div class="flex-grow" />
         <span v-if="page == 'library' || seriesBookPage" class="material-icons px-2" @click="changeView">{{ !bookshelfListView ? 'view_list' : 'grid_view' }}</span>
         <template v-if="page === 'library'">
diff --git a/components/stats/DailyListeningChart.vue b/components/stats/DailyListeningChart.vue
index cb98418c..15bcdd4e 100644
--- a/components/stats/DailyListeningChart.vue
+++ b/components/stats/DailyListeningChart.vue
@@ -33,22 +33,22 @@
     <div class="flex justify-between pt-12">
       <div>
         <p class="text-sm text-center">{{ $strings.LabelStatsWeekListening }}</p>
-        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ totalMinutesListeningThisWeek }}</p>
+        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ $formatNumber(totalMinutesListeningThisWeek) }}</p>
         <p class="text-sm text-center">{{ $strings.LabelStatsMinutes }}</p>
       </div>
       <div>
         <p class="text-sm text-center">{{ $strings.LabelStatsDailyAverage }}</p>
-        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ averageMinutesPerDay }}</p>
+        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ $formatNumber(averageMinutesPerDay) }}</p>
         <p class="text-sm text-center">{{ $strings.LabelStatsMinutes }}</p>
       </div>
       <div>
         <p class="text-sm text-center">{{ $strings.LabelStatsBestDay }}</p>
-        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ mostListenedDay }}</p>
+        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ $formatNumber(mostListenedDay) }}</p>
         <p class="text-sm text-center">{{ $strings.LabelStatsMinutes }}</p>
       </div>
       <div>
         <p class="text-sm text-center">{{ $strings.LabelStatsDays }}</p>
-        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ daysInARow }}</p>
+        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ $formatNumber(daysInARow) }}</p>
         <p class="text-sm text-center">{{ $strings.LabelStatsInARow }}</p>
       </div>
     </div>
diff --git a/pages/stats.vue b/pages/stats.vue
index 5c704b0b..7847707a 100644
--- a/pages/stats.vue
+++ b/pages/stats.vue
@@ -10,21 +10,21 @@
     <div class="flex text-center justify-center">
       <div class="flex p-2">
         <div class="px-3">
-          <p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
+          <p class="text-4xl md:text-5xl font-bold">{{ $formatNumber(userItemsFinished.length) }}</p>
           <p class="text-xs md:text-sm text-fg-muted">{{ $strings.LabelStatsItemsFinished }}</p>
         </div>
       </div>
 
       <div class="flex p-2">
         <div class="px-1">
-          <p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
+          <p class="text-4xl md:text-5xl font-bold">{{ $formatNumber(totalDaysListened) }}</p>
           <p class="text-xs md:text-sm text-fg-muted">{{ $strings.LabelStatsDaysListened }}</p>
         </div>
       </div>
 
       <div class="flex p-2">
         <div class="px-1">
-          <p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
+          <p class="text-4xl md:text-5xl font-bold">{{ $formatNumber(totalMinutesListening) }}</p>
           <p class="text-xs md:text-sm text-fg-muted">{{ $strings.LabelStatsMinutesListening }}</p>
         </div>
       </div>
diff --git a/plugins/i18n.js b/plugins/i18n.js
index 340330cf..72bec370 100644
--- a/plugins/i18n.js
+++ b/plugins/i18n.js
@@ -62,6 +62,10 @@ Vue.prototype.$getString = (key, subs) => {
   return Vue.prototype.$strings[key]
 }
 
+Vue.prototype.$formatNumber = (num) => {
+  return Intl.NumberFormat(Vue.prototype.$languageCodes.current).format(num)
+}
+
 var translations = {
   [defaultCode]: enUsStrings
 }