17 files changed, 60 insertions, 23 deletions

diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts
index 99ce5804b..0b3511e8e 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@@ -4,10 +4,10 @@ import { USER_ROLE_LABELS, VideoResolution } from '../../../../../../shared'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 
 export abstract class UserEdit extends FormReactive {
-
   videoQuotaOptions: { value: string, label: string }[] = []
   videoQuotaDailyOptions: { value: string, label: string }[] = []
   roles = Object.keys(USER_ROLE_LABELS).map(key => ({ value: key.toString(), label: USER_ROLE_LABELS[key] }))
+  username: string
 
   protected abstract serverService: ServerService
   protected abstract configService: ConfigService
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index eb8d30e17..5684004a5 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -86,4 +86,4 @@
   </ng-template>
 </p-table>
 
-<my-user-ban-modal #userBanModal (userBanned)="onUsersBanned()"></my-user-ban-modal>
+<my-user-ban-modal #userBanModal (userBanned)="onUserChanged()"></my-user-ban-modal>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index 3859af9ff..31e783622 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -66,7 +66,7 @@ export class UserListComponent extends RestTable implements OnInit {
     this.userBanModal.openModal(users)
   }
 
-  onUsersBanned () {
+  onUserChanged () {
     this.loadData()
   }
 
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts
index ccdd9a3dc..4dc65dd99 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts
@@ -4,7 +4,11 @@ import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 export abstract class MyAccountVideoChannelEdit extends FormReactive {
   // We need it even in the create component because it's used in the edit template
   videoChannelToUpdate: VideoChannel
+  instanceHost: string
 
   abstract isCreation (): boolean
   abstract getFormButtonTitle (): string
+
+  // FIXME: We need this method so angular does not complain in the child template
+  onAvatarChange (formData: FormData) { /* empty */ }
 }
diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
index 800d97b7f..1f0744fb1 100644
--- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
+++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
@@ -25,7 +25,7 @@ import { ScreenService } from '@app/shared/misc/screen.service'
 export class VideoChannelVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
   titlePage: string
   marginContent = false // Disable margin
-  currentRoute = '/video-channel/videos'
+  currentRoute = '/video-channels/videos'
   loadOnInit = false
 
   private videoChannel: VideoChannel
@@ -55,7 +55,7 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
     this.videoChannelSub = this.videoChannelService.videoChannelLoaded
       .subscribe(videoChannel => {
         this.videoChannel = videoChannel
-        this.currentRoute = '/video-channel/' + this.videoChannel.uuid + '/videos'
+        this.currentRoute = '/video-channels/' + this.videoChannel.uuid + '/videos'
 
         this.reloadVideos()
         this.generateSyndicationList()
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index bd03c338a..2f9820665 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -50,7 +50,7 @@
   .icon.icon-upload {
     @include icon(22px);
 
-    background-image: url('../../assets/images/header/upload.svg');
+    background-image: url('../../assets/images/header/upload-white.svg');
     height: 24px;
     vertical-align: middle;
     margin-right: 6px;
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index a842765ba..b271ebfd2 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -131,10 +131,14 @@ menu {
       transition: background-color .1s ease-in-out;
       @include disable-default-a-behaviour;
 
-      &:hover, &.focus-visible {
+      &.active {
         background-color: rgba(255, 255, 255, 0.15);
       }
 
+      &:hover, &.focus-visible {
+        background-color: rgba(255, 255, 255, 0.10);
+      }
+
       .icon {
         @include icon(22px);
 
diff --git a/client/src/app/shared/forms/index.ts b/client/src/app/shared/forms/index.ts
index 41c321c4c..8febbfee9 100644
--- a/client/src/app/shared/forms/index.ts
+++ b/client/src/app/shared/forms/index.ts
@@ -1,3 +1,4 @@
 export * from './form-validators'
 export * from './form-reactive'
 export * from './reactive-file.component'
+export * from './textarea-autoresize.directive'
diff --git a/client/src/app/shared/forms/textarea-autoresize.directive.ts b/client/src/app/shared/forms/textarea-autoresize.directive.ts
new file mode 100644
index 000000000..f8c855c16
--- /dev/null
+++ b/client/src/app/shared/forms/textarea-autoresize.directive.ts
@@ -0,0 +1,25 @@
+// Thanks: https://github.com/evseevdev/ngx-textarea-autosize
+import { AfterViewInit, Directive, ElementRef, HostBinding, HostListener } from '@angular/core'
+
+@Directive({
+  selector: 'textarea[myAutoResize]'
+})
+export class TextareaAutoResizeDirective implements AfterViewInit {
+  @HostBinding('attr.rows') rows = '1'
+  @HostBinding('style.overflow') overflow = 'hidden'
+
+  constructor (private elem: ElementRef) { }
+
+  public ngAfterViewInit () {
+    this.resize()
+  }
+
+  @HostListener('input')
+  resize () {
+    const textarea = this.elem.nativeElement as HTMLTextAreaElement
+    // Reset textarea height to auto that correctly calculate the new height
+    textarea.style.height = 'auto'
+    // Set new height
+    textarea.style.height = `${textarea.scrollHeight}px`
+  }
+}
diff --git a/client/src/app/shared/misc/from-now.pipe.ts b/client/src/app/shared/misc/from-now.pipe.ts
index 33e6d25fe..00b5be6c9 100644
--- a/client/src/app/shared/misc/from-now.pipe.ts
+++ b/client/src/app/shared/misc/from-now.pipe.ts
@@ -7,8 +7,9 @@ export class FromNowPipe implements PipeTransform {
 
   constructor (private i18n: I18n) { }
 
-  transform (value: number) {
-    const seconds = Math.floor((Date.now() - value) / 1000)
+  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) {
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 0ec2a9b15..a2fa27b72 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -37,13 +37,15 @@ import {
   LoginValidatorsService,
   ReactiveFileComponent,
   ResetPasswordValidatorsService,
+  TextareaAutoResizeDirective,
   UserValidatorsService,
   VideoAbuseValidatorsService,
+  VideoAcceptOwnershipValidatorsService,
   VideoBlacklistValidatorsService,
+  VideoChangeOwnershipValidatorsService,
   VideoChannelValidatorsService,
   VideoCommentValidatorsService,
-  VideoValidatorsService,
-  VideoChangeOwnershipValidatorsService, VideoAcceptOwnershipValidatorsService
+  VideoValidatorsService
 } from '@app/shared/forms'
 import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar'
 import { ScreenService } from '@app/shared/misc/screen.service'
@@ -53,7 +55,7 @@ import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.c
 import { VideoImportService } from '@app/shared/video-import/video-import.service'
 import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.component'
 import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
-import { SubscribeButtonComponent, RemoteSubscribeComponent, UserSubscriptionService } from '@app/shared/user-subscription'
+import { RemoteSubscribeComponent, SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription'
 import { InstanceFeaturesTableComponent } from '@app/shared/instance/instance-features-table.component'
 import { OverviewService } from '@app/shared/overview'
 import { UserBanModalComponent } from '@app/shared/moderation'
@@ -92,6 +94,7 @@ import { BlocklistService } from '@app/shared/blocklist'
     FromNowPipe,
     MarkdownTextareaComponent,
     InfiniteScrollerDirective,
+    TextareaAutoResizeDirective,
     HelpComponent,
     ReactiveFileComponent,
     PeertubeCheckboxComponent,
@@ -129,6 +132,7 @@ import { BlocklistService } from '@app/shared/blocklist'
     ActionDropdownComponent,
     MarkdownTextareaComponent,
     InfiniteScrollerDirective,
+    TextareaAutoResizeDirective,
     HelpComponent,
     ReactiveFileComponent,
     PeertubeCheckboxComponent,
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 277a0cf35..2c635fa2f 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -7,10 +7,10 @@
       class="video-miniature-name"
       [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
     >
-      {{ video.name }}
-
       <span *ngIf="isUnlistedVideo()" class="badge badge-warning" i18n>Unlisted</span>
       <span *ngIf="isPrivateVideo()" class="badge badge-danger" i18n>Private</span>
+
+      {{ video.name }}
     </a>
 
     <span i18n class="video-miniature-created-at-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 65297d7a1..55844f988 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -6,11 +6,11 @@ import { Video as VideoServerModel, VideoDetails as VideoDetailsServerModel } fr
 import { ResultList } from '../../../../../shared/models/result-list.model'
 import {
   UserVideoRate,
+  UserVideoRateType,
   UserVideoRateUpdate,
   VideoConstant,
   VideoFilter,
   VideoPrivacy,
-  VideoRateType,
   VideoUpdate
 } from '../../../../../shared/models/videos'
 import { FeedFormat } from '../../../../../shared/models/feeds/feed-format.enum'
@@ -332,7 +332,7 @@ export class VideoService implements VideosProvider {
     return privacies
   }
 
-  private setVideoRate (id: number, rateType: VideoRateType) {
+  private setVideoRate (id: number, rateType: UserVideoRateType) {
     const url = VideoService.BASE_VIDEO_URL + id + '/rate'
     const body: UserVideoRateUpdate = {
       rating: rateType
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
index b58a56596..d8a7a78c4 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
@@ -3,7 +3,7 @@
     <img [src]="getAvatarUrl()" alt="Avatar" />
 
     <div class="form-group">
-      <textarea i18n-placeholder placeholder="Add comment..." autosize
+      <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
                 [readonly]="(user === null) ? true : false"
                 (click)="openVisitorModal($event)"
                 formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
index ba3c0398e..6db0eb55d 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
@@ -29,9 +29,9 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
   @Output() commentCreated = new EventEmitter<VideoCommentCreate>()
 
   @ViewChild('visitorModal') visitorModal: NgbModal
-  @ViewChild('textarea') private textareaElement: ElementRef
+  @ViewChild('textarea') textareaElement: ElementRef
 
-  private addingComment = false
+  addingComment = false
 
   constructor (
     protected formValidatorService: FormValidatorService,
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index dda870905..d0151ceb1 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -450,7 +450,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.checkUserRating()
   }
 
-  private setRating (nextRating: VideoRateType) {
+  private setRating (nextRating: UserVideoRateType) {
     let method
     switch (nextRating) {
       case 'like':
@@ -476,7 +476,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           )
   }
 
-  private updateVideoRating (oldRating: UserVideoRateType, newRating: VideoRateType) {
+  private updateVideoRating (oldRating: UserVideoRateType, newRating: UserVideoRateType) {
     let likesToIncrement = 0
     let dislikesToIncrement = 0
 
diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
index 5582ab40f..54a12c126 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -17,7 +17,6 @@ import { NgxQRCodeModule } from 'ngx-qrcode2'
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { VideoBlacklistComponent } from '@app/videos/+video-watch/modal/video-blacklist.component'
 import { RecommendationsModule } from '@app/videos/recommendations/recommendations.module'
-import { TextareaAutosizeModule } from 'ngx-textarea-autosize'
 
 @NgModule({
   imports: [
@@ -26,7 +25,6 @@ import { TextareaAutosizeModule } from 'ngx-textarea-autosize'
     ClipboardModule,
     NgbTooltipModule,
     NgxQRCodeModule,
-    TextareaAutosizeModule,
     RecommendationsModule
   ],