aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+my-account')
-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
4 files changed, 106 insertions, 5 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: [