Add delete button to my videos

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>

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');
+      }
     }
   }
 }

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)
+          )
+      }
+    )
+  }
 }

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;
     }
   }

client/src/assets/images/account/delete.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -159.000000)">
+            <g id="25" transform="translate(224.000000, 159.000000)">
+                <path d="M5,7 L5,20.0081158 C5,21.1082031 5.89706013,22 7.00585866,22 L16.9941413,22 C18.1019465,22 19,21.1066027 19,20.0081158 L19,7" id="Path-296" stroke="#585858" stroke-width="2"></path>
+                <rect id="Rectangle-424" fill="#585858" x="2" y="4" width="20" height="2" rx="1"></rect>
+                <path d="M9,10.9970301 C9,10.4463856 9.44386482,10 10,10 C10.5522847,10 11,10.4530363 11,10.9970301 L11,17.0029699 C11,17.5536144 10.5561352,18 10,18 C9.44771525,18 9,17.5469637 9,17.0029699 L9,10.9970301 Z M13,10.9970301 C13,10.4463856 13.4438648,10 14,10 C14.5522847,10 15,10.4530363 15,10.9970301 L15,17.0029699 C15,17.5536144 14.5561352,18 14,18 C13.4477153,18 13,17.5469637 13,17.0029699 L13,10.9970301 Z" id="Combined-Shape" fill="#585858"></path>
+                <path d="M9,5 L9,2.99895656 C9,2.44724809 9.45097518,2 9.99077797,2 L14.009222,2 C14.5564136,2 15,2.44266033 15,2.99895656 L15,5" id="Path-33" stroke="#585858" stroke-width="2" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>