From bd4836028e1a4b98f5d954bc7e81a4ac264edc84 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Thu, 12 Jan 2023 19:12:44 +0100
Subject: [PATCH 1/2] Add a formatNumber helper and other i18n cleanup

---
 .../ft-list-channel/ft-list-channel.js           | 11 ++++-------
 .../components/ft-list-video/ft-list-video.js    |  8 ++------
 .../components/playlist-info/playlist-info.js    | 10 +++-------
 .../watch-video-info/watch-video-info.js         | 16 ++++++----------
 src/renderer/helpers/utils.js                    |  4 ++++
 src/renderer/views/Channel/Channel.js            |  9 ++-------
 src/renderer/views/Playlist/Playlist.js          |  3 +--
 src/renderer/views/Watch/Watch.js                |  5 +++--
 8 files changed, 25 insertions(+), 41 deletions(-)

diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.js b/src/renderer/components/ft-list-channel/ft-list-channel.js
index 4ea0bec01220..09e33e2fe5b2 100644
--- a/src/renderer/components/ft-list-channel/ft-list-channel.js
+++ b/src/renderer/components/ft-list-channel/ft-list-channel.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
-import i18n from '../../i18n/index'
 import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
+import { formatNumber } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'FtListChannel',
@@ -35,9 +35,6 @@ export default Vue.extend({
     },
     hideChannelSubscriptions: function () {
       return this.$store.getters.getHideChannelSubscriptions
-    },
-    currentLocale: function () {
-      return i18n.locale.replace('_', '-')
     }
   },
   mounted: function () {
@@ -65,7 +62,7 @@ export default Vue.extend({
       if (this.data.videos === null) {
         this.videoCount = 0
       } else {
-        this.videoCount = Intl.NumberFormat(this.currentLocale).format(this.data.videos)
+        this.videoCount = formatNumber(this.data.videos)
       }
 
       if (this.data.handle) {
@@ -86,9 +83,9 @@ export default Vue.extend({
       if (this.hideChannelSubscriptions) {
         this.subscriberCount = null
       } else {
-        this.subscriberCount = Intl.NumberFormat(this.currentLocale).format(this.data.subCount)
+        this.subscriberCount = formatNumber(this.data.subCount)
       }
-      this.videoCount = Intl.NumberFormat(this.currentLocale).format(this.data.videoCount)
+      this.videoCount = formatNumber(this.data.videoCount)
       this.description = this.data.description
     }
   }
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 5f8042769000..be8e5cd3f2ae 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import { mapActions } from 'vuex'
-import i18n from '../../i18n/index'
 import {
   copyToClipboard,
   formatDurationAsTimestamp,
@@ -9,7 +8,7 @@ import {
   showToast,
   toLocalePublicationString,
   toDistractionFreeTitle,
-
+  formatNumber
 } from '../../helpers/utils'
 
 export default Vue.extend({
@@ -282,9 +281,6 @@ export default Vue.extend({
       return this.$store.getters.getSaveWatchedProgress
     },
 
-    currentLocale: function () {
-      return i18n.locale.replace('_', '-')
-    },
     showDistractionFreeTitles: function () {
       return this.$store.getters.getShowDistractionFreeTitles
     },
@@ -406,7 +402,7 @@ export default Vue.extend({
       if (this.hideVideoViews) {
         this.hideViews = true
       } else if (typeof (this.data.viewCount) !== 'undefined' && this.data.viewCount !== null) {
-        this.parsedViewCount = Intl.NumberFormat(this.currentLocale).format(this.data.viewCount)
+        this.parsedViewCount = formatNumber(this.data.viewCount)
       } else if (typeof (this.data.viewCountText) !== 'undefined') {
         this.parsedViewCount = this.data.viewCountText.replace(' views', '')
       } else {
diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js
index a29d96b8ec11..bf421ae1f073 100644
--- a/src/renderer/components/playlist-info/playlist-info.js
+++ b/src/renderer/components/playlist-info/playlist-info.js
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import FtListDropdown from '../ft-list-dropdown/ft-list-dropdown.vue'
-import i18n from '../../i18n/index'
-import { copyToClipboard, openExternalLink } from '../../helpers/utils'
+import { copyToClipboard, formatNumber, openExternalLink } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'PlaylistInfo',
@@ -76,9 +75,6 @@ export default Vue.extend({
         default:
           return `https://i.ytimg.com/vi/${this.firstVideoId}/mqdefault.jpg`
       }
-    },
-    currentLocale: function () {
-      return i18n.locale.replace('_', '-')
     }
   },
   mounted: function () {
@@ -94,11 +90,11 @@ export default Vue.extend({
 
     // Causes errors if not put inside of a check
     if (typeof (this.data.viewCount) !== 'undefined' && !isNaN(this.data.viewCount)) {
-      this.viewCount = this.hideViews ? null : Intl.NumberFormat(this.currentLocale).format(this.data.viewCount)
+      this.viewCount = this.hideViews ? null : formatNumber(this.data.viewCount)
     }
 
     if (typeof (this.data.videoCount) !== 'undefined' && !isNaN(this.data.videoCount)) {
-      this.videoCount = Intl.NumberFormat(this.currentLocale).format(this.data.videoCount)
+      this.videoCount = formatNumber(this.data.videoCount)
     }
 
     this.lastUpdated = this.data.lastUpdated
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index a1c10f4f16f7..44ac81aa82ab 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -5,8 +5,7 @@ import FtButton from '../ft-button/ft-button.vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import FtShareButton from '../ft-share-button/ft-share-button.vue'
 import { MAIN_PROFILE_ID } from '../../../constants'
-import i18n from '../../i18n/index'
-import { openExternalLink, showToast } from '../../helpers/utils'
+import { formatNumber, openExternalLink, showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'WatchVideoInfo',
@@ -133,7 +132,7 @@ export default Vue.extend({
     },
 
     currentLocale: function () {
-      return i18n.locale.replace('_', '-')
+      return this.$i18n.locale.replace('_', '-')
     },
 
     profileList: function () {
@@ -215,8 +214,7 @@ export default Vue.extend({
         return null
       }
 
-      const locale = this.currentLocale.replace('_', '-')
-      return this.likeCount.toLocaleString([locale, 'en'])
+      return formatNumber(this.likeCount)
     },
 
     parsedDislikeCount: function () {
@@ -224,8 +222,7 @@ export default Vue.extend({
         return null
       }
 
-      const locale = this.currentLocale.replace('_', '-')
-      return this.dislikeCount.toLocaleString([locale, 'en'])
+      return formatNumber(this.dislikeCount)
     },
 
     likePercentageRatio: function () {
@@ -236,7 +233,7 @@ export default Vue.extend({
       if (this.hideVideoViews) {
         return null
       }
-      return Intl.NumberFormat(this.currentLocale).format(this.viewCount) + ` ${this.$t('Video.Views').toLowerCase()}`
+      return formatNumber(this.viewCount) + ` ${this.$t('Video.Views').toLowerCase()}`
     },
 
     isSubscribed: function () {
@@ -261,8 +258,7 @@ export default Vue.extend({
 
     dateString() {
       const date = new Date(this.published)
-      const locale = this.currentLocale.replace('_', '-')
-      const localeDateString = new Intl.DateTimeFormat([locale, 'en'], { dateStyle: 'medium' }).format(date)
+      const localeDateString = new Intl.DateTimeFormat([this.currentLocale, 'en'], { dateStyle: 'medium' }).format(date)
       // replace spaces with no break spaces to make the date act as a single entity while wrapping
       return `${localeDateString}`.replaceAll(' ', '\u00A0')
     },
diff --git a/src/renderer/helpers/utils.js b/src/renderer/helpers/utils.js
index e759cf3ce85f..506389761a28 100644
--- a/src/renderer/helpers/utils.js
+++ b/src/renderer/helpers/utils.js
@@ -606,3 +606,7 @@ export function toDistractionFreeTitle(title, minUpperCase = 3) {
   const reg = RegExp(`[\\p{Lu}|']{${minUpperCase},}`, 'ug')
   return title.replace(reg, x => capitalizedWord(x.toLowerCase()))
 }
+
+export function formatNumber(number, options = undefined) {
+  return Intl.NumberFormat([i18n.locale.replace('_', '-'), 'en'], options).format(number)
+}
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index f5a668f76baa..c45a4555e581 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -14,8 +14,7 @@ import FtShareButton from '../../components/ft-share-button/ft-share-button.vue'
 import ytch from 'yt-channel-info'
 import autolinker from 'autolinker'
 import { MAIN_PROFILE_ID } from '../../../constants'
-import i18n from '../../i18n/index'
-import { copyToClipboard, showToast } from '../../helpers/utils'
+import { copyToClipboard, formatNumber, showToast } from '../../helpers/utils'
 import packageDetails from '../../../../package.json'
 import { invidiousAPICall, invidiousGetChannelInfo, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
@@ -143,15 +142,11 @@ export default Vue.extend({
       ]
     },
 
-    currentLocale: function () {
-      return i18n.locale.replace('_', '-')
-    },
-
     formattedSubCount: function () {
       if (this.hideChannelSubscriptions) {
         return null
       }
-      return Intl.NumberFormat(this.currentLocale).format(this.subCount)
+      return formatNumber(this.subCount)
     },
 
     showFetchMoreButton: function () {
diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js
index f1ef1662a482..bba96d2ca109 100644
--- a/src/renderer/views/Playlist/Playlist.js
+++ b/src/renderer/views/Playlist/Playlist.js
@@ -6,7 +6,6 @@ import PlaylistInfo from '../../components/playlist-info/playlist-info.vue'
 import FtListVideoLazy from '../../components/ft-list-video-lazy/ft-list-video-lazy.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
-import i18n from '../../i18n/index'
 import { getLocalPlaylist, parseLocalPlaylistVideo } from '../../helpers/api/local'
 import { extractNumberFromString } from '../../helpers/utils'
 import { invidiousGetPlaylistInfo, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
@@ -55,7 +54,7 @@ export default Vue.extend({
       return this.$store.getters.getCurrentInvidiousInstance
     },
     currentLocale: function () {
-      return i18n.locale.replace('_', '-')
+      return this.$i18n.locale.replace('_', '-')
     }
   },
   watch: {
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 395c7da5c93b..b0ae035af971 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -17,6 +17,7 @@ import {
   copyToClipboard,
   extractNumberFromString,
   formatDurationAsTimestamp,
+  formatNumber,
   getFormatsFromHLSManifest,
   getUserDataPath,
   showToast
@@ -371,9 +372,9 @@ export default Vue.extend({
 
           if (!isNaN(subCount)) {
             if (subCount >= 10000) {
-              this.channelSubscriptionCountText = Intl.NumberFormat([this.currentLocale, 'en'], { notation: 'compact' }).format(subCount)
+              this.channelSubscriptionCountText = formatNumber(subCount, { notation: 'compact' })
             } else {
-              this.channelSubscriptionCountText = Intl.NumberFormat([this.currentLocale, 'en']).format(subCount)
+              this.channelSubscriptionCountText = formatNumber(subCount)
             }
           } else {
             this.channelSubscriptionCountText = ''

From f1b8b7a7cc2621e845dab682d6c51f7529c71043 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Fri, 13 Jan 2023 20:24:27 +0100
Subject: [PATCH 2/2] Fix import order

---
 src/renderer/components/ft-list-video/ft-list-video.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index be8e5cd3f2ae..40b12e9ba1d3 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -4,11 +4,11 @@ import { mapActions } from 'vuex'
 import {
   copyToClipboard,
   formatDurationAsTimestamp,
+  formatNumber,
   openExternalLink,
   showToast,
   toLocalePublicationString,
-  toDistractionFreeTitle,
-  formatNumber
+  toDistractionFreeTitle
 } from '../../helpers/utils'
 
 export default Vue.extend({