client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts

   1 import { map, switchMap } from 'rxjs/operators'
   2 import { Component, EventEmitter, OnInit, Output } from '@angular/core'
   3 import { Router } from '@angular/router'
   4 import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@app/core'
   5 import { getAbsoluteAPIUrl, scrollToTop } from '@app/helpers'
   6 import { FormValidatorService } from '@app/shared/shared-forms'
   7 import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
   8 import { LoadingBarService } from '@ngx-loading-bar/core'
   9 import { VideoPrivacy, VideoUpdate } from '@shared/models'
  10 import { VideoSend } from './video-send'
  11
  12 @Component({
  13   selector: 'my-video-import-url',
  14   templateUrl: './video-import-url.component.html',
  15   styleUrls: [
  16     '../shared/video-edit.component.scss',
  17     './video-send.scss'
  18   ]
  19 })
  20 export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate {
  21   @Output() firstStepDone = new EventEmitter<string>()
  22   @Output() firstStepError = new EventEmitter<void>()
  23
  24   targetUrl = ''
  25
  26   isImportingVideo = false
  27   hasImportedVideo = false
  28   isUpdatingVideo = false
  29
  30   video: VideoEdit
  31   error: string
  32
  33   protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
  34
  35   constructor (
  36     protected formValidatorService: FormValidatorService,
  37     protected loadingBar: LoadingBarService,
  38     protected notifier: Notifier,
  39     protected authService: AuthService,
  40     protected serverService: ServerService,
  41     protected videoService: VideoService,
  42     protected videoCaptionService: VideoCaptionService,
  43     private router: Router,
  44     private videoImportService: VideoImportService
  45     ) {
  46     super()
  47   }
  48
  49   ngOnInit () {
  50     super.ngOnInit()
  51   }
  52
  53   canDeactivate () {
  54     return { canDeactivate: true }
  55   }
  56
  57   isTargetUrlValid () {
  58     return this.targetUrl && this.targetUrl.match(/https?:\/\//)
  59   }
  60
  61   importVideo () {
  62     this.isImportingVideo = true
  63
  64     const videoUpdate: VideoUpdate = {
  65       privacy: this.firstStepPrivacyId,
  66       waitTranscoding: false,
  67       commentsEnabled: true,
  68       downloadEnabled: true,
  69       channelId: this.firstStepChannelId
  70     }
  71
  72     this.loadingBar.useRef().start()
  73
  74     this.videoImportService
  75         .importVideoUrl(this.targetUrl, videoUpdate)
  76         .pipe(
  77           switchMap(res => {
  78             return this.videoCaptionService
  79                 .listCaptions(res.video.id)
  80                 .pipe(
  81                   map(result => ({ video: res.video, videoCaptions: result.data }))
  82                 )
  83           })
  84         )
  85         .subscribe(
  86           ({ video, videoCaptions }) => {
  87             this.loadingBar.useRef().complete()
  88             this.firstStepDone.emit(video.name)
  89             this.isImportingVideo = false
  90             this.hasImportedVideo = true
  91
  92             const absoluteAPIUrl = getAbsoluteAPIUrl()
  93
  94             const thumbnailUrl = video.thumbnailPath
  95               ? absoluteAPIUrl + video.thumbnailPath
  96               : null
  97
  98             const previewUrl = video.previewPath
  99               ? absoluteAPIUrl + video.previewPath
 100               : null
 101
 102             this.video = new VideoEdit(Object.assign(video, {
 103               commentsEnabled: videoUpdate.commentsEnabled,
 104               downloadEnabled: videoUpdate.downloadEnabled,
 105               support: null,
 106               thumbnailUrl,
 107               previewUrl
 108             }))
 109
 110             this.videoCaptions = videoCaptions
 111
 112             this.hydrateFormFromVideo()
 113           },
 114
 115           err => {
 116             this.loadingBar.useRef().complete()
 117             this.isImportingVideo = false
 118             this.firstStepError.emit()
 119             this.notifier.error(err.message)
 120           }
 121         )
 122   }
 123
 124   updateSecondStep () {
 125     if (this.checkForm() === false) {
 126       return
 127     }
 128
 129     this.video.patch(this.form.value)
 130
 131     this.isUpdatingVideo = true
 132
 133     // Update the video
 134     this.updateVideoAndCaptions(this.video)
 135         .subscribe(
 136           () => {
 137             this.isUpdatingVideo = false
 138             this.notifier.success($localize`Video to import updated.`)
 139
 140             this.router.navigate([ '/my-account', 'video-imports' ])
 141           },
 142
 143           err => {
 144             this.error = err.message
 145             scrollToTop()
 146             console.error(err)
 147           }
 148         )
 149
 150   }
 151
 152   private hydrateFormFromVideo () {
 153     this.form.patchValue(this.video.toFormPatch())
 154
 155     const objects = [
 156       {
 157         url: 'thumbnailUrl',
 158         name: 'thumbnailfile'
 159       },
 160       {
 161         url: 'previewUrl',
 162         name: 'previewfile'
 163       }
 164     ]
 165
 166     for (const obj of objects) {
 167       fetch(this.video[obj.url])
 168         .then(response => response.blob())
 169         .then(data => {
 170           this.form.patchValue({
 171             [ obj.name ]: data
 172           })
 173         })
 174     }
 175   }
 176 }