diff options
author | Chocobozzz <me@florianbigard.com> | 2020-09-17 09:20:52 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2020-11-09 15:33:04 +0100 |
commit | c6c0fa6cd8fe8f752463d8982c3dbcd448739c4e (patch) | |
tree | 79304b0152b0a38d33b26e65d4acdad0da4032a7 /client/src/app/+videos/+video-edit/video-add-components | |
parent | 110d463fece85e87a26aca48a6048ae0017a27b3 (diff) | |
download | PeerTube-c6c0fa6cd8fe8f752463d8982c3dbcd448739c4e.tar.gz PeerTube-c6c0fa6cd8fe8f752463d8982c3dbcd448739c4e.tar.zst PeerTube-c6c0fa6cd8fe8f752463d8982c3dbcd448739c4e.zip |
Live streaming implementation first step
Diffstat (limited to 'client/src/app/+videos/+video-edit/video-add-components')
5 files changed, 180 insertions, 34 deletions
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html new file mode 100644 index 000000000..6997f5388 --- /dev/null +++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html | |||
@@ -0,0 +1,47 @@ | |||
1 | <div *ngIf="!isInUpdateForm" class="upload-video-container"> | ||
2 | <div class="first-step-block"> | ||
3 | <my-global-icon class="upload-icon" iconName="upload" aria-hidden="true"></my-global-icon> | ||
4 | |||
5 | <div class="form-group"> | ||
6 | <label i18n for="first-step-channel">Channel</label> | ||
7 | <my-select-channel | ||
8 | labelForId="first-step-channel" [items]="userVideoChannels" [(ngModel)]="firstStepChannelId" | ||
9 | ></my-select-channel> | ||
10 | </div> | ||
11 | |||
12 | <div class="form-group"> | ||
13 | <label i18n for="first-step-privacy">Privacy</label> | ||
14 | <my-select-options | ||
15 | labelForId="first-step-privacy" [items]="videoPrivacies" [(ngModel)]="firstStepPrivacyId" | ||
16 | ></my-select-options> | ||
17 | </div> | ||
18 | |||
19 | <input | ||
20 | type="button" i18n-value value="Go Live" (click)="goLive()" | ||
21 | /> | ||
22 | </div> | ||
23 | </div> | ||
24 | |||
25 | <div *ngIf="error" class="alert alert-danger"> | ||
26 | <div i18n>Sorry, but something went wrong</div> | ||
27 | {{ error }} | ||
28 | </div> | ||
29 | |||
30 | <!-- Hidden because we want to load the component --> | ||
31 | <form [hidden]="!isInUpdateForm" novalidate [formGroup]="form"> | ||
32 | <my-video-edit | ||
33 | [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions" [schedulePublicationPossible]="false" | ||
34 | [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels" [videoLive]="videoLive" | ||
35 | type="go-live" | ||
36 | ></my-video-edit> | ||
37 | |||
38 | <div class="submit-container"> | ||
39 | <div class="submit-button" | ||
40 | (click)="updateSecondStep()" | ||
41 | [ngClass]="{ disabled: !form.valid }" | ||
42 | > | ||
43 | <my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon> | ||
44 | <input type="button" i18n-value value="Update" /> | ||
45 | </div> | ||
46 | </div> | ||
47 | </form> | ||
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts new file mode 100644 index 000000000..64fd4c4d4 --- /dev/null +++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts | |||
@@ -0,0 +1,129 @@ | |||
1 | |||
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 { scrollToTop } from '@app/helpers' | ||
6 | import { FormValidatorService } from '@app/shared/shared-forms' | ||
7 | import { VideoCaptionService, VideoEdit, VideoService, VideoLiveService } from '@app/shared/shared-main' | ||
8 | import { LoadingBarService } from '@ngx-loading-bar/core' | ||
9 | import { VideoCreate, VideoLive, VideoPrivacy } from '@shared/models' | ||
10 | import { VideoSend } from './video-send' | ||
11 | |||
12 | @Component({ | ||
13 | selector: 'my-video-go-live', | ||
14 | templateUrl: './video-go-live.component.html', | ||
15 | styleUrls: [ | ||
16 | '../shared/video-edit.component.scss', | ||
17 | './video-send.scss' | ||
18 | ] | ||
19 | }) | ||
20 | export class VideoGoLiveComponent extends VideoSend implements OnInit, CanComponentDeactivate { | ||
21 | @Output() firstStepDone = new EventEmitter<string>() | ||
22 | @Output() firstStepError = new EventEmitter<void>() | ||
23 | |||
24 | isInUpdateForm = false | ||
25 | |||
26 | videoLive: VideoLive | ||
27 | videoId: number | ||
28 | videoUUID: string | ||
29 | error: string | ||
30 | |||
31 | protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC | ||
32 | |||
33 | constructor ( | ||
34 | protected formValidatorService: FormValidatorService, | ||
35 | protected loadingBar: LoadingBarService, | ||
36 | protected notifier: Notifier, | ||
37 | protected authService: AuthService, | ||
38 | protected serverService: ServerService, | ||
39 | protected videoService: VideoService, | ||
40 | protected videoCaptionService: VideoCaptionService, | ||
41 | private videoLiveService: VideoLiveService, | ||
42 | private router: Router | ||
43 | ) { | ||
44 | super() | ||
45 | } | ||
46 | |||
47 | ngOnInit () { | ||
48 | super.ngOnInit() | ||
49 | } | ||
50 | |||
51 | canDeactivate () { | ||
52 | return { canDeactivate: true } | ||
53 | } | ||
54 | |||
55 | goLive () { | ||
56 | const video: VideoCreate = { | ||
57 | name: 'Live', | ||
58 | privacy: VideoPrivacy.PRIVATE, | ||
59 | nsfw: this.serverConfig.instance.isNSFW, | ||
60 | waitTranscoding: true, | ||
61 | commentsEnabled: true, | ||
62 | downloadEnabled: true, | ||
63 | channelId: this.firstStepChannelId | ||
64 | } | ||
65 | |||
66 | this.firstStepDone.emit(name) | ||
67 | |||
68 | // Go live in private mode, but correctly fill the update form with the first user choice | ||
69 | const toPatch = Object.assign({}, video, { privacy: this.firstStepPrivacyId }) | ||
70 | this.form.patchValue(toPatch) | ||
71 | |||
72 | this.videoLiveService.goLive(video).subscribe( | ||
73 | res => { | ||
74 | this.videoId = res.video.id | ||
75 | this.videoUUID = res.video.uuid | ||
76 | this.isInUpdateForm = true | ||
77 | |||
78 | this.fetchVideoLive() | ||
79 | }, | ||
80 | |||
81 | err => { | ||
82 | this.firstStepError.emit() | ||
83 | this.notifier.error(err.message) | ||
84 | } | ||
85 | ) | ||
86 | } | ||
87 | |||
88 | updateSecondStep () { | ||
89 | if (this.checkForm() === false) { | ||
90 | return | ||
91 | } | ||
92 | |||
93 | const video = new VideoEdit() | ||
94 | video.patch(this.form.value) | ||
95 | video.id = this.videoId | ||
96 | video.uuid = this.videoUUID | ||
97 | |||
98 | // Update the video | ||
99 | this.updateVideoAndCaptions(video) | ||
100 | .subscribe( | ||
101 | () => { | ||
102 | this.notifier.success($localize`Live published.`) | ||
103 | |||
104 | this.router.navigate([ '/videos/watch', video.uuid ]) | ||
105 | }, | ||
106 | |||
107 | err => { | ||
108 | this.error = err.message | ||
109 | scrollToTop() | ||
110 | console.error(err) | ||
111 | } | ||
112 | ) | ||
113 | |||
114 | } | ||
115 | |||
116 | private fetchVideoLive () { | ||
117 | this.videoLiveService.getVideoLive(this.videoId) | ||
118 | .subscribe( | ||
119 | videoLive => { | ||
120 | this.videoLive = videoLive | ||
121 | }, | ||
122 | |||
123 | err => { | ||
124 | this.firstStepError.emit() | ||
125 | this.notifier.error(err.message) | ||
126 | } | ||
127 | ) | ||
128 | } | ||
129 | } | ||
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts index e9ad8af7a..64e887987 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts +++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts | |||
@@ -6,6 +6,7 @@ import { FormValidatorService } from '@app/shared/shared-forms' | |||
6 | import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main' | 6 | import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main' |
7 | import { LoadingBarService } from '@ngx-loading-bar/core' | 7 | import { LoadingBarService } from '@ngx-loading-bar/core' |
8 | import { VideoPrivacy, VideoUpdate } from '@shared/models' | 8 | import { VideoPrivacy, VideoUpdate } from '@shared/models' |
9 | import { hydrateFormFromVideo } from '../shared/video-edit-utils' | ||
9 | import { VideoSend } from './video-send' | 10 | import { VideoSend } from './video-send' |
10 | 11 | ||
11 | @Component({ | 12 | @Component({ |
@@ -99,7 +100,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca | |||
99 | previewUrl: null | 100 | previewUrl: null |
100 | })) | 101 | })) |
101 | 102 | ||
102 | this.hydrateFormFromVideo() | 103 | hydrateFormFromVideo(this.form, this.video, false) |
103 | }, | 104 | }, |
104 | 105 | ||
105 | err => { | 106 | err => { |
@@ -136,10 +137,5 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca | |||
136 | console.error(err) | 137 | console.error(err) |
137 | } | 138 | } |
138 | ) | 139 | ) |
139 | |||
140 | } | ||
141 | |||
142 | private hydrateFormFromVideo () { | ||
143 | this.form.patchValue(this.video.toFormPatch()) | ||
144 | } | 140 | } |
145 | } | 141 | } |
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts index 8bad81097..47f59a5d0 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts +++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts | |||
@@ -7,6 +7,7 @@ import { FormValidatorService } from '@app/shared/shared-forms' | |||
7 | import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main' | 7 | import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main' |
8 | import { LoadingBarService } from '@ngx-loading-bar/core' | 8 | import { LoadingBarService } from '@ngx-loading-bar/core' |
9 | import { VideoPrivacy, VideoUpdate } from '@shared/models' | 9 | import { VideoPrivacy, VideoUpdate } from '@shared/models' |
10 | import { hydrateFormFromVideo } from '../shared/video-edit-utils' | ||
10 | import { VideoSend } from './video-send' | 11 | import { VideoSend } from './video-send' |
11 | 12 | ||
12 | @Component({ | 13 | @Component({ |
@@ -109,7 +110,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom | |||
109 | 110 | ||
110 | this.videoCaptions = videoCaptions | 111 | this.videoCaptions = videoCaptions |
111 | 112 | ||
112 | this.hydrateFormFromVideo() | 113 | hydrateFormFromVideo(this.form, this.video, true) |
113 | }, | 114 | }, |
114 | 115 | ||
115 | err => { | 116 | err => { |
@@ -146,31 +147,5 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom | |||
146 | console.error(err) | 147 | console.error(err) |
147 | } | 148 | } |
148 | ) | 149 | ) |
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 | } | 150 | } |
176 | } | 151 | } |
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts index 32a17052a..258f5c7a0 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts +++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts | |||
@@ -157,7 +157,6 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy | |||
157 | this.waitTranscodingEnabled = false | 157 | this.waitTranscodingEnabled = false |
158 | } | 158 | } |
159 | 159 | ||
160 | const privacy = this.firstStepPrivacyId.toString() | ||
161 | const nsfw = this.serverConfig.instance.isNSFW | 160 | const nsfw = this.serverConfig.instance.isNSFW |
162 | const waitTranscoding = true | 161 | const waitTranscoding = true |
163 | const commentsEnabled = true | 162 | const commentsEnabled = true |