Properly localize numbers (#2557)

* localize numbers properly

* Remove tostring

Co-authored-by: Aiz <66974576+Aiz0@users.noreply.github.com>

Co-authored-by: Aiz <66974576+Aiz0@users.noreply.github.com>

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

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import i18n from '../../i18n/index'
 
 export default Vue.extend({
   name: 'FtListChannel',
@@ -32,6 +33,9 @@ export default Vue.extend({
     },
     hideChannelSubscriptions: function () {
       return this.$store.getters.getHideChannelSubscriptions
+    },
+    currentLocale: function () {
+      return i18n.locale.replace('_', '-')
     }
   },
   mounted: function () {
@@ -59,7 +63,7 @@ export default Vue.extend({
       if (this.data.videos === null) {
         this.videoCount = 0
       } else {
-        this.videoCount = this.data.videos.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+        this.videoCount = Intl.NumberFormat(this.currentLocale).format(this.data.videos)
       }
 
       this.description = this.data.descriptionShort
@@ -81,9 +85,9 @@ export default Vue.extend({
       if (this.hideChannelSubscriptions) {
         this.subscriberCount = null
       } else {
-        this.subscriberCount = this.data.subCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+        this.subscriberCount = Intl.NumberFormat(this.currentLocale).format(this.data.subCount)
       }
-      this.videoCount = this.data.videoCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      this.videoCount = Intl.NumberFormat(this.currentLocale).format(this.data.videoCount)
       this.description = this.data.description
     }
   }

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

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import { mapActions } from 'vuex'
+import i18n from '../../i18n/index'
 
 export default Vue.extend({
   name: 'FtListVideo',
@@ -249,6 +250,10 @@ export default Vue.extend({
 
     saveWatchedProgress: function () {
       return this.$store.getters.getSaveWatchedProgress
+    },
+
+    currentLocale: function () {
+      return i18n.locale.replace('_', '-')
     }
   },
   mounted: function () {
@@ -424,7 +429,7 @@ export default Vue.extend({
       if (this.hideVideoViews) {
         this.hideViews = true
       } else if (typeof (this.data.viewCount) !== 'undefined' && this.data.viewCount !== null) {
-        this.parsedViewCount = this.data.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+        this.parsedViewCount = Intl.NumberFormat(this.currentLocale).format(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,6 +1,7 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
 import FtListDropdown from '../ft-list-dropdown/ft-list-dropdown.vue'
+import i18n from '../../i18n/index'
 
 export default Vue.extend({
   name: 'PlaylistInfo',
@@ -75,6 +76,9 @@ export default Vue.extend({
         default:
           return `https://i.ytimg.com/vi/${this.firstVideoId}/mqdefault.jpg`
       }
+    },
+    currentLocale: function () {
+      return i18n.locale.replace('_', '-')
     }
   },
   mounted: function () {
@@ -91,11 +95,11 @@ export default Vue.extend({
 
     // Causes errors if not put inside of a check
     if (typeof (this.data.viewCount) !== 'undefined') {
-      this.viewCount = this.hideViews ? null : this.data.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      this.viewCount = this.hideViews ? null : Intl.NumberFormat(this.currentLocale).format(this.data.viewCount)
     }
 
     if (typeof (this.data.videoCount) !== 'undefined') {
-      this.videoCount = this.data.videoCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      this.videoCount = Intl.NumberFormat(this.currentLocale).format(this.data.videoCount)
     }
 
     this.lastUpdated = this.data.lastUpdated

src/renderer/components/watch-video-info/watch-video-info.js

@@ -7,6 +7,7 @@ import FtFlexBox from '../ft-flex-box/ft-flex-box.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'
 
 export default Vue.extend({
   name: 'WatchVideoInfo',
@@ -135,7 +136,7 @@ export default Vue.extend({
     },
 
     currentLocale: function () {
-      return this.$store.getters.getCurrentLocale
+      return i18n.locale.replace('_', '-')
     },
 
     profileList: function () {
@@ -238,7 +239,7 @@ export default Vue.extend({
       if (this.hideVideoViews) {
         return null
       }
-      return this.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ` ${this.$t('Video.Views').toLowerCase()}`
+      return Intl.NumberFormat(this.currentLocale).format(this.viewCount) + ` ${this.$t('Video.Views').toLowerCase()}`
     },
 
     isSubscribed: function () {

src/renderer/views/Channel/Channel.js

@@ -13,6 +13,7 @@ import FtAgeRestricted from '../../components/ft-age-restricted/ft-age-restricte
 import ytch from 'yt-channel-info'
 import autolinker from 'autolinker'
 import { MAIN_PROFILE_ID } from '../../../constants'
+import i18n from '../../i18n/index'
 
 export default Vue.extend({
   name: 'Search',
@@ -132,11 +133,15 @@ export default Vue.extend({
       ]
     },
 
+    currentLocale: function () {
+      return i18n.locale.replace('_', '-')
+    },
+
     formattedSubCount: function () {
       if (this.hideChannelSubscriptions) {
         return null
       }
-      return this.subCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      return Intl.NumberFormat(this.currentLocale).format(this.subCount)
     },
 
     showFetchMoreButton: function () {

src/renderer/views/Watch/Watch.js

@@ -14,6 +14,7 @@ import WatchVideoLiveChat from '../../components/watch-video-live-chat/watch-vid
 import WatchVideoPlaylist from '../../components/watch-video-playlist/watch-video-playlist.vue'
 import WatchVideoRecommendations from '../../components/watch-video-recommendations/watch-video-recommendations.vue'
 import FtAgeRestricted from '../../components/ft-age-restricted/ft-age-restricted.vue'
+import i18n from '../../i18n/index'
 
 export default Vue.extend({
   name: 'Watch',
@@ -160,6 +161,9 @@ export default Vue.extend({
     },
     theatrePossible: function () {
       return !this.hideRecommendedVideos || (!this.hideLiveChat && this.isLive) || this.watchingPlaylist
+    },
+    currentLocale: function () {
+      return i18n.locale.replace('_', '-')
     }
   },
   watch: {
@@ -354,7 +358,7 @@ export default Vue.extend({
             } else if (subCount >= 10000) {
               this.channelSubscriptionCountText = `${subCount / 1000}K`
             } else {
-              this.channelSubscriptionCountText = subCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+              this.channelSubscriptionCountText = Intl.NumberFormat(this.currentLocale).format(subCount)
             }
           }