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>
This commit is contained in:
parent
68a4b1e587
commit
72dd3a7c26
|
@ -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) {
|
||||
|
|
|
@ -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 { }
|
||||
|
|
|
@ -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 { }
|
||||
|
|
|
@ -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`
|
||||
|
|
Loading…
Reference in New Issue