Remove deprecated NgbTabsetModule module

2020-04-01 16:52:59 +02:00 · 2020-04-01 16:52:59 +02:00 · 45c6bcf312
parent d96994289b
commit 45c6bcf312
13 changed files with 205 additions and 176 deletions
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@ -1,9 +1,11 @@
 <form role="form" [formGroup]="form">

-  <ngb-tabset #tabs class="root-tabset bootstrap">
+  <div ngbNav #nav="ngbNav" class="nav-tabs">

-    <ngb-tab id="instance-information" i18n-title title="Instance information">
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem="instance-information">
+      <a ngbNavLink i18n>Instance information</a>
+
+      <ng-template ngbNavContent>

        <ng-container formGroupName="instance">

@ -225,10 +227,12 @@

        </ng-container>
      </ng-template>
-    </ngb-tab>
+    </ng-container>

-    <ngb-tab id="basic-configuration" i18n-title title="Basic configuration">
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem="basic-configuration">
+      <a ngbNavLink i18n>Basic configuration</a>
+
+      <ng-template ngbNavContent>

        <div class="form-row mt-5"> <!-- appearance grid -->
          <div class="form-group col-12 col-lg-4 col-xl-3">
@ -348,7 +352,7 @@

            <ng-container formGroupName="import">
              <ng-container formGroupName="videos">
-    
+
                <div class="form-group" formGroupName="http">
                  <my-peertube-checkbox
                    inputName="importVideosHttpEnabled" formControlName="enabled"
@ -369,7 +373,7 @@
            <ng-container formGroupName="autoBlacklist">
              <ng-container formGroupName="videos">
                <ng-container formGroupName="ofUsers">
-    
+
                  <div class="form-group">
                    <my-peertube-checkbox
                      inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
@ -380,7 +384,7 @@
                    </ng-container>
                  </my-peertube-checkbox>
                  </div>
-    
+
                </ng-container>
              </ng-container>
            </ng-container>
@ -490,10 +494,12 @@
        </div>

      </ng-template>
-    </ngb-tab>
+    </ng-container>

-    <ngb-tab id="services" i18n-title title="Services">
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem="services">
+      <a ngbNavLink i18n>Services</a>
+
+      <ng-template ngbNavContent>

        <div class="form-row mt-5"> <!-- twitter grid -->
          <div class="form-group col-12 col-lg-4 col-xl-3">
@ -541,12 +547,13 @@

          </div>
        </div>
+      </ng-template>
+    </ng-container>

-    </ng-template>
-    </ngb-tab>
+    <ng-container ngbNavItem="advanced-configuration">
+      <a ngbNavLink i18n>Advanced configuration</a>

-    <ngb-tab id="advanced-configuration" i18n-title title="Advanced configuration">
-      <ng-template ngbTabContent>
+      <ng-template ngbNavContent>

        <div class="form-row mt-5"> <!-- transcoding grid -->
          <div class="form-group col-12 col-lg-4 col-xl-3">
@ -566,7 +573,7 @@
                  <ng-template ptTemplate="label">
                    <ng-container i18n>Transcoding enabled</ng-container>
                  </ng-template>
-    
+
                  <ng-template ptTemplate="help">
                    <ng-container i18n>If you disable transcoding, many videos from your users will not work!</ng-container>
                  </ng-template>
@ -583,7 +590,7 @@
                        </ng-container>
                      </my-peertube-checkbox>
                    </div>
-    
+
                    <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
                      <my-peertube-checkbox
                        inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
@ -604,7 +611,7 @@
                          <ng-template ptTemplate="help">
                            <ng-container i18n>
                              <strong>Experimental, we suggest you to not disable webtorrent support for now</strong>
-    
+
                              <p>If you also enabled HLS support, it will multiply videos storage by 2</p>

                              <br />
@ -625,14 +632,14 @@
                          <ng-template ptTemplate="help">
                            <ng-container i18n>
                              <strong>Requires ffmpeg >= 4.1</strong>
-    
+
                              <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:</p>
                              <ul>
                                <li>Resolution change is smoother</li>
                                <li>Faster playback in particular with long videos</li>
                                <li>More stable playback (less bugs/infinite loading)</li>
                              </ul>
-    
+
                              <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
                            </ng-container>
                          </ng-template>
@ -785,8 +792,10 @@
        </div>

      </ng-template>
-    </ngb-tab>
-  </ngb-tabset>
+    </ng-container>
+  </div>
+
+  <div [ngbNavOutlet]="nav"></div>

  <div class="form-row mt-4"> <!-- submit placement block -->
    <div class="col-md-7 col-xl-5"></div>
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@ -1,4 +1,4 @@
-import { Component, OnInit, AfterViewChecked, ViewChild } from '@angular/core'
+import { AfterViewChecked, Component, OnInit, ViewChild } from '@angular/core'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { ServerService } from '@app/core/server/server.service'
 import { CustomConfigValidatorsService, FormReactive, UserValidatorsService } from '@app/shared'
@ -10,7 +10,7 @@ import { SelectItem } from 'primeng/api'
 import { forkJoin } from 'rxjs'
 import { ServerConfig } from '@shared/models'
 import { ViewportScroller } from '@angular/common'
-import { NgbTabset } from '@ng-bootstrap/ng-bootstrap'
+import { NgbNav } from '@ng-bootstrap/ng-bootstrap'

@Component({
  selector: 'my-edit-custom-config',
@ -18,7 +18,8 @@ import { NgbTabset } from '@ng-bootstrap/ng-bootstrap'
  styleUrls: [ './edit-custom-config.component.scss' ]
 })
 export class EditCustomConfigComponent extends FormReactive implements OnInit, AfterViewChecked {
-  @ViewChild('tabs') tabs: NgbTabset
+  // FIXME: use built-in router
+  @ViewChild('nav') nav: NgbNav

  initDone = false
  customConfig: CustomConfig
@ -286,13 +287,13 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
  }

  gotoAnchor () {
-    const hashToTab = {
+    const hashToNav = {
      'customizations': 'advanced-configuration'
    }
    const hash = window.location.hash.replace('#', '')

-    if (hash && Object.keys(hashToTab).includes(hash)) {
-      this.tabs.select(hashToTab[hash])
+    if (hash && Object.keys(hashToNav).includes(hash)) {
+      this.nav.select(hashToNav[hash])
      setTimeout(() => this.viewportScroller.scrollToAnchor(hash), 100)
    }
  }
--- 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>
--- 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,

--- 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">
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@ -1,8 +1,10 @@
 <div class="video-edit" [formGroup]="form">
-  <ngb-tabset class="root-tabset bootstrap">
+  <div ngbNav #nav="ngbNav" class="nav-tabs">

-    <ngb-tab i18n-title title="Basic info">
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Basic info</a>
+
+      <ng-template ngbNavContent>
        <div class="row">
          <div class="col-md-8">
            <div class="form-group">
@ -155,10 +157,12 @@
          </div>
        </div>
      </ng-template>
-    </ngb-tab>
+    </ng-container>

-    <ngb-tab i18n-title title="Captions">
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Captions</a>
+
+      <ng-template ngbNavContent>
        <div class="captions">

          <div class="captions-header">
@ -206,10 +210,12 @@

        </div>
      </ng-template>
-    </ngb-tab>
+    </ng-container>

-    <ngb-tab i18n-title title="Advanced settings">
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Advanced settings</a>
+
+      <ng-template ngbNavContent>
        <div class="row advanced-settings">
          <div class="col-md-12 col-xl-8">

@ -262,10 +268,11 @@
          </div>
        </div>
      </ng-template>
-    </ngb-tab>
+    </ng-container>

-  </ngb-tabset>
+  </div>

+  <div [ngbNavOutlet]="nav"></div>
 </div>

 <my-video-caption-add-modal
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@ -19,6 +19,10 @@ my-peertube-checkbox {
  margin-bottom: 1rem;
 }

+.nav-tabs {
+  margin-bottom: 15px;
+}
+
 .video-edit {
  height: 100%;
  min-height: 300px;
@ -145,10 +149,6 @@ p-calendar {
 }

 ::ng-deep {
-  .root-tabset > .nav {
-    margin-bottom: 15px;
-  }
-
  .ng2-tag-input {
    border: none !important;
  }
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@ -10,27 +10,37 @@
    <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
  </div>

-  <ngb-tabset class="video-add-tabset root-tabset bootstrap" [ngClass]="{ 'hide-nav': secondStepType !== undefined }">
+  <div ngbNav #nav="ngbNav" class="nav-tabs video-add-nav" [ngClass]="{ 'hide-nav': secondStepType !== undefined }">
+    <ng-container ngbNavItem>
+      <a ngbNavLink>
+        <span i18n>Upload a file</span>
+      </a>

-    <ngb-tab>
-      <ng-template ngbTabTitle><span i18n>Upload a file</span></ng-template>
-      <ng-template ngbTabContent>
+      <ng-template ngbNavContent>
        <my-video-upload #videoUpload (firstStepDone)="onFirstStepDone('upload', $event)" (firstStepError)="onError()"></my-video-upload>
      </ng-template>
-    </ngb-tab>
+    </ng-container>

-    <ngb-tab *ngIf="isVideoImportHttpEnabled()">
-      <ng-template ngbTabTitle><span i18n>Import with URL</span></ng-template>
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem *ngIf="isVideoImportHttpEnabled()">
+      <a ngbNavLink>
+        <span i18n>Import with URL</span>
+      </a>
+
+      <ng-template ngbNavContent>
        <my-video-import-url #videoImportUrl (firstStepDone)="onFirstStepDone('import-url', $event)" (firstStepError)="onError()"></my-video-import-url>
      </ng-template>
-    </ngb-tab>
+    </ng-container>

-    <ngb-tab *ngIf="isVideoImportTorrentEnabled()">
-      <ng-template ngbTabTitle><span i18n>Import with torrent</span></ng-template>
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem *ngIf="isVideoImportTorrentEnabled()">
+      <a ngbNavLink>
+        <span i18n>Import with torrent</span>
+      </a>
+
+      <ng-template ngbNavContent>
        <my-video-import-torrent #videoImportTorrent (firstStepDone)="onFirstStepDone('import-torrent', $event)" (firstStepError)="onError()"></my-video-import-torrent>
      </ng-template>
-    </ngb-tab>
-  </ngb-tabset>
+    </ng-container>
+  </div>
+
+  <div [ngbNavOutlet]="nav"></div>
 </div>
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@ -13,52 +13,41 @@ $border-color: #EAEAEA;
  font-size: 15px;
 }

-::ng-deep .root-tabset.video-add-tabset {
-  margin-top: 50px;
+::ng-deep .video-add-nav {
+  border-bottom: $border-width $border-type $border-color;
+  margin: 50px 0 0 0 !important;

-  &.hide-nav > .nav {
-    display: none !important;
-  }
+  a.nav-link {
+    @include disable-default-a-behaviour;

-  & > .nav {
-    border-bottom: $border-width $border-type $border-color;
-    margin: 0 !important;
+    margin-bottom: -$border-width;
+    height: 40px !important;
+    padding: 0 30px !important;
+    font-size: 15px;

-    & > li {
-      margin-bottom: -$border-width;
-    }
+    &.active {
+      border: $border-width $border-type $border-color;
+      border-bottom: none;
+      background-color: var(--submenuColor) !important;

-    a.nav-link {
-      @include disable-default-a-behaviour;
-
-      height: 40px !important;
-      padding: 0 30px !important;
-      font-size: 15px;
-
-      &.active {
-        border: $border-width $border-type $border-color;
-        border-bottom: none;
-        background-color: var(--submenuColor) !important;
-
-        span {
-          border-bottom: 2px solid var(--mainColor);
-          font-weight: $font-bold;
-        }
+      span {
+        border-bottom: 2px solid var(--mainColor);
+        font-weight: $font-bold;
      }
    }
  }
-
-  .upload-video-container {
-    border: $border-width $border-type $border-color;
-    border-top: none;
-
-    background-color: var(--submenuColor);
-    border-radius: 3px;
-    width: 100%;
-    min-height: 440px;
-    padding-bottom: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+}
+
+::ng-deep .upload-video-container {
+  border: $border-width $border-type $border-color;
+  border-top: none;
+
+  background-color: var(--submenuColor);
+  border-radius: 3px;
+  width: 100%;
+  min-height: 440px;
+  padding-bottom: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
--- 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>

-        <ngb-tab i18n-title title="QR-Code" id="qrcode">
-          <ng-template ngbTabContent>
-            <div class="tab-content">
+        <ng-container ngbNavItem="qrcode">
+          <a ngbNavLink i18n>QR-Code</a>
+
+          <ng-template ngbNavContent>
+            <div class="nav-content">
              <qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode>
            </div>
          </ng-template>
-        </ngb-tab>
+        </ng-container>

-        <ngb-tab i18n-title title="Embed" id="embed">
-          <ng-template ngbTabContent>
-            <div class="tab-content">
+        <ng-container ngbNavItem="embed">
+          <a ngbNavLink i18n>Embed</a>
+
+          <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>

-      </ngb-tabset>
+      </div>
+
+      <div [ngbNavOutlet]="nav"></div>

      <div class="filters">
        <div>
--- 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;
--- 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'
  }
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@ -50,7 +50,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
      background-color: var(--mainHoverColor);
      opacity: .9;
    }
-    
+
    &::after {
      display: none;
    }
@ -158,18 +158,12 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
  }
 }

-ngb-tabset {
+.nav-tabs {

  .nav-link {
-    &, & a {
-      @include disable-default-a-behaviour;
+    @include disable-default-a-behaviour;

-      color: var(--mainForegroundColor) !important;
-    }
-  }
-
-  .nav-pills .nav-link.active {
-    color: #000 !important;
+    color: var(--mainForegroundColor) !important;
  }
 }