Support ICU in TS components

2 files changed, 30 insertions, 15 deletions

diff --git a/client/src/app/shared/shared-main/angular/from-now.pipe.ts b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
index d62c1f88e..dc6a25e83 100644
--- a/client/src/app/shared/shared-main/angular/from-now.pipe.ts
+++ b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
@@ -1,37 +1,51 @@
 import { Pipe, PipeTransform } from '@angular/core'
+import { prepareIcu } from '@app/helpers'
 
 // Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
 @Pipe({ name: 'myFromNow' })
 export class FromNowPipe implements PipeTransform {
+  private yearICU = prepareIcu($localize`{interval, plural, =1 {1 year ago} other {{interval} years ago}}`)
+  private monthICU = prepareIcu($localize`{interval, plural, =1 {1 month ago} other {{interval} months ago}}`)
+  private weekICU = prepareIcu($localize`{interval, plural, =1 {1 week ago} other {{interval} weeks ago}}`)
+  private dayICU = prepareIcu($localize`{interval, plural, =1 {1 day ago} other {{interval} days ago}}`)
+  private hourICU = prepareIcu($localize`{interval, plural, =1 {1 hour ago} other {{interval} hours ago}}`)
+
   transform (arg: number | Date | string) {
     const argDate = new Date(arg)
     const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000)
 
     let interval = Math.floor(seconds / 31536000)
-    if (interval > 1) return $localize`${interval} years ago`
-    if (interval === 1) return $localize`1 year ago`
+    if (interval >= 1) {
+      return this.yearICU({ interval }, $localize`${interval} year(s) ago`)
+    }
 
     interval = Math.floor(seconds / 2419200)
     // 12 months = 360 days, but a year ~ 365 days
     // Display "1 year ago" rather than "12 months ago"
     if (interval >= 12) return $localize`1 year ago`
-    if (interval > 1) return $localize`${interval} months ago`
-    if (interval === 1) return $localize`1 month ago`
+
+    if (interval >= 1) {
+      return this.monthICU({ interval }, $localize`${interval} month(s) ago`)
+    }
 
     interval = Math.floor(seconds / 604800)
     // 4 weeks ~ 28 days, but our month is 30 days
     // Display "1 month ago" rather than "4 weeks ago"
     if (interval >= 4) return $localize`1 month ago`
-    if (interval > 1) return $localize`${interval} weeks ago`
-    if (interval === 1) return $localize`1 week ago`
+
+    if (interval >= 1) {
+      return this.weekICU({ interval }, $localize`${interval} week(s) ago`)
+    }
 
     interval = Math.floor(seconds / 86400)
-    if (interval > 1) return $localize`${interval} days ago`
-    if (interval === 1) return $localize`1 day ago`
+    if (interval >= 1) {
+      return this.dayICU({ interval }, $localize`${interval} day(s) ago`)
+    }
 
     interval = Math.floor(seconds / 3600)
-    if (interval > 1) return $localize`${interval} hours ago`
-    if (interval === 1) return $localize`1 hour ago`
+    if (interval >= 1) {
+      return this.hourICU({ interval }, $localize`${interval} hour(s) ago`)
+    }
 
     interval = Math.floor(seconds / 60)
     if (interval >= 1) return $localize`${interval} min ago`
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
index 022bb95ad..2e4ab87d7 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -1,6 +1,6 @@
 import { AuthUser } from '@app/core'
 import { User } from '@app/core/users/user.model'
-import { durationToString, getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers'
+import { durationToString, prepareIcu, getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers'
 import { Actor } from '@app/shared/shared-main/account/actor.model'
 import { buildVideoWatchPath } from '@shared/core-utils'
 import { peertubeTranslate } from '@shared/core-utils/i18n'
@@ -19,6 +19,9 @@ import {
 } from '@shared/models'
 
 export class Video implements VideoServerModel {
+  private static readonly viewsICU = prepareIcu($localize`{views, plural, =0 {No view} =1 {1 view} other {{views} views}}`)
+  private static readonly viewersICU = prepareIcu($localize`{viewers, plural, =0 {No viewers} =1 {1 viewer} other {{viewers} viewers}}`)
+
   byVideoChannel: string
   byAccount: string
 
@@ -269,12 +272,10 @@ export class Video implements VideoServerModel {
   }
 
   getExactNumberOfViews () {
-    if (this.views < 1000) return ''
-
     if (this.isLive) {
-      return $localize`${this.views} viewers`
+      return Video.viewersICU({ viewers: this.viewers }, $localize`${this.viewers} viewer(s)`)
     }
 
-    return $localize`${this.views} views`
+    return Video.viewsICU({ views: this.views }, $localize`{${this.views} view(s)}`)
   }
 }