interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Remove deprecated NgbTabsetModule module

This commit is contained in:
Chocobozzz 2020-04-01 16:52:59 +02:00
parent d96994289b
commit 45c6bcf312
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
13 changed files with 205 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
View File

@ -1,9 +1,11 @@
<form role="form" [formGroup]="form"> <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-container ngbNavItem="instance-information">
<ng-template ngbTabContent> <a ngbNavLink i18n>Instance information</a>
<ng-template ngbNavContent>
<ng-container formGroupName="instance"> <ng-container formGroupName="instance">
@ -225,10 +227,12 @@
</ng-container> </ng-container>
</ng-template> </ng-template>
</ngb-tab> </ng-container>
<ngb-tab id="basic-configuration" i18n-title title="Basic configuration"> <ng-container ngbNavItem="basic-configuration">
<ng-template ngbTabContent> <a ngbNavLink i18n>Basic configuration</a>
<ng-template ngbNavContent>
<div class="form-row mt-5"> <!-- appearance grid --> <div class="form-row mt-5"> <!-- appearance grid -->
<div class="form-group col-12 col-lg-4 col-xl-3"> <div class="form-group col-12 col-lg-4 col-xl-3">
@ -348,7 +352,7 @@
<ng-container formGroupName="import"> <ng-container formGroupName="import">
<ng-container formGroupName="videos"> <ng-container formGroupName="videos">
<div class="form-group" formGroupName="http"> <div class="form-group" formGroupName="http">
<my-peertube-checkbox <my-peertube-checkbox
inputName="importVideosHttpEnabled" formControlName="enabled" inputName="importVideosHttpEnabled" formControlName="enabled"
@ -369,7 +373,7 @@
<ng-container formGroupName="autoBlacklist"> <ng-container formGroupName="autoBlacklist">
<ng-container formGroupName="videos"> <ng-container formGroupName="videos">
<ng-container formGroupName="ofUsers"> <ng-container formGroupName="ofUsers">
<div class="form-group"> <div class="form-group">
<my-peertube-checkbox <my-peertube-checkbox
inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled" inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
@ -380,7 +384,7 @@
</ng-container> </ng-container>
</my-peertube-checkbox> </my-peertube-checkbox>
</div> </div>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
@ -490,10 +494,12 @@
</div> </div>
</ng-template> </ng-template>
</ngb-tab> </ng-container>
<ngb-tab id="services" i18n-title title="Services"> <ng-container ngbNavItem="services">
<ng-template ngbTabContent> <a ngbNavLink i18n>Services</a>
<ng-template ngbNavContent>
<div class="form-row mt-5"> <!-- twitter grid --> <div class="form-row mt-5"> <!-- twitter grid -->
<div class="form-group col-12 col-lg-4 col-xl-3"> <div class="form-group col-12 col-lg-4 col-xl-3">
@ -541,12 +547,13 @@
</div> </div>
</div> </div>
</ng-template>
</ng-container>
</ng-template> <ng-container ngbNavItem="advanced-configuration">
</ngb-tab> <a ngbNavLink i18n>Advanced configuration</a>
<ngb-tab id="advanced-configuration" i18n-title title="Advanced configuration"> <ng-template ngbNavContent>
<ng-template ngbTabContent>
<div class="form-row mt-5"> <!-- transcoding grid --> <div class="form-row mt-5"> <!-- transcoding grid -->
<div class="form-group col-12 col-lg-4 col-xl-3"> <div class="form-group col-12 col-lg-4 col-xl-3">
@ -566,7 +573,7 @@
<ng-template ptTemplate="label"> <ng-template ptTemplate="label">
<ng-container i18n>Transcoding enabled</ng-container> <ng-container i18n>Transcoding enabled</ng-container>
</ng-template> </ng-template>
<ng-template ptTemplate="help"> <ng-template ptTemplate="help">
<ng-container i18n>If you disable transcoding, many videos from your users will not work!</ng-container> <ng-container i18n>If you disable transcoding, many videos from your users will not work!</ng-container>
</ng-template> </ng-template>
@ -583,7 +590,7 @@
</ng-container> </ng-container>
</my-peertube-checkbox> </my-peertube-checkbox>
</div> </div>
<div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }"> <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
<my-peertube-checkbox <my-peertube-checkbox
inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles" inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
@ -604,7 +611,7 @@
<ng-template ptTemplate="help"> <ng-template ptTemplate="help">
<ng-container i18n> <ng-container i18n>
<strong>Experimental, we suggest you to not disable webtorrent support for now</strong> <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> <p>If you also enabled HLS support, it will multiply videos storage by 2</p>
<br /> <br />
@ -625,14 +632,14 @@
<ng-template ptTemplate="help"> <ng-template ptTemplate="help">
<ng-container i18n> <ng-container i18n>
<strong>Requires ffmpeg >= 4.1</strong> <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> <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:</p>
<ul> <ul>
<li>Resolution change is smoother</li> <li>Resolution change is smoother</li>
<li>Faster playback in particular with long videos</li> <li>Faster playback in particular with long videos</li>
<li>More stable playback (less bugs/infinite loading)</li> <li>More stable playback (less bugs/infinite loading)</li>
</ul> </ul>
<p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p> <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
</ng-container> </ng-container>
</ng-template> </ng-template>
@ -785,8 +792,10 @@
</div> </div>
</ng-template> </ng-template>
</ngb-tab> </ng-container>
</ngb-tabset> </div>
<div [ngbNavOutlet]="nav"></div>
<div class="form-row mt-4"> <!-- submit placement block --> <div class="form-row mt-4"> <!-- submit placement block -->
<div class="col-md-7 col-xl-5"></div> <div class="col-md-7 col-xl-5"></div>

13
client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
View File

@ -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 { ConfigService } from '@app/+admin/config/shared/config.service'
import { ServerService } from '@app/core/server/server.service' import { ServerService } from '@app/core/server/server.service'
import { CustomConfigValidatorsService, FormReactive, UserValidatorsService } from '@app/shared' import { CustomConfigValidatorsService, FormReactive, UserValidatorsService } from '@app/shared'
@ -10,7 +10,7 @@ import { SelectItem } from 'primeng/api'
import { forkJoin } from 'rxjs' import { forkJoin } from 'rxjs'
import { ServerConfig } from '@shared/models' import { ServerConfig } from '@shared/models'
import { ViewportScroller } from '@angular/common' import { ViewportScroller } from '@angular/common'
import { NgbTabset } from '@ng-bootstrap/ng-bootstrap' import { NgbNav } from '@ng-bootstrap/ng-bootstrap'
@Component({ @Component({
selector: 'my-edit-custom-config', selector: 'my-edit-custom-config',
@ -18,7 +18,8 @@ import { NgbTabset } from '@ng-bootstrap/ng-bootstrap'
styleUrls: [ './edit-custom-config.component.scss' ] styleUrls: [ './edit-custom-config.component.scss' ]
}) })
export class EditCustomConfigComponent extends FormReactive implements OnInit, AfterViewChecked { export class EditCustomConfigComponent extends FormReactive implements OnInit, AfterViewChecked {
@ViewChild('tabs') tabs: NgbTabset // FIXME: use built-in router
@ViewChild('nav') nav: NgbNav
initDone = false initDone = false
customConfig: CustomConfig customConfig: CustomConfig
@ -286,13 +287,13 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
} }
gotoAnchor () { gotoAnchor () {
const hashToTab = { const hashToNav = {
'customizations': 'advanced-configuration' 'customizations': 'advanced-configuration'
} }
const hash = window.location.hash.replace('#', '') const hash = window.location.hash.replace('#', '')
if (hash && Object.keys(hashToTab).includes(hash)) { if (hash && Object.keys(hashToNav).includes(hash)) {
this.tabs.select(hashToTab[hash]) this.nav.select(hashToNav[hash])
setTimeout(() => this.viewportScroller.scrollToAnchor(hash), 100) setTimeout(() => this.viewportScroller.scrollToAnchor(hash), 100)
} }
} }

26
client/src/app/shared/forms/markdown-textarea.component.html
View File

@ -5,13 +5,23 @@
[id]="name" [name]="name"> [id]="name" [name]="name">
</textarea> </textarea>
<ngb-tabset *ngIf="arePreviewsDisplayed()" class="previews" type="pills"> <div ngbNav #nav="ngbNav" class="nav-pills previews">
<ngb-tab *ngIf="truncate !== undefined" i18n-title title="Truncated preview"> <ng-container ngbNavItem *ngIf="truncate !== undefined">
<ng-template ngbTabContent><div [innerHTML]="truncatedPreviewHTML"></div></ng-template> <a ngbNavLink i18n>Truncated preview</a>
</ngb-tab>
<ngb-tab i18n-title title="Complete preview"> <ng-template ngbNavContent>
<ng-template ngbTabContent><div [innerHTML]="previewHTML"></div></ng-template> <div [innerHTML]="truncatedPreviewHTML"></div>
</ngb-tab> </ng-template>
</ngb-tabset> </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> </div>

6
client/src/app/shared/shared.module.ts
View File

@ -58,7 +58,7 @@ import {
NgbDropdownModule, NgbDropdownModule,
NgbModalModule, NgbModalModule,
NgbPopoverModule, NgbPopoverModule,
NgbTabsetModule, NgbNavModule,
NgbTooltipModule NgbTooltipModule
} from '@ng-bootstrap/ng-bootstrap' } from '@ng-bootstrap/ng-bootstrap'
import { RemoteSubscribeComponent, SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription' import { RemoteSubscribeComponent, SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription'
@ -119,7 +119,7 @@ import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-i
NgbDropdownModule, NgbDropdownModule,
NgbModalModule, NgbModalModule,
NgbPopoverModule, NgbPopoverModule,
NgbTabsetModule, NgbNavModule,
NgbTooltipModule, NgbTooltipModule,
NgbCollapseModule, NgbCollapseModule,
@ -204,7 +204,7 @@ import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-i
NgbDropdownModule, NgbDropdownModule,
NgbModalModule, NgbModalModule,
NgbPopoverModule, NgbPopoverModule,
NgbTabsetModule, NgbNavModule,
NgbTooltipModule, NgbTooltipModule,
NgbCollapseModule, NgbCollapseModule,

75
client/src/app/shared/video/modals/video-download.component.html
View File

@ -1,7 +1,7 @@
<ng-template #modal let-hide="close"> <ng-template #modal let-hide="close">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title">Download <h4 class="modal-title">
<span *ngIf="!videoCaptions" i18n>video</span> <ng-container i18n>Download</ng-container>
<div *ngIf="videoCaptions" ngbDropdown class="d-inline-block"> <div *ngIf="videoCaptions" ngbDropdown class="d-inline-block">
<span id="dropdownDownloadType" ngbDropdownToggle> <span id="dropdownDownloadType" ngbDropdownToggle>
@ -38,41 +38,48 @@
</div> </div>
</div> </div>
<ngb-tabset *ngIf="type === 'video' && videoFile?.metadata"> <ng-container *ngIf="type === 'video' && videoFile?.metadata">
<ngb-tab> <div ngbNav #nav="ngbNav" class="nav-tabs">
<ng-template ngbTabTitle i18n>Format</ng-template>
<ng-template ngbTabContent> <ng-container ngbNavItem>
<div class="file-metadata"> <a ngbNavLink i18n>Format</a>
<div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataFormat | keyvalue"> <ng-template ngbNavContent>
<span i18n class="metadata-attribute-label">{{ item.value.label }}</span> <div class="file-metadata">
<span class="metadata-attribute-value">{{ item.value.value }}</span> <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>
</div> </ng-template>
</ng-template> </ng-container>
</ngb-tab>
<ngb-tab [disabled]="videoFileMetadataVideoStream === undefined"> <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined">
<ng-template ngbTabTitle i18n>Video stream</ng-template> <a ngbNavLink i18n>Video stream</a>
<ng-template ngbTabContent> <ng-template ngbNavContent>
<div class="file-metadata"> <div class="file-metadata">
<div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue"> <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue">
<span i18n class="metadata-attribute-label">{{ item.value.label }}</span> <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
<span class="metadata-attribute-value">{{ item.value.value }}</span> <span class="metadata-attribute-value">{{ item.value.value }}</span>
</div>
</div> </div>
</div> </ng-template>
</ng-template> </ng-container>
</ngb-tab>
<ngb-tab [disabled]="videoFileMetadataAudioStream === undefined"> <ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined">
<ng-template ngbTabTitle i18n>Audio stream</ng-template> <a ngbNavLink i18n>Audio stream</a>
<ng-template ngbTabContent> <ng-template ngbNavContent>
<div class="file-metadata"> <div class="file-metadata">
<div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataAudioStream | keyvalue"> <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataAudioStream | keyvalue">
<span i18n class="metadata-attribute-label">{{ item.value.label }}</span> <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
<span class="metadata-attribute-value">{{ item.value.value }}</span> <span class="metadata-attribute-value">{{ item.value.value }}</span>
</div>
</div> </div>
</div> </ng-template>
</ng-template> </ng-container>
</ngb-tab> </div>
</ngb-tabset>
<div [ngbNavOutlet]="nav"></div>
</ng-container>
<div class="download-type" *ngIf="type === 'video'"> <div class="download-type" *ngIf="type === 'video'">
<div class="peertube-radio-container"> <div class="peertube-radio-container">

29
client/src/app/videos/+video-edit/shared/video-edit.component.html
View File

@ -1,8 +1,10 @@
<div class="video-edit" [formGroup]="form"> <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-container ngbNavItem>
<ng-template ngbTabContent> <a ngbNavLink i18n>Basic info</a>
<ng-template ngbNavContent>
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<div class="form-group"> <div class="form-group">
@ -155,10 +157,12 @@
</div> </div>
</div> </div>
</ng-template> </ng-template>
</ngb-tab> </ng-container>
<ngb-tab i18n-title title="Captions"> <ng-container ngbNavItem>
<ng-template ngbTabContent> <a ngbNavLink i18n>Captions</a>
<ng-template ngbNavContent>
<div class="captions"> <div class="captions">
<div class="captions-header"> <div class="captions-header">
@ -206,10 +210,12 @@
</div> </div>
</ng-template> </ng-template>
</ngb-tab> </ng-container>
<ngb-tab i18n-title title="Advanced settings"> <ng-container ngbNavItem>
<ng-template ngbTabContent> <a ngbNavLink i18n>Advanced settings</a>
<ng-template ngbNavContent>
<div class="row advanced-settings"> <div class="row advanced-settings">
<div class="col-md-12 col-xl-8"> <div class="col-md-12 col-xl-8">
@ -262,10 +268,11 @@
</div> </div>
</div> </div>
</ng-template> </ng-template>
</ngb-tab> </ng-container>
</ngb-tabset> </div>
<div [ngbNavOutlet]="nav"></div>
</div> </div>
<my-video-caption-add-modal <my-video-caption-add-modal

8
client/src/app/videos/+video-edit/shared/video-edit.component.scss
View File

@ -19,6 +19,10 @@ my-peertube-checkbox {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.nav-tabs {
margin-bottom: 15px;
}
.video-edit { .video-edit {
height: 100%; height: 100%;
min-height: 300px; min-height: 300px;
@ -145,10 +149,6 @@ p-calendar {
} }
::ng-deep { ::ng-deep {
.root-tabset > .nav {
margin-bottom: 15px;
}
.ng2-tag-input { .ng2-tag-input {
border: none !important; border: none !important;
} }

38
client/src/app/videos/+video-edit/video-add.component.html
View File

@ -10,27 +10,37 @@
<ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container> <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
</div> </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 ngbNavContent>
<ng-template ngbTabTitle><span i18n>Upload a file</span></ng-template>
<ng-template ngbTabContent>
<my-video-upload #videoUpload (firstStepDone)="onFirstStepDone('upload', $event)" (firstStepError)="onError()"></my-video-upload> <my-video-upload #videoUpload (firstStepDone)="onFirstStepDone('upload', $event)" (firstStepError)="onError()"></my-video-upload>
</ng-template> </ng-template>
</ngb-tab> </ng-container>
<ngb-tab *ngIf="isVideoImportHttpEnabled()"> <ng-container ngbNavItem *ngIf="isVideoImportHttpEnabled()">
<ng-template ngbTabTitle><span i18n>Import with URL</span></ng-template> <a ngbNavLink>
<ng-template ngbTabContent> <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> <my-video-import-url #videoImportUrl (firstStepDone)="onFirstStepDone('import-url', $event)" (firstStepError)="onError()"></my-video-import-url>
</ng-template> </ng-template>
</ngb-tab> </ng-container>
<ngb-tab *ngIf="isVideoImportTorrentEnabled()"> <ng-container ngbNavItem *ngIf="isVideoImportTorrentEnabled()">
<ng-template ngbTabTitle><span i18n>Import with torrent</span></ng-template> <a ngbNavLink>
<ng-template ngbTabContent> <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> <my-video-import-torrent #videoImportTorrent (firstStepDone)="onFirstStepDone('import-torrent', $event)" (firstStepError)="onError()"></my-video-import-torrent>
</ng-template> </ng-template>
</ngb-tab> </ng-container>
</ngb-tabset> </div>
<div [ngbNavOutlet]="nav"></div>
</div> </div>

71
client/src/app/videos/+video-edit/video-add.component.scss
View File

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

36
client/src/app/videos/+video-watch/modal/video-share.component.html
View File

@ -27,29 +27,33 @@
<div class="video"> <div class="video">
<div class="title-page title-page-single" *ngIf="hasPlaylist()" i18n>Share the video</div> <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-container ngbNavItem="url">
<ng-template ngbTabContent> <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> <my-input-readonly-copy [value]="getVideoUrl()"></my-input-readonly-copy>
</div> </div>
</ng-template> </ng-template>
</ngb-tab> </ng-container>
<ngb-tab i18n-title title="QR-Code" id="qrcode"> <ng-container ngbNavItem="qrcode">
<ng-template ngbTabContent> <a ngbNavLink i18n>QR-Code</a>
<div class="tab-content">
<ng-template ngbNavContent>
<div class="nav-content">
<qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode> <qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode>
</div> </div>
</ng-template> </ng-template>
</ngb-tab> </ng-container>
<ngb-tab i18n-title title="Embed" id="embed"> <ng-container ngbNavItem="embed">
<ng-template ngbTabContent> <a ngbNavLink i18n>Embed</a>
<div class="tab-content">
<ng-template ngbNavContent>
<div class="nav-content">
<my-input-readonly-copy [value]="getVideoIframeCode()"></my-input-readonly-copy> <my-input-readonly-copy [value]="getVideoIframeCode()"></my-input-readonly-copy>
<div i18n *ngIf="notSecure()" class="alert alert-warning"> <div i18n *ngIf="notSecure()" class="alert alert-warning">
@ -57,9 +61,11 @@
</div> </div>
</div> </div>
</ng-template> </ng-template>
</ngb-tab> </ng-container>
</ngb-tabset> </div>
<div [ngbNavOutlet]="nav"></div>
<div class="filters"> <div class="filters">
<div> <div>

2
client/src/app/videos/+video-watch/modal/video-share.component.scss
View File

@ -21,7 +21,7 @@ my-input-readonly-copy {
text-align: center; text-align: center;
} }
.tab-content { .nav-content {
margin-top: 30px; margin-top: 30px;
display: flex; display: flex;
justify-content: center; justify-content: center;

8
client/src/app/videos/+video-watch/modal/video-share.component.ts
View File

@ -1,7 +1,7 @@
import { Component, ElementRef, Input, ViewChild } from '@angular/core' import { Component, ElementRef, Input, ViewChild } from '@angular/core'
import { VideoDetails } from '../../../shared/video/video-details.model' import { VideoDetails } from '../../../shared/video/video-details.model'
import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils' 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 { VideoCaption } from '@shared/models'
import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
@ -35,7 +35,7 @@ export class VideoShareComponent {
@Input() videoCaptions: VideoCaption[] = [] @Input() videoCaptions: VideoCaption[] = []
@Input() playlist: VideoPlaylist = null @Input() playlist: VideoPlaylist = null
activeId: 'url' | 'qrcode' | 'embed' activeId: 'url' | 'qrcode' | 'embed' = 'url'
customizations: Customizations customizations: Customizations
isAdvancedCustomizationCollapsed = true isAdvancedCustomizationCollapsed = true
includeVideoInPlaylist = false includeVideoInPlaylist = false
@ -101,10 +101,6 @@ export class VideoShareComponent {
return window.location.protocol === 'http:' return window.location.protocol === 'http:'
} }
onTabChange (event: NgbTabChangeEvent) {
this.activeId = event.nextId as any
}
isInEmbedTab () { isInEmbedTab () {
return this.activeId === 'embed' return this.activeId === 'embed'
} }

14
client/src/sass/bootstrap.scss vendored
View File

@ -50,7 +50,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
background-color: var(--mainHoverColor); background-color: var(--mainHoverColor);
opacity: .9; opacity: .9;
} }
&::after { &::after {
display: none; display: none;
} }
@ -158,18 +158,12 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
} }
} }
ngb-tabset { .nav-tabs {
.nav-link { .nav-link {
&, & a { @include disable-default-a-behaviour;
@include disable-default-a-behaviour;
color: var(--mainForegroundColor) !important; color: var(--mainForegroundColor) !important;
}
}
.nav-pills .nav-link.active {
color: #000 !important;
} }
} }