Client: add share button

3 files changed, 60 insertions, 5 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 0bbb5d3e8..f3a416367 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -50,6 +50,10 @@
     </div>
 
     <div id="video-actions" class="col-md-4 text-right">
+      <button id="share" class="btn btn-default" (click)="showShareModal()">
+        <span class="glyphicon glyphicon-share"></span> Share
+      </button>
+
       <button title="Get magnet URI" id="magnet-uri" class="btn btn-default" (click)="showMagnetUriModal()">
         <span class="glyphicon glyphicon-magnet"></span> Magnet
       </button>
@@ -72,9 +76,9 @@
   </div>
 </div>
 
-<div *ngIf="video !== null" bsModal #magnetUriModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="magnetUriModal" aria-hidden="true">
+<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">
+    <div class="modal-content modal-lg">
 
       <div class="modal-header">
         <button type="button" class="close" aria-label="Close" (click)="hideMagnetUriModal()">
@@ -89,3 +93,29 @@
     </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>
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index 9d335c3ba..fe23b849f 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -39,7 +39,7 @@
       top: 2px;
     }
 
-    #magnet-uri {
+    #magnet-uri, #share {
       font-weight: bold;
       opacity: 0.85;
     }
@@ -75,3 +75,10 @@
     }
   }
 }
+
+.modal-content {
+  input {
+    /* Force blank on readonly inputs */
+    background-color: #fff;
+  }
+}
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 6012daa5c..0ae323c9f 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -18,6 +18,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private static LOADTIME_TOO_LONG: number = 30000;
 
   @ViewChild('magnetUriModal') magnetUriModal: ModalDirective;
+  @ViewChild('shareModal') shareModal: ModalDirective;
 
   downloadSpeed: number;
   error: boolean = false;
@@ -74,8 +75,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   loadVideo() {
-    console.log('<iframe width="560" height="315" src="' + window.location.origin + '/videos/embed/' + this.video.id + '" frameborder="0" allowfullscreen></iframe>');
-
     // Reset the error
     this.error = false;
     // We are loading the video
@@ -116,6 +115,25 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.magnetUriModal.hide();
   }
 
+  showShareModal() {
+    this.shareModal.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;
+  }
+
   private loadTooLong() {
     this.error = true;
     console.error('The video load seems to be abnormally long.');