Support ICU in TS components

5 files changed, 92 insertions, 22 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts b/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts
index 9b55cb43c..96f5b830e 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core'
 import { FormGroup } from '@angular/forms'
+import { prepareIcu } from '@app/helpers'
 
 export type ResolutionOption = {
   id: string
@@ -86,9 +87,10 @@ export class EditConfigurationService {
     return {
       value,
       atMost: noneOnAuto, // auto switches everything to a least estimation since ffmpeg will take as many threads as possible
-      unit: value > 1
-        ? $localize`threads`
-        : $localize`thread`
+      unit: prepareIcu($localize`{value, plural, =1 {thread} other {threads}}`)(
+        { value },
+        $localize`threads`
+      )
     }
   }
 }
diff --git a/client/src/app/+admin/follows/following-list/follow-modal.component.ts b/client/src/app/+admin/follows/following-list/follow-modal.component.ts
index c40b36e10..bac7b2b01 100644
--- a/client/src/app/+admin/follows/following-list/follow-modal.component.ts
+++ b/client/src/app/+admin/follows/following-list/follow-modal.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
+import { prepareIcu } from '@app/helpers'
 import { splitAndGetNotEmpty, UNIQUE_HOSTS_OR_HANDLE_VALIDATOR } from '@app/shared/form-validators/host-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { InstanceFollowService } from '@app/shared/shared-instance'
@@ -60,7 +61,13 @@ export class FollowModalComponent extends FormReactive implements OnInit {
     this.followService.follow(hostsOrHandles)
       .subscribe({
         next: () => {
-          this.notifier.success($localize`Follow request(s) sent!`)
+          this.notifier.success(
+            prepareIcu($localize`{count, plural, =1 {Follow request} other {Follow requests}} sent!`)(
+              { count: hostsOrHandles.length },
+              $localize`Follow request(s) sent!`
+            )
+          )
+
           this.newFollow.emit()
         },
 
diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.ts b/client/src/app/+admin/overview/comments/video-comment-list.component.ts
index f3f43a900..f1b27d846 100644
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.ts
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.ts
@@ -7,6 +7,7 @@ import { DropdownAction } from '@app/shared/shared-main'
 import { BulkService } from '@app/shared/shared-moderation'
 import { VideoCommentAdmin, VideoCommentService } from '@app/shared/shared-video-comment'
 import { FeedFormat, UserRight } from '@shared/models'
+import { prepareIcu } from '@app/helpers'
 
 @Component({
   selector: 'my-video-comment-list',
@@ -145,7 +146,13 @@ export class VideoCommentListComponent extends RestTable implements OnInit {
     this.videoCommentService.deleteVideoComments(commentArgs)
       .subscribe({
         next: () => {
-          this.notifier.success($localize`${commentArgs.length} comments deleted.`)
+          this.notifier.success(
+            prepareIcu($localize`{count, plural, =1 {1 comment} other {{count} comments}} deleted.`)(
+              { count: commentArgs.length },
+              $localize`${commentArgs.length} comment(s) deleted.`
+            )
+          )
+
           this.reloadData()
         },
 
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.ts b/client/src/app/+admin/overview/users/user-list/user-list.component.ts
index 9d11bd02e..f7dc22256 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.ts
@@ -2,7 +2,7 @@ import { SortMeta } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, LocalStorageService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
-import { getAPIHost } from '@app/helpers'
+import { prepareIcu, getAPIHost } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { Actor, DropdownAction } from '@app/shared/shared-main'
 import { AccountMutedStatus, BlocklistService, UserBanModalComponent, UserModerationDisplayType } from '@app/shared/shared-moderation'
@@ -209,13 +209,25 @@ export class UserListComponent extends RestTable implements OnInit {
   }
 
   async unbanUsers (users: User[]) {
-    const res = await this.confirmService.confirm($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`)
+    const res = await this.confirmService.confirm(
+      prepareIcu($localize`Do you really want to unban {count, plural, =1 {1 user} other {{count} users}}?`)(
+        { count: users.length },
+        $localize`Do you really want to unban ${users.length} users?`
+      ),
+      $localize`Unban`
+    )
+
     if (res === false) return
 
     this.userAdminService.unbanUsers(users)
         .subscribe({
           next: () => {
-            this.notifier.success($localize`${users.length} users unbanned.`)
+            this.notifier.success(
+              prepareIcu($localize`{count, plural, =1 {1 user} other {{count} users}} unbanned.`)(
+                { count: users.length },
+                $localize`${users.length} users unbanned.`
+              )
+            )
             this.reloadData()
           },
 
@@ -224,21 +236,28 @@ export class UserListComponent extends RestTable implements OnInit {
   }
 
   async removeUsers (users: User[]) {
-    for (const user of users) {
-      if (user.username === 'root') {
-        this.notifier.error($localize`You cannot delete root.`)
-        return
-      }
+    if (users.some(u => u.username === 'root')) {
+      this.notifier.error($localize`You cannot delete root.`)
+      return
     }
 
-    const message = $localize`If you remove these users, you will not be able to create others with the same username!`
+    const message = $localize`<p>You can't create users or channels with a username that already used by a deleted user/channel.</p>` +
+      $localize`It means the following usernames will be permanently deleted and cannot be recovered:` +
+      '<ul>' + users.map(u => '<li>' + u.username + '</li>').join('') + '</ul>'
+
     const res = await this.confirmService.confirm(message, $localize`Delete`)
     if (res === false) return
 
     this.userAdminService.removeUser(users)
       .subscribe({
         next: () => {
-          this.notifier.success($localize`${users.length} users deleted.`)
+          this.notifier.success(
+            prepareIcu($localize`{count, plural, =1 {1 user} other {{count} users}} deleted.`)(
+              { count: users.length },
+              $localize`${users.length} users deleted.`
+            )
+          )
+
           this.reloadData()
         },
 
@@ -250,7 +269,13 @@ export class UserListComponent extends RestTable implements OnInit {
     this.userAdminService.updateUsers(users, { emailVerified: true })
       .subscribe({
         next: () => {
-          this.notifier.success($localize`${users.length} users email set as verified.`)
+          this.notifier.success(
+            prepareIcu($localize`{count, plural, =1 {1 user} other {{count} users}} email set as verified.`)(
+              { count: users.length },
+              $localize`${users.length} users email set as verified.`
+            )
+          )
+
           this.reloadData()
         },
 
diff --git a/client/src/app/+admin/overview/videos/video-list.component.ts b/client/src/app/+admin/overview/videos/video-list.component.ts
index 82ff372aa..67e52d100 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.ts
+++ b/client/src/app/+admin/overview/videos/video-list.component.ts
@@ -3,6 +3,7 @@ import { finalize } from 'rxjs/operators'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
+import { prepareIcu } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { VideoBlockComponent, VideoBlockService } from '@app/shared/shared-moderation'
@@ -196,14 +197,24 @@ export class VideoListComponent extends RestTable implements OnInit {
   }
 
   private async removeVideos (videos: Video[]) {
-    const message = $localize`Are you sure you want to delete these ${videos.length} videos?`
+    const message = prepareIcu($localize`Are you sure you want to delete {count, plural, =1 {this video} other {these {count} videos}}?`)(
+      { count: videos.length },
+      $localize`Are you sure you want to delete these ${videos.length} videos?`
+    )
+
     const res = await this.confirmService.confirm(message, $localize`Delete`)
     if (res === false) return
 
     this.videoService.removeVideo(videos.map(v => v.id))
       .subscribe({
         next: () => {
-          this.notifier.success($localize`Deleted ${videos.length} videos.`)
+          this.notifier.success(
+            prepareIcu($localize`Deleted {count, plural, =1 {1 video} other {{count} videos}}.`)(
+              { count: videos.length },
+              $localize`Deleted ${videos.length} videos.`
+            )
+          )
+
           this.reloadData()
         },
 
@@ -215,7 +226,13 @@ export class VideoListComponent extends RestTable implements OnInit {
     this.videoBlockService.unblockVideo(videos.map(v => v.id))
       .subscribe({
         next: () => {
-          this.notifier.success($localize`Unblocked ${videos.length} videos.`)
+          this.notifier.success(
+            prepareIcu($localize`Unblocked {count, plural, =1 {1 video} other {{count} videos}}.`)(
+              { count: videos.length },
+              $localize`Unblocked ${videos.length} videos.`
+            )
+          )
+
           this.reloadData()
         },
 
@@ -224,9 +241,21 @@ export class VideoListComponent extends RestTable implements OnInit {
   }
 
   private async removeVideoFiles (videos: Video[], type: 'hls' | 'webtorrent') {
-    const message = type === 'hls'
-      ? $localize`Are you sure you want to delete ${videos.length} HLS streaming playlists?`
-      : $localize`Are you sure you want to delete WebTorrent files of ${videos.length} videos?`
+    let message: string
+
+    if (type === 'hls') {
+      // eslint-disable-next-line max-len
+      message = prepareIcu($localize`Are you sure you want to delete {count, plural, =1 {1 HLS streaming playlist} other {{count} HLS streaming playlists}}?`)(
+        { count: videos.length },
+        $localize`Are you sure you want to delete ${videos.length} HLS streaming playlists?`
+      )
+    } else {
+      // eslint-disable-next-line max-len
+      message = prepareIcu($localize`Are you sure you want to delete WebTorrent files of {count, plural, =1 {1 video} other {{count} videos}}?`)(
+        { count: videos.length },
+        $localize`Are you sure you want to delete WebTorrent files of ${videos.length} videos?`
+      )
+    }
 
     const res = await this.confirmService.confirm(message, $localize`Delete`)
     if (res === false) return