Client: allow to copy magnet uri

client/.bootstraprc

@@ -97,10 +97,10 @@ styles:
   panels: false
   wells: false
   responsive-embed: true
-  close: false
+  close: true
 
   # Components w/ JavaScript
-  modals: false
+  modals: true
   tooltip: false
   popovers: false
   carousel: false

client/src/app/app.component.ts

@@ -1,14 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, ViewContainerRef } from '@angular/core';
 import { Router } from '@angular/router';
 
 @Component({
-    selector: 'my-app',
+  selector: 'my-app',
-    templateUrl: './app.component.html',
+  templateUrl: './app.component.html',
-    styleUrls: [ './app.component.scss' ]
+  styleUrls: [ './app.component.scss' ]
 })
 
 export class AppComponent {
-  constructor(private router: Router) {}
+  constructor(
+    private router: Router,
+    viewContainerRef: ViewContainerRef
+  ) {}
 
   isInAdmin() {
     return this.router.url.indexOf('/admin/') !== -1;

client/src/app/app.module.ts

@@ -9,6 +9,7 @@ import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
 import { DropdownModule } from 'ng2-bootstrap/components/dropdown';
 import { ProgressbarModule } from 'ng2-bootstrap/components/progressbar';
 import { PaginationModule } from 'ng2-bootstrap/components/pagination';
+import { ModalModule } from 'ng2-bootstrap/components/modal';
 import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';
 
 /*
@@ -115,6 +116,7 @@ const APP_PROVIDERS = [
     DropdownModule,
     ProgressbarModule,
     PaginationModule,
+    ModalModule,
     FileUploadModule
   ],
   providers: [ // expose our Services and Providers into Angular's dependency injection

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>

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.');