Copy to clipboard (#142)

* Copy buttons on share view

Ugly but working buttons to copy video url and video iframe code.

Add ngx-clipboard dependency to allow easy copy to clipboard directive.

* Designed copy buttons

Using some css (scss) rules to make buttons look better.

* First version on copy feedback

Little success alert message on copy.

Fix lint errors

Move dependencies to dev dependencies

* Update button design

* Use of notifications service

Provides feedback of copy action to the user through the
angular2-notifications module.

client/package.json

@@ -71,6 +71,7 @@
     "ngc-webpack": "3.2.2",
     "ngx-bootstrap": "2.0.0-beta.9",
     "ngx-chips": "1.5.3",
+    "ngx-clipboard": "^9.0.0",
     "ngx-infinite-scroll": "^0.7.0",
     "ngx-pipes": "^2.0.5",
     "node-sass": "^4.1.1",

client/src/app/app.component.scss

@@ -86,3 +86,8 @@ footer {
   margin-top: $footer-margin;
   height: $footer-height;
 }
+
+simple-notifications {
+  position: relative;
+  z-index: 1500;
+}

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

@@ -12,12 +12,26 @@
       <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 class="input-group">
+            <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" />
+            <div class="input-group-btn" placement="bottom right">
+              <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
+                <span class="glyphicon glyphicon-copy"></span>
+              </button>
+            </div>
+          </div>
         </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 class="input-group">
+            <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" />
+            <div class="input-group-btn" placement="bottom right">
+              <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
+                <span class="glyphicon glyphicon-copy"></span>
+              </button>
+            </div>
+          </div>
         </div>
 
         <div *ngIf="notSecure()" class="alert alert-warning">

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

@@ -0,0 +1,3 @@
+.btn-search {
+  padding: 4.1px 12px;
+}

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

@@ -1,17 +1,21 @@
 import { Component, Input, ViewChild } from '@angular/core'
+
+import { NotificationsService } from 'angular2-notifications'
+
 import { ModalDirective } from 'ngx-bootstrap/modal'
 import { VideoDetails } from '../../shared/video/video-details.model'
 
 @Component({
   selector: 'my-video-share',
-  templateUrl: './video-share.component.html'
+  templateUrl: './video-share.component.html',
+  styleUrls: [ './video-share.component.scss' ]
 })
 export class VideoShareComponent {
   @Input() video: VideoDetails = null
 
   @ViewChild('modal') modal: ModalDirective
 
-  constructor () {
+  constructor (private notificationsService: NotificationsService) {
     // empty
   }
 
@@ -37,4 +41,8 @@ export class VideoShareComponent {
   notSecure () {
     return window.location.protocol === 'http:'
   }
+
+  activateCopiedMessage () {
+    this.notificationsService.success('Success', 'Copied')
+  }
 }

client/src/app/videos/+video-watch/video-watch.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
 import { MarkdownService } from '../shared'
 import { SharedModule } from '../../shared'
+import { ClipboardModule } from 'ngx-clipboard'
 
 import { VideoWatchComponent } from './video-watch.component'
 import { VideoReportComponent } from './video-report.component'
@@ -12,7 +13,8 @@ import { VideoDownloadComponent } from './video-download.component'
 @NgModule({
   imports: [
     VideoWatchRoutingModule,
-    SharedModule
+    SharedModule,
+    ClipboardModule
   ],
 
   declarations: [

client/yarn.lock

@@ -4714,6 +4714,16 @@ ngx-chips@1.5.3:
   dependencies:
     ng2-material-dropdown "0.7.10"
 
+ngx-clipboard@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/ngx-clipboard/-/ngx-clipboard-9.0.0.tgz#a56e4a3d0488a491898ee5209980b81ddad8b659"
+  dependencies:
+    ngx-window-token "0.0.4"
+
+ngx-window-token@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/ngx-window-token/-/ngx-window-token-0.0.4.tgz#47e7aaa465411c4ab5f7ba17601bc593c956c736"
+
 ngx-infinite-scroll@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/ngx-infinite-scroll/-/ngx-infinite-scroll-0.7.0.tgz#a390c61c6a05ac14485e1c5bc8b4e6f6bd62fd6a"