2 files changed, 31 insertions, 2 deletions

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 14947da88..d75ed3538 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -50,7 +50,7 @@
     </div>
 
     <div id="video-actions" class="col-md-4 text-right">
-      <button title="Get magnet URI" id="magnet-uri" class="btn btn-default">
+      <button title="Get magnet URI" id="magnet-uri" class="btn btn-default" (click)="showMagnetUriModal()">
         <span class="glyphicon glyphicon-magnet"></span> Magnet
       </button>
     </div>
@@ -72,3 +72,20 @@
   </div>
 </div>
 
+<div *ngIf="video !== null" bsModal #magnetUriModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="magnetUriModal" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+
+      <div class="modal-header">
+        <button type="button" class="close" aria-label="Close" (click)="hideMagnetUriModal()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h4 class="modal-title">Magnet Uri</h4>
+      </div>
+
+      <div class="modal-body">
+        <input #magnetUriInput (click)="magnetUriInput.select()" type="text" class="form-control input-sm" readonly [value]="video.magnetUri" />
+      </div>
+    </div>
+  </div>
+</div>
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 9a36c17e2..736ca7d5a 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -1,6 +1,8 @@
-import { Component, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
+import { ModalDirective } from 'ng2-bootstrap/components/modal';
+
 import { Video, VideoService } from '../shared';
 import { WebTorrentService } from './webtorrent.service';
 
@@ -13,6 +15,8 @@ import { WebTorrentService } from './webtorrent.service';
 export class VideoWatchComponent implements OnInit, OnDestroy {
   private static LOADTIME_TOO_LONG: number = 30000;
 
+  @ViewChild('magnetUriModal') magnetUriModal: ModalDirective;
+
   downloadSpeed: number;
   error: boolean = false;
   loading: boolean = false;
@@ -87,6 +91,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     });
   }
 
+  showMagnetUriModal() {
+    this.magnetUriModal.show();
+  }
+
+  hideMagnetUriModal() {
+    this.magnetUriModal.hide();
+  }
+
   private loadTooLong() {
     this.error = true;
     console.error('The video load seems to be abnormally long.');