Client: move video watch modals in their own component

client/src/app/app.module.ts

@@ -52,6 +52,8 @@ import {
   VideoMiniatureComponent,
   VideoSortComponent,
   VideoWatchComponent,
+  VideoShareComponent,
+  VideoMagnetComponent,
   VideoService,
   WebTorrentService
 } from './videos';
@@ -118,6 +120,8 @@ const APP_PROVIDERS = [
     VideosComponent,
     VideoSortComponent,
     VideoWatchComponent,
+    VideoShareComponent,
+    VideoMagnetComponent
   ],
   imports: [ // import Angular's modules
     BrowserModule,

client/src/app/videos/video-watch/index.ts

@@ -1,2 +1,4 @@
+export * from './video-magnet.component';
+export * from './video-share.component';
 export * from './video-watch.component';
 export * from './webtorrent.service';

client/src/app/videos/video-watch/video-magnet.component.html

@@ -0,0 +1,17 @@
+<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)="hideModal()">
+          <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" readonly [value]="video.magnetUri" />
+      </div>
+    </div>
+  </div>
+</div>

client/src/app/videos/video-watch/video-magnet.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, ViewChild } from '@angular/core';
+
+import { ModalDirective } from 'ng2-bootstrap/components/modal';
+
+import { Video } from '../shared';
+
+@Component({
+  selector: 'my-video-magnet',
+  templateUrl: './video-magnet.component.html'
+})
+export class VideoMagnetComponent {
+  @Input() video: Video = null;
+
+  @ViewChild('modal') modal: ModalDirective;
+
+  constructor() {
+    // empty
+  }
+
+  show() {
+    this.modal.show();
+  }
+
+  hide() {
+    this.modal.hide();
+  }
+}

client/src/app/videos/video-watch/video-share.component.html

@@ -0,0 +1,25 @@
+<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+
+      <div class="modal-header">
+        <button type="button" class="close" aria-label="Close" (click)="hideModal()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h4 class="modal-title">Share</h4>
+      </div>
+
+      <div class="modal-body">
+        <div class="form-group">
+          <label>URL</label>
+          <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" />
+        </div>
+
+        <div class="form-group">
+          <label>Embed</label>
+          <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

client/src/app/videos/video-watch/video-share.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input, ViewChild } from '@angular/core';
+
+import { ModalDirective } from 'ng2-bootstrap/components/modal';
+
+import { Video } from '../shared';
+
+@Component({
+  selector: 'my-video-share',
+  templateUrl: './video-share.component.html'
+})
+export class VideoShareComponent {
+  @Input() video: Video = null;
+
+  @ViewChild('modal') modal: ModalDirective;
+
+  constructor() {
+    // empty
+  }
+
+  show() {
+    this.modal.show();
+  }
+
+  hide() {
+    this.modal.hide();
+  }
+
+  getVideoIframeCode() {
+    return '<iframe width="560" height="315" ' +
+           'src="' + window.location.origin + '/videos/embed/' + this.video.id + '" ' +
+           'frameborder="0" allowfullscreen>' +
+           '</iframe>';
+  }
+
+  getVideoUrl() {
+    return window.location.href;
+  }
+}

client/src/app/videos/video-watch/video-watch.component.html

@@ -79,46 +79,5 @@
   </div>
 </div>
 
-<div *ngIf="video !== null" bsModal #magnetUriModal="bs-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="magnetUriModal" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content modal-lg">
-
-      <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>
-
-<div *ngIf="video !== null" bsModal #shareModal="bs-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="shareModal" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
-    <div class="modal-content">
-
-      <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="hideShareModal()">
-          <span aria-hidden="true">&times;</span>
-        </button>
-        <h4 class="modal-title">Share</h4>
-      </div>
-
-      <div class="modal-body">
-        <div class="form-group">
-          <label>URL</label>
-          <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm" readonly [value]="getVideoUrl()" />
-        </div>
-
-        <div class="form-group">
-          <label>Embed</label>
-          <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm" readonly [value]="getVideoIframeCode()" />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+<my-video-share #videoShareModal *ngIf="video !== null" [video]="video"></my-video-share>
+<my-video-magnet #videoMagnetModal *ngIf="video !== null" [video]="video"></my-video-magnet>

client/src/app/videos/video-watch/video-watch.component.scss

@@ -83,10 +83,3 @@
     }
   }
 }
-
-.modal-content {
-  input {
-    /* Force blank on readonly inputs */
-    background-color: #fff;
-  }
-}

client/src/app/videos/video-watch/video-watch.component.ts

@@ -1,10 +1,11 @@
 import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { ModalDirective } from 'ng2-bootstrap/components/modal';
 import { MetaService } from 'ng2-meta';
 import * as videojs from 'video.js';
 
+import { VideoMagnetComponent } from './video-magnet.component';
+import { VideoShareComponent } from './video-share.component';
 import { Video, VideoService } from '../shared';
 import { WebTorrentService } from './webtorrent.service';
 
@@ -17,8 +18,8 @@ import { WebTorrentService } from './webtorrent.service';
 export class VideoWatchComponent implements OnInit, OnDestroy {
   private static LOADTIME_TOO_LONG: number = 30000;
 
-  @ViewChild('magnetUriModal') magnetUriModal: ModalDirective;
-  @ViewChild('shareModal') shareModal: ModalDirective;
+  @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent;
+  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent;
 
   downloadSpeed: number;
   error: boolean = false;
@@ -121,31 +122,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     });
   }
 
-  showMagnetUriModal() {
-    this.magnetUriModal.show();
-  }
-
-  hideMagnetUriModal() {
-    this.magnetUriModal.hide();
-  }
-
   showShareModal() {
-    this.shareModal.show();
+    this.videoShareModal.show();
   }
 
-  hideShareModal() {
-    this.shareModal.hide();
-  }
-
-  getVideoIframeCode() {
-    return '<iframe width="560" height="315" ' +
-           'src="' + window.location.origin + '/videos/embed/' + this.video.id + '" ' +
-           'frameborder="0" allowfullscreen>' +
-           '</iframe>';
-  }
-
-  getVideoUrl() {
-    return window.location.href;
+  showMagnetUriModal() {
+    this.videoMagnetModal.show();
   }
 
   private loadTooLong() {

client/src/sass/application.scss

@@ -50,6 +50,10 @@ menu {
   display: none !important;
 }
 
+input.readonly {
+  /* Force blank on readonly inputs */
+  background-color: #fff !important;
+}
 
 footer {
   border-top: 1px solid rgba(0, 0, 0, 0.2);