Add ability to update a video channel

[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-edit / video-add.component.ts

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 73efd60bf4b683a20a52b9cd2b8372c43fb4c572..fa967018df419bcaaee16cb7cda726fc67fe93ca 100644 (file)
--- 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,13 @@
 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 { LoadingBarService } from '@ngx-loading-bar/core'
 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'
@@ -22,17 +25,19 @@ import { VideoService } from '../../shared/video/video.service'
   ]
 })
 
-export class VideoAddComponent extends FormReactive implements OnInit {
+export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy, CanComponentDeactivate {
   @ViewChild('videofileInput') videofileInput
 
   isUploadingVideo = false
+  isUpdatingVideo = false
   videoUploaded = false
-  videoUploadObservable = null
+  videoUploadObservable: Subscription = null
   videoUploadPercents = 0
   videoUploadedIds = {
     id: 0,
     uuid: ''
   }
+  videoFileName: string
 
   form: FormGroup
   formErrors: { [ id: string ]: string } = {}
@@ -51,7 +56,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     private authService: AuthService,
     private userService: UserService,
     private serverService: ServerService,
-    private videoService: VideoService
+    private videoService: VideoService,
+    private loadingBar: LoadingBarService
   ) {
     super()
   }
@@ -84,6 +90,28 @@ export class VideoAddComponent extends FormReactive implements OnInit {
         })
   }
 
+  ngOnDestroy () {
+    if (this.videoUploadObservable) {
+      this.videoUploadObservable.unsubscribe()
+    }
+  }
+
+  canDeactivate () {
+    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 () {
     this.uploadFirstStep()
   }
@@ -105,9 +133,15 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   }
 
   uploadFirstStep () {
-    const videofile = this.videofileInput.nativeElement.files[0]
+    const videofile = this.videofileInput.nativeElement.files[0] as File
     if (!videofile) return
 
+    // Cannot upload videos > 4GB for now
+    if (videofile.size > 4 * 1024 * 1024 * 1024) {
+      this.notificationsService.error('Error', 'We are sorry but PeerTube cannot handle videos > 4GB')
+      return
+    }
+
     const videoQuota = this.authService.getUser().videoQuota
     if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) {
       const bytePipes = new BytesPipe()
@@ -120,7 +154,18 @@ export class VideoAddComponent extends FormReactive implements OnInit {
       return
     }
 
-    const name = videofile.name.replace(/\.[^/.]+$/, '')
+    this.videoFileName = videofile.name
+
+    const nameWithoutExtension = videofile.name.replace(/\.[^/.]+$/, '')
+    let name: string
+
+    // If the name of the file is very small, keep the extension
+    if (nameWithoutExtension.length < 3) {
+      name = videofile.name
+    } else {
+      name = nameWithoutExtension
+    }
+
     const privacy = this.firstStepPrivacyId.toString()
     const nsfw = false
     const commentsEnabled = true
@@ -128,7 +173,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
 
     const formData = new FormData()
     formData.append('name', name)
-    // Put the video "private" -> we wait he validates the second step
+    // Put the video "private" -> we are waiting the user validation of the second step
     formData.append('privacy', VideoPrivacy.PRIVATE.toString())
     formData.append('nsfw', '' + nsfw)
     formData.append('commentsEnabled', '' + commentsEnabled)
@@ -175,18 +220,25 @@ export class VideoAddComponent extends FormReactive implements OnInit {
 
     const video = new VideoEdit()
     video.patch(this.form.value)
-    video.channel = this.firstStepChannelId
+    video.channelId = this.firstStepChannelId
     video.id = this.videoUploadedIds.id
     video.uuid = this.videoUploadedIds.uuid
 
+    this.isUpdatingVideo = true
+    this.loadingBar.start()
     this.videoService.updateVideo(video)
       .subscribe(
         () => {
+          this.isUpdatingVideo = false
+          this.isUploadingVideo = false
+          this.loadingBar.complete()
+
           this.notificationsService.success('Success', 'Video published.')
           this.router.navigate([ '/videos/watch', video.uuid ])
         },
 
         err => {
+          this.isUpdatingVideo = false
           this.notificationsService.error('Error', err.message)
           console.error(err)
         }