Fix new Angular 7 issues

client/package.json

@@ -129,7 +129,6 @@
     "ngx-clipboard": "11.1.7",
     "ngx-pipes": "^2.1.7",
     "ngx-qrcode2": "^0.0.9",
-    "ngx-textarea-autosize": "^2.0.0",
     "node-sass": "^4.9.3",
     "npm-font-source-sans-pro": "^1.0.2",
     "path-browserify": "^1.0.0",

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

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>

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()
   }
 

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 */ }
 }

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;

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'

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`
+  }
+}

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) {

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,

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'] }"

client/src/app/videos/+video-watch/comment/video-comment-add.component.ts

@@ -31,7 +31,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
   @ViewChild('visitorModal') visitorModal: NgbModal
   @ViewChild('textarea') private textareaElement: ElementRef
 
-  private addingComment = false
+  addingComment = false
 
   constructor (
     protected formValidatorService: FormValidatorService,

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
   ],
 

scripts/travis.sh

@@ -30,7 +30,7 @@ elif [ "$1" = "api-2" ]; then
 elif [ "$1" = "api-3" ]; then
     npm run build:server
     mocha --timeout 5000 --exit --require ts-node/register/type-check --bail server/tests/api/index-3.ts
-elif [ "$1" = "api-3" ]; then
+elif [ "$1" = "api-4" ]; then
     npm run build:server
     mocha --timeout 5000 --exit --require ts-node/register/type-check --bail server/tests/api/index-4.ts
 elif [ "$1" = "lint" ]; then