Add ability to download a video from direct link or torrent file

6 files changed, 43 insertions, 32 deletions

diff --git a/client/src/app/videos/+video-watch/video-download.component.html b/client/src/app/videos/+video-watch/video-download.component.html
new file mode 100644
index 000000000..ddc57e999
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-download.component.html
@@ -0,0 +1,30 @@
+<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content modal-lg">
+
+      <div class="modal-header">
+        <button type="button" class="close" aria-label="Close" (click)="hide()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h4 class="modal-title">Download</h4>
+      </div>
+
+      <div class="modal-body">
+        <div *ngFor="let file of video.files" class="resolution-block">
+          <label>{{ file.resolutionLabel }}</label>
+          <a class="btn btn-default " target="_blank" [href]="file.torrentUrl">
+            <span class="glyphicon glyphicon-download"></span>
+            Torrent file
+          </a>
+          <a class="btn btn-default" target="_blank" [href]="file.fileUrl">
+            <span class="glyphicon glyphicon-download"></span>
+            Download
+          </a>
+
+          <!-- Don't display magnet URI for now, this is not compatible with most torrent clients -->
+          <!--<input #magnetUriInput (click)="magnetUriInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="file.magnetUri" />-->
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/videos/+video-watch/video-magnet.component.ts b/client/src/app/videos/+video-watch/video-download.component.ts
index f9432e92c..22149aa6b 100644
--- a/client/src/app/videos/+video-watch/video-magnet.component.ts
+++ b/client/src/app/videos/+video-watch/video-download.component.ts
@@ -5,10 +5,11 @@ import { ModalDirective } from 'ngx-bootstrap/modal'
 import { Video } from '../shared'
 
 @Component({
-  selector: 'my-video-magnet',
-  templateUrl: './video-magnet.component.html'
+  selector: 'my-video-download',
+  templateUrl: './video-download.component.html',
+  styles: [ '.resolution-block { margin-top: 20px; }' ]
 })
-export class VideoMagnetComponent {
+export class VideoDownloadComponent {
   @Input() video: Video = null
 
   @ViewChild('modal') modal: ModalDirective
diff --git a/client/src/app/videos/+video-watch/video-magnet.component.html b/client/src/app/videos/+video-watch/video-magnet.component.html
deleted file mode 100644
index 484280c45..000000000
--- a/client/src/app/videos/+video-watch/video-magnet.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content modal-lg">
-
-      <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="hide()">
-          <span aria-hidden="true">&times;</span>
-        </button>
-        <h4 class="modal-title">Magnet Uri</h4>
-      </div>
-
-      <div class="modal-body">
-        <div *ngFor="let file of video.files">
-          <label>{{ file.resolutionLabel }}</label>
-          <input #magnetUriInput (click)="magnetUriInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="file.magnetUri" />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 88863131a..5d5827344 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -71,8 +71,8 @@
           </li>
 
           <li role="menuitem">
-            <a class="dropdown-item" title="Get magnet URI" href="#" (click)="showMagnetUriModal($event)">
-              <span class="glyphicon glyphicon-magnet"></span> Magnet
+            <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
+              <span class="glyphicon glyphicon-download-alt"></span> Download
             </a>
           </li>
 
@@ -179,6 +179,6 @@
 
 <ng-template [ngIf]="video !== null">
   <my-video-share #videoShareModal [video]="video"></my-video-share>
-  <my-video-magnet #videoMagnetModal [video]="video"></my-video-magnet>
+  <my-video-download #videoDownloadModal [video]="video"></my-video-download>
   <my-video-report #videoReportModal [video]="video"></my-video-report>
 </ng-template>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index bd98e877c..651298c14 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -10,7 +10,7 @@ import { MetaService } from '@ngx-meta/core'
 import { NotificationsService } from 'angular2-notifications'
 
 import { AuthService, ConfirmService } from '../../core'
-import { VideoMagnetComponent } from './video-magnet.component'
+import { VideoDownloadComponent } from './video-download.component'
 import { VideoShareComponent } from './video-share.component'
 import { VideoReportComponent } from './video-report.component'
 import { Video, VideoService } from '../shared'
@@ -23,7 +23,7 @@ import { UserVideoRateType, VideoRateType } from '../../../../../shared'
   styleUrls: [ './video-watch.component.scss' ]
 })
 export class VideoWatchComponent implements OnInit, OnDestroy {
-  @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent
+  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
   @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
 
@@ -160,9 +160,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.videoShareModal.show()
   }
 
-  showMagnetUriModal (event: Event) {
+  showDownloadModal (event: Event) {
     event.preventDefault()
-    this.videoMagnetModal.show()
+    this.videoDownloadModal.show()
   }
 
   isUserLoggedIn () {
diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
index 5f20b171e..c6c1344ce 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -7,7 +7,7 @@ import { SharedModule } from '../../shared'
 import { VideoWatchComponent } from './video-watch.component'
 import { VideoReportComponent } from './video-report.component'
 import { VideoShareComponent } from './video-share.component'
-import { VideoMagnetComponent } from './video-magnet.component'
+import { VideoDownloadComponent } from './video-download.component'
 
 @NgModule({
   imports: [
@@ -18,7 +18,7 @@ import { VideoMagnetComponent } from './video-magnet.component'
   declarations: [
     VideoWatchComponent,
 
-    VideoMagnetComponent,
+    VideoDownloadComponent,
     VideoShareComponent,
     VideoReportComponent
   ],