From 483f0525f3a572ae71765ebe8516d607018015cf Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Tue, 24 Dec 2024 01:00:24 +0100
Subject: [PATCH] feat(favorites): display item counts in tabs and improve
 layout responsiveness

---
 .../favorites/favorites.component.html        |  6 +--
 .../favorites/favorites.component.scss        |  8 ++++
 .../favorites/favorites.component.ts          | 37 ++++++++++++++-----
 .../services/favorites.service.ts             |  5 ++-
 4 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/app/xtream-tauri/favorites/favorites.component.html b/src/app/xtream-tauri/favorites/favorites.component.html
index e5e1f4ce5..949a56bb8 100644
--- a/src/app/xtream-tauri/favorites/favorites.component.html
+++ b/src/app/xtream-tauri/favorites/favorites.component.html
@@ -4,19 +4,19 @@
     </div>
 
     <mat-tab-group>
-        <mat-tab label="Live TV">
+        <mat-tab label="Live TV ({{ liveCount }})">
             <ng-container
                 *ngTemplateOutlet="itemsGrid; context: { type: 'live' }"
             >
             </ng-container>
         </mat-tab>
-        <mat-tab label="Movies">
+        <mat-tab label="Movies ({{ moviesCount }})">
             <ng-container
                 *ngTemplateOutlet="itemsGrid; context: { type: 'movie' }"
             >
             </ng-container>
         </mat-tab>
-        <mat-tab label="Series">
+        <mat-tab label="Series ({{ seriesCount }})">
             <ng-container
                 *ngTemplateOutlet="itemsGrid; context: { type: 'series' }"
             >
diff --git a/src/app/xtream-tauri/favorites/favorites.component.scss b/src/app/xtream-tauri/favorites/favorites.component.scss
index ba867b968..ffb5eeb79 100644
--- a/src/app/xtream-tauri/favorites/favorites.component.scss
+++ b/src/app/xtream-tauri/favorites/favorites.component.scss
@@ -1,3 +1,11 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    height: 100%;
+    width: 100%;
+}
+
 .favorites-container {
     padding: 20px;
 }
diff --git a/src/app/xtream-tauri/favorites/favorites.component.ts b/src/app/xtream-tauri/favorites/favorites.component.ts
index ff424508d..52239b75b 100644
--- a/src/app/xtream-tauri/favorites/favorites.component.ts
+++ b/src/app/xtream-tauri/favorites/favorites.component.ts
@@ -4,7 +4,7 @@ import { MatIconButton } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIcon } from '@angular/material/icon';
 import { MatTabsModule } from '@angular/material/tabs';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
@@ -33,15 +33,32 @@ import { XtreamStore } from '../xtream.store';
 })
 export class FavoritesComponent implements OnInit {
     private favoritesService = inject(FavoritesService);
+    private route = inject(ActivatedRoute);
     private router = inject(Router);
     private store = inject(Store);
     private xtreamStore = inject(XtreamStore);
 
     favorites$: Observable<FavoriteItem[]>;
+    liveCount = 0;
+    moviesCount = 0;
+    seriesCount = 0;
 
     ngOnInit() {
         const playlistId = this.store.selectSignal(selectActivePlaylist)()._id;
         this.favorites$ = this.favoritesService.getFavorites(playlistId);
+
+        // Subscribe to update counts
+        this.favorites$.subscribe((items) => {
+            this.liveCount = items.filter(
+                (item) => item.type === 'live'
+            ).length;
+            this.moviesCount = items.filter(
+                (item) => (item as any).type === 'movie'
+            ).length;
+            this.seriesCount = items.filter(
+                (item) => item.type === 'series'
+            ).length;
+        });
     }
 
     async removeFromFavorites(item: any) {
@@ -57,17 +74,17 @@ export class FavoritesComponent implements OnInit {
     openItem(item: any) {
         const type = item.type === 'movie' ? 'vod' : item.type;
         this.xtreamStore.setSelectedContentType(type);
-        this.xtreamStore.setSelectedContentType(type);
         if (type === 'live') {
-            this.router.navigate(['/xtreams', item.playlist_id, 'live']);
+            this.router.navigate(['..', type, item.category_id], {
+                relativeTo: this.route,
+            });
         } else {
-            this.router.navigate([
-                '/xtreams',
-                item.playlist_id,
-                item.category_id,
-                type,
-                item.xtream_id,
-            ]);
+            this.router.navigate(
+                ['..', type, item.category_id, item.xtream_id],
+                {
+                    relativeTo: this.route,
+                }
+            );
         }
     }
 }
diff --git a/src/app/xtream-tauri/services/favorites.service.ts b/src/app/xtream-tauri/services/favorites.service.ts
index a2ec618c5..ea9ed38cd 100644
--- a/src/app/xtream-tauri/services/favorites.service.ts
+++ b/src/app/xtream-tauri/services/favorites.service.ts
@@ -37,8 +37,9 @@ export class FavoritesService {
         const db = await this.dbService.getConnection();
         const result = await db.select<any[]>(
             `SELECT COUNT(*) as count 
-             FROM favorites 
-             WHERE content_id = ? AND playlist_id = ?`,
+             FROM favorites f
+             JOIN content c ON f.content_id = c.id
+             WHERE c.xtream_id = ? AND f.playlist_id = ?`,
             [contentId, playlistId]
         );
         return result[0].count > 0;