Add delete button to my videos

3 files changed, 43 insertions, 4 deletions

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 @@
       <span class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
     </div>
 
-    <a class="edit-button" [routerLink]="[ '/videos', video.id, '/edit' ]">
+    <a class="action-button action-button-delete" (click)="deleteVideo(video)">
+      <span class="icon icon-delete"></span>
+      Delete
+    </a>
+
+    <a class="action-button" [routerLink]="[ '/videos', video.id, '/edit' ]">
       <span class="icon icon-edit"></span>
       Edit
     </a>
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)
+          )
+      }
+    )
+  }
 }