aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-04-01 16:52:59 +0200
committerChocobozzz <me@florianbigard.com>2020-04-01 16:52:59 +0200
commit45c6bcf312d2e9578501eaaf7511183bc570fe91 (patch)
tree6f526b1e132f532efa0916765222d260618f8095 /client/src/app/videos
parentd96994289b24c4bbd056660c5fe11fff0f77635e (diff)
downloadPeerTube-45c6bcf312d2e9578501eaaf7511183bc570fe91.tar.gz
PeerTube-45c6bcf312d2e9578501eaaf7511183bc570fe91.tar.zst
PeerTube-45c6bcf312d2e9578501eaaf7511183bc570fe91.zip
Remove deprecated NgbTabsetModule module
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.html29
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss8
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.html38
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.scss77
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.html36
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.scss2
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.ts8
7 files changed, 103 insertions, 95 deletions
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 @@
1<div class="video-edit" [formGroup]="form"> 1<div class="video-edit" [formGroup]="form">
2 <ngb-tabset class="root-tabset bootstrap"> 2 <div ngbNav #nav="ngbNav" class="nav-tabs">
3 3
4 <ngb-tab i18n-title title="Basic info"> 4 <ng-container ngbNavItem>
5 <ng-template ngbTabContent> 5 <a ngbNavLink i18n>Basic info</a>
6
7 <ng-template ngbNavContent>
6 <div class="row"> 8 <div class="row">
7 <div class="col-md-8"> 9 <div class="col-md-8">
8 <div class="form-group"> 10 <div class="form-group">
@@ -155,10 +157,12 @@
155 </div> 157 </div>
156 </div> 158 </div>
157 </ng-template> 159 </ng-template>
158 </ngb-tab> 160 </ng-container>
161
162 <ng-container ngbNavItem>
163 <a ngbNavLink i18n>Captions</a>
159 164
160 <ngb-tab i18n-title title="Captions"> 165 <ng-template ngbNavContent>
161 <ng-template ngbTabContent>
162 <div class="captions"> 166 <div class="captions">
163 167
164 <div class="captions-header"> 168 <div class="captions-header">
@@ -206,10 +210,12 @@
206 210
207 </div> 211 </div>
208 </ng-template> 212 </ng-template>
209 </ngb-tab> 213 </ng-container>
214
215 <ng-container ngbNavItem>
216 <a ngbNavLink i18n>Advanced settings</a>
210 217
211 <ngb-tab i18n-title title="Advanced settings"> 218 <ng-template ngbNavContent>
212 <ng-template ngbTabContent>
213 <div class="row advanced-settings"> 219 <div class="row advanced-settings">
214 <div class="col-md-12 col-xl-8"> 220 <div class="col-md-12 col-xl-8">
215 221
@@ -262,10 +268,11 @@
262 </div> 268 </div>
263 </div> 269 </div>
264 </ng-template> 270 </ng-template>
265 </ngb-tab> 271 </ng-container>
266 272
267 </ngb-tabset> 273 </div>
268 274
275 <div [ngbNavOutlet]="nav"></div>
269</div> 276</div>
270 277
271<my-video-caption-add-modal 278<my-video-caption-add-modal
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 144914731..90d26e13d 100644
--- 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 {
19 margin-bottom: 1rem; 19 margin-bottom: 1rem;
20} 20}
21 21
22.nav-tabs {
23 margin-bottom: 15px;
24}
25
22.video-edit { 26.video-edit {
23 height: 100%; 27 height: 100%;
24 min-height: 300px; 28 min-height: 300px;
@@ -145,10 +149,6 @@ p-calendar {
145} 149}
146 150
147::ng-deep { 151::ng-deep {
148 .root-tabset > .nav {
149 margin-bottom: 15px;
150 }
151
152 .ng2-tag-input { 152 .ng2-tag-input {
153 border: none !important; 153 border: none !important;
154 } 154 }
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 @@
10 <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container> 10 <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
11 </div> 11 </div>
12 12
13 <ngb-tabset class="video-add-tabset root-tabset bootstrap" [ngClass]="{ 'hide-nav': secondStepType !== undefined }"> 13 <div ngbNav #nav="ngbNav" class="nav-tabs video-add-nav" [ngClass]="{ 'hide-nav': secondStepType !== undefined }">
14 <ng-container ngbNavItem>
15 <a ngbNavLink>
16 <span i18n>Upload a file</span>
17 </a>
14 18
15 <ngb-tab> 19 <ng-template ngbNavContent>
16 <ng-template ngbTabTitle><span i18n>Upload a file</span></ng-template>
17 <ng-template ngbTabContent>
18 <my-video-upload #videoUpload (firstStepDone)="onFirstStepDone('upload', $event)" (firstStepError)="onError()"></my-video-upload> 20 <my-video-upload #videoUpload (firstStepDone)="onFirstStepDone('upload', $event)" (firstStepError)="onError()"></my-video-upload>
19 </ng-template> 21 </ng-template>
20 </ngb-tab> 22 </ng-container>
21 23
22 <ngb-tab *ngIf="isVideoImportHttpEnabled()"> 24 <ng-container ngbNavItem *ngIf="isVideoImportHttpEnabled()">
23 <ng-template ngbTabTitle><span i18n>Import with URL</span></ng-template> 25 <a ngbNavLink>
24 <ng-template ngbTabContent> 26 <span i18n>Import with URL</span>
27 </a>
28
29 <ng-template ngbNavContent>
25 <my-video-import-url #videoImportUrl (firstStepDone)="onFirstStepDone('import-url', $event)" (firstStepError)="onError()"></my-video-import-url> 30 <my-video-import-url #videoImportUrl (firstStepDone)="onFirstStepDone('import-url', $event)" (firstStepError)="onError()"></my-video-import-url>
26 </ng-template> 31 </ng-template>
27 </ngb-tab> 32 </ng-container>
33
34 <ng-container ngbNavItem *ngIf="isVideoImportTorrentEnabled()">
35 <a ngbNavLink>
36 <span i18n>Import with torrent</span>
37 </a>
28 38
29 <ngb-tab *ngIf="isVideoImportTorrentEnabled()"> 39 <ng-template ngbNavContent>
30 <ng-template ngbTabTitle><span i18n>Import with torrent</span></ng-template>
31 <ng-template ngbTabContent>
32 <my-video-import-torrent #videoImportTorrent (firstStepDone)="onFirstStepDone('import-torrent', $event)" (firstStepError)="onError()"></my-video-import-torrent> 40 <my-video-import-torrent #videoImportTorrent (firstStepDone)="onFirstStepDone('import-torrent', $event)" (firstStepError)="onError()"></my-video-import-torrent>
33 </ng-template> 41 </ng-template>
34 </ngb-tab> 42 </ng-container>
35 </ngb-tabset> 43 </div>
44
45 <div [ngbNavOutlet]="nav"></div>
36</div> 46</div>
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;
13 font-size: 15px; 13 font-size: 15px;
14} 14}
15 15
16::ng-deep .root-tabset.video-add-tabset { 16::ng-deep .video-add-nav {
17 margin-top: 50px; 17 border-bottom: $border-width $border-type $border-color;
18 18 margin: 50px 0 0 0 !important;
19 &.hide-nav > .nav { 19
20 display: none !important; 20 a.nav-link {
21 } 21 @include disable-default-a-behaviour;
22 22
23 & > .nav { 23 margin-bottom: -$border-width;
24 border-bottom: $border-width $border-type $border-color; 24 height: 40px !important;
25 margin: 0 !important; 25 padding: 0 30px !important;
26 26 font-size: 15px;
27 & > li { 27
28 margin-bottom: -$border-width; 28 &.active {
29 } 29 border: $border-width $border-type $border-color;
30 30 border-bottom: none;
31 a.nav-link { 31 background-color: var(--submenuColor) !important;
32 @include disable-default-a-behaviour; 32
33 33 span {
34 height: 40px !important; 34 border-bottom: 2px solid var(--mainColor);
35 padding: 0 30px !important; 35 font-weight: $font-bold;
36 font-size: 15px;
37
38 &.active {
39 border: $border-width $border-type $border-color;
40 border-bottom: none;
41 background-color: var(--submenuColor) !important;
42
43 span {
44 border-bottom: 2px solid var(--mainColor);
45 font-weight: $font-bold;
46 }
47 } 36 }
48 } 37 }
49 } 38 }
39}
50 40
51 .upload-video-container { 41::ng-deep .upload-video-container {
52 border: $border-width $border-type $border-color; 42 border: $border-width $border-type $border-color;
53 border-top: none; 43 border-top: none;
54 44
55 background-color: var(--submenuColor); 45 background-color: var(--submenuColor);
56 border-radius: 3px; 46 border-radius: 3px;
57 width: 100%; 47 width: 100%;
58 min-height: 440px; 48 min-height: 440px;
59 padding-bottom: 20px; 49 padding-bottom: 20px;
60 display: flex; 50 display: flex;
61 justify-content: center; 51 justify-content: center;
62 align-items: center; 52 align-items: center;
63 }
64} 53}
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 @@
27 <div class="video"> 27 <div class="video">
28 <div class="title-page title-page-single" *ngIf="hasPlaylist()" i18n>Share the video</div> 28 <div class="title-page title-page-single" *ngIf="hasPlaylist()" i18n>Share the video</div>
29 29
30 <ngb-tabset class="root-tabset bootstrap" (tabChange)="onTabChange($event)"> 30 <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeId">
31 31
32 <ngb-tab i18n-title title="URL" id="url"> 32 <ng-container ngbNavItem="url">
33 <ng-template ngbTabContent> 33 <a ngbNavLink i18n>URL</a>
34 34
35 <div class="tab-content"> 35 <ng-template ngbNavContent>
36 <div class="nav-content">
36 <my-input-readonly-copy [value]="getVideoUrl()"></my-input-readonly-copy> 37 <my-input-readonly-copy [value]="getVideoUrl()"></my-input-readonly-copy>
37 </div> 38 </div>
38
39 </ng-template> 39 </ng-template>
40 </ngb-tab> 40 </ng-container>
41
42 <ng-container ngbNavItem="qrcode">
43 <a ngbNavLink i18n>QR-Code</a>
41 44
42 <ngb-tab i18n-title title="QR-Code" id="qrcode"> 45 <ng-template ngbNavContent>
43 <ng-template ngbTabContent> 46 <div class="nav-content">
44 <div class="tab-content">
45 <qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode> 47 <qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode>
46 </div> 48 </div>
47 </ng-template> 49 </ng-template>
48 </ngb-tab> 50 </ng-container>
51
52 <ng-container ngbNavItem="embed">
53 <a ngbNavLink i18n>Embed</a>
49 54
50 <ngb-tab i18n-title title="Embed" id="embed"> 55 <ng-template ngbNavContent>
51 <ng-template ngbTabContent> 56 <div class="nav-content">
52 <div class="tab-content">
53 <my-input-readonly-copy [value]="getVideoIframeCode()"></my-input-readonly-copy> 57 <my-input-readonly-copy [value]="getVideoIframeCode()"></my-input-readonly-copy>
54 58
55 <div i18n *ngIf="notSecure()" class="alert alert-warning"> 59 <div i18n *ngIf="notSecure()" class="alert alert-warning">
@@ -57,9 +61,11 @@
57 </div> 61 </div>
58 </div> 62 </div>
59 </ng-template> 63 </ng-template>
60 </ngb-tab> 64 </ng-container>
65
66 </div>
61 67
62 </ngb-tabset> 68 <div [ngbNavOutlet]="nav"></div>
63 69
64 <div class="filters"> 70 <div class="filters">
65 <div> 71 <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 {
21 text-align: center; 21 text-align: center;
22} 22}
23 23
24.tab-content { 24.nav-content {
25 margin-top: 30px; 25 margin-top: 30px;
26 display: flex; 26 display: flex;
27 justify-content: center; 27 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 @@
1import { Component, ElementRef, Input, ViewChild } from '@angular/core' 1import { Component, ElementRef, Input, ViewChild } from '@angular/core'
2import { VideoDetails } from '../../../shared/video/video-details.model' 2import { VideoDetails } from '../../../shared/video/video-details.model'
3import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils' 3import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
4import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap' 4import { NgbModal, NgbNavChangeEvent, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap'
5import { VideoCaption } from '@shared/models' 5import { VideoCaption } from '@shared/models'
6import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' 6import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
7 7
@@ -35,7 +35,7 @@ export class VideoShareComponent {
35 @Input() videoCaptions: VideoCaption[] = [] 35 @Input() videoCaptions: VideoCaption[] = []
36 @Input() playlist: VideoPlaylist = null 36 @Input() playlist: VideoPlaylist = null
37 37
38 activeId: 'url' | 'qrcode' | 'embed' 38 activeId: 'url' | 'qrcode' | 'embed' = 'url'
39 customizations: Customizations 39 customizations: Customizations
40 isAdvancedCustomizationCollapsed = true 40 isAdvancedCustomizationCollapsed = true
41 includeVideoInPlaylist = false 41 includeVideoInPlaylist = false
@@ -101,10 +101,6 @@ export class VideoShareComponent {
101 return window.location.protocol === 'http:' 101 return window.location.protocol === 'http:'
102 } 102 }
103 103
104 onTabChange (event: NgbTabChangeEvent) {
105 this.activeId = event.nextId as any
106 }
107
108 isInEmbedTab () { 104 isInEmbedTab () {
109 return this.activeId === 'embed' 105 return this.activeId === 'embed'
110 } 106 }