-
- Found {{ xtreamStore.searchResults().length }} items across
- {{ (getGroupedResults() | keyvalue).length }} playlists
-
- @for (
- group of getGroupedResults() | keyvalue;
- track group.key
- ) {
-
-
- playlist_play
- {{ group.key }}
- ({{ $any(group).value.length }} items)
-
-
- @for (item of $any(group).value; track item.id) {
-
- }
+ @if (groupByPlaylist()) {
+
+
+
+ Found {{ xtreamStore.searchResults().length }} items across
+ {{ (groupedResults() | keyvalue).length }} playlists
+
+ @for (
+ group of groupedResults() | keyvalue;
+ track group.key
+ ) {
+
+
+ playlist_play
+ {{ group.key }}
+ ({{ $any(group).value.length }} items)
+
+
+ @for (item of $any(group).value; track item.id) {
+
+ }
+
-
- }
-
+ }
+
+ } @else {
+
+
+ @for (item of xtreamStore.searchResults(); track item.id) {
+
+ }
+
+ }
} @else {
diff --git a/apps/web/src/app/xtream-tauri/search-results/search-results.component.scss b/apps/web/src/app/xtream-tauri/search-results/search-results.component.scss
index d9aa5794e..3cfe3a269 100644
--- a/apps/web/src/app/xtream-tauri/search-results/search-results.component.scss
+++ b/apps/web/src/app/xtream-tauri/search-results/search-results.component.scss
@@ -55,6 +55,33 @@
}
}
+// Subheader row for global search (note + grouping toggle)
+.global-search-subheader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+
+ .global-search-note {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 0.8rem;
+ opacity: 0.55;
+
+ mat-icon {
+ font-size: 15px;
+ width: 15px;
+ height: 15px;
+ flex-shrink: 0;
+ }
+ }
+
+ ::ng-deep mat-checkbox {
+ flex-shrink: 0;
+ }
+}
+
// Playlist grouping styles for global search
.playlist-group {
margin-bottom: 2rem;
diff --git a/apps/web/src/app/xtream-tauri/search-results/search-results.component.ts b/apps/web/src/app/xtream-tauri/search-results/search-results.component.ts
index 2cf9b967a..c1387c6cb 100644
--- a/apps/web/src/app/xtream-tauri/search-results/search-results.component.ts
+++ b/apps/web/src/app/xtream-tauri/search-results/search-results.component.ts
@@ -2,10 +2,12 @@ import { KeyValuePipe } from '@angular/common';
import {
AfterViewInit,
Component,
+ computed,
effect,
inject,
Inject,
Optional,
+ signal,
viewChild,
} from '@angular/core';
import { FormsModule } from '@angular/forms';
@@ -24,7 +26,6 @@ import { XtreamContentItem } from '../data-sources/xtream-data-source.interface'
import { ContentType } from '../xtream-state';
import { ContentCardComponent } from '../../shared/components/content-card/content-card.component';
import { SearchLayoutComponent } from '../../shared/components/search-layout/search-layout.component';
-import { SearchResultItemComponent } from '../../shared/components/search-result-item/search-result-item.component';
import { XtreamStore } from '../stores/xtream.store';
import { SearchFilters } from '../stores/features/with-search.feature';
@@ -42,7 +43,6 @@ interface SearchResultsData {
MatDialogModule,
MatIcon,
SearchLayoutComponent,
- SearchResultItemComponent,
TranslatePipe,
],
providers: [],
@@ -62,8 +62,15 @@ export class SearchResultsComponent implements AfterViewInit {
/** Search filters from store */
readonly filters = this.xtreamStore.searchFilters;
+ private static readonly GROUP_BY_STORAGE_KEY = 'global-search-group-by-playlist';
+
isGlobalSearch = false;
+ /** Whether to group global search results by playlist */
+ readonly groupByPlaylist = signal(
+ localStorage.getItem(SearchResultsComponent.GROUP_BY_STORAGE_KEY) !== 'false'
+ );
+
readonly filterConfig = [
{
key: 'live' as keyof SearchFilters,
@@ -82,16 +89,24 @@ export class SearchResultsComponent implements AfterViewInit {
},
];
+ /** Grouped results computed once per result change (avoids recalculating on every CD cycle) */
+ readonly groupedResults = computed(() => {
+ const results = this.xtreamStore.searchResults();
+ if (!this.isGlobalSearch) return { default: results };
+ return groupBy(results, 'playlist_name');
+ });
+
constructor(
@Optional() @Inject(MAT_DIALOG_DATA) data: SearchResultsData,
@Optional() public dialogRef: MatDialogRef
) {
this.isGlobalSearch = data?.isGlobalSearch || false;
- effect(() => {
+ effect((onCleanup) => {
const term = this.searchTerm();
if (term.length >= 3) {
- this.executeSearch();
+ const timeout = setTimeout(() => this.executeSearch(), 300);
+ onCleanup(() => clearTimeout(timeout));
} else if (term.length === 0) {
this.clearResultsOnly();
}
@@ -146,6 +161,7 @@ export class SearchResultsComponent implements AfterViewInit {
}
async searchGlobal(term: string, types: string[]) {
+ this.xtreamStore.setIsSearching(true);
try {
const results = await this.databaseService.globalSearchContent(
term,
@@ -153,6 +169,8 @@ export class SearchResultsComponent implements AfterViewInit {
);
if (results && Array.isArray(results)) {
this.xtreamStore.setGlobalSearchResults(results);
+ } else {
+ this.xtreamStore.setIsSearching(false);
}
} catch (error) {
console.error('Error in global search:', error);
@@ -188,9 +206,12 @@ export class SearchResultsComponent implements AfterViewInit {
this.dialogRef?.close();
}
+ toggleGroupByPlaylist(value: boolean) {
+ this.groupByPlaylist.set(value);
+ localStorage.setItem(SearchResultsComponent.GROUP_BY_STORAGE_KEY, String(value));
+ }
+
getGroupedResults() {
- const results = this.xtreamStore.searchResults();
- if (!this.isGlobalSearch) return { default: results };
- return groupBy(results, 'playlist_name');
+ return this.groupedResults();
}
}
diff --git a/apps/web/src/app/xtream-tauri/stores/features/with-search.feature.ts b/apps/web/src/app/xtream-tauri/stores/features/with-search.feature.ts
index f7469da03..aa11df16e 100644
--- a/apps/web/src/app/xtream-tauri/stores/features/with-search.feature.ts
+++ b/apps/web/src/app/xtream-tauri/stores/features/with-search.feature.ts
@@ -113,9 +113,17 @@ export function withSearch() {
patchState(store, {
searchResults: results as any,
globalSearchResults: results,
+ isSearching: false,
});
},
+ /**
+ * Set the searching state
+ */
+ setIsSearching(value: boolean): void {
+ patchState(store, { isSearching: value });
+ },
+
/**
* Set the search term
*/