From f6a043df74bc755de8e658ba76a4e55980b96f66 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 25 Jan 2018 19:01:13 +0100 Subject: [PATCH] Improve video upload guard a little bit --- .../can-deactivate-guard.service.ts | 13 +++++---- .../+video-edit/video-add-routing.module.ts | 4 +-- .../videos/+video-edit/video-add.component.ts | 29 +++++++++++++++---- .../videos/+video-edit/video-add.module.ts | 2 +- tsconfig.json | 12 ++++---- 5 files changed, 41 insertions(+), 19 deletions(-) rename client/src/app/shared/{ => guards}/can-deactivate-guard.service.ts (61%) diff --git a/client/src/app/shared/can-deactivate-guard.service.ts b/client/src/app/shared/guards/can-deactivate-guard.service.ts similarity index 61% rename from client/src/app/shared/can-deactivate-guard.service.ts rename to client/src/app/shared/guards/can-deactivate-guard.service.ts index 4239df737..15618f699 100644 --- a/client/src/app/shared/can-deactivate-guard.service.ts +++ b/client/src/app/shared/guards/can-deactivate-guard.service.ts @@ -1,10 +1,10 @@ import { Injectable } from '@angular/core' import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router' import { Observable } from 'rxjs/Observable' -import { ConfirmService } from '../core' +import { ConfirmService } from '../../core/index' export interface CanComponentDeactivate { - canDeactivate: () => Observable | boolean + canDeactivate: () => { text?: string, canDeactivate: Observable | boolean } } @Injectable() @@ -16,9 +16,12 @@ export class CanDeactivateGuard implements CanDeactivate 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' + 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: [ diff --git a/tsconfig.json b/tsconfig.json index 4e6816430..1c1472aae 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,11 +20,11 @@ "exclude": [ "node_modules", "client", - "text1", - "text2", - "text3", - "text4", - "text5", - "text6" + "test1", + "test2", + "test3", + "test4", + "test5", + "test6" ] }