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 4ea0bec01220d..09e33e2fe5b27 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 5f80427690003..40b12e9ba1d3d 100644 --- a/src/renderer/components/ft-list-video/ft-list-video.js +++ b/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 { diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js index a29d96b8ec111..bf421ae1f0736 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 a1c10f4f16f77..44ac81aa82ab6 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 e759cf3ce85f9..506389761a28a 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 f5a668f76baa5..c45a4555e581e 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 f1ef1662a4821..bba96d2ca109b 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 395c7da5c93bd..b0ae035af9710 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 = ''