From f6a043df74bc755de8e658ba76a4e55980b96f66 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 25 Jan 2018 19:01:13 +0100 Subject: Improve video upload guard a little bit --- .../src/app/shared/can-deactivate-guard.service.ts | 25 ------------------- .../shared/guards/can-deactivate-guard.service.ts | 28 +++++++++++++++++++++ .../videos/+video-edit/video-add-routing.module.ts | 4 +-- .../app/videos/+video-edit/video-add.component.ts | 29 ++++++++++++++++++---- .../src/app/videos/+video-edit/video-add.module.ts | 2 +- 5 files changed, 55 insertions(+), 33 deletions(-) delete mode 100644 client/src/app/shared/can-deactivate-guard.service.ts create mode 100644 client/src/app/shared/guards/can-deactivate-guard.service.ts (limited to 'client/src/app') diff --git a/client/src/app/shared/can-deactivate-guard.service.ts b/client/src/app/shared/can-deactivate-guard.service.ts deleted file mode 100644 index 4239df737..000000000 --- a/client/src/app/shared/can-deactivate-guard.service.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Injectable } from '@angular/core' -import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router' -import { Observable } from 'rxjs/Observable' -import { ConfirmService } from '../core' - -export interface CanComponentDeactivate { - canDeactivate: () => Observable | boolean -} - -@Injectable() -export class CanDeactivateGuard implements CanDeactivate { - constructor (private confirmService: ConfirmService) { } - - canDeactivate (component: CanComponentDeactivate, - currentRoute: ActivatedRouteSnapshot, - currentState: RouterStateSnapshot, - nextState: RouterStateSnapshot - ): Observable | boolean { - return component.canDeactivate() || this.confirmService.confirm( - 'All unsaved data will be lost, are you sure you want to leave ?', - 'Unsaved Data' - ) - } - -} diff --git a/client/src/app/shared/guards/can-deactivate-guard.service.ts b/client/src/app/shared/guards/can-deactivate-guard.service.ts new file mode 100644 index 000000000..15618f699 --- /dev/null +++ b/client/src/app/shared/guards/can-deactivate-guard.service.ts @@ -0,0 +1,28 @@ +import { Injectable } from '@angular/core' +import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router' +import { Observable } from 'rxjs/Observable' +import { ConfirmService } from '../../core/index' + +export interface CanComponentDeactivate { + canDeactivate: () => { text?: string, canDeactivate: Observable | boolean } +} + +@Injectable() +export class CanDeactivateGuard implements CanDeactivate { + constructor (private confirmService: ConfirmService) { } + + canDeactivate (component: CanComponentDeactivate, + currentRoute: ActivatedRouteSnapshot, + currentState: RouterStateSnapshot, + nextState: RouterStateSnapshot + ): Observable | boolean { + const result = component.canDeactivate() + const text = result.text || 'All unsaved data will be lost, are you sure you want to leave this page?' + + return result.canDeactivate || this.confirmService.confirm( + text, + 'Warning' + ) + } + +} diff --git a/client/src/app/videos/+video-edit/video-add-routing.module.ts b/client/src/app/videos/+video-edit/video-add-routing.module.ts index 9541a2bd1..e0fef7158 100644 --- a/client/src/app/videos/+video-edit/video-add-routing.module.ts +++ b/client/src/app/videos/+video-edit/video-add-routing.module.ts @@ -4,7 +4,7 @@ import { RouterModule, Routes } from '@angular/router' import { MetaGuard } from '@ngx-meta/core' import { LoginGuard } from '../../core' -import { CanDeactivateGuard } from '../../shared/can-deactivate-guard.service' +import { CanDeactivateGuard } from '../../shared/guards/can-deactivate-guard.service' import { VideoAddComponent } from './video-add.component' const videoAddRoutes: Routes = [ @@ -12,7 +12,7 @@ const videoAddRoutes: Routes = [ path: '', component: VideoAddComponent, canActivate: [ MetaGuard, LoginGuard ], - canDeactivate: [CanDeactivateGuard] + canDeactivate: [ CanDeactivateGuard ] } ] diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts index 58eccef48..c6f0525c3 100644 --- a/client/src/app/videos/+video-edit/video-add.component.ts +++ b/client/src/app/videos/+video-edit/video-add.component.ts @@ -1,10 +1,12 @@ import { HttpEventType, HttpResponse } from '@angular/common/http' -import { Component, OnInit, ViewChild } from '@angular/core' +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' import { FormBuilder, FormGroup } from '@angular/forms' import { Router } from '@angular/router' import { UserService } from '@app/shared' +import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service' import { NotificationsService } from 'angular2-notifications' import { BytesPipe } from 'ngx-pipes' +import { Subscription } from 'rxjs/Subscription' import { VideoPrivacy } from '../../../../../shared/models/videos' import { AuthService, ServerService } from '../../core' import { FormReactive } from '../../shared' @@ -12,7 +14,6 @@ import { ValidatorMessage } from '../../shared/forms/form-validators/validator-m import { populateAsyncUserVideoChannels } from '../../shared/misc/utils' import { VideoEdit } from '../../shared/video/video-edit.model' import { VideoService } from '../../shared/video/video.service' -import { CanComponentDeactivate } from '@app/shared/can-deactivate-guard.service' @Component({ selector: 'my-videos-add', @@ -23,12 +24,12 @@ import { CanComponentDeactivate } from '@app/shared/can-deactivate-guard.service ] }) -export class VideoAddComponent extends FormReactive implements OnInit, CanComponentDeactivate { +export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy, CanComponentDeactivate { @ViewChild('videofileInput') videofileInput isUploadingVideo = false videoUploaded = false - videoUploadObservable = null + videoUploadObservable: Subscription = null videoUploadPercents = 0 videoUploadedIds = { id: 0, @@ -85,8 +86,26 @@ export class VideoAddComponent extends FormReactive implements OnInit, CanCompon }) } + ngOnDestroy () { + if (this.videoUploadObservable) { + this.videoUploadObservable.unsubscribe() + } + } + canDeactivate () { - return !this.isUploadingVideo + let text = '' + + if (this.videoUploaded === true) { + text = 'Your video was uploaded in your account and is private.' + + ' But associated data (tags, description...) will be lost, are you sure you want to leave this page?' + } else { + text = 'Your video is not uploaded yet, are you sure you want to leave this page?' + } + + return { + canDeactivate: !this.isUploadingVideo, + text + } } fileChange () { 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 af9696a03..1bfedf251 100644 --- a/client/src/app/videos/+video-edit/video-add.module.ts +++ b/client/src/app/videos/+video-edit/video-add.module.ts @@ -4,7 +4,7 @@ import { SharedModule } from '../../shared' import { VideoEditModule } from './shared/video-edit.module' import { VideoAddRoutingModule } from './video-add-routing.module' import { VideoAddComponent } from './video-add.component' -import { CanDeactivateGuard } from '../../shared/can-deactivate-guard.service' +import { CanDeactivateGuard } from '../../shared/guards/can-deactivate-guard.service' @NgModule({ imports: [ -- cgit v1.2.3