Add ability to import video with youtube-dl
[oweals/peertube.git] / client / src / app / videos / +video-edit / video-import.component.ts
1 import { Component, EventEmitter, OnInit, Output } from '@angular/core'
2 import { Router } from '@angular/router'
3 import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service'
4 import { NotificationsService } from 'angular2-notifications'
5 import { VideoConstant, VideoPrivacy, VideoUpdate } from '../../../../../shared/models/videos'
6 import { AuthService, ServerService } from '../../core'
7 import { FormReactive } from '../../shared'
8 import { populateAsyncUserVideoChannels } from '../../shared/misc/utils'
9 import { VideoService } from '../../shared/video/video.service'
10 import { I18n } from '@ngx-translate/i18n-polyfill'
11 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
12 import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model'
13 import { VideoImportService } from '@app/shared/video-import'
14 import { VideoEdit } from '@app/shared/video/video-edit.model'
15 import { switchMap } from 'rxjs/operators'
16 import { LoadingBarService } from '@ngx-loading-bar/core'
17 import { VideoCaptionService } from '@app/shared/video-caption'
18
19 @Component({
20   selector: 'my-video-import',
21   templateUrl: './video-import.component.html',
22   styleUrls: [
23     './shared/video-edit.component.scss',
24     './video-import.component.scss'
25   ]
26 })
27 export class VideoImportComponent extends FormReactive implements OnInit, CanComponentDeactivate {
28   @Output() firstStepDone = new EventEmitter<string>()
29
30   targetUrl = ''
31   videoFileName: string
32
33   isImportingVideo = false
34   hasImportedVideo = false
35   isUpdatingVideo = false
36
37   userVideoChannels: { id: number, label: string, support: string }[] = []
38   videoPrivacies: VideoConstant<string>[] = []
39   videoCaptions: VideoCaptionEdit[] = []
40
41   firstStepPrivacyId = 0
42   firstStepChannelId = 0
43   video: VideoEdit
44
45   constructor (
46     protected formValidatorService: FormValidatorService,
47     private router: Router,
48     private loadingBar: LoadingBarService,
49     private notificationsService: NotificationsService,
50     private authService: AuthService,
51     private serverService: ServerService,
52     private videoService: VideoService,
53     private videoImportService: VideoImportService,
54     private videoCaptionService: VideoCaptionService,
55     private i18n: I18n
56   ) {
57     super()
58   }
59
60   ngOnInit () {
61     this.buildForm({})
62
63     populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
64       .then(() => this.firstStepChannelId = this.userVideoChannels[ 0 ].id)
65
66     this.serverService.videoPrivaciesLoaded
67         .subscribe(
68           () => {
69             this.videoPrivacies = this.serverService.getVideoPrivacies()
70
71             // Private by default
72             this.firstStepPrivacyId = VideoPrivacy.PRIVATE
73           })
74   }
75
76   canDeactivate () {
77     return { canDeactivate: true }
78   }
79
80   checkForm () {
81     this.forceCheck()
82
83     return this.form.valid
84   }
85
86   isTargetUrlValid () {
87     return this.targetUrl && this.targetUrl.match(/https?:\/\//)
88   }
89
90   importVideo () {
91     this.isImportingVideo = true
92
93     const videoUpdate: VideoUpdate = {
94       privacy: this.firstStepPrivacyId,
95       waitTranscoding: false,
96       commentsEnabled: true,
97       channelId: this.firstStepChannelId
98     }
99
100     this.videoImportService.importVideo(this.targetUrl, videoUpdate).subscribe(
101       res => {
102         this.firstStepDone.emit(res.video.name)
103         this.isImportingVideo = false
104         this.hasImportedVideo = true
105
106         this.video = new VideoEdit(Object.assign(res.video, {
107           commentsEnabled: videoUpdate.commentsEnabled,
108           support: null,
109           thumbnailUrl: null,
110           previewUrl: null
111         }))
112         this.hydrateFormFromVideo()
113       },
114
115       err => {
116         this.isImportingVideo = false
117         this.notificationsService.error(this.i18n('Error'), err.message)
118       }
119     )
120   }
121
122   updateSecondStep () {
123     if (this.checkForm() === false) {
124       return
125     }
126
127     this.video.patch(this.form.value)
128
129     this.loadingBar.start()
130     this.isUpdatingVideo = true
131
132     // Update the video
133     this.videoService.updateVideo(this.video)
134         .pipe(
135           // Then update captions
136           switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions))
137         )
138         .subscribe(
139           () => {
140             this.isUpdatingVideo = false
141             this.loadingBar.complete()
142             this.notificationsService.success(this.i18n('Success'), this.i18n('Video to import updated.'))
143
144             // TODO: route to imports list
145             // this.router.navigate([ '/videos/watch', this.video.uuid ])
146           },
147
148           err => {
149             this.loadingBar.complete()
150             this.isUpdatingVideo = false
151             this.notificationsService.error(this.i18n('Error'), err.message)
152             console.error(err)
153           }
154         )
155
156   }
157
158   private hydrateFormFromVideo () {
159     this.form.patchValue(this.video.toFormPatch())
160   }
161 }