From 82f443de1aba70ce75c72a4a7f669385600ab3c6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 7 Aug 2020 16:29:30 +0200 Subject: Add buttons in playlist page To delete/edit/share the playlist --- ...-account-video-playlist-elements.component.html | 27 ++++++++- ...-account-video-playlist-elements.component.scss | 16 ++++++ ...my-account-video-playlist-elements.component.ts | 64 +++++++++++++++++++++- client/src/app/+my-account/my-account.module.ts | 4 +- 4 files changed, 106 insertions(+), 5 deletions(-) (limited to 'client/src/app/+my-account') 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 @@ *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true" [displayDescription]="true" [displayPrivacy]="true" > + +
+ + + +
+
-
No videos in this playlist.
+
+
No videos in this playlist.
+ +
+ Browse videos on PeerTube to add them in your playlist. +
+ +
+ See the documentation for more information. +
+
+ + 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 @@ padding: 10px; display: flex; + flex-direction: column; justify-content: center; + align-items: center; /* fix ellipsis dots background color */ ::ng-deep .miniature-name::after { @@ -18,6 +20,20 @@ } } +.playlist-buttons { + display:flex; + margin: 30px 0 10px 0; + + .share-button { + @include peertube-button; + @include button-with-icon(17px, 3px, -1px); + @include grey-button; + @include apply-svg-color(pvar(--actionButtonColor)); + + margin-right: 10px; + } +} + // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples .cdk-drag-preview { 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 @@ import { Subject, Subscription } from 'rxjs' import { CdkDragDrop } from '@angular/cdk/drag-drop' -import { Component, OnDestroy, OnInit } from '@angular/core' -import { ActivatedRoute } from '@angular/router' -import { ComponentPagination, Notifier, ScreenService } from '@app/core' +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' +import { ActivatedRoute, Router } from '@angular/router' +import { ComponentPagination, ConfirmService, Notifier, ScreenService } from '@app/core' +import { DropdownAction } from '@app/shared/shared-main' +import { VideoShareComponent } from '@app/shared/shared-share-modal' import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { VideoPlaylistType } from '@shared/models' @Component({ selector: 'my-account-video-playlist-elements', @@ -11,9 +15,13 @@ import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/ styleUrls: [ './my-account-video-playlist-elements.component.scss' ] }) export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy { + @ViewChild('videoShareModal') videoShareModal: VideoShareComponent + playlistElements: VideoPlaylistElement[] = [] playlist: VideoPlaylist + playlistActions: DropdownAction[][] = [] + pagination: ComponentPagination = { currentPage: 1, itemsPerPage: 10, @@ -27,12 +35,30 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro constructor ( private notifier: Notifier, + private i18n: I18n, + private router: Router, + private confirmService: ConfirmService, private route: ActivatedRoute, private screenService: ScreenService, private videoPlaylistService: VideoPlaylistService ) {} ngOnInit () { + this.playlistActions = [ + [ + { + label: this.i18n('Update playlist'), + iconName: 'edit', + linkBuilder: playlist => [ '/my-account', 'video-playlists', 'update', playlist.uuid ] + }, + { + label: this.i18n('Delete playlist'), + iconName: 'delete', + handler: playlist => this.deleteVideoPlaylist(playlist) + } + ] + ] + this.paramsSub = this.route.params.subscribe(routeParams => { this.videoPlaylistId = routeParams[ 'videoPlaylistId' ] this.loadElements() @@ -90,6 +116,38 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro return elem.id } + isRegularPlaylist (playlist: VideoPlaylist) { + return playlist?.type.id === VideoPlaylistType.REGULAR + } + + showShareModal () { + this.videoShareModal.show() + } + + async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) { + const res = await this.confirmService.confirm( + this.i18n( + 'Do you really want to delete {{playlistDisplayName}}?', + { playlistDisplayName: videoPlaylist.displayName } + ), + this.i18n('Delete') + ) + if (res === false) return + + this.videoPlaylistService.removeVideoPlaylist(videoPlaylist) + .subscribe( + () => { + this.router.navigate([ '/my-account', 'video-playlists' ]) + + this.notifier.success( + this.i18n('Playlist {{playlistDisplayName}} deleted.', { playlistDisplayName: videoPlaylist.displayName }) + ) + }, + + error => this.notifier.error(error.message) + ) + } + /** * Returns null to not have drag and drop delay. * 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' import { SharedGlobalIconModule } from '@app/shared/shared-icons' import { SharedMainModule } from '@app/shared/shared-main' import { SharedModerationModule } from '@app/shared/shared-moderation' +import { SharedShareModal } from '@app/shared/shared-share-modal' import { SharedUserInterfaceSettingsModule } from '@app/shared/shared-user-settings' import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription/shared-user-subscription.module' import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature' @@ -53,7 +54,8 @@ import { MyAccountComponent } from './my-account.component' SharedVideoPlaylistModule, SharedUserInterfaceSettingsModule, SharedGlobalIconModule, - SharedAbuseListModule + SharedAbuseListModule, + SharedShareModal ], declarations: [ -- cgit v1.2.3