From 332542bc6814bd16c2daf47dc776f9f4b126ec2e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 6 Dec 2017 14:05:38 +0100 Subject: [PATCH] Add delete button to my videos --- .../account-videos.component.html | 7 +++++- .../account-videos.component.scss | 18 ++++++++++++--- .../account-videos.component.ts | 22 +++++++++++++++++++ .../shared/video-miniature.component.scss | 2 +- client/src/assets/images/account/delete.svg | 14 ++++++++++++ 5 files changed, 58 insertions(+), 5 deletions(-) create mode 100644 client/src/assets/images/account/delete.svg diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html index 81bda9477..30db69429 100644 --- a/client/src/app/account/account-videos/account-videos.component.html +++ b/client/src/app/account/account-videos/account-videos.component.html @@ -13,7 +13,12 @@ {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views - + + + Delete + + + Edit diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss index c31497350..7ac25afc3 100644 --- a/client/src/app/account/account-videos/account-videos.component.scss +++ b/client/src/app/account/account-videos/account-videos.component.scss @@ -25,7 +25,7 @@ } } - .edit-button { + .action-button { @include peertube-button-link; font-size: 15px; @@ -33,15 +33,27 @@ color: #585858; background-color: #E5E5E5; - .icon.icon-edit { + &.action-button-delete { + margin-right: 10px; + } + + .icon.icon-edit, .icon.icon-delete { display: inline-block; - background: url('../../../assets/images/account/edit.svg') no-repeat; + background-repeat: no-repeat; background-size: contain; width: 21px; height: 21px; vertical-align: middle; position: relative; top: -2px; + + &.icon-edit { + background-image: url('../../../assets/images/account/edit.svg'); + } + + &.icon-delete { + background-image: url('../../../assets/images/account/delete.svg'); + } } } } diff --git a/client/src/app/account/account-videos/account-videos.component.ts b/client/src/app/account/account-videos/account-videos.component.ts index 1bc6c0a35..9c2cc2404 100644 --- a/client/src/app/account/account-videos/account-videos.component.ts +++ b/client/src/app/account/account-videos/account-videos.component.ts @@ -1,7 +1,9 @@ import { Component, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { NotificationsService } from 'angular2-notifications' +import { ConfirmService } from '../../core/confirm' import { AbstractVideoList } from '../../shared/video/abstract-video-list' +import { Video } from '../../shared/video/video.model' import { VideoService } from '../../shared/video/video.service' @Component({ @@ -16,6 +18,7 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit constructor (protected router: Router, protected route: ActivatedRoute, protected notificationsService: NotificationsService, + protected confirmService: ConfirmService, private videoService: VideoService) { super() } @@ -27,4 +30,23 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit getVideosObservable () { return this.videoService.getMyVideos(this.pagination, this.sort) } + + deleteVideo (video: Video) { + this.confirmService.confirm(`Do you really want to delete ${video.name}?`, 'Delete').subscribe( + res => { + if (res === false) return + + this.videoService.removeVideo(video.id) + .subscribe( + status => { + this.notificationsService.success('Success', `Video ${video.name} deleted.`) + const index = this.videos.findIndex(v => v.id === video.id) + this.videos.splice(index, 1) + }, + + error => this.notificationsService.error('Error', error.text) + ) + } + ) + } } diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss index 658d7af9d..37e84897b 100644 --- a/client/src/app/videos/video-list/shared/video-miniature.component.scss +++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss @@ -37,7 +37,7 @@ } .video-miniature-account { - font-size: 12px; + font-size: 13px; color: #585858; } } diff --git a/client/src/assets/images/account/delete.svg b/client/src/assets/images/account/delete.svg new file mode 100644 index 000000000..67e9e2ce7 --- /dev/null +++ b/client/src/assets/images/account/delete.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + +