Add ability to delete history element

3 files changed, 27 insertions, 5 deletions

diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index 8e564cf93..14bf01804 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -13,9 +13,9 @@
     <label i18n>Track watch history</label>
   </div>
 
-  <button class="delete-history" (click)="deleteHistory()" i18n>
+  <button class="delete-history" (click)="clearAllHistory()" i18n>
     <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
-    Delete history
+    Clear all history
   </button>
 </div>
 
@@ -30,4 +30,10 @@
   [enableSelection]="false"
   [disabled]="disabled"
   #videosSelection
-></my-videos-selection>
+>
+  <ng-template ptTemplate="rowButtons" let-video>
+    <div class="action-button">
+      <my-delete-button i18n-label label="Delete from history" (click)="deleteHistoryElement(video)"></my-delete-button>
+    </div>
+  </ng-template>
+</my-videos-selection>
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index cb8507569..3257b2215 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -53,6 +53,11 @@
   @include row-blocks($column-responsive: false);
 }
 
+.action-button {
+  display: flex;
+  align-self: flex-end;
+}
+
 @media screen and (max-width: $small-view) {
   .top-buttons {
     grid-template-columns: auto 1fr auto;
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts
index 95cfaee41..34efe5558 100644
--- a/client/src/app/+my-library/my-history/my-history.component.ts
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@@ -123,14 +123,25 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
       })
   }
 
-  async deleteHistory () {
+  deleteHistoryElement (video: Video) {
+    this.userHistoryService.deleteUserVideoHistoryElement(video)
+      .subscribe({
+        next: () => {
+          this.videos = this.videos.filter(v => v.id !== video.id)
+        },
+
+        error: err => this.notifier.error(err.message)
+      })
+  }
+
+  async clearAllHistory () {
     const title = $localize`Delete videos history`
     const message = $localize`Are you sure you want to delete all your videos history?`
 
     const res = await this.confirmService.confirm(message, title)
     if (res !== true) return
 
-    this.userHistoryService.deleteUserVideosHistory()
+    this.userHistoryService.clearAllUserVideosHistory()
         .subscribe({
           next: () => {
             this.notifier.success($localize`Videos history deleted`)