diff options
Diffstat (limited to 'client/src/app/videos/+video-watch')
3 files changed, 38 insertions, 7 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 index edd054123..f46f92a17 100644 --- a/client/src/app/videos/+video-watch/modal/video-download.component.html +++ b/client/src/app/videos/+video-watch/modal/video-download.component.html | |||
@@ -5,10 +5,20 @@ | |||
5 | </div> | 5 | </div> |
6 | 6 | ||
7 | <div class="modal-body"> | 7 | <div class="modal-body"> |
8 | <div class="peertube-select-container"> | 8 | <div class="form-group"> |
9 | <select [(ngModel)]="resolutionId"> | 9 | <div class="input-group input-group-sm"> |
10 | <option *ngFor="let file of video.files" [value]="file.resolution.id">{{ file.resolution.label }}</option> | 10 | <div class="input-group-prepend peertube-select-container"> |
11 | </select> | 11 | <select [(ngModel)]="resolutionId"> |
12 | <option *ngFor="let file of video.files" [value]="file.resolution.id">{{ file.resolution.label }}</option> | ||
13 | </select> | ||
14 | </div> | ||
15 | <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" /> | ||
16 | <div class="input-group-append"> | ||
17 | <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> | ||
18 | <span class="glyphicon glyphicon-copy"></span> | ||
19 | </button> | ||
20 | </div> | ||
21 | </div> | ||
12 | </div> | 22 | </div> |
13 | 23 | ||
14 | <div class="download-type"> | 24 | <div class="download-type"> |
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 index 6325f67a3..439cbb3e3 100644 --- a/client/src/app/videos/+video-watch/modal/video-download.component.scss +++ b/client/src/app/videos/+video-watch/modal/video-download.component.scss | |||
@@ -2,7 +2,13 @@ | |||
2 | @import 'mixins'; | 2 | @import 'mixins'; |
3 | 3 | ||
4 | .peertube-select-container { | 4 | .peertube-select-container { |
5 | @include peertube-select-container(130px); | 5 | @include peertube-select-container(100px); |
6 | border-top-right-radius: 0px; | ||
7 | border-bottom-right-radius: 0px; | ||
8 | |||
9 | select { | ||
10 | height: inherit; | ||
11 | } | ||
6 | } | 12 | } |
7 | 13 | ||
8 | .download-type { | 14 | .download-type { |
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 index f4d9003ee..b1b2c0623 100644 --- a/client/src/app/videos/+video-watch/modal/video-download.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-download.component.ts | |||
@@ -1,6 +1,8 @@ | |||
1 | import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core' | 1 | import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core' |
2 | import { VideoDetails } from '../../../shared/video/video-details.model' | 2 | import { VideoDetails } from '../../../shared/video/video-details.model' |
3 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | 3 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' |
4 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
5 | import { NotificationsService } from 'angular2-notifications' | ||
4 | 6 | ||
5 | @Component({ | 7 | @Component({ |
6 | selector: 'my-video-download', | 8 | selector: 'my-video-download', |
@@ -15,7 +17,11 @@ export class VideoDownloadComponent implements OnInit { | |||
15 | downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent' | 17 | downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent' |
16 | resolutionId: number | string = -1 | 18 | resolutionId: number | string = -1 |
17 | 19 | ||
18 | constructor (private modalService: NgbModal) { } | 20 | constructor ( |
21 | private notificationsService: NotificationsService, | ||
22 | private modalService: NgbModal, | ||
23 | private i18n: I18n | ||
24 | ) { } | ||
19 | 25 | ||
20 | ngOnInit () { | 26 | ngOnInit () { |
21 | this.resolutionId = this.video.files[0].resolution.id | 27 | this.resolutionId = this.video.files[0].resolution.id |
@@ -26,6 +32,10 @@ export class VideoDownloadComponent implements OnInit { | |||
26 | } | 32 | } |
27 | 33 | ||
28 | download () { | 34 | download () { |
35 | window.location.assign(this.getLink()) | ||
36 | } | ||
37 | |||
38 | getLink () { | ||
29 | // HTML select send us a string, so convert it to a number | 39 | // HTML select send us a string, so convert it to a number |
30 | this.resolutionId = parseInt(this.resolutionId.toString(), 10) | 40 | this.resolutionId = parseInt(this.resolutionId.toString(), 10) |
31 | 41 | ||
@@ -48,6 +58,11 @@ export class VideoDownloadComponent implements OnInit { | |||
48 | } | 58 | } |
49 | } | 59 | } |
50 | })() | 60 | })() |
51 | window.location.assign(link) | 61 | |
62 | return link | ||
63 | } | ||
64 | |||
65 | activateCopiedMessage () { | ||
66 | this.notificationsService.success(this.i18n('Success'), this.i18n('Copied')) | ||
52 | } | 67 | } |
53 | } | 68 | } |