Improve video upload guard a little bit
authorChocobozzz <me@florianbigard.com>
Thu, 25 Jan 2018 18:01:13 +0000 (19:01 +0100)
committerChocobozzz <me@florianbigard.com>
Thu, 25 Jan 2018 18:09:47 +0000 (19:09 +0100)
client/src/app/shared/can-deactivate-guard.service.ts [deleted file]
client/src/app/shared/guards/can-deactivate-guard.service.ts [new file with mode: 0644]
client/src/app/videos/+video-edit/video-add-routing.module.ts
client/src/app/videos/+video-edit/video-add.component.ts
client/src/app/videos/+video-edit/video-add.module.ts
tsconfig.json

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 (file)
index 4239df7..0000000
+++ /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> | boolean
-}
-
-@Injectable()
-export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
-  constructor (private confirmService: ConfirmService) { }
-
-  canDeactivate (component: CanComponentDeactivate,
-    currentRoute: ActivatedRouteSnapshot,
-    currentState: RouterStateSnapshot,
-    nextState: RouterStateSnapshot
-  ): Observable<boolean> | 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 (file)
index 0000000..15618f6
--- /dev/null
@@ -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> | boolean }
+}
+
+@Injectable()
+export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
+  constructor (private confirmService: ConfirmService) { }
+
+  canDeactivate (component: CanComponentDeactivate,
+    currentRoute: ActivatedRouteSnapshot,
+    currentState: RouterStateSnapshot,
+    nextState: RouterStateSnapshot
+  ): Observable<boolean> | 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'
+    )
+  }
+
+}
index 9541a2bd15dae7b4a4fdba2abe82e9bd0ba4d888..e0fef7158dfa6e30360fa6f22e9b3b158a0e82fd 100644 (file)
@@ -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 ]
   }
 ]
 
index 58eccef48d1cc784cfe0f15efc04d9d799b41cf7..c6f0525c339a59fd8d9d56e18dac23498b9a04f9 100644 (file)
@@ -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 () {
index af9696a03bc373f4ca01a19af6723fb18b0ea80e..1bfedf25176e60a40ba4cf5689ae6a435c27f7f1 100644 (file)
@@ -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: [
index 4e6816430acee26401dea8b8172e3e292b219da4..1c1472aae470e72fc477486e71a9c584cd5d77e9 100644 (file)
   "exclude": [
     "node_modules",
     "client",
-    "text1",
-    "text2",
-    "text3",
-    "text4",
-    "text5",
-    "text6"
+    "test1",
+    "test2",
+    "test3",
+    "test4",
+    "test5",
+    "test6"
   ]
 }