diff options
Diffstat (limited to 'client/src/app/+video-studio/edit/video-studio-edit.component.ts')
-rw-r--r-- | client/src/app/+video-studio/edit/video-studio-edit.component.ts | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/client/src/app/+video-studio/edit/video-studio-edit.component.ts b/client/src/app/+video-studio/edit/video-studio-edit.component.ts new file mode 100644 index 000000000..392b65767 --- /dev/null +++ b/client/src/app/+video-studio/edit/video-studio-edit.component.ts | |||
@@ -0,0 +1,204 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | ||
2 | import { ActivatedRoute, Router } from '@angular/router' | ||
3 | import { ConfirmService, Notifier, ServerService } from '@app/core' | ||
4 | import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' | ||
5 | import { VideoDetails } from '@app/shared/shared-main' | ||
6 | import { LoadingBarService } from '@ngx-loading-bar/core' | ||
7 | import { secondsToTime } from '@shared/core-utils' | ||
8 | import { VideoStudioTask, VideoStudioTaskCut } from '@shared/models' | ||
9 | import { VideoStudioService } from '../shared' | ||
10 | |||
11 | @Component({ | ||
12 | selector: 'my-video-studio-edit', | ||
13 | templateUrl: './video-studio-edit.component.html', | ||
14 | styleUrls: [ './video-studio-edit.component.scss' ] | ||
15 | }) | ||
16 | export class VideoStudioEditComponent extends FormReactive implements OnInit { | ||
17 | isRunningEdition = false | ||
18 | |||
19 | video: VideoDetails | ||
20 | |||
21 | constructor ( | ||
22 | protected formValidatorService: FormValidatorService, | ||
23 | private serverService: ServerService, | ||
24 | private notifier: Notifier, | ||
25 | private router: Router, | ||
26 | private route: ActivatedRoute, | ||
27 | private videoStudioService: VideoStudioService, | ||
28 | private loadingBar: LoadingBarService, | ||
29 | private confirmService: ConfirmService | ||
30 | ) { | ||
31 | super() | ||
32 | } | ||
33 | |||
34 | ngOnInit () { | ||
35 | this.video = this.route.snapshot.data.video | ||
36 | |||
37 | const defaultValues = { | ||
38 | cut: { | ||
39 | start: 0, | ||
40 | end: this.video.duration | ||
41 | } | ||
42 | } | ||
43 | |||
44 | this.buildForm({ | ||
45 | cut: { | ||
46 | start: null, | ||
47 | end: null | ||
48 | }, | ||
49 | 'add-intro': { | ||
50 | file: null | ||
51 | }, | ||
52 | 'add-outro': { | ||
53 | file: null | ||
54 | }, | ||
55 | 'add-watermark': { | ||
56 | file: null | ||
57 | } | ||
58 | }, defaultValues) | ||
59 | } | ||
60 | |||
61 | get videoExtensions () { | ||
62 | return this.serverService.getHTMLConfig().video.file.extensions | ||
63 | } | ||
64 | |||
65 | get imageExtensions () { | ||
66 | return this.serverService.getHTMLConfig().video.image.extensions | ||
67 | } | ||
68 | |||
69 | async runEdition () { | ||
70 | if (this.isRunningEdition) return | ||
71 | |||
72 | const title = $localize`Are you sure you want to edit "${this.video.name}"?` | ||
73 | const listHTML = this.getTasksSummary().map(t => `<li>${t}</li>`).join('') | ||
74 | |||
75 | // eslint-disable-next-line max-len | ||
76 | const confirmHTML = $localize`The current video will be overwritten by this edited video and <strong>you won't be able to recover it</strong>.<br /><br />` + | ||
77 | $localize`As a reminder, the following tasks will be executed: <ol>${listHTML}</ol>` | ||
78 | |||
79 | if (await this.confirmService.confirm(confirmHTML, title) !== true) return | ||
80 | |||
81 | this.isRunningEdition = true | ||
82 | |||
83 | const tasks = this.buildTasks() | ||
84 | |||
85 | this.loadingBar.useRef().start() | ||
86 | |||
87 | return this.videoStudioService.editVideo(this.video.uuid, tasks) | ||
88 | .subscribe({ | ||
89 | next: () => { | ||
90 | this.notifier.success($localize`Edition tasks created.`) | ||
91 | |||
92 | // Don't redirect to old video version watch page that could be confusing for users | ||
93 | this.router.navigateByUrl('/my-library/videos') | ||
94 | }, | ||
95 | |||
96 | error: err => { | ||
97 | this.loadingBar.useRef().complete() | ||
98 | this.isRunningEdition = false | ||
99 | this.notifier.error(err.message) | ||
100 | console.error(err) | ||
101 | } | ||
102 | }) | ||
103 | } | ||
104 | |||
105 | getIntroOutroTooltip () { | ||
106 | return $localize`(extensions: ${this.videoExtensions.join(', ')})` | ||
107 | } | ||
108 | |||
109 | getWatermarkTooltip () { | ||
110 | return $localize`(extensions: ${this.imageExtensions.join(', ')})` | ||
111 | } | ||
112 | |||
113 | noEdition () { | ||
114 | return this.buildTasks().length === 0 | ||
115 | } | ||
116 | |||
117 | getTasksSummary () { | ||
118 | const tasks = this.buildTasks() | ||
119 | |||
120 | return tasks.map(t => { | ||
121 | if (t.name === 'add-intro') { | ||
122 | return $localize`"${this.getFilename(t.options.file)}" will be added at the beginning of the video` | ||
123 | } | ||
124 | |||
125 | if (t.name === 'add-outro') { | ||
126 | return $localize`"${this.getFilename(t.options.file)}" will be added at the end of the video` | ||
127 | } | ||
128 | |||
129 | if (t.name === 'add-watermark') { | ||
130 | return $localize`"${this.getFilename(t.options.file)}" image watermark will be added to the video` | ||
131 | } | ||
132 | |||
133 | if (t.name === 'cut') { | ||
134 | const { start, end } = t.options | ||
135 | |||
136 | if (start !== undefined && end !== undefined) { | ||
137 | return $localize`Video will begin at ${secondsToTime(start)} and stop at ${secondsToTime(end)}` | ||
138 | } | ||
139 | |||
140 | if (start !== undefined) { | ||
141 | return $localize`Video will begin at ${secondsToTime(start)}` | ||
142 | } | ||
143 | |||
144 | if (end !== undefined) { | ||
145 | return $localize`Video will stop at ${secondsToTime(end)}` | ||
146 | } | ||
147 | } | ||
148 | |||
149 | return '' | ||
150 | }) | ||
151 | } | ||
152 | |||
153 | private getFilename (obj: any) { | ||
154 | return obj.name | ||
155 | } | ||
156 | |||
157 | private buildTasks () { | ||
158 | const tasks: VideoStudioTask[] = [] | ||
159 | const value = this.form.value | ||
160 | |||
161 | const cut = value['cut'] | ||
162 | if (cut['start'] !== 0 || cut['end'] !== this.video.duration) { | ||
163 | |||
164 | const options: VideoStudioTaskCut['options'] = {} | ||
165 | if (cut['start'] !== 0) options.start = cut['start'] | ||
166 | if (cut['end'] !== this.video.duration) options.end = cut['end'] | ||
167 | |||
168 | tasks.push({ | ||
169 | name: 'cut', | ||
170 | options | ||
171 | }) | ||
172 | } | ||
173 | |||
174 | if (value['add-intro']?.['file']) { | ||
175 | tasks.push({ | ||
176 | name: 'add-intro', | ||
177 | options: { | ||
178 | file: value['add-intro']['file'] | ||
179 | } | ||
180 | }) | ||
181 | } | ||
182 | |||
183 | if (value['add-outro']?.['file']) { | ||
184 | tasks.push({ | ||
185 | name: 'add-outro', | ||
186 | options: { | ||
187 | file: value['add-outro']['file'] | ||
188 | } | ||
189 | }) | ||
190 | } | ||
191 | |||
192 | if (value['add-watermark']?.['file']) { | ||
193 | tasks.push({ | ||
194 | name: 'add-watermark', | ||
195 | options: { | ||
196 | file: value['add-watermark']['file'] | ||
197 | } | ||
198 | }) | ||
199 | } | ||
200 | |||
201 | return tasks | ||
202 | } | ||
203 | |||
204 | } | ||