Files
iptvnator/apps/web/src/app/xtream-tauri/xtream-main-container.component.ts
T
4gray c34bdf73e1 feat(xtream): show category page info and preserve page state
Update category header and list views to provide clearer context
and improve navigation state handling.

- Display category name with current page/total pages when viewing a
  category (non-detail) so users see which page they're on.
- Add i18n "PAGE" key and fill "SELECT_CATEGORY" in translations for
  en/de/ru to support the new page label and existing messaging.
- Tidy live-stream layout template formatting and fix filter pipe
  spacing for consistency.
- Change no-channel-selected fallback to use the translated
  "PORTALS.SELECT_CATEGORY" string.
- Preserve category selection state on CategoryContentView init:
  only set selected category when the route category differs from
  the current selection to keep paging/scroll position when returning
  from a detail view.

These changes improve UX by making pagination explicit and avoiding
unnecessary state resets when navigating between list and detail.
2025-11-15 17:36:58 +01:00

78 lines
2.9 KiB
TypeScript

import { Component, inject, OnInit } from '@angular/core';
import { MatIconButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { XtreamCategory } from 'shared-interfaces';
import { CategoryViewComponent } from './category-view/category-view.component';
import { XtreamStore } from './xtream.store';
@Component({
selector: 'app-xtream-main-container',
templateUrl: './xtream-main-container.component.html',
styleUrls: ['./xtream-main-container.component.scss', './sidebar.scss'],
imports: [
CategoryViewComponent,
TranslateModule,
RouterOutlet,
/* MpvPlayerBarComponent, */
MatIcon,
MatIconButton,
],
})
export class XtreamMainContainerComponent implements OnInit {
readonly router = inject(Router);
readonly route = inject(ActivatedRoute);
readonly translateService = inject(TranslateService);
readonly xtreamStore = inject(XtreamStore);
readonly categories = this.xtreamStore.getCategoriesBySelectedType;
readonly selectedCategoryId = this.xtreamStore.selectedCategoryId;
ngOnInit(): void {
const { categoryId } = this.route.snapshot.params;
if (categoryId)
this.xtreamStore.setSelectedCategory(Number(categoryId));
}
categoryClicked(category: XtreamCategory) {
const categoryId = (category as any).category_id ?? category.id;
this.xtreamStore.setSelectedCategory(Number(categoryId));
this.router.navigate([categoryId], {
relativeTo: this.route,
});
}
getContentLabel(): string {
if (
this.xtreamStore.getSelectedCategory() === null ||
this.xtreamStore.getSelectedCategory() === undefined
) {
return this.translateService.instant('PORTALS.SELECT_CATEGORY');
} else {
const selectedCategory = this.xtreamStore.getSelectedCategory();
const categoryName = selectedCategory
? (selectedCategory as any).name
: 'Category Content';
// Show page number when viewing category content (not detail view)
if (!this.xtreamStore.selectedItem() && this.xtreamStore.getTotalPages() > 1) {
const currentPage = this.xtreamStore.page() + 1; // +1 because page is 0-indexed
const totalPages = this.xtreamStore.getTotalPages();
const pageLabel = this.translateService.instant('PORTALS.PAGE');
return `${categoryName} (${pageLabel} ${currentPage}/${totalPages})`;
}
return `Content for ${categoryName}`;
}
}
historyBack() {
this.router.navigate(['.', this.xtreamStore.selectedCategoryId()], {
relativeTo: this.route,
});
}
}