aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/+video-watch/modal
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos/+video-watch/modal')
-rw-r--r--client/src/app/videos/+video-watch/modal/video-download.component.html42
-rw-r--r--client/src/app/videos/+video-watch/modal/video-download.component.scss17
-rw-r--r--client/src/app/videos/+video-watch/modal/video-download.component.ts44
-rw-r--r--client/src/app/videos/+video-watch/modal/video-report.component.html36
-rw-r--r--client/src/app/videos/+video-watch/modal/video-report.component.scss6
-rw-r--r--client/src/app/videos/+video-watch/modal/video-report.component.ts68
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.html47
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.scss3
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.ts48
9 files changed, 311 insertions, 0 deletions
diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.html b/client/src/app/videos/+video-watch/modal/video-download.component.html
new file mode 100644
index 000000000..f8f17a471
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-download.component.html
@@ -0,0 +1,42 @@
1<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
2 <div class="modal-dialog">
3 <div class="modal-content">
4
5 <div class="modal-header">
6 <span class="close" aria-hidden="true" (click)="hide()"></span>
7 <h4 class="modal-title">Download video</h4>
8 </div>
9
10 <div class="modal-body">
11 <div class="peertube-select-container">
12 <select [(ngModel)]="resolution">
13 <option *ngFor="let file of video.files" [value]="file.resolution">{{ file.resolutionLabel }}</option>
14 </select>
15 </div>
16
17 <div class="download-type">
18 <div class="peertube-radio-container">
19 <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
20 <label for="download-torrent">Torrent</label>
21 </div>
22
23 <div class="peertube-radio-container">
24 <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
25 <label for="download-direct">Direct download</label>
26 </div>
27 </div>
28
29 <div class="form-group inputs">
30 <span class="action-button action-button-cancel" (click)="hide()">
31 Cancel
32 </span>
33
34 <input
35 type="submit" value="Download" class="action-button-submit"
36 (click)="download()"
37 >
38 </div>
39 </div>
40 </div>
41 </div>
42</div>
diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.scss b/client/src/app/videos/+video-watch/modal/video-download.component.scss
new file mode 100644
index 000000000..6325f67a3
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-download.component.scss
@@ -0,0 +1,17 @@
1@import 'variables';
2@import 'mixins';
3
4.peertube-select-container {
5 @include peertube-select-container(130px);
6}
7
8.download-type {
9 margin-top: 30px;
10
11 .peertube-radio-container {
12 @include peertube-radio-container;
13
14 display: inline-block;
15 margin-right: 30px;
16 }
17}
diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.ts b/client/src/app/videos/+video-watch/modal/video-download.component.ts
new file mode 100644
index 000000000..1a73ea6df
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-download.component.ts
@@ -0,0 +1,44 @@
1import { Component, Input, OnInit, ViewChild } from '@angular/core'
2import { ModalDirective } from 'ngx-bootstrap/modal'
3import { VideoDetails } from '../../../shared/video/video-details.model'
4
5@Component({
6 selector: 'my-video-download',
7 templateUrl: './video-download.component.html',
8 styleUrls: [ './video-download.component.scss' ]
9})
10export class VideoDownloadComponent implements OnInit {
11 @Input() video: VideoDetails = null
12
13 @ViewChild('modal') modal: ModalDirective
14
15 downloadType: 'direct' | 'torrent' = 'torrent'
16 resolution = -1
17
18 constructor () {
19 // empty
20 }
21
22 ngOnInit () {
23 this.resolution = this.video.files[0].resolution
24 }
25
26 show () {
27 this.modal.show()
28 }
29
30 hide () {
31 this.modal.hide()
32 }
33
34 download () {
35 const file = this.video.files.find(f => f.resolution === this.resolution)
36 if (!file) {
37 console.error('Could not find file with resolution %d.', this.resolution)
38 return
39 }
40
41 const link = this.downloadType === 'direct' ? file.fileUrl : file.torrentUrl
42 window.open(link)
43 }
44}
diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.html b/client/src/app/videos/+video-watch/modal/video-report.component.html
new file mode 100644
index 000000000..a9a7beb48
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-report.component.html
@@ -0,0 +1,36 @@
1<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
2 <div class="modal-dialog">
3 <div class="modal-content">
4
5 <div class="modal-header">
6 <span class="close" aria-hidden="true" (click)="hide()"></span>
7 <h4 class="modal-title">Report video</h4>
8 </div>
9
10 <div class="modal-body">
11
12 <form novalidate [formGroup]="form" (ngSubmit)="report()">
13 <div class="form-group">
14 <textarea placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
15 </textarea>
16 <div *ngIf="formErrors.reason" class="form-error">
17 {{ formErrors.reason }}
18 </div>
19 </div>
20
21 <div class="form-group inputs">
22 <span class="action-button action-button-cancel" (click)="hide()">
23 Cancel
24 </span>
25
26 <input
27 type="submit" value="Submit" class="action-button-submit"
28 [disabled]="!form.valid"
29 >
30 </div>
31 </form>
32
33 </div>
34 </div>
35 </div>
36</div>
diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.scss b/client/src/app/videos/+video-watch/modal/video-report.component.scss
new file mode 100644
index 000000000..84562f15c
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-report.component.scss
@@ -0,0 +1,6 @@
1@import 'variables';
2@import 'mixins';
3
4textarea {
5 @include peertube-textarea(100%, 60px);
6}
diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.ts b/client/src/app/videos/+video-watch/modal/video-report.component.ts
new file mode 100644
index 000000000..050e827e7
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-report.component.ts
@@ -0,0 +1,68 @@
1import { Component, Input, OnInit, ViewChild } from '@angular/core'
2import { FormBuilder, FormGroup } from '@angular/forms'
3import { NotificationsService } from 'angular2-notifications'
4import { ModalDirective } from 'ngx-bootstrap/modal'
5import { FormReactive, VIDEO_ABUSE_REASON, VideoAbuseService } from '../../../shared/index'
6import { VideoDetails } from '../../../shared/video/video-details.model'
7
8@Component({
9 selector: 'my-video-report',
10 templateUrl: './video-report.component.html',
11 styleUrls: [ './video-report.component.scss' ]
12})
13export class VideoReportComponent extends FormReactive implements OnInit {
14 @Input() video: VideoDetails = null
15
16 @ViewChild('modal') modal: ModalDirective
17
18 error: string = null
19 form: FormGroup
20 formErrors = {
21 reason: ''
22 }
23 validationMessages = {
24 reason: VIDEO_ABUSE_REASON.MESSAGES
25 }
26
27 constructor (
28 private formBuilder: FormBuilder,
29 private videoAbuseService: VideoAbuseService,
30 private notificationsService: NotificationsService
31 ) {
32 super()
33 }
34
35 ngOnInit () {
36 this.buildForm()
37 }
38
39 buildForm () {
40 this.form = this.formBuilder.group({
41 reason: [ '', VIDEO_ABUSE_REASON.VALIDATORS ]
42 })
43
44 this.form.valueChanges.subscribe(data => this.onValueChanged(data))
45 }
46
47 show () {
48 this.modal.show()
49 }
50
51 hide () {
52 this.modal.hide()
53 }
54
55 report () {
56 const reason = this.form.value['reason']
57
58 this.videoAbuseService.reportVideo(this.video.id, reason)
59 .subscribe(
60 () => {
61 this.notificationsService.success('Success', 'Video reported.')
62 this.hide()
63 },
64
65 err => this.notificationsService.error('Error', err.message)
66 )
67 }
68}
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
new file mode 100644
index 000000000..85cf10a6c
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -0,0 +1,47 @@
1<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
2 <div class="modal-dialog">
3 <div class="modal-content">
4
5 <div class="modal-header">
6 <span class="close" aria-hidden="true" (click)="hide()"></span>
7 <h4 class="modal-title">Share</h4>
8 </div>
9
10 <div class="modal-body">
11 <div class="form-group">
12 <label>URL</label>
13 <div class="input-group input-group-sm">
14 <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" />
15 <div class="input-group-btn" placement="bottom right">
16 <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
17 <span class="glyphicon glyphicon-copy"></span>
18 </button>
19 </div>
20 </div>
21 </div>
22
23 <div class="form-group">
24 <label>Embed</label>
25 <div class="input-group input-group-sm">
26 <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" />
27 <div class="input-group-btn" placement="bottom right">
28 <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
29 <span class="glyphicon glyphicon-copy"></span>
30 </button>
31 </div>
32 </div>
33 </div>
34
35 <div *ngIf="notSecure()" class="alert alert-warning">
36 The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
37 </div>
38
39 <div class="form-group inputs">
40 <span class="action-button action-button-cancel" (click)="hide()">
41 Cancel
42 </span>
43 </div>
44 </div>
45 </div>
46 </div>
47</div>
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss
new file mode 100644
index 000000000..184e09027
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss
@@ -0,0 +1,3 @@
1.action-button-cancel {
2 margin-right: 0 !important;
3}
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts
new file mode 100644
index 000000000..678cccfb5
--- /dev/null
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts
@@ -0,0 +1,48 @@
1import { Component, Input, ViewChild } from '@angular/core'
2
3import { NotificationsService } from 'angular2-notifications'
4
5import { ModalDirective } from 'ngx-bootstrap/modal'
6import { VideoDetails } from '../../../shared/video/video-details.model'
7
8@Component({
9 selector: 'my-video-share',
10 templateUrl: './video-share.component.html',
11 styleUrls: [ './video-share.component.scss' ]
12})
13export class VideoShareComponent {
14 @Input() video: VideoDetails = null
15
16 @ViewChild('modal') modal: ModalDirective
17
18 constructor (private notificationsService: NotificationsService) {
19 // empty
20 }
21
22 show () {
23 this.modal.show()
24 }
25
26 hide () {
27 this.modal.hide()
28 }
29
30 getVideoIframeCode () {
31 return '<iframe width="560" height="315" ' +
32 'src="' + this.video.embedUrl + '" ' +
33 'frameborder="0" allowfullscreen>' +
34 '</iframe>'
35 }
36
37 getVideoUrl () {
38 return window.location.href
39 }
40
41 notSecure () {
42 return window.location.protocol === 'http:'
43 }
44
45 activateCopiedMessage () {
46 this.notificationsService.success('Success', 'Copied')
47 }
48}
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-18 09:18:58 +0000