Fix titles on upload page (#4904)

* client/video-add: fix route titles

* client/video-add: show progress in page title

* Styling

Co-authored-by: Chocobozzz <me@florianbigard.com>

client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts

@@ -3,8 +3,8 @@ import { UploadState, UploadxOptions, UploadxService } from 'ngx-uploadx'
 import { isIOS } from '@root-helpers/web-browser'
 import { HttpErrorResponse, HttpEventType, HttpHeaders } from '@angular/common/http'
 import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
-import { Router } from '@angular/router'
+import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService, UserService } from '@app/core'
+import { AuthService, CanComponentDeactivate, HooksService, MetaService, Notifier, ServerService, UserService } from '@app/core'
 import { genericUploadErrorHandler, scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { BytesPipe, Video, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
@@ -66,7 +66,9 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     private userService: UserService,
     private router: Router,
     private hooks: HooksService,
-    private resumableUploadService: UploadxService
+    private resumableUploadService: UploadxService,
+    private metaService: MetaService,
+    private route: ActivatedRoute
   ) {
     super()
   }
@@ -113,6 +115,18 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     }
   }
 
+  updateTitle () {
+    const videoName = this.form.get('name').value
+
+    if (this.videoUploaded) {
+      this.metaService.setTitle($localize`Upload ${videoName}`)
+    } else if (this.isUploadingAudioFile || this.isUploadingVideo) {
+      this.metaService.setTitle(`${this.videoUploadPercents}% - ${videoName}`)
+    } else {
+      this.metaService.update(this.route.snapshot.data['meta'])
+    }
+  }
+
   onUploadVideoOngoing (state: UploadState) {
     switch (state.status) {
       case 'error': {
@@ -153,7 +167,8 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
         break
 
       case 'uploading':
-        this.videoUploadPercents = state.progress
+        // TODO: remove || 0 when // https://github.com/kukhariev/ngx-uploadx/pull/368 is released
+        this.videoUploadPercents = state.progress || 0
         break
 
       case 'paused':
@@ -167,6 +182,8 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
         this.videoUploadedIds = state?.response.video
         break
     }
+
+    this.updateTitle()
   }
 
   onFileDropped (files: FileList) {
@@ -305,6 +322,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     })
 
     this.firstStepDone.emit(name)
+    this.updateTitle()
   }
 
   private checkGlobalUserQuota (videofile: File) {

client/src/app/+videos/+video-edit/video-add.module.ts

@@ -1,11 +1,10 @@
-import { NgModule } from '@angular/core'
-import { CanDeactivateGuard } from '@app/core'
 import { UploadxModule } from 'ngx-uploadx'
+import { NgModule } from '@angular/core'
 import { VideoEditModule } from './shared/video-edit.module'
 import { DragDropDirective } from './video-add-components/drag-drop.directive'
+import { VideoGoLiveComponent } from './video-add-components/video-go-live.component'
 import { VideoImportTorrentComponent } from './video-add-components/video-import-torrent.component'
 import { VideoImportUrlComponent } from './video-add-components/video-import-url.component'
-import { VideoGoLiveComponent } from './video-add-components/video-go-live.component'
 import { VideoUploadComponent } from './video-add-components/video-upload.component'
 import { VideoAddRoutingModule } from './video-add-routing.module'
 import { VideoAddComponent } from './video-add.component'
@@ -30,8 +29,6 @@ import { VideoAddComponent } from './video-add.component'
 
   exports: [ ],
 
-  providers: [
+  providers: []
-    CanDeactivateGuard
-  ]
 })
 export class VideoAddModule { }

client/src/app/+videos/+video-edit/video-update.module.ts

@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core'
-import { CanDeactivateGuard } from '@app/core'
 import { VideoEditModule } from './shared/video-edit.module'
 import { VideoUpdateRoutingModule } from './video-update-routing.module'
 import { VideoUpdateComponent } from './video-update.component'
@@ -19,8 +18,7 @@ import { VideoUpdateResolver } from './video-update.resolver'
   exports: [ ],
 
   providers: [
-    VideoUpdateResolver,
+    VideoUpdateResolver
-    CanDeactivateGuard
   ]
 })
 export class VideoUpdateModule { }

client/src/app/app-routing.module.ts

@@ -96,6 +96,7 @@ const routes: Routes = [
   {
     path: 'videos/upload',
     loadChildren: () => import('@app/+videos/+video-edit/video-add.module').then(m => m.VideoAddModule),
+    canActivateChild: [ MetaGuard ],
     data: {
       meta: {
         title: $localize`Upload a video`
@@ -105,6 +106,7 @@ const routes: Routes = [
   {
     path: 'videos/update/:uuid',
     loadChildren: () => import('@app/+videos/+video-edit/video-update.module').then(m => m.VideoUpdateModule),
+    canActivateChild: [ MetaGuard ],
     data: {
       meta: {
         title: $localize`Edit a video`