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 @@
+
+