15 files changed, 37 insertions, 28 deletions

diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index 89327b065..aa51764be 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -1,7 +1,7 @@
 <h1>
   <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
   <ng-container i18n>My channels</ng-container>
-  <span class="badge badge-secondary">{{ totalItems }}</span>
+  <span *ngIf="totalItems" class="pt-badge badge-secondary">{{ totalItems }}</span>
 </h1>
 
 <my-channels-setup-message [hideLink]="true"></my-channels-setup-message>
@@ -31,11 +31,13 @@
         i18n class="video-channel-followers"
         [routerLink]="[ '/my-library', 'followers' ]" [queryParams]="{ search: 'channel:' + videoChannel.name }"
       >
-        {videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
+        {videoChannel.followersCount, plural, =0 {No subscribers} =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
       </a>
 
       <div i18n class="video-channel-videos">{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</div>
 
+      <div i18n class="video-channel-views">{videoChannel.totalViews, plural, =0 {No views} =1 {1 view} other {{{ videoChannel.totalViews }} views}}</div>
+
       <div class="video-channel-buttons">
         <my-edit-button label [routerLink]="[ '/manage/update', videoChannel.nameWithHost ]"></my-edit-button>
         <my-delete-button label (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html
index a8a3da863..2827f8c41 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.html
+++ b/client/src/app/+my-library/my-follows/my-followers.component.html
@@ -2,7 +2,7 @@
   <span>
     <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My followers</ng-container>
-    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+    <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
   </span>
 </h1>
 
diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.html b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
index 391c4d3be..11d460b19 100644
--- a/client/src/app/+my-library/my-follows/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
@@ -2,7 +2,7 @@
   <span>
     <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My subscriptions</ng-container>
-    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+    <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
   </span>
 </h1>
 
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index 14bf01804..76367c029 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -1,6 +1,7 @@
 <h1>
   <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My watch history</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
+  <ng-container i18n>My watch history</ng-container>
+  <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
 </h1>
 
 <div class="top-buttons">
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts
index f6b712908..766869637 100644
--- a/client/src/app/+my-library/my-history/my-history.component.ts
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@@ -93,8 +93,8 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
       .subscribe({
         next: () => {
           const message = this.videosHistoryEnabled === true
-            ? $localize`Videos history is enabled`
-            : $localize`Videos history is disabled`
+            ? $localize`Video history is enabled`
+            : $localize`Video history is disabled`
 
           this.notifier.success(message)
 
@@ -117,8 +117,8 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
   }
 
   async clearAllHistory () {
-    const title = $localize`Delete videos history`
-    const message = $localize`Are you sure you want to delete all your videos history?`
+    const title = $localize`Delete video history`
+    const message = $localize`Are you sure you want to delete all your video history?`
 
     const res = await this.confirmService.confirm(message, title)
     if (res !== true) return
@@ -126,7 +126,7 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
     this.userHistoryService.clearAll()
         .subscribe({
           next: () => {
-            this.notifier.success($localize`Videos history deleted`)
+            this.notifier.success($localize`Video history deleted`)
 
             this.reloadData()
           },
diff --git a/client/src/app/+my-library/my-library.component.html b/client/src/app/+my-library/my-library.component.html
index b465d0156..1c44c8472 100644
--- a/client/src/app/+my-library/my-library.component.html
+++ b/client/src/app/+my-library/my-library.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="root">
   <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
 
   <div class="margin-content pb-5" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
diff --git a/client/src/app/+my-library/my-library.component.scss b/client/src/app/+my-library/my-library.component.scss
index 1ec25315a..6275b7ac2 100644
--- a/client/src/app/+my-library/my-library.component.scss
+++ b/client/src/app/+my-library/my-library.component.scss
@@ -1,7 +1,7 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.row {
+.root {
   @include sub-menu-h1;
 
   flex-direction: column;
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html
index c29c71c0a..01470e46f 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html
@@ -65,7 +65,7 @@
       <td>{{ videoChangeOwnership.createdAt | date: 'short' }}</td>
 
       <td>
-        <span class="badge"
+        <span class="pt-badge"
           [ngClass]="getStatusClass(videoChangeOwnership.status)">{{ videoChangeOwnership.status }}</span>
       </td>
     </tr>
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
index 1525d0bd1..79fb4da26 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
@@ -50,7 +50,7 @@
       </td>
 
       <td>
-        <span class="badge" [ngClass]="getVideoImportStateClass(videoImport.state.id)">
+        <span class="pt-badge" [ngClass]="getVideoImportStateClass(videoImport.state.id)">
           {{ videoImport.state.label }}
         </span>
       </td>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
index c39e90a1e..35682cf81 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
@@ -20,13 +20,13 @@
 
 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
 
-  <div class="form-row"> <!-- playlist grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row"> <!-- playlist grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div *ngIf="isCreation()" class="video-playlist-title" i18n>NEW PLAYLIST</div>
       <div *ngIf="!isCreation() && videoPlaylistToUpdate" class="video-playlist-title" i18n>PLAYLIST</div>
     </div>
 
-    <div class="form-group col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <div class="col-md-12 col-xl-6">
         <div class="form-group">
@@ -88,7 +88,7 @@
         </div>
       </div>
 
-      <div class="form-row"> <!-- submit placement block -->
+      <div class="row"> <!-- submit placement block -->
         <div class="col-md-7 col-xl-5"></div>
         <div class="col-md-5 col-xl-5 d-inline-flex">
           <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
index 25b742bff..0091f70be 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
@@ -1,6 +1,7 @@
 <h1>
   <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
+  <ng-container i18n>My playlists</ng-container>
+  <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
 </h1>
 
 <my-channels-setup-message></my-channels-setup-message>
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
index 955fd4884..56ff0e788 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
@@ -17,7 +17,7 @@
   </div>
 
   <div class="modal-footer">
-    <div class="form-group inputs">
+    <div class="inputs">
       <input
         type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
         (click)="dismiss()" (key.enter)="dismiss()"
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
index 0eb694162..48c073192 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
@@ -4,7 +4,3 @@
 p-autocomplete {
   display: block;
 }
-
-.form-group {
-  margin: 20px 0;
-}
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index 7f12e2c71..146dcf41e 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -2,7 +2,7 @@
   <span>
     <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My videos</ng-container>
-    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+    <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
   </span>
 
   <div>
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index 91cc06702..2f1eb84ba 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -4,7 +4,7 @@ import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core'
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
-import { immutableAssign } from '@app/helpers'
+import { prepareIcu, immutableAssign } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
@@ -167,7 +167,10 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
                                     .map(k => parseInt(k, 10))
 
     const res = await this.confirmService.confirm(
-      $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`,
+      prepareIcu($localize`Do you really want to delete {length, plural, =1 {this video} other {{length} videos}}?`)(
+        { length: toDeleteVideosIds.length },
+        $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`
+      ),
       $localize`Delete`
     )
     if (res === false) return
@@ -184,7 +187,13 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
       .pipe(toArray())
       .subscribe({
         next: () => {
-          this.notifier.success($localize`${toDeleteVideosIds.length} videos deleted.`)
+          this.notifier.success(
+            prepareIcu($localize`{length, plural, =1 {Video has been deleted} other {{length} videos have been deleted}}`)(
+              { length: toDeleteVideosIds.length },
+              $localize`${toDeleteVideosIds.length} have been deleted.`
+            )
+          )
+
           this.selection = {}
         },