aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-08-07 16:29:30 +0200
committerChocobozzz <me@florianbigard.com>2020-08-10 09:43:44 +0200
commit82f443de1aba70ce75c72a4a7f669385600ab3c6 (patch)
tree198ab1db910b44ad9844c3365d0ec2dec7325778 /client/src
parent10846ef656585ee857ec43fc22b490409ddd0d44 (diff)
downloadPeerTube-82f443de1aba70ce75c72a4a7f669385600ab3c6.tar.gz
PeerTube-82f443de1aba70ce75c72a4a7f669385600ab3c6.tar.zst
PeerTube-82f443de1aba70ce75c72a4a7f669385600ab3c6.zip
Add buttons in playlist page
To delete/edit/share the playlist
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html27
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss16
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts64
-rw-r--r--client/src/app/+my-account/my-account.module.ts4
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.html3
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.ts6
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.module.ts10
-rw-r--r--client/src/app/shared/shared-share-modal/index.ts3
-rw-r--r--client/src/app/shared/shared-share-modal/shared-share-modal.module.ts27
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.html (renamed from client/src/app/+videos/+video-watch/modal/video-share.component.html)10
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.scss (renamed from client/src/app/+videos/+video-watch/modal/video-share.component.scss)0
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.ts (renamed from client/src/app/+videos/+video-watch/modal/video-share.component.ts)14
-rw-r--r--client/src/sass/application.scss1
13 files changed, 155 insertions, 30 deletions
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
index 2bfdf5c43..09b4c8a1b 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
@@ -5,10 +5,33 @@
5 *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true" 5 *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true"
6 [displayDescription]="true" [displayPrivacy]="true" 6 [displayDescription]="true" [displayPrivacy]="true"
7 ></my-video-playlist-miniature> 7 ></my-video-playlist-miniature>
8
9 <div class="playlist-buttons">
10 <button (click)="showShareModal()" class="action-button share-button">
11 <my-global-icon iconName="share" aria-hidden="true"></my-global-icon>
12 <span class="icon-text" i18n>Share</span>
13 </button>
14
15 <my-action-dropdown
16 *ngIf="isRegularPlaylist(playlist)"
17 [entry]="playlist" [actions]="playlistActions" label="More"
18 ></my-action-dropdown>
19 </div>
20
8 </div> 21 </div>
9 22
10 <div class="playlist-elements col-xs-12 col-md-7 col-xl-9"> 23 <div class="playlist-elements col-xs-12 col-md-7 col-xl-9">
11 <div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div> 24 <div class="no-results" *ngIf="pagination.totalItems === 0">
25 <div i18n>No videos in this playlist.</div>
26
27 <div i18n>
28 Browse videos on PeerTube to add them in your playlist.
29 </div>
30
31 <div i18n>
32 See the <a target="_blank" href="https://docs.joinpeertube.org/#/use-library?id=playlist">documentation</a> for more information.
33 </div>
34 </div>
12 35
13 <div 36 <div
14 class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" 37 class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()"
@@ -24,3 +47,5 @@
24 </div> 47 </div>
25 </div> 48 </div>
26</div> 49</div>
50
51<my-video-share #videoShareModal [playlist]="playlist"></my-video-share>
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
index 4531e475a..3e9b57c35 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
@@ -10,7 +10,9 @@
10 padding: 10px; 10 padding: 10px;
11 11
12 display: flex; 12 display: flex;
13 flex-direction: column;
13 justify-content: center; 14 justify-content: center;
15 align-items: center;
14 16
15 /* fix ellipsis dots background color */ 17 /* fix ellipsis dots background color */
16 ::ng-deep .miniature-name::after { 18 ::ng-deep .miniature-name::after {
@@ -18,6 +20,20 @@
18 } 20 }
19} 21}
20 22
23.playlist-buttons {
24 display:flex;
25 margin: 30px 0 10px 0;
26
27 .share-button {
28 @include peertube-button;
29 @include button-with-icon(17px, 3px, -1px);
30 @include grey-button;
31 @include apply-svg-color(pvar(--actionButtonColor));
32
33 margin-right: 10px;
34 }
35}
36
21// Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples 37// Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples
22.cdk-drag-preview { 38.cdk-drag-preview {
23 box-sizing: border-box; 39 box-sizing: border-box;
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
index 0add81c38..e278d9ed2 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
@@ -1,9 +1,13 @@
1import { Subject, Subscription } from 'rxjs' 1import { Subject, Subscription } from 'rxjs'
2import { CdkDragDrop } from '@angular/cdk/drag-drop' 2import { CdkDragDrop } from '@angular/cdk/drag-drop'
3import { Component, OnDestroy, OnInit } from '@angular/core' 3import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
4import { ActivatedRoute } from '@angular/router' 4import { ActivatedRoute, Router } from '@angular/router'
5import { ComponentPagination, Notifier, ScreenService } from '@app/core' 5import { ComponentPagination, ConfirmService, Notifier, ScreenService } from '@app/core'
6import { DropdownAction } from '@app/shared/shared-main'
7import { VideoShareComponent } from '@app/shared/shared-share-modal'
6import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist' 8import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
9import { I18n } from '@ngx-translate/i18n-polyfill'
10import { VideoPlaylistType } from '@shared/models'
7 11
8@Component({ 12@Component({
9 selector: 'my-account-video-playlist-elements', 13 selector: 'my-account-video-playlist-elements',
@@ -11,9 +15,13 @@ import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/
11 styleUrls: [ './my-account-video-playlist-elements.component.scss' ] 15 styleUrls: [ './my-account-video-playlist-elements.component.scss' ]
12}) 16})
13export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy { 17export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy {
18 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
19
14 playlistElements: VideoPlaylistElement[] = [] 20 playlistElements: VideoPlaylistElement[] = []
15 playlist: VideoPlaylist 21 playlist: VideoPlaylist
16 22
23 playlistActions: DropdownAction<VideoPlaylist>[][] = []
24
17 pagination: ComponentPagination = { 25 pagination: ComponentPagination = {
18 currentPage: 1, 26 currentPage: 1,
19 itemsPerPage: 10, 27 itemsPerPage: 10,
@@ -27,12 +35,30 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
27 35
28 constructor ( 36 constructor (
29 private notifier: Notifier, 37 private notifier: Notifier,
38 private i18n: I18n,
39 private router: Router,
40 private confirmService: ConfirmService,
30 private route: ActivatedRoute, 41 private route: ActivatedRoute,
31 private screenService: ScreenService, 42 private screenService: ScreenService,
32 private videoPlaylistService: VideoPlaylistService 43 private videoPlaylistService: VideoPlaylistService
33 ) {} 44 ) {}
34 45
35 ngOnInit () { 46 ngOnInit () {
47 this.playlistActions = [
48 [
49 {
50 label: this.i18n('Update playlist'),
51 iconName: 'edit',
52 linkBuilder: playlist => [ '/my-account', 'video-playlists', 'update', playlist.uuid ]
53 },
54 {
55 label: this.i18n('Delete playlist'),
56 iconName: 'delete',
57 handler: playlist => this.deleteVideoPlaylist(playlist)
58 }
59 ]
60 ]
61
36 this.paramsSub = this.route.params.subscribe(routeParams => { 62 this.paramsSub = this.route.params.subscribe(routeParams => {
37 this.videoPlaylistId = routeParams[ 'videoPlaylistId' ] 63 this.videoPlaylistId = routeParams[ 'videoPlaylistId' ]
38 this.loadElements() 64 this.loadElements()
@@ -90,6 +116,38 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
90 return elem.id 116 return elem.id
91 } 117 }
92 118
119 isRegularPlaylist (playlist: VideoPlaylist) {
120 return playlist?.type.id === VideoPlaylistType.REGULAR
121 }
122
123 showShareModal () {
124 this.videoShareModal.show()
125 }
126
127 async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) {
128 const res = await this.confirmService.confirm(
129 this.i18n(
130 'Do you really want to delete {{playlistDisplayName}}?',
131 { playlistDisplayName: videoPlaylist.displayName }
132 ),
133 this.i18n('Delete')
134 )
135 if (res === false) return
136
137 this.videoPlaylistService.removeVideoPlaylist(videoPlaylist)
138 .subscribe(
139 () => {
140 this.router.navigate([ '/my-account', 'video-playlists' ])
141
142 this.notifier.success(
143 this.i18n('Playlist {{playlistDisplayName}} deleted.', { playlistDisplayName: videoPlaylist.displayName })
144 )
145 },
146
147 error => this.notifier.error(error.message)
148 )
149 }
150
93 /** 151 /**
94 * Returns null to not have drag and drop delay. 152 * Returns null to not have drag and drop delay.
95 * In small views, where elements are about 100% wide, 153 * In small views, where elements are about 100% wide,
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index bf5a4fc8a..5f7ed4d2f 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -8,6 +8,7 @@ import { SharedFormModule } from '@app/shared/shared-forms'
8import { SharedGlobalIconModule } from '@app/shared/shared-icons' 8import { SharedGlobalIconModule } from '@app/shared/shared-icons'
9import { SharedMainModule } from '@app/shared/shared-main' 9import { SharedMainModule } from '@app/shared/shared-main'
10import { SharedModerationModule } from '@app/shared/shared-moderation' 10import { SharedModerationModule } from '@app/shared/shared-moderation'
11import { SharedShareModal } from '@app/shared/shared-share-modal'
11import { SharedUserInterfaceSettingsModule } from '@app/shared/shared-user-settings' 12import { SharedUserInterfaceSettingsModule } from '@app/shared/shared-user-settings'
12import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription/shared-user-subscription.module' 13import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription/shared-user-subscription.module'
13import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature' 14import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
@@ -53,7 +54,8 @@ import { MyAccountComponent } from './my-account.component'
53 SharedVideoPlaylistModule, 54 SharedVideoPlaylistModule,
54 SharedUserInterfaceSettingsModule, 55 SharedUserInterfaceSettingsModule,
55 SharedGlobalIconModule, 56 SharedGlobalIconModule,
56 SharedAbuseListModule 57 SharedAbuseListModule,
58 SharedShareModal
57 ], 59 ],
58 60
59 declarations: [ 61 declarations: [
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 2588b9af5..4279437d2 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -116,9 +116,10 @@
116 <my-global-icon iconName="download" aria-hidden="true"></my-global-icon> 116 <my-global-icon iconName="download" aria-hidden="true"></my-global-icon>
117 <span class="icon-text d-none d-sm-inline" i18n>DOWNLOAD</span> 117 <span class="icon-text d-none d-sm-inline" i18n>DOWNLOAD</span>
118 </button> 118 </button>
119 119
120 <my-video-download #videoDownloadModal></my-video-download> 120 <my-video-download #videoDownloadModal></my-video-download>
121 </ng-container> 121 </ng-container>
122
122 <ng-container *ngIf="isUserLoggedIn()"> 123 <ng-container *ngIf="isUserLoggedIn()">
123 <my-video-actions-dropdown 124 <my-video-actions-dropdown
124 placement="bottom auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" [videoCaptions]="videoCaptions" 125 placement="bottom auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" [videoCaptions]="videoCaptions"
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 33f998282..a53af210a 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -8,12 +8,14 @@ import { AuthService, AuthUser, ConfirmService, MarkdownService, Notifier, RestE
8import { HooksService } from '@app/core/plugins/hooks.service' 8import { HooksService } from '@app/core/plugins/hooks.service'
9import { RedirectService } from '@app/core/routing/redirect.service' 9import { RedirectService } from '@app/core/routing/redirect.service'
10import { isXPercentInViewport, scrollToTop } from '@app/helpers' 10import { isXPercentInViewport, scrollToTop } from '@app/helpers'
11import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
12import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main' 11import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
12import { VideoShareComponent } from '@app/shared/shared-share-modal'
13import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' 13import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
14import { VideoDownloadComponent } from '@app/shared/shared-video-miniature'
14import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' 15import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
15import { MetaService } from '@ngx-meta/core' 16import { MetaService } from '@ngx-meta/core'
16import { I18n } from '@ngx-translate/i18n-polyfill' 17import { I18n } from '@ngx-translate/i18n-polyfill'
18import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
17import { ServerConfig, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models' 19import { ServerConfig, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models'
18import { getStoredP2PEnabled, getStoredTheater } from '../../../assets/player/peertube-player-local-storage' 20import { getStoredP2PEnabled, getStoredTheater } from '../../../assets/player/peertube-player-local-storage'
19import { 21import {
@@ -26,10 +28,8 @@ import {
26} from '../../../assets/player/peertube-player-manager' 28} from '../../../assets/player/peertube-player-manager'
27import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils' 29import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils'
28import { environment } from '../../../environments/environment' 30import { environment } from '../../../environments/environment'
29import { VideoShareComponent } from './modal/video-share.component'
30import { VideoSupportComponent } from './modal/video-support.component' 31import { VideoSupportComponent } from './modal/video-support.component'
31import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' 32import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
32import { VideoDownloadComponent } from '@app/shared/shared-video-miniature'
33 33
34@Component({ 34@Component({
35 selector: 'my-video-watch', 35 selector: 'my-video-watch',
diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts
index 5821dc2b7..612bbccc4 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.module.ts
@@ -1,19 +1,17 @@
1import { QRCodeModule } from 'angularx-qrcode'
2import { NgModule } from '@angular/core' 1import { NgModule } from '@angular/core'
3import { SharedFormModule } from '@app/shared/shared-forms' 2import { SharedFormModule } from '@app/shared/shared-forms'
4import { SharedGlobalIconModule } from '@app/shared/shared-icons' 3import { SharedGlobalIconModule } from '@app/shared/shared-icons'
5import { SharedMainModule } from '@app/shared/shared-main' 4import { SharedMainModule } from '@app/shared/shared-main'
6import { SharedModerationModule } from '@app/shared/shared-moderation' 5import { SharedModerationModule } from '@app/shared/shared-moderation'
6import { SharedShareModal } from '@app/shared/shared-share-modal'
7import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription' 7import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
8import { SharedVideoCommentModule } from '@app/shared/shared-video-comment' 8import { SharedVideoCommentModule } from '@app/shared/shared-video-comment'
9import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature' 9import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
10import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist' 10import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist'
11import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
12import { VideoCommentService } from '../../shared/shared-video-comment/video-comment.service' 11import { VideoCommentService } from '../../shared/shared-video-comment/video-comment.service'
13import { VideoCommentAddComponent } from './comment/video-comment-add.component' 12import { VideoCommentAddComponent } from './comment/video-comment-add.component'
14import { VideoCommentComponent } from './comment/video-comment.component' 13import { VideoCommentComponent } from './comment/video-comment.component'
15import { VideoCommentsComponent } from './comment/video-comments.component' 14import { VideoCommentsComponent } from './comment/video-comments.component'
16import { VideoShareComponent } from './modal/video-share.component'
17import { VideoSupportComponent } from './modal/video-support.component' 15import { VideoSupportComponent } from './modal/video-support.component'
18import { RecommendationsModule } from './recommendations/recommendations.module' 16import { RecommendationsModule } from './recommendations/recommendations.module'
19import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive' 17import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive'
@@ -25,8 +23,6 @@ import { VideoWatchComponent } from './video-watch.component'
25@NgModule({ 23@NgModule({
26 imports: [ 24 imports: [
27 VideoWatchRoutingModule, 25 VideoWatchRoutingModule,
28 NgbTooltipModule,
29 QRCodeModule,
30 RecommendationsModule, 26 RecommendationsModule,
31 27
32 SharedMainModule, 28 SharedMainModule,
@@ -36,14 +32,14 @@ import { VideoWatchComponent } from './video-watch.component'
36 SharedUserSubscriptionModule, 32 SharedUserSubscriptionModule,
37 SharedModerationModule, 33 SharedModerationModule,
38 SharedGlobalIconModule, 34 SharedGlobalIconModule,
39 SharedVideoCommentModule 35 SharedVideoCommentModule,
36 SharedShareModal
40 ], 37 ],
41 38
42 declarations: [ 39 declarations: [
43 VideoWatchComponent, 40 VideoWatchComponent,
44 VideoWatchPlaylistComponent, 41 VideoWatchPlaylistComponent,
45 42
46 VideoShareComponent,
47 VideoSupportComponent, 43 VideoSupportComponent,
48 VideoCommentsComponent, 44 VideoCommentsComponent,
49 VideoCommentAddComponent, 45 VideoCommentAddComponent,
diff --git a/client/src/app/shared/shared-share-modal/index.ts b/client/src/app/shared/shared-share-modal/index.ts
new file mode 100644
index 000000000..e13c08acc
--- /dev/null
+++ b/client/src/app/shared/shared-share-modal/index.ts
@@ -0,0 +1,3 @@
1export * from './video-share.component'
2
3export * from './shared-share-modal.module'
diff --git a/client/src/app/shared/shared-share-modal/shared-share-modal.module.ts b/client/src/app/shared/shared-share-modal/shared-share-modal.module.ts
new file mode 100644
index 000000000..e269eecac
--- /dev/null
+++ b/client/src/app/shared/shared-share-modal/shared-share-modal.module.ts
@@ -0,0 +1,27 @@
1import { QRCodeModule } from 'angularx-qrcode'
2import { NgModule } from '@angular/core'
3import { SharedFormModule } from '../shared-forms'
4import { SharedGlobalIconModule } from '../shared-icons'
5import { SharedMainModule } from '../shared-main/shared-main.module'
6import { VideoShareComponent } from './video-share.component'
7
8@NgModule({
9 imports: [
10 QRCodeModule,
11
12 SharedMainModule,
13 SharedFormModule,
14 SharedGlobalIconModule
15 ],
16
17 declarations: [
18 VideoShareComponent
19 ],
20
21 exports: [
22 VideoShareComponent
23 ],
24
25 providers: [ ]
26})
27export class SharedShareModal { }
diff --git a/client/src/app/+videos/+video-watch/modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index 946e8d8ca..4174458b5 100644
--- a/client/src/app/+videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -7,8 +7,8 @@
7 7
8 <div class="modal-body"> 8 <div class="modal-body">
9 9
10 <div class="playlist" *ngIf="hasPlaylist()"> 10 <div class="playlist" *ngIf="playlist">
11 <div class="title-page title-page-single" i18n>Share the playlist</div> 11 <div class="title-page title-page-single" i18n *ngIf="video">Share the playlist</div>
12 12
13 <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activePlaylistId"> 13 <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activePlaylistId">
14 14
@@ -53,7 +53,7 @@
53 53
54 <div class="filters"> 54 <div class="filters">
55 55
56 <div class="form-group"> 56 <div class="form-group" *ngIf="video">
57 <my-peertube-checkbox inputName="includeVideoInPlaylist" [(ngModel)]="includeVideoInPlaylist" i18n-labelText 57 <my-peertube-checkbox inputName="includeVideoInPlaylist" [(ngModel)]="includeVideoInPlaylist" i18n-labelText
58 labelText="Share the playlist at this video position"></my-peertube-checkbox> 58 labelText="Share the playlist at this video position"></my-peertube-checkbox>
59 </div> 59 </div>
@@ -62,8 +62,8 @@
62 </div> 62 </div>
63 63
64 64
65 <div class="video"> 65 <div class="video" *ngIf="video">
66 <div class="title-page title-page-single" *ngIf="hasPlaylist()" i18n>Share the video</div> 66 <div class="title-page title-page-single" *ngIf="playlist" i18n>Share the video</div>
67 67
68 <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeVideoId"> 68 <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeVideoId">
69 69
diff --git a/client/src/app/+videos/+video-watch/modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index 091d4dc3b..091d4dc3b 100644
--- a/client/src/app/+videos/+video-watch/modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
diff --git a/client/src/app/+videos/+video-watch/modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts
index d9171fe0e..8d8e8a3a5 100644
--- a/client/src/app/+videos/+video-watch/modal/video-share.component.ts
+++ b/client/src/app/shared/shared-share-modal/video-share.component.ts
@@ -1,9 +1,9 @@
1import { Component, ElementRef, Input, ViewChild } from '@angular/core' 1import { Component, ElementRef, Input, ViewChild } from '@angular/core'
2import { buildVideoOrPlaylistEmbed, buildVideoLink, buildPlaylistLink } from '../../../../assets/player/utils'
3import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
4import { VideoCaption } from '@shared/models'
5import { VideoDetails } from '@app/shared/shared-main' 2import { VideoDetails } from '@app/shared/shared-main'
6import { VideoPlaylist } from '@app/shared/shared-video-playlist' 3import { VideoPlaylist } from '@app/shared/shared-video-playlist'
4import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
5import { VideoCaption } from '@shared/models'
6import { buildPlaylistLink, buildVideoLink, buildVideoOrPlaylistEmbed } from '../../../assets/player/utils'
7 7
8type Customizations = { 8type Customizations = {
9 startAtCheckbox: boolean 9 startAtCheckbox: boolean
@@ -51,7 +51,7 @@ export class VideoShareComponent {
51 51
52 show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) { 52 show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) {
53 let subtitle: string 53 let subtitle: string
54 if (this.videoCaptions.length !== 0) { 54 if (this.videoCaptions && this.videoCaptions.length !== 0) {
55 subtitle = this.videoCaptions[0].language.id 55 subtitle = this.videoCaptions[0].language.id
56 } 56 }
57 57
@@ -60,7 +60,7 @@ export class VideoShareComponent {
60 startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0, 60 startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
61 61
62 stopAtCheckbox: false, 62 stopAtCheckbox: false,
63 stopAt: this.video.duration, 63 stopAt: this.video?.duration,
64 64
65 subtitleCheckbox: false, 65 subtitleCheckbox: false,
66 subtitle, 66 subtitle,
@@ -118,10 +118,6 @@ export class VideoShareComponent {
118 return this.activeVideoId === 'embed' 118 return this.activeVideoId === 'embed'
119 } 119 }
120 120
121 hasPlaylist () {
122 return !!this.playlist
123 }
124
125 private getPlaylistOptions (baseUrl?: string) { 121 private getPlaylistOptions (baseUrl?: string) {
126 return { 122 return {
127 baseUrl, 123 baseUrl,
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index cdf0ee992..f4e4d8977 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -282,6 +282,7 @@ table {
282 max-height: 500px; 282 max-height: 500px;
283 283
284 display: flex; 284 display: flex;
285 flex-direction: column;
285 align-items: center; 286 align-items: center;
286 justify-content: center; 287 justify-content: center;
287 font-size: 16px; 288 font-size: 16px;