diff options
Diffstat (limited to 'client/src/app/+my-account/my-account-videos/modals')
6 files changed, 195 insertions, 0 deletions
diff --git a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html new file mode 100644 index 000000000..5e2323b91 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html | |||
@@ -0,0 +1,33 @@ | |||
1 | <ng-template #modal let-close="close" let-dismiss="dismiss"> | ||
2 | <div class="modal-header"> | ||
3 | <h4 i18n class="modal-title">Live information</h4> | ||
4 | |||
5 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon> | ||
6 | </div> | ||
7 | |||
8 | <div class="modal-body"> | ||
9 | <div class="form-group"> | ||
10 | <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label> | ||
11 | <my-input-readonly-copy id="liveVideoRTMPUrl" [value]="rtmpUrl"></my-input-readonly-copy> | ||
12 | </div> | ||
13 | |||
14 | <div class="form-group"> | ||
15 | <label for="liveVideoStreamKey" i18n>Live stream key</label> | ||
16 | <my-input-readonly-copy id="liveVideoStreamKey" [value]="streamKey"></my-input-readonly-copy> | ||
17 | </div> | ||
18 | </div> | ||
19 | |||
20 | <div class="modal-footer"> | ||
21 | <div class="form-group inputs"> | ||
22 | <input | ||
23 | type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel" | ||
24 | (click)="dismiss()" | ||
25 | > | ||
26 | |||
27 | <my-edit-button | ||
28 | i18n-label label="Update live settings" | ||
29 | [routerLink]="[ '/videos', 'update', video.uuid ]" (click)="dismiss()" | ||
30 | ></my-edit-button> | ||
31 | </div> | ||
32 | </div> | ||
33 | </ng-template> | ||
diff --git a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss new file mode 100644 index 000000000..a79fec179 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss | |||
@@ -0,0 +1,10 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | p-autocomplete { | ||
5 | display: block; | ||
6 | } | ||
7 | |||
8 | .form-group { | ||
9 | margin: 20px 0; | ||
10 | } \ No newline at end of file | ||
diff --git a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts new file mode 100644 index 000000000..a5885a8e7 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts | |||
@@ -0,0 +1,40 @@ | |||
1 | import { Component, ElementRef, ViewChild } from '@angular/core' | ||
2 | import { LiveVideoService, Video } from '@app/shared/shared-main' | ||
3 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | ||
4 | |||
5 | @Component({ | ||
6 | selector: 'my-live-stream-information', | ||
7 | templateUrl: './live-stream-information.component.html', | ||
8 | styleUrls: [ './live-stream-information.component.scss' ] | ||
9 | }) | ||
10 | export class LiveStreamInformationComponent { | ||
11 | @ViewChild('modal', { static: true }) modal: ElementRef | ||
12 | |||
13 | video: Video | ||
14 | rtmpUrl = '' | ||
15 | streamKey = '' | ||
16 | |||
17 | constructor ( | ||
18 | private modalService: NgbModal, | ||
19 | private liveVideoService: LiveVideoService | ||
20 | ) { } | ||
21 | |||
22 | show (video: Video) { | ||
23 | this.video = video | ||
24 | this.rtmpUrl = '' | ||
25 | this.streamKey = '' | ||
26 | |||
27 | this.loadLiveInfo(video) | ||
28 | |||
29 | this.modalService | ||
30 | .open(this.modal, { centered: true }) | ||
31 | } | ||
32 | |||
33 | private loadLiveInfo (video: Video) { | ||
34 | this.liveVideoService.getVideoLive(video.id) | ||
35 | .subscribe(live => { | ||
36 | this.rtmpUrl = live.rtmpUrl | ||
37 | this.streamKey = live.streamKey | ||
38 | }) | ||
39 | } | ||
40 | } | ||
diff --git a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html new file mode 100644 index 000000000..c7c5a0b69 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html | |||
@@ -0,0 +1,33 @@ | |||
1 | <ng-template #modal let-close="close" let-dismiss="dismiss"> | ||
2 | <div class="modal-header"> | ||
3 | <h4 i18n class="modal-title">Change ownership</h4> | ||
4 | |||
5 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon> | ||
6 | </div> | ||
7 | |||
8 | <div class="modal-body" [formGroup]="form"> | ||
9 | <div class="form-group"> | ||
10 | <label i18n for="next-ownership-username">Select the next owner</label> | ||
11 | <p-autoComplete formControlName="username" [suggestions]="usernamePropositions" | ||
12 | (completeMethod)="search($event)" id="next-ownership-username"></p-autoComplete> | ||
13 | <div *ngIf="formErrors.username" class="form-error"> | ||
14 | {{ formErrors.username }} | ||
15 | </div> | ||
16 | </div> | ||
17 | </div> | ||
18 | |||
19 | <div class="modal-footer"> | ||
20 | <div class="form-group inputs"> | ||
21 | <input | ||
22 | type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" | ||
23 | (click)="dismiss()" (key.enter)="dismiss()" | ||
24 | > | ||
25 | |||
26 | <input | ||
27 | type="submit" i18n-value value="Submit" class="action-button-submit" | ||
28 | [disabled]="!form.valid" | ||
29 | (click)="close()" | ||
30 | /> | ||
31 | </div> | ||
32 | </div> | ||
33 | </ng-template> | ||
diff --git a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss new file mode 100644 index 000000000..a79fec179 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss | |||
@@ -0,0 +1,10 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | p-autocomplete { | ||
5 | display: block; | ||
6 | } | ||
7 | |||
8 | .form-group { | ||
9 | margin: 20px 0; | ||
10 | } \ No newline at end of file | ||
diff --git a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts new file mode 100644 index 000000000..84237dee1 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts | |||
@@ -0,0 +1,69 @@ | |||
1 | import { Component, ElementRef, OnInit, ViewChild } from '@angular/core' | ||
2 | import { Notifier, UserService } from '@app/core' | ||
3 | import { OWNERSHIP_CHANGE_USERNAME_VALIDATOR } from '@app/shared/form-validators/video-ownership-change-validators' | ||
4 | import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' | ||
5 | import { Video, VideoOwnershipService } from '@app/shared/shared-main' | ||
6 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | ||
7 | |||
8 | @Component({ | ||
9 | selector: 'my-video-change-ownership', | ||
10 | templateUrl: './video-change-ownership.component.html', | ||
11 | styleUrls: [ './video-change-ownership.component.scss' ] | ||
12 | }) | ||
13 | export class VideoChangeOwnershipComponent extends FormReactive implements OnInit { | ||
14 | @ViewChild('modal', { static: true }) modal: ElementRef | ||
15 | |||
16 | usernamePropositions: string[] | ||
17 | |||
18 | error: string = null | ||
19 | |||
20 | private video: Video | undefined = undefined | ||
21 | |||
22 | constructor ( | ||
23 | protected formValidatorService: FormValidatorService, | ||
24 | private videoOwnershipService: VideoOwnershipService, | ||
25 | private notifier: Notifier, | ||
26 | private userService: UserService, | ||
27 | private modalService: NgbModal | ||
28 | ) { | ||
29 | super() | ||
30 | } | ||
31 | |||
32 | ngOnInit () { | ||
33 | this.buildForm({ | ||
34 | username: OWNERSHIP_CHANGE_USERNAME_VALIDATOR | ||
35 | }) | ||
36 | this.usernamePropositions = [] | ||
37 | } | ||
38 | |||
39 | show (video: Video) { | ||
40 | this.video = video | ||
41 | this.modalService | ||
42 | .open(this.modal, { centered: true }) | ||
43 | .result | ||
44 | .then(() => this.changeOwnership()) | ||
45 | .catch((_) => _) // Called when closing (cancel) the modal without validating, do nothing | ||
46 | } | ||
47 | |||
48 | search (event: { query: string }) { | ||
49 | const query = event.query | ||
50 | this.userService.autocomplete(query) | ||
51 | .subscribe( | ||
52 | usernames => this.usernamePropositions = usernames, | ||
53 | |||
54 | err => this.notifier.error(err.message) | ||
55 | ) | ||
56 | } | ||
57 | |||
58 | changeOwnership () { | ||
59 | const username = this.form.value['username'] | ||
60 | |||
61 | this.videoOwnershipService | ||
62 | .changeOwnership(this.video.id, username) | ||
63 | .subscribe( | ||
64 | () => this.notifier.success($localize`Ownership change request sent.`), | ||
65 | |||
66 | err => this.notifier.error(err.message) | ||
67 | ) | ||
68 | } | ||
69 | } | ||