Add a formatNumber helper and other i18n cleanup (#3055)

* Add a formatNumber helper and other i18n cleanup

* Fix import order

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
     }
   }

src/renderer/components/ft-list-video/ft-list-video.js

@@ -1,15 +1,14 @@
 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,
+  formatNumber,
   openExternalLink,
   showToast,
   toLocalePublicationString,
-  toDistractionFreeTitle,
-
+  toDistractionFreeTitle
 } 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 {

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

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')
     },

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)
+}

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 () {

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: {

src/renderer/views/Watch/Watch.js

@@ -17,6 +17,7 @@ import {
   copyToClipboard,
   extractNumberFromString,
   formatDurationAsTimestamp,
+  formatNumber,
   getFormatsFromHLSManifest,
   getUserDataPath,
   showToast
@@ -372,9 +373,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 = ''