From 72dd3a7c26cf0ef7b0e1780afd7bdbf7fea1d2b1 Mon Sep 17 00:00:00 2001 From: kontrollanten <6680299+kontrollanten@users.noreply.github.com> Date: Fri, 8 Apr 2022 11:14:12 +0200 Subject: 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 --- .../video-add-components/video-upload.component.ts | 26 ++++++++++++++++++---- .../app/+videos/+video-edit/video-add.module.ts | 9 +++----- .../app/+videos/+video-edit/video-update.module.ts | 4 +--- client/src/app/app-routing.module.ts | 2 ++ 4 files changed, 28 insertions(+), 13 deletions(-) diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts index ec858c8a8..0a83215b9 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts +++ b/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 { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService, UserService } from '@app/core' +import { ActivatedRoute, Router } from '@angular/router' +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) { diff --git a/client/src/app/+videos/+video-edit/video-add.module.ts b/client/src/app/+videos/+video-edit/video-add.module.ts index e836cf81e..f5bfc925a 100644 --- a/client/src/app/+videos/+video-edit/video-add.module.ts +++ b/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: [ - CanDeactivateGuard - ] + providers: [] }) export class VideoAddModule { } diff --git a/client/src/app/+videos/+video-edit/video-update.module.ts b/client/src/app/+videos/+video-edit/video-update.module.ts index 99cd8bea1..92d32ffc8 100644 --- a/client/src/app/+videos/+video-edit/video-update.module.ts +++ b/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, - CanDeactivateGuard + VideoUpdateResolver ] }) export class VideoUpdateModule { } diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts index a831da099..db48b2eea 100644 --- a/client/src/app/app-routing.module.ts +++ b/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` -- cgit v1.2.3