3 files changed, 62 insertions, 45 deletions

diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html
index 0925b9ad5..fb6e1343d 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.html
+++ b/client/src/app/shared/forms/markdown-textarea.component.html
@@ -5,13 +5,23 @@
     [id]="name" [name]="name">
   </textarea>
 
-  <ngb-tabset *ngIf="arePreviewsDisplayed()" class="previews" type="pills">
-    <ngb-tab *ngIf="truncate !== undefined" i18n-title title="Truncated preview">
-      <ng-template ngbTabContent><div [innerHTML]="truncatedPreviewHTML"></div></ng-template>
-    </ngb-tab>
+  <div ngbNav #nav="ngbNav" class="nav-pills previews">
+    <ng-container ngbNavItem *ngIf="truncate !== undefined">
+      <a ngbNavLink i18n>Truncated preview</a>
 
-    <ngb-tab i18n-title title="Complete preview">
-      <ng-template ngbTabContent><div [innerHTML]="previewHTML"></div></ng-template>
-    </ngb-tab>
-  </ngb-tabset>
+      <ng-template ngbNavContent>
+        <div [innerHTML]="truncatedPreviewHTML"></div>
+      </ng-template>
+    </ng-container>
+
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Complete preview</a>
+
+      <ng-template ngbNavContent>
+        <div [innerHTML]="previewHTML"></div>
+      </ng-template>
+    </ng-container>
+  </div>
+
+  <div [ngbNavOutlet]="nav"></div>
 </div>
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index b89f0a8d1..a952880a6 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -58,7 +58,7 @@ import {
   NgbDropdownModule,
   NgbModalModule,
   NgbPopoverModule,
-  NgbTabsetModule,
+  NgbNavModule,
   NgbTooltipModule
 } from '@ng-bootstrap/ng-bootstrap'
 import { RemoteSubscribeComponent, SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription'
@@ -119,7 +119,7 @@ import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-i
     NgbDropdownModule,
     NgbModalModule,
     NgbPopoverModule,
-    NgbTabsetModule,
+    NgbNavModule,
     NgbTooltipModule,
     NgbCollapseModule,
 
@@ -204,7 +204,7 @@ import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-i
     NgbDropdownModule,
     NgbModalModule,
     NgbPopoverModule,
-    NgbTabsetModule,
+    NgbNavModule,
     NgbTooltipModule,
     NgbCollapseModule,
 
diff --git a/client/src/app/shared/video/modals/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html
index 391fe245e..ab6f4449d 100644
--- a/client/src/app/shared/video/modals/video-download.component.html
+++ b/client/src/app/shared/video/modals/video-download.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
-    <h4 class="modal-title">Download
-      <span *ngIf="!videoCaptions" i18n>video</span>
+    <h4 class="modal-title">
+      <ng-container i18n>Download</ng-container>
 
       <div *ngIf="videoCaptions" ngbDropdown class="d-inline-block">
         <span id="dropdownDownloadType" ngbDropdownToggle>
@@ -38,41 +38,48 @@
       </div>
     </div>
 
-    <ngb-tabset *ngIf="type === 'video' && videoFile?.metadata">
-      <ngb-tab>
-        <ng-template ngbTabTitle i18n>Format</ng-template>
-        <ng-template ngbTabContent>
-          <div class="file-metadata">
-            <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataFormat | keyvalue">
-              <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
-              <span class="metadata-attribute-value">{{ item.value.value }}</span>
+    <ng-container *ngIf="type === 'video' && videoFile?.metadata">
+      <div ngbNav #nav="ngbNav" class="nav-tabs">
+
+        <ng-container ngbNavItem>
+          <a ngbNavLink i18n>Format</a>
+          <ng-template ngbNavContent>
+            <div class="file-metadata">
+              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataFormat | keyvalue">
+                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+              </div>
             </div>
-          </div>
-        </ng-template>
-      </ngb-tab>
-      <ngb-tab [disabled]="videoFileMetadataVideoStream === undefined">
-        <ng-template ngbTabTitle i18n>Video stream</ng-template>
-        <ng-template ngbTabContent>
-          <div class="file-metadata">
-            <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue">
-              <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
-              <span class="metadata-attribute-value">{{ item.value.value }}</span>
+          </ng-template>
+        </ng-container>
+
+        <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined">
+          <a ngbNavLink i18n>Video stream</a>
+          <ng-template ngbNavContent>
+            <div class="file-metadata">
+              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue">
+                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+              </div>
             </div>
-          </div>
-        </ng-template>
-      </ngb-tab>
-      <ngb-tab [disabled]="videoFileMetadataAudioStream === undefined">
-        <ng-template ngbTabTitle i18n>Audio stream</ng-template>
-        <ng-template ngbTabContent>
-          <div class="file-metadata">
-            <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataAudioStream | keyvalue">
-              <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
-              <span class="metadata-attribute-value">{{ item.value.value }}</span>
+          </ng-template>
+        </ng-container>
+
+        <ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined">
+          <a ngbNavLink i18n>Audio stream</a>
+          <ng-template ngbNavContent>
+            <div class="file-metadata">
+              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataAudioStream | keyvalue">
+                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+              </div>
             </div>
-          </div>
-        </ng-template>
-      </ngb-tab>
-    </ngb-tabset>
+          </ng-template>
+        </ng-container>
+      </div>
+
+      <div [ngbNavOutlet]="nav"></div>
+    </ng-container>
 
     <div class="download-type" *ngIf="type === 'video'">
       <div class="peertube-radio-container">