3 files changed, 24 insertions, 22 deletions

diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
index dd2dd34ab..5e6a2d518 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -27,29 +27,33 @@
     <div class="video">
       <div class="title-page title-page-single" *ngIf="hasPlaylist()" i18n>Share the video</div>
 
-      <ngb-tabset class="root-tabset bootstrap" (tabChange)="onTabChange($event)">
+      <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeId">
 
-        <ngb-tab i18n-title title="URL" id="url">
-          <ng-template ngbTabContent>
+        <ng-container ngbNavItem="url">
+          <a ngbNavLink i18n>URL</a>
 
-            <div class="tab-content">
+          <ng-template ngbNavContent>
+            <div class="nav-content">
               <my-input-readonly-copy [value]="getVideoUrl()"></my-input-readonly-copy>
             </div>
-
           </ng-template>
-        </ngb-tab>
+        </ng-container>
+
+        <ng-container ngbNavItem="qrcode">
+          <a ngbNavLink i18n>QR-Code</a>
 
-        <ngb-tab i18n-title title="QR-Code" id="qrcode">
-          <ng-template ngbTabContent>
-            <div class="tab-content">
+          <ng-template ngbNavContent>
+            <div class="nav-content">
               <qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode>
             </div>
           </ng-template>
-        </ngb-tab>
+        </ng-container>
+
+        <ng-container ngbNavItem="embed">
+          <a ngbNavLink i18n>Embed</a>
 
-        <ngb-tab i18n-title title="Embed" id="embed">
-          <ng-template ngbTabContent>
-            <div class="tab-content">
+          <ng-template ngbNavContent>
+            <div class="nav-content">
               <my-input-readonly-copy [value]="getVideoIframeCode()"></my-input-readonly-copy>
 
               <div i18n *ngIf="notSecure()" class="alert alert-warning">
@@ -57,9 +61,11 @@
               </div>
             </div>
           </ng-template>
-        </ngb-tab>
+        </ng-container>
+
+      </div>
 
-      </ngb-tabset>
+      <div [ngbNavOutlet]="nav"></div>
 
       <div class="filters">
         <div>
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss
index 11cbb8c0b..091d4dc3b 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.scss
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss
@@ -21,7 +21,7 @@ my-input-readonly-copy {
   text-align: center;
 }
 
-.tab-content {
+.nav-content {
   margin-top: 30px;
   display: flex;
   justify-content: center;
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts
index 5109bcd11..56e7d70dd 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts
@@ -1,7 +1,7 @@
 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
-import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModal, NgbNavChangeEvent, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap'
 import { VideoCaption } from '@shared/models'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 
@@ -35,7 +35,7 @@ export class VideoShareComponent {
   @Input() videoCaptions: VideoCaption[] = []
   @Input() playlist: VideoPlaylist = null
 
-  activeId: 'url' | 'qrcode' | 'embed'
+  activeId: 'url' | 'qrcode' | 'embed' = 'url'
   customizations: Customizations
   isAdvancedCustomizationCollapsed = true
   includeVideoInPlaylist = false
@@ -101,10 +101,6 @@ export class VideoShareComponent {
     return window.location.protocol === 'http:'
   }
 
-  onTabChange (event: NgbTabChangeEvent) {
-    this.activeId = event.nextId as any
-  }
-
   isInEmbedTab () {
     return this.activeId === 'embed'
   }