7 files changed, 45 insertions, 14 deletions

diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
index bd29b11c8..e0d4e8f14 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
@@ -13,7 +13,7 @@
   <ng-template pTemplate="header">
     <tr>
       <th style="width: 40px;"></th>
-      <th style="width: 70px">Action</th>
+      <th style="width: 200px">Action</th>
       <th style="width: 45%" i18n>Target</th>
       <th style="width: 55%" i18n>Video</th>
       <th style="width: 150px" i18n>State</th>
@@ -28,8 +28,9 @@
       </td>
 
       <td class="action-cell">
-        <my-edit-button *ngIf="isVideoImportSuccess(videoImport) && videoImport.video"
-          [routerLink]="getEditVideoUrl(videoImport.video)"></my-edit-button>
+        <my-button *ngIf="isVideoImportPending(videoImport)" i18n-label label="Cancel" icon="no" (click)="cancelImport(videoImport)"></my-button>
+        <my-delete-button *ngIf="isVideoImportFailed(videoImport) || isVideoImportCancelled(videoImport) || !videoImport.video" (click)="deleteImport(videoImport)"></my-delete-button>
+        <my-edit-button *ngIf="isVideoImportSuccess(videoImport) && videoImport.video" [routerLink]="getEditVideoUrl(videoImport.video)"></my-edit-button>
       </td>
 
       <td>
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts b/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
index 914785bf7..f01558061 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
@@ -37,6 +37,8 @@ export class MyVideoImportsComponent extends RestTable implements OnInit {
         return 'badge-banned'
       case VideoImportState.PENDING:
         return 'badge-yellow'
+      case VideoImportState.PROCESSING:
+        return 'badge-blue'
       default:
         return 'badge-green'
     }
@@ -54,6 +56,10 @@ export class MyVideoImportsComponent extends RestTable implements OnInit {
     return videoImport.state.id === VideoImportState.FAILED
   }
 
+  isVideoImportCancelled (videoImport: VideoImport) {
+    return videoImport.state.id === VideoImportState.CANCELLED
+  }
+
   getVideoUrl (video: { uuid: string }) {
     return Video.buildWatchUrl(video)
   }
@@ -62,6 +68,24 @@ export class MyVideoImportsComponent extends RestTable implements OnInit {
     return Video.buildUpdateUrl(video)
   }
 
+  deleteImport (videoImport: VideoImport) {
+    this.videoImportService.deleteVideoImport(videoImport)
+      .subscribe({
+        next: () => this.reloadData(),
+
+        error: err => this.notifier.error(err.message)
+      })
+  }
+
+  cancelImport (videoImport: VideoImport) {
+    this.videoImportService.cancelVideoImport(videoImport)
+      .subscribe({
+        next: () => this.reloadData(),
+
+        error: err => this.notifier.error(err.message)
+      })
+  }
+
   protected reloadData () {
     this.videoImportService.getMyVideoImports(this.pagination, this.sort)
         .subscribe({
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index 65e06f7a4..11c8ffedd 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,5 +1,5 @@
-<span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="getTitle()" tabindex="0">
-  <my-global-icon *ngIf="!loading" [iconName]="icon"></my-global-icon>
+<span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0">
+  <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
   <my-small-loader [loading]="loading"></my-small-loader>
 
   <span *ngIf="label" class="button-label">{{ label }}</span>
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index ee74b3d12..b97012d9a 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -16,10 +16,6 @@ export class ButtonComponent {
   @Input() disabled = false
   @Input() responsiveLabel = false
 
-  getTitle () {
-    return this.title || this.label
-  }
-
   getClasses () {
     return {
       [this.className]: true,
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.ts b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
index c091f5309..90735852c 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
@@ -20,10 +20,6 @@ export class DeleteButtonComponent implements OnInit {
     // <my-delete-button label /> Use default label
     if (this.label === '') {
       this.label = $localize`Delete`
-
-      if (!this.title) {
-        this.title = this.label
-      }
     }
   }
 }
diff --git a/client/src/app/shared/shared-main/video/video-import.service.ts b/client/src/app/shared/shared-main/video/video-import.service.ts
index 99df78e3a..0a610ab1f 100644
--- a/client/src/app/shared/shared-main/video/video-import.service.ts
+++ b/client/src/app/shared/shared-main/video/video-import.service.ts
@@ -56,6 +56,16 @@ export class VideoImportService {
                )
   }
 
+  deleteVideoImport (videoImport: VideoImport) {
+    return this.authHttp.delete(VideoImportService.BASE_VIDEO_IMPORT_URL + videoImport.id)
+                        .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  cancelVideoImport (videoImport: VideoImport) {
+    return this.authHttp.post(VideoImportService.BASE_VIDEO_IMPORT_URL + videoImport.id + '/cancel', {})
+                        .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
   private buildImportVideoObject (video: VideoUpdate): VideoImportCreate {
     const language = video.language || null
     const licence = video.licence || null
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index a7c4c99c2..c8ec3b4d1 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -257,7 +257,7 @@
 }
 
 @mixin peertube-button {
-  @include padding(0, 17px, 0, 13px);
+  padding: 0 13px;
 
   border: 0;
   font-weight: $font-semibold;
@@ -270,6 +270,10 @@
 
   text-align: center;
   cursor: pointer;
+
+  my-global-icon + * {
+    @include margin-right(4px);
+  }
 }
 
 @mixin peertube-button-link {