Client: allow to copy magnet uri

diff --git a/client/.bootstraprc b/client/.bootstraprc
index dd6c2128cbebde65835b98a2839f66d01d8a159d..b7468b2feee74f39d6117004de9bccbcce9b8a03 100644 (file)
--- a/client/.bootstraprc
+++ b/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

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index d6b83c684012153583120f0a0db2985889ad1181..01d3f5deb3afb9c99a060aff9774011c004976b3 100644 (file)
--- a/client/src/app/app.component.ts
+++ b/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',
-    templateUrl: './app.component.html',
-    styleUrls: [ './app.component.scss' ]
+  selector: 'my-app',
+  templateUrl: './app.component.html',
+  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;

diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index 80734f7a2b15599269bdbdae7b5c27c36229c6e4..939af6309ed1a522d5257884c4ae0bca9e35f93f 100644 (file)
--- a/client/src/app/app.module.ts
+++ b/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

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 14947da882b2d09499bf18bc9da1d1fd79d45d0c..d75ed3538bb4bbb884d57a923df4372d39c494b4 100644 (file)
--- 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 9a36c17e254bb004ca490ea20d361cdab113298d..736ca7d5a7420e6d99e1b130206fbfcdb4f9ac8c 100644 (file)
--- 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.');