From 45c6bcf312d2e9578501eaaf7511183bc570fe91 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 1 Apr 2020 16:52:59 +0200 Subject: [PATCH] Remove deprecated NgbTabsetModule module --- .../edit-custom-config.component.html | 55 +++++++------ .../edit-custom-config.component.ts | 13 ++-- .../forms/markdown-textarea.component.html | 26 +++++-- client/src/app/shared/shared.module.ts | 6 +- .../modals/video-download.component.html | 75 ++++++++++-------- .../shared/video-edit.component.html | 29 ++++--- .../shared/video-edit.component.scss | 8 +- .../+video-edit/video-add.component.html | 38 +++++---- .../+video-edit/video-add.component.scss | 77 ++++++++----------- .../modal/video-share.component.html | 36 +++++---- .../modal/video-share.component.scss | 2 +- .../modal/video-share.component.ts | 8 +- client/src/sass/bootstrap.scss | 14 +--- 13 files changed, 208 insertions(+), 179 deletions(-) diff --git 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 index 9991e1f63..bde27b206 100644 --- 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 @@
- +
- - + + Instance information + + @@ -225,10 +227,12 @@ - + + + + Basic configuration - - +
@@ -348,7 +352,7 @@ - +
- +
- + @@ -490,10 +494,12 @@
- + + + + Services - - +
@@ -541,12 +547,13 @@
+ + - - + + Advanced configuration - - +
@@ -566,7 +573,7 @@ Transcoding enabled - + If you disable transcoding, many videos from your users will not work! @@ -583,7 +590,7 @@
- +
Experimental, we suggest you to not disable webtorrent support for now - +

If you also enabled HLS support, it will multiply videos storage by 2


@@ -625,14 +632,14 @@ Requires ffmpeg >= 4.1 - +

Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:

  • Resolution change is smoother
  • Faster playback in particular with long videos
  • More stable playback (less bugs/infinite loading)
- +

If you also enabled WebTorrent support, it will multiply videos storage by 2

 @@ -785,8 +792,10 @@
- - + +
+ +
diff --git 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 index d81859d5c..cea314cea 100644 --- 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) } } 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"> - - -
- +
+ + Truncated preview - -
- - + +
+ + + + + Complete preview + + +
+ + +
+ +
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 @@
-

Download - video +

+ Download
@@ -38,41 +38,48 @@

- - - Format - -
-
- {{ item.value.label }} - {{ item.value.value }} + +
+ + + Format + +
+
+ {{ item.value.label }} + {{ item.value.value }} +
-
- - - - Video stream - -
-
- {{ item.value.label }} - {{ item.value.value }} + + + + + Video stream + +
+
+ {{ item.value.label }} + {{ item.value.value }} +
-
- - - - Audio stream - -
-
- {{ item.value.label }} - {{ item.value.value }} + + + + + Audio stream + +
+
+ {{ item.value.label }} + {{ item.value.value }} +
-
- - - + + +
+ +
+
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html index 6d72e5765..967f3b188 100644 --- 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 @@
- +
- - + + Basic info + +
@@ -155,10 +157,12 @@
- + + + + Captions - - +
@@ -206,10 +210,12 @@
- + + + + Advanced settings - - +
@@ -262,10 +268,11 @@
- + - +
+
.nav { - margin-bottom: 15px; - } - .ng2-tag-input { border: none !important; } diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html index a99988600..79bfc6e5c 100644 --- 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 @@ Upload {{ videoName }}
- +
+ + + Upload a file + - - Upload a file - + - + - - Import with URL - + + + Import with URL + + + - + + + + + Import with torrent + - - Import with torrent - + - - + +
+ +
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss index 7acab3744..9d068afde 100644 --- 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; - - &.hide-nav > .nav { - display: none !important; - } - - & > .nav { - border-bottom: $border-width $border-type $border-color; - margin: 0 !important; - - & > li { - margin-bottom: -$border-width; - } - - 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; - } +::ng-deep .video-add-nav { + border-bottom: $border-width $border-type $border-color; + margin: 50px 0 0 0 !important; + + a.nav-link { + @include disable-default-a-behaviour; + + margin-bottom: -$border-width; + 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; } } } +} - .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; } 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 @@
Share the video
- +
- - + + URL -
+ +
- - + + + + QR-Code - - -
+ +
- + + + + Embed - - -
+ +
@@ -57,9 +61,11 @@
- + + +
- +
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' } diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 5c1ce1028..297f1f18a 100644 --- 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; - - color: var(--mainForegroundColor) !important; - } - } + @include disable-default-a-behaviour; - .nav-pills .nav-link.active { - color: #000 !important; + color: var(--mainForegroundColor) !important; } } -- 2.41.0