add url field to download modal

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 edd0541230299a593e211ecf7b13c3af0eabd4b9..f46f92a17aeff4254ebaa80bbe34b0aa90e3a256 100644 (file)
--- 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 @@
   </div>
 
   <div class="modal-body">
-    <div class="peertube-select-container">
-      <select [(ngModel)]="resolutionId">
-        <option *ngFor="let file of video.files" [value]="file.resolution.id">{{ file.resolution.label }}</option>
-      </select>
+    <div class="form-group">
+      <div class="input-group input-group-sm">
+        <div class="input-group-prepend peertube-select-container">
+          <select [(ngModel)]="resolutionId">
+            <option *ngFor="let file of video.files" [value]="file.resolution.id">{{ file.resolution.label }}</option>
+          </select>
+        </div>
+        <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
+        <div class="input-group-append">
+          <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+            <span class="glyphicon glyphicon-copy"></span>
+          </button>
+        </div>
+      </div>
     </div>
 
     <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 6325f67a3a3fff2aa67fbc10bb1abc5293e37386..439cbb3e387fd9881e15163b02b69a859992cf61 100644 (file)
--- 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 @@
 @import 'mixins';
 
 .peertube-select-container {
-  @include peertube-select-container(130px);
+  @include peertube-select-container(100px);
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+
+  select {
+    height: inherit;
+  }
 }
 
 .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 1361146dd774521d2aa839a8334178b5b1e9a595..b1b2c06237714527b792d32d27115e27e274b875 100644 (file)
--- 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 @@
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { NotificationsService } from 'angular2-notifications'
 
 @Component({
   selector: 'my-video-download',
@@ -15,9 +17,11 @@ export class VideoDownloadComponent implements OnInit {
   downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent'
   resolutionId: number | string = -1
 
-  constructor (private modalService: NgbModal) {
-    // empty
-  }
+  constructor (
+    private notificationsService: NotificationsService,
+    private modalService: NgbModal,
+    private i18n: I18n
+  ) { }
 
   ngOnInit () {
     this.resolutionId = this.video.files[0].resolution.id
@@ -28,6 +32,10 @@ export class VideoDownloadComponent implements OnInit {
   }
 
   download () {
+    window.location.assign(this.getLink())
+  }
+
+  getLink () {
     // HTML select send us a string, so convert it to a number
     this.resolutionId = parseInt(this.resolutionId.toString(), 10)
 
@@ -50,6 +58,11 @@ export class VideoDownloadComponent implements OnInit {
         }
       }
     })()
-    window.location.assign(link)
+
+    return link
+  }
+
+  activateCopiedMessage () {
+    this.notificationsService.success(this.i18n('Success'), this.i18n('Copied'))
   }
 }