]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
Move engines outside package.json
[github/Chocobozzz/PeerTube.git] / client / src / app / +videos / +video-edit / video-add-components / video-upload.component.ts
index 32a17052a5ce9ba4aba3a90c3880f09feb6d5362..effb37077465c3d7b9c3b913b3c034c7255e4e41 100644 (file)
@@ -1,12 +1,13 @@
 import { Subscription } from 'rxjs'
-import { HttpEventType, HttpResponse } from '@angular/common/http'
-import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
+import { HttpErrorResponse, HttpEventType, HttpResponse } from '@angular/common/http'
+import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService, CanComponentDeactivate, Notifier, ServerService, UserService } from '@app/core'
-import { scrollToTop } from '@app/helpers'
+import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService, UserService } from '@app/core'
+import { scrollToTop, uploadErrorHandler } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { BytesPipe, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
+import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { VideoPrivacy } from '@shared/models'
 import { VideoSend } from './video-send'
 
@@ -19,7 +20,7 @@ import { VideoSend } from './video-send'
     './video-send.scss'
   ]
 })
-export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
+export class VideoUploadComponent extends VideoSend implements OnInit, AfterViewInit, OnDestroy, CanComponentDeactivate {
   @Output() firstStepDone = new EventEmitter<string>()
   @Output() firstStepError = new EventEmitter<void>()
   @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
@@ -41,11 +42,12 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     id: 0,
     uuid: ''
   }
+  formData: FormData
 
-  waitTranscodingEnabled = true
   previewfileUpload: File
 
   error: string
+  enableRetryAfterError: boolean
 
   protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
 
@@ -58,7 +60,8 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     protected videoService: VideoService,
     protected videoCaptionService: VideoCaptionService,
     private userService: UserService,
-    private router: Router
+    private router: Router,
+    private hooks: HooksService
     ) {
     super()
   }
@@ -77,6 +80,10 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
         })
   }
 
+  ngAfterViewInit () {
+    this.hooks.runAction('action:video-upload.init', 'video-edit')
+  }
+
   ngOnDestroy () {
     if (this.videoUploadObservable) this.videoUploadObservable.unsubscribe()
   }
@@ -85,7 +92,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     let text = ''
 
     if (this.videoUploaded === true) {
-      // FIXME: cannot concatenate strings inside i18n service :/
+      // FIXME: cannot concatenate strings using $localize
       text = $localize`Your video was uploaded to your account and is private.` + ' ' +
         $localize`But associated data (tags, description...) will be lost, are you sure you want to leave this page?`
     } else {
@@ -118,18 +125,26 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     this.uploadFirstStep()
   }
 
+  retryUpload () {
+    this.enableRetryAfterError = false
+    this.error = ''
+    this.uploadVideo()
+  }
+
   cancelUpload () {
     if (this.videoUploadObservable !== null) {
       this.videoUploadObservable.unsubscribe()
+    }
 
-      this.isUploadingVideo = false
-      this.videoUploadPercents = 0
-      this.videoUploadObservable = null
+    this.isUploadingVideo = false
+    this.videoUploadPercents = 0
+    this.videoUploadObservable = null
 
-      this.firstStepError.emit()
+    this.firstStepError.emit()
+    this.enableRetryAfterError = false
+    this.error = ''
 
-      this.notifier.info($localize`Upload cancelled`)
-    }
+    this.notifier.info($localize`Upload cancelled`)
   }
 
   uploadFirstStep (clickedOnButton = false) {
@@ -152,32 +167,26 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     if (nameWithoutExtension.length < 3) name = videofile.name
     else name = nameWithoutExtension
 
-    // Force user to wait transcoding for unsupported video types in web browsers
-    if (!videofile.name.endsWith('.mp4') && !videofile.name.endsWith('.webm') && !videofile.name.endsWith('.ogv')) {
-      this.waitTranscodingEnabled = false
-    }
-
-    const privacy = this.firstStepPrivacyId.toString()
     const nsfw = this.serverConfig.instance.isNSFW
     const waitTranscoding = true
     const commentsEnabled = true
     const downloadEnabled = true
     const channelId = this.firstStepChannelId.toString()
 
-    const formData = new FormData()
-    formData.append('name', name)
+    this.formData = new FormData()
+    this.formData.append('name', name)
     // 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)
-    formData.append('downloadEnabled', '' + downloadEnabled)
-    formData.append('waitTranscoding', '' + waitTranscoding)
-    formData.append('channelId', '' + channelId)
-    formData.append('videofile', videofile)
+    this.formData.append('privacy', VideoPrivacy.PRIVATE.toString())
+    this.formData.append('nsfw', '' + nsfw)
+    this.formData.append('commentsEnabled', '' + commentsEnabled)
+    this.formData.append('downloadEnabled', '' + downloadEnabled)
+    this.formData.append('waitTranscoding', '' + waitTranscoding)
+    this.formData.append('channelId', '' + channelId)
+    this.formData.append('videofile', videofile)
 
     if (this.previewfileUpload) {
-      formData.append('previewfile', this.previewfileUpload)
-      formData.append('thumbnailfile', this.previewfileUpload)
+      this.formData.append('previewfile', this.previewfileUpload)
+      this.formData.append('thumbnailfile', this.previewfileUpload)
     }
 
     this.isUploadingVideo = true
@@ -191,7 +200,11 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
       previewfile: this.previewfileUpload
     })
 
-    this.videoUploadObservable = this.videoService.uploadVideo(formData).subscribe(
+    this.uploadVideo()
+  }
+
+  uploadVideo () {
+    this.videoUploadObservable = this.videoService.uploadVideo(this.formData).subscribe(
       event => {
         if (event.type === HttpEventType.UploadProgress) {
           this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
@@ -204,13 +217,23 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
         }
       },
 
-      err => {
-        // Reset progress
-        this.isUploadingVideo = false
+      (err: HttpErrorResponse) => {
+        // Reset progress (but keep isUploadingVideo true)
         this.videoUploadPercents = 0
         this.videoUploadObservable = null
-        this.firstStepError.emit()
-        this.notifier.error(err.message)
+        this.enableRetryAfterError = true
+
+        this.error = uploadErrorHandler({
+          err,
+          name: $localize`video`,
+          notifier: this.notifier,
+          sticky: false
+        })
+
+        if (err.status === HttpStatusCode.PAYLOAD_TOO_LARGE_413 ||
+            err.status === HttpStatusCode.UNSUPPORTED_MEDIA_TYPE_415) {
+          this.cancelUpload()
+        }
       }
     )
   }