aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2017-12-20 17:49:58 +0100
committerChocobozzz <me@florianbigard.com>2017-12-20 17:49:58 +0100
commit5f0805d39b94eb2de1b73e0f43ac8685ae900994 (patch)
treecba6c3022caad5e424bd6639bbaaae92113b7b7f /client/src/app/videos
parentcb9244de975909bac2922c4412fd948646ff3ba7 (diff)
downloadPeerTube-5f0805d39b94eb2de1b73e0f43ac8685ae900994.tar.gz
PeerTube-5f0805d39b94eb2de1b73e0f43ac8685ae900994.tar.zst
PeerTube-5f0805d39b94eb2de1b73e0f43ac8685ae900994.zip
Design modals
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-edit/shared/video-description.component.scss5
-rw-r--r--client/src/app/videos/+video-watch/video-download.component.html45
-rw-r--r--client/src/app/videos/+video-watch/video-download.component.scss25
-rw-r--r--client/src/app/videos/+video-watch/video-download.component.ts22
-rw-r--r--client/src/app/videos/+video-watch/video-report.component.html22
-rw-r--r--client/src/app/videos/+video-watch/video-report.component.scss6
-rw-r--r--client/src/app/videos/+video-watch/video-report.component.ts3
-rw-r--r--client/src/app/videos/+video-watch/video-share.component.html14
-rw-r--r--client/src/app/videos/+video-watch/video-share.component.scss3
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss36
10 files changed, 105 insertions, 76 deletions
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.scss b/client/src/app/videos/+video-edit/shared/video-description.component.scss
index d6a5190c5..2c731bee3 100644
--- a/client/src/app/videos/+video-edit/shared/video-description.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.scss
@@ -2,11 +2,8 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4textarea { 4textarea {
5 @include peertube-input-text(100%); 5 @include peertube-textarea(100%, 150px);
6 6
7 padding: 5px 15px;
8 font-size: 15px;
9 height: 150px;
10 margin-bottom: 15px; 7 margin-bottom: 15px;
11} 8}
12 9
diff --git a/client/src/app/videos/+video-watch/video-download.component.html b/client/src/app/videos/+video-watch/video-download.component.html
index 7efc79e93..f8f17a471 100644
--- a/client/src/app/videos/+video-watch/video-download.component.html
+++ b/client/src/app/videos/+video-watch/video-download.component.html
@@ -1,29 +1,40 @@
1<div bsModal #modal="bs-modal" class="modal" tabindex="-1"> 1<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
2 <div class="modal-dialog"> 2 <div class="modal-dialog">
3 <div class="modal-content modal-lg"> 3 <div class="modal-content">
4 4
5 <div class="modal-header"> 5 <div class="modal-header">
6 <button type="button" class="close" aria-label="Close" (click)="hide()"> 6 <span class="close" aria-hidden="true" (click)="hide()"></span>
7 <span aria-hidden="true">&times;</span> 7 <h4 class="modal-title">Download video</h4>
8 </button>
9 <h4 class="title-page title-page-single">Download</h4>
10 </div> 8 </div>
11 9
12 <div class="modal-body"> 10 <div class="modal-body">
13 <div *ngFor="let file of video.files" class="resolution-block"> 11 <div class="peertube-select-container">
14 <label>{{ file.resolutionLabel }}</label> 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>
15 28
16 <a class="orange-button-link " target="_blank" [href]="file.torrentUrl"> 29 <div class="form-group inputs">
17 <span class="icon icon-download"></span> 30 <span class="action-button action-button-cancel" (click)="hide()">
18 Torrent file 31 Cancel
19 </a> 32 </span>
20 <a class="orange-button-link" target="_blank" [href]="file.fileUrl">
21 <span class="icon icon-download"></span>
22 Download
23 </a>
24 33
25 <!-- Don't display magnet URI for now, this is not compatible with most torrent clients --> 34 <input
26 <!--<input #magnetUriInput (click)="magnetUriInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="file.magnetUri" />--> 35 type="submit" value="Download" class="action-button-submit"
36 (click)="download()"
37 >
27 </div> 38 </div>
28 </div> 39 </div>
29 </div> 40 </div>
diff --git a/client/src/app/videos/+video-watch/video-download.component.scss b/client/src/app/videos/+video-watch/video-download.component.scss
index 7eac3d1c9..5fca82135 100644
--- a/client/src/app/videos/+video-watch/video-download.component.scss
+++ b/client/src/app/videos/+video-watch/video-download.component.scss
@@ -1,26 +1,17 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.resolution-block:not(:first-child) { 4.peertube-select-container {
5 margin-top: 30px; 5 @include peertube-select-container(130px);
6}
7
8.orange-button-link {
9 margin-right: 10px;
10} 6}
11 7
12label { 8.download-type {
13 display: block; 9 margin-top: 30px;
14}
15
16.icon {
17 @include icon(21px);
18 10
19 margin-right: 5px; 11 .peertube-radio-container {
20 position: relative; 12 @include peertube-radio-container;
21 top: -1px;
22 13
23 &.icon-download { 14 display: inline-block;
24 background-image: url('../../../assets/images/video/download-white.svg'); 15 margin-right: 30px;
25 } 16 }
26} 17}
diff --git a/client/src/app/videos/+video-watch/video-download.component.ts b/client/src/app/videos/+video-watch/video-download.component.ts
index 095df1698..44ece986c 100644
--- a/client/src/app/videos/+video-watch/video-download.component.ts
+++ b/client/src/app/videos/+video-watch/video-download.component.ts
@@ -1,4 +1,4 @@
1import { Component, Input, ViewChild } from '@angular/core' 1import { Component, Input, OnInit, ViewChild } from '@angular/core'
2import { ModalDirective } from 'ngx-bootstrap/modal' 2import { ModalDirective } from 'ngx-bootstrap/modal'
3import { VideoDetails } from '../../shared/video/video-details.model' 3import { VideoDetails } from '../../shared/video/video-details.model'
4 4
@@ -7,15 +7,22 @@ import { VideoDetails } from '../../shared/video/video-details.model'
7 templateUrl: './video-download.component.html', 7 templateUrl: './video-download.component.html',
8 styleUrls: [ './video-download.component.scss' ] 8 styleUrls: [ './video-download.component.scss' ]
9}) 9})
10export class VideoDownloadComponent { 10export class VideoDownloadComponent implements OnInit {
11 @Input() video: VideoDetails = null 11 @Input() video: VideoDetails = null
12 12
13 @ViewChild('modal') modal: ModalDirective 13 @ViewChild('modal') modal: ModalDirective
14 14
15 downloadType: 'direct' | 'torrent' = 'torrent'
16 resolution = -1
17
15 constructor () { 18 constructor () {
16 // empty 19 // empty
17 } 20 }
18 21
22 ngOnInit () {
23 this.resolution = this.video.files[0].resolution
24 }
25
19 show () { 26 show () {
20 this.modal.show() 27 this.modal.show()
21 } 28 }
@@ -23,4 +30,15 @@ export class VideoDownloadComponent {
23 hide () { 30 hide () {
24 this.modal.hide() 31 this.modal.hide()
25 } 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 }
26} 44}
diff --git a/client/src/app/videos/+video-watch/video-report.component.html b/client/src/app/videos/+video-watch/video-report.component.html
index 20474bab4..a9a7beb48 100644
--- a/client/src/app/videos/+video-watch/video-report.component.html
+++ b/client/src/app/videos/+video-watch/video-report.component.html
@@ -1,32 +1,30 @@
1<div bsModal #modal="bs-modal" class="modal" tabindex="-1"> 1<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
2 <div class="modal-dialog"> 2 <div class="modal-dialog">
3 <div class="modal-content modal-lg"> 3 <div class="modal-content">
4 4
5 <div class="modal-header"> 5 <div class="modal-header">
6 <button type="button" class="close" aria-label="Close" (click)="hide()"> 6 <span class="close" aria-hidden="true" (click)="hide()"></span>
7 <span aria-hidden="true">&times;</span> 7 <h4 class="modal-title">Report video</h4>
8 </button>
9 <h4 class="title-page title-page-single">Report video</h4>
10 </div> 8 </div>
11 9
12 <div class="modal-body"> 10 <div class="modal-body">
13 11
14 <form novalidate [formGroup]="form" (ngSubmit)="report()"> 12 <form novalidate [formGroup]="form" (ngSubmit)="report()">
15 <div class="form-group"> 13 <div class="form-group">
16 <label for="reason">Reason</label> 14 <textarea placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
17 <textarea
18 id="reason" class="form-control" placeholder="Reason..."
19 formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"
20 >
21 </textarea> 15 </textarea>
22 <div *ngIf="formErrors.reason" class="form-error"> 16 <div *ngIf="formErrors.reason" class="form-error">
23 {{ formErrors.reason }} 17 {{ formErrors.reason }}
24 </div> 18 </div>
25 </div> 19 </div>
26 20
27 <div class="form-group"> 21 <div class="form-group inputs">
22 <span class="action-button action-button-cancel" (click)="hide()">
23 Cancel
24 </span>
25
28 <input 26 <input
29 type="submit" value="Report" class="orange-button" 27 type="submit" value="Submit" class="action-button-submit"
30 [disabled]="!form.valid" 28 [disabled]="!form.valid"
31 > 29 >
32 </div> 30 </div>
diff --git a/client/src/app/videos/+video-watch/video-report.component.scss b/client/src/app/videos/+video-watch/video-report.component.scss
new file mode 100644
index 000000000..09d273b35
--- /dev/null
+++ b/client/src/app/videos/+video-watch/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/video-report.component.ts b/client/src/app/videos/+video-watch/video-report.component.ts
index b94e4144e..ece14754a 100644
--- a/client/src/app/videos/+video-watch/video-report.component.ts
+++ b/client/src/app/videos/+video-watch/video-report.component.ts
@@ -7,7 +7,8 @@ import { VideoDetails } from '../../shared/video/video-details.model'
7 7
8@Component({ 8@Component({
9 selector: 'my-video-report', 9 selector: 'my-video-report',
10 templateUrl: './video-report.component.html' 10 templateUrl: './video-report.component.html',
11 styleUrls: [ './video-report.component.scss' ]
11}) 12})
12export class VideoReportComponent extends FormReactive implements OnInit { 13export class VideoReportComponent extends FormReactive implements OnInit {
13 @Input() video: VideoDetails = null 14 @Input() video: VideoDetails = null
diff --git a/client/src/app/videos/+video-watch/video-share.component.html b/client/src/app/videos/+video-watch/video-share.component.html
index e99eccbfe..85cf10a6c 100644
--- a/client/src/app/videos/+video-watch/video-share.component.html
+++ b/client/src/app/videos/+video-watch/video-share.component.html
@@ -1,12 +1,10 @@
1<div bsModal #modal="bs-modal" class="modal" tabindex="-1"> 1<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
2 <div class="modal-dialog modal-lg"> 2 <div class="modal-dialog">
3 <div class="modal-content"> 3 <div class="modal-content">
4 4
5 <div class="modal-header"> 5 <div class="modal-header">
6 <button type="button" class="close" aria-label="Close" (click)="hide()"> 6 <span class="close" aria-hidden="true" (click)="hide()"></span>
7 <span aria-hidden="true">&times;</span> 7 <h4 class="modal-title">Share</h4>
8 </button>
9 <h4 class="title-page title-page-single">Share</h4>
10 </div> 8 </div>
11 9
12 <div class="modal-body"> 10 <div class="modal-body">
@@ -37,6 +35,12 @@
37 <div *ngIf="notSecure()" class="alert alert-warning"> 35 <div *ngIf="notSecure()" class="alert alert-warning">
38 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). 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).
39 </div> 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>
40 </div> 44 </div>
41 </div> 45 </div>
42 </div> 46 </div>
diff --git a/client/src/app/videos/+video-watch/video-share.component.scss b/client/src/app/videos/+video-watch/video-share.component.scss
index e69de29bb..184e09027 100644
--- a/client/src/app/videos/+video-watch/video-share.component.scss
+++ b/client/src/app/videos/+video-watch/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/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index e742e1329..205a4333c 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -101,27 +101,27 @@
101 .action-more { 101 .action-more {
102 display: inline-block; 102 display: inline-block;
103 103
104 .dropdown-menu .icon { 104 .dropdown-menu .dropdown-item {
105 display: inline-block; 105 padding: 6px 24px;
106 background-repeat: no-repeat;
107 background-size: contain;
108 width: 21px;
109 height: 21px;
110 vertical-align: middle;
111 margin-right: 5px;
112 position: relative;
113 top: -1px;
114 106
115 &.icon-download { 107 .icon {
116 background-image: url('../../../assets/images/video/download-grey.svg'); 108 @include icon(24px);
117 }
118 109
119 &.icon-alert { 110 margin-right: 10px;
120 background-image: url('../../../assets/images/video/alert.svg'); 111 position: relative;
121 } 112 top: -1px;
113
114 &.icon-download {
115 background-image: url('../../../assets/images/video/download-black.svg');
116 }
117
118 &.icon-alert {
119 background-image: url('../../../assets/images/video/alert.svg');
120 }
122 121
123 &.icon-blacklist { 122 &.icon-blacklist {
124 background-image: url('../../../assets/images/video/eye-closed.svg'); 123 background-image: url('../../../assets/images/video/blacklist.svg');
124 }
125 } 125 }
126 } 126 }
127 } 127 }