update: i18n

localize video views and upload time translation

_locales/cmn-SC.yml

@@ -2,6 +2,15 @@ common:
   view_all: 查看更多
   loading: 加载中...
   undo: 还原
+  view: 次
+  ago: 前
+  year: 年
+  month: 个月
+  week: 个星期
+  day: 天
+  hour: 小时
+  minute: 分钟
+  second: 秒
 
 auth:
   err_tip: Failed to grant Access Key

_locales/cmn-TC.yml

@@ -2,6 +2,15 @@ common:
   view_all: 檢視所有
   loading: 載入中...
   undo: 復原
+  view: 次
+  ago: 前
+  year: 年
+  month: 個月
+  week: 個禮拜
+  day: 天
+  hour: 小時
+  minute: 分鐘
+  second: 秒
 
 topbar:
   sign_in: 登入

_locales/en.yml

@@ -2,6 +2,15 @@ common:
   view_all: View ALL
   loading: Loading...
   undo: UNDO
+  view: no view | view | views
+  ago: ago
+  year: year | years
+  month: month | momths
+  week: week | weeks
+  day: day | days
+  hour: hour | hours
+  minute: minute | minutes
+  second: second | seconds
 
 auth:
   err_tip: Failed to grant Access Key

_locales/jyut.yml

@@ -2,6 +2,15 @@ common:
   view_all: 睇晒佢哋
   loading: 撈緊...
   undo: 整返
+  view: 次
+  ago: 前
+  year: 年
+  month: 個月
+  week: 個禮拜
+  day: 日
+  hour: 個鐘頭
+  minute: 分鐘
+  second: 秒
 
 auth:
   err_tip: Failed to grant Access Key

src/components/Topbar/MomentsDropdown.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { isNewArticle, isNewVideo, setLastestOffsetID } from './notify'
+import { language } from '~/logic'
 import { getUserID, calcTimeSince } from '~/utils'
-import { MomentItem, MomentType } from '~/types'
+import { MomentItem, MomentType, LanguageType } from '~/types'
 
 export default defineComponent({
   data() {
@@ -31,6 +32,8 @@ export default defineComponent({
       // when noMoreContent is true, the user can't scroll down to load more content
       noMoreContent: false,
       livePage: 1,
+      LanguageType,
+      language,
     }
   },
   watch: {
@@ -333,7 +336,8 @@ export default defineComponent({
               <span>{{ moment.name }}</span> {{ $t('topbar.moments_dropdown.uploaded') }}{{ moment.title }}
               <div v-if="moment.type !== MomentType.Bangumi" text="$bew-text-2 sm" m="y-2">
                 <!-- Videos and articles -->
-                <div v-if="selectedTab === 0 || selectedTab === 2">{{ calcTimeSince(new Date(moment.ctime * 1000)) }} ago
+                <div v-if="selectedTab === 0 || selectedTab === 2">
+                  {{ calcTimeSince(new Date(moment.ctime * 1000)) }}{{ language === LanguageType.English ? ' ' + $t('common.ago') : $t('common.ago') }}
                 </div>
                 <!-- Live -->
                 <div v-else-if="selectedTab === 1" text="$bew-theme-color" font="bold" flex="~" items="center">

src/contentScripts/views/Home/RecommendContent.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
-import { accessKey } from '~/logic/index'
+import { accessKey, language } from '~/logic/index'
 import { numFormatter, calcTimeSince, calcCurrentTime } from '~/utils'
+import { LanguageType } from '~/types'
 
 export default defineComponent({
   data() {
@@ -12,6 +13,8 @@ export default defineComponent({
       calcCurrentTime,
       MAX_LIMIT: 150 as const,
       accessKey,
+      LanguageType,
+      language,
     }
   },
   mounted() {
@@ -262,9 +265,13 @@ export default defineComponent({
                 {{ video.name }}
               </div>
               <div class="video-info">
-                {{ numFormatter(video.play) }} views
+                {{ numFormatter(video.play) }}{{ language === LanguageType.English ?
+                  ' ' + $t('common.view', video.play) :
+                  $t('common.view', video.play) }}
                 <span class="text-xs font-light">•</span>
-                {{ calcTimeSince(new Date(video.ctime * 1000)) }} ago
+                {{ calcTimeSince(new Date(video.ctime * 1000)) }}{{ language === LanguageType.English ?
+                  ' ' + $t('common.ago') :
+                  $t('common.ago') }}
               </div>
             </div>
           </div>

src/types/index.ts

@@ -1 +1,8 @@
 export * from './topbar/moments'
+
+export enum LanguageType {
+  English = 'en',
+  Mandarin_SC = 'cmn-SC',
+  Mandarin_TC = 'cmn-TC',
+  Cantonese = 'jyut',
+}

src/utils/dataFormatter.ts

@@ -1,14 +1,34 @@
+import { language } from '~/logic'
+import { i18n } from '~/utils'
+export const { t } = i18n.global
+
 export const numFormatter = (num: number) => {
   const digits = 1 // specify number of digits after decimal
-  const lookup = [
-    { value: 1, symbol: '' },
-    { value: 1e3, symbol: 'K' },
-    { value: 1e6, symbol: 'M' },
-    { value: 1e9, symbol: 'G' },
-    { value: 1e12, symbol: 'T' },
-    { value: 1e15, symbol: 'P' },
-    { value: 1e18, symbol: 'E' },
-  ]
+  let lookup
+  if (language.value === 'en') {
+    lookup = [
+      { value: 1, symbol: '' },
+      { value: 1e3, symbol: 'K' },
+      { value: 1e6, symbol: 'M' },
+      { value: 1e9, symbol: 'B' },
+    ]
+  }
+  else if (language.value === 'cmn-SC') {
+    lookup = [
+      { value: 1, symbol: ' ' },
+      { value: 1e4, symbol: ' 万' },
+      { value: 1e7, symbol: ' 千万' },
+      { value: 1e8, symbol: ' 亿' },
+    ]
+  }
+  else {
+    lookup = [
+      { value: 1, symbol: ' ' },
+      { value: 1e4, symbol: ' 萬' },
+      { value: 1e7, symbol: ' 千萬' },
+      { value: 1e8, symbol: ' 億' },
+    ]
+  }
   const rx = /\.0+$|(\.[0-9]*[1-9])0+$/
   const item = lookup.slice().reverse().find((item) => {
     return num >= item.value
@@ -20,23 +40,23 @@ export const calcTimeSince = (date: any) => {
   const seconds = Math.floor(((new Date() as any) - date) / 1000)
   let interval = seconds / 31536000
   if (interval > 1)
-    return `${Math.floor(interval) > 1 ? `${Math.floor(interval)} years` : `${Math.floor(interval)} year`}`
+    return `${Math.floor(interval)} ${t('common.year', Math.floor(interval))}`
   interval = seconds / 2592000
   if (interval > 1)
-    return `${Math.floor(interval) > 1 ? `${Math.floor(interval)} months` : `${Math.floor(interval)} month`}`
+    return `${Math.floor(interval)} ${t('common.month', Math.floor(interval))}`
   interval = seconds / 604800
   if (interval > 1)
-    return `${Math.floor(interval) > 1 ? `${Math.floor(interval)} weeks` : `${Math.floor(interval)} week`}`
+    return `${Math.floor(interval)} ${t('common.week', Math.floor(interval))}`
   interval = seconds / 86400
   if (interval > 1)
-    return `${Math.floor(interval) > 1 ? `${Math.floor(interval)} days` : `${Math.floor(interval)} day`}`
+    return `${Math.floor(interval)} ${t('common.day', Math.floor(interval))}`
   interval = seconds / 3600
   if (interval > 1)
-    return `${Math.floor(interval) > 1 ? `${Math.floor(interval)} hours` : `${Math.floor(interval)} hour`}`
+    return `${Math.floor(interval)} ${t('common.hour', Math.floor(interval))}`
   interval = seconds / 60
   if (interval > 1)
-    return `${Math.floor(interval) > 1 ? `${Math.floor(interval)} minutes` : `${Math.floor(interval)} minute`}`
-  return `${Math.floor(seconds) > 1 ? `${Math.floor(seconds)} seconds` : `${Math.floor(seconds)} second`}`
+    return `${Math.floor(interval)} ${t('common.minute', Math.floor(interval))}`
+  return `${Math.floor(interval)} ${t('common.second', Math.floor(interval))}`
 }
 
 export const calcCurrentTime = (totalSeconds: number) => {