(consistency) channel nameWithHost copy button, comment avatar link

3 files changed, 19 insertions, 2 deletions

diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 600b7a365..f8b7fa583 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -7,7 +7,13 @@
       <div class="actor-info">
         <div class="actor-names">
           <div class="actor-display-name">{{ videoChannel.displayName }}</div>
-          <div class="actor-name">{{ videoChannel.nameWithHost }}</div>
+          <div class="actor-name">{{ videoChannel.nameWithHost }}
+            <button ngxClipboard [cbContent]="videoChannel.nameWithHost" (click)="activateCopiedMessage()"
+                    class="btn btn-outline-secondary btn-sm copy-button"
+            >
+              <span class="glyphicon glyphicon-copy"></span>
+            </button>
+          </div>
 
           <my-subscribe-button #subscribeButton [videoChannel]="videoChannel"></my-subscribe-button>
         </div>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 711b1839d..d29575027 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -10,5 +10,11 @@
 
   .actor-name {
     flex-grow: 1;
+
+    .copy-button {
+      border: none;
+      padding: 5px;
+      margin-top: -2px;
+    }
   }
 }
\ No newline at end of file
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index d2975b67c..5ef46c58a 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -5,7 +5,7 @@ import { VideoChannelService } from '@app/shared/video-channel/video-channel.ser
 import { RestExtractor } from '@app/shared'
 import { catchError, distinctUntilChanged, map, switchMap } from 'rxjs/operators'
 import { Subscription } from 'rxjs'
-import { AuthService } from '@app/core'
+import { AuthService, Notifier } from '@app/core'
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component'
 import { I18n } from '@ngx-translate/i18n-polyfill'
@@ -25,6 +25,7 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
   constructor (
     private i18n: I18n,
     private route: ActivatedRoute,
+    private notifier: Notifier,
     private authService: AuthService,
     private videoChannelService: VideoChannelService,
     private restExtractor: RestExtractor,
@@ -62,4 +63,8 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
   isUserLoggedIn () {
     return this.authService.isLoggedIn()
   }
+
+  activateCopiedMessage () {
+    this.notifier.success(this.i18n('Username copied'))
+  }
 }