From 96f61bc85920262907423740df505ae6ea44b5c7 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Thu, 26 Dec 2024 11:03:59 +0100
Subject: [PATCH] feat(xtream): add remove button for individual recently
 viewed items

---
 .../recently-viewed.component.html              |  7 +++++++
 .../recently-viewed.component.scss              | 17 +++++++++++++++++
 .../recently-viewed.component.ts                |  8 ++++++++
 src/app/xtream-tauri/with-recent-items.ts       | 12 ++++++++++++
 4 files changed, 44 insertions(+)

diff --git a/src/app/xtream-tauri/recently-viewed/recently-viewed.component.html b/src/app/xtream-tauri/recently-viewed/recently-viewed.component.html
index d60cdcbfa..f5ccc4e63 100644
--- a/src/app/xtream-tauri/recently-viewed/recently-viewed.component.html
+++ b/src/app/xtream-tauri/recently-viewed/recently-viewed.component.html
@@ -14,6 +14,13 @@
         <div class="items-grid">
             @for (item of items; track $index) {
                 <mat-card class="item-card" (click)="openItem(item)">
+                    <button
+                        mat-icon-button
+                        class="remove-button"
+                        (click)="removeItem($event, item.id)"
+                    >
+                        <mat-icon>close</mat-icon>
+                    </button>
                     <img
                         [src]="
                             item.poster_url ||
diff --git a/src/app/xtream-tauri/recently-viewed/recently-viewed.component.scss b/src/app/xtream-tauri/recently-viewed/recently-viewed.component.scss
index cae54d8f8..9d247ff1e 100644
--- a/src/app/xtream-tauri/recently-viewed/recently-viewed.component.scss
+++ b/src/app/xtream-tauri/recently-viewed/recently-viewed.component.scss
@@ -26,10 +26,27 @@
 .item-card {
     cursor: pointer;
     transition: transform 0.2s;
+    position: relative;
 
     &:hover {
         transform: scale(1.02);
     }
+
+    .remove-button {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        z-index: 1;
+        background: rgba(0, 0, 0, 0.5);
+        
+        &:hover {
+            background: rgba(0, 0, 0, 0.7);
+        }
+
+        mat-icon {
+            color: white;
+        }
+    }
 }
 
 .poster {
diff --git a/src/app/xtream-tauri/recently-viewed/recently-viewed.component.ts b/src/app/xtream-tauri/recently-viewed/recently-viewed.component.ts
index 55b3e1610..1d4ceb61a 100644
--- a/src/app/xtream-tauri/recently-viewed/recently-viewed.component.ts
+++ b/src/app/xtream-tauri/recently-viewed/recently-viewed.component.ts
@@ -37,4 +37,12 @@ export class RecentlyViewedComponent {
             relativeTo: this.activatedRoute,
         });
     }
+
+    removeItem(event: Event, itemId: number) {
+        event.stopPropagation();
+        this.xtreamStore.removeRecentItem({
+            itemId,
+            playlistId: this.currentPlaylist().id
+        });
+    }
 }
diff --git a/src/app/xtream-tauri/with-recent-items.ts b/src/app/xtream-tauri/with-recent-items.ts
index b710de819..bf0eacb55 100644
--- a/src/app/xtream-tauri/with-recent-items.ts
+++ b/src/app/xtream-tauri/with-recent-items.ts
@@ -131,6 +131,18 @@ export const withRecentItems = function () {
                     })
                 )
             ),
+            removeRecentItem: rxMethod<{ itemId: number; playlistId: string }>(
+                pipe(
+                    switchMap(async ({ itemId, playlistId }) => {
+                        const db = await dbService.getConnection();
+                        await db.execute(
+                            `DELETE FROM recently_viewed WHERE id = ? AND playlist_id = ?`,
+                            [itemId, playlistId]
+                        );
+                        return store.loadRecentItems({ id: playlistId });
+                    })
+                )
+            ),
         }))
     );
 };