feat(xtream): enhance layout and navigation in category and recently …

…viewed components
4gray · Dec 24, 2024 · 973f94d · 973f94d
1 parent 89ec644
commit 973f94d
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 68 deletions.
diff --git a/src/app/xtream-tauri/category-content-view/category-content-view.component.html b/src/app/xtream-tauri/category-content-view/category-content-view.component.html
@@ -6,7 +6,9 @@
                 @if (i.poster_url) {
                     <img
                         class="stream-icon"
-                        [ngSrc]="i.poster_url"
+                        [ngSrc]="
+                            i.poster_url ?? './assets/images/default-poster.png'
+                        "
                         fill
                         priority
                         placeholder
@@ -16,6 +18,11 @@
                                 './assets/images/default-poster.png'
                         "
                     />
+                } @else {
+                    <img
+                        class="stream-icon"
+                        src="./assets/images/default-poster.png"
+                    />
                 }
                 @let rating = $any(item).rating;
                 @if (rating) {

diff --git a/src/app/xtream-tauri/category-content-view/category-content-view.component.ts b/src/app/xtream-tauri/category-content-view/category-content-view.component.ts
@@ -42,11 +42,8 @@ export class CategoryContentViewComponent {
     onItemClick(item: any) {
         console.log(item);
         this.xtreamStore.setSelectedItem(item);
-        this.router.navigate(
-            [this.xtreamStore.selectedContentType(), item.xtream_id],
-            {
-                relativeTo: this.activatedRoute,
-            }
-        );
+        this.router.navigate([item.xtream_id], {
+            relativeTo: this.activatedRoute,
+        });
     }
 }
diff --git a/src/app/xtream-tauri/category-view/category-view.component.html b/src/app/xtream-tauri/category-view/category-view.component.html
@@ -1,4 +1,6 @@
 @let items = xtreamStore.getCategoriesBySelectedType();
+@let contentType = xtreamStore.selectedContentType();
+@let selectedCategory = xtreamStore.selectedCategoryId();
 
 @if (items?.length > 0) {
     <mat-nav-list>

diff --git a/src/app/xtream-tauri/category-view/category-view.component.scss b/src/app/xtream-tauri/category-view/category-view.component.scss
@@ -1,8 +1,7 @@
 :host {
-    display: block;
     height: 100%;
     overflow-y: auto;
-    padding: 10px;
+    padding: 0 10px;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;

diff --git a/src/app/xtream-tauri/category-view/category-view.component.ts b/src/app/xtream-tauri/category-view/category-view.component.ts
@@ -26,7 +26,7 @@ import { XtreamStore } from '../xtream.store';
     ],
     changeDetection: ChangeDetectionStrategy.OnPush,
     templateUrl: './category-view.component.html',
-    styleUrl: './category-view.component.scss',
+    styleUrls: ['./category-view.component.scss'],
 })
 export class CategoryViewComponent {
     @Output() categoryClicked = new EventEmitter<XtreamCategory>();
@@ -36,7 +36,8 @@ export class CategoryViewComponent {
 
     ngOnInit(): void {
         const { categoryId } = this.route.snapshot.params;
-        this.xtreamStore.setSelectedCategory(Number(categoryId));
+        if (categoryId)
+            this.xtreamStore.setSelectedCategory(Number(categoryId));
     }
 
     isSelected(item: XtreamCategory): boolean {

diff --git a/src/app/xtream-tauri/recently-viewed/recently-viewed.component.scss b/src/app/xtream-tauri/recently-viewed/recently-viewed.component.scss
@@ -1,3 +1,11 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    height: 100%;
+    width: 100%;
+}
+
 .recent-container {
     padding: 20px;
 }

diff --git a/src/app/xtream-tauri/recently-viewed/recently-viewed.component.ts b/src/app/xtream-tauri/recently-viewed/recently-viewed.component.ts
@@ -33,7 +33,7 @@ export class RecentlyViewedComponent {
         const type = item.type === 'movie' ? 'vod' : item.type;
         this.xtreamStore.setSelectedContentType(type);
 
-        this.router.navigate(['..', item.category_id, type, item.xtream_id], {
+        this.router.navigate(['..', type, item.category_id, item.xtream_id], {
             relativeTo: this.activatedRoute,
         });
     }

diff --git a/src/app/xtream-tauri/season-container/season-container.component.html b/src/app/xtream-tauri/season-container/season-container.component.html
@@ -1,6 +1,11 @@
 <h3>Seasons and Episodes</h3>
 @if (selectedSeason) {
-    <button mat-button class="back-button" (click)="selectedSeason = undefined">
+    <button
+        mat-button
+        class="back-button"
+        class="back-to-seasons"
+        (click)="selectedSeason = undefined"
+    >
         <mat-icon>arrow_back</mat-icon>
         <span>Back to seasons</span>
     </button>

diff --git a/src/app/xtream-tauri/season-container/season-container.component.scss b/src/app/xtream-tauri/season-container/season-container.component.scss
@@ -1,9 +1,3 @@
-:host {
-    margin: 10px;
-    display: block;
-    padding: 20px 0;
-}
-
 .seasons-container {
     width: 100%;
     display: flex;
@@ -37,3 +31,7 @@
         width: 100%;
     }
 }
+
+.back-to-seasons {
+    margin-bottom: 5px;
+}
diff --git a/src/app/xtream-tauri/serial-details/serial-details.component.html b/src/app/xtream-tauri/serial-details/serial-details.component.html
@@ -1,5 +1,5 @@
 @let item = selectedItem();
-@if (item) {
+@if (item?.info) {
     <div
         class="container"
         [style.background]="
@@ -27,34 +27,48 @@ <h2>{{ item.info?.name }}</h2>
                     {{ item.info.plot }}
                 </label>
             }
-            <label *ngIf="item.info?.releaseDate">
-                <div class="label">
-                    {{ 'XTREAM.RELEASE_DATE' | translate }}:
-                </div>
-                {{ item.info.releaseDate }}
-            </label>
-            <label *ngIf="item.info?.genre">
-                <div class="label">{{ 'XTREAM.GENRE' | translate }}:</div>
-                {{ item.info.genre }}
-            </label>
-            <label *ngIf="item.info?.rating">
-                <div class="label">{{ 'XTREAM.RATING' | translate }}:</div>
-                {{ item.info?.rating }}
-            </label>
-            <div *ngIf="item.info?.cast">
-                <div class="label">{{ 'XTREAM.CAST' | translate }}:</div>
-                {{ item.info.cast }}
-            </div>
-            <label *ngIf="item.info?.director">
-                <div class="label">{{ 'XTREAM.DIRECTOR' | translate }}:</div>
-                {{ item.info.director }}
-            </label>
-            <label *ngIf="item.info?.episode_run_time">
-                <div class="label">
-                    {{ 'XTREAM.EPISODE_RUN_TIME' | translate }}:
+            @if (item.info?.releaseDate) {
+                <label>
+                    <div class="label">
+                        {{ 'XTREAM.RELEASE_DATE' | translate }}:
+                    </div>
+                    {{ item.info.releaseDate }}
+                </label>
+            }
+            @if (item.info?.genre) {
+                <label>
+                    <div class="label">{{ 'XTREAM.GENRE' | translate }}:</div>
+                    {{ item.info.genre }}
+                </label>
+            }
+            @if (item.info?.rating) {
+                <label>
+                    <div class="label">{{ 'XTREAM.RATING' | translate }}:</div>
+                    {{ item.info?.rating }}
+                </label>
+            }
+            @if (item.info?.cast) {
+                <div>
+                    <div class="label">{{ 'XTREAM.CAST' | translate }}:</div>
+                    {{ item.info.cast }}
                 </div>
-                {{ item.info.episode_run_time }}
-            </label>
+            }
+            @if (item.info?.director) {
+                <label>
+                    <div class="label">
+                        {{ 'XTREAM.DIRECTOR' | translate }}:
+                    </div>
+                    {{ item.info.director }}
+                </label>
+            }
+            @if (item.info?.episode_run_time) {
+                <label>
+                    <div class="label">
+                        {{ 'XTREAM.EPISODE_RUN_TIME' | translate }}:
+                    </div>
+                    {{ item.info.episode_run_time }}
+                </label>
+            }
             <div class="action-buttons">
                 @if (!isFavorite()) {
                     <button

diff --git a/src/app/xtream-tauri/serial-details/serial-details.component.ts b/src/app/xtream-tauri/serial-details/serial-details.component.ts
@@ -1,19 +1,13 @@
-import { NgIf } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { MatButton } from '@angular/material/button';
-import { MatDialog } from '@angular/material/dialog';
 import { MatIcon } from '@angular/material/icon';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { XtreamSerieEpisode } from '../../../../shared/xtream-serie-details.interface';
-import { DataService } from '../../services/data.service';
 import { PlayerService } from '../../services/player.service';
 import { SettingsStore } from '../../services/settings-store.service';
-import {
-    selectActivePlaylist,
-    selectCurrentPlaylist,
-} from '../../state/selectors';
+import { selectActivePlaylist } from '../../state/selectors';
 import { SeasonContainerComponent } from '../season-container/season-container.component';
 import { XtreamStore } from '../xtream.store';
 
@@ -22,23 +16,14 @@ import { XtreamStore } from '../xtream.store';
     templateUrl: './serial-details.component.html',
     styleUrls: ['../detail-view.scss'],
     standalone: true,
-    imports: [
-        MatButton,
-        MatIcon,
-        NgIf,
-        SeasonContainerComponent,
-        TranslateModule,
-    ],
+    imports: [MatButton, MatIcon, SeasonContainerComponent, TranslateModule],
 })
 export class SerialDetailsComponent {
-    private dataService = inject(DataService);
-    private dialog = inject(MatDialog);
     private readonly store = inject(Store);
-    readonly currentPlaylist = this.store.selectSignal(selectCurrentPlaylist);
     private readonly route = inject(ActivatedRoute);
     private readonly xtreamStore = inject(XtreamStore);
     private readonly settingsStore = inject(SettingsStore);
-    private playerService = inject(PlayerService);
+    private readonly playerService = inject(PlayerService);
 
     readonly selectedItem = this.xtreamStore.selectedItem;
     readonly settings = this.settingsStore.getSettings();
@@ -56,8 +41,9 @@ export class SerialDetailsComponent {
                 ...currentSerial,
                 series_id: serialId,
             });
+            // Move checkFavoriteStatus after setting the selected item
+            this.xtreamStore.checkFavoriteStatus();
         });
-        this.xtreamStore.checkFavoriteStatus();
     }
 
     playEpisode(episode: XtreamSerieEpisode) {

diff --git a/src/app/xtream-tauri/vod-details/vod-details.component.ts b/src/app/xtream-tauri/vod-details/vod-details.component.ts
@@ -43,9 +43,14 @@ export class VodDetailsComponent implements OnInit, OnDestroy {
         const { categoryId, vodId } = this.route.snapshot.params;
         this.xtreamStore.getVodDetails(vodId).then((currentVod) => {
             this.xtreamStore.setSelectedCategory(Number(categoryId));
-            this.xtreamStore.setSelectedItem(currentVod);
+            this.xtreamStore.setSelectedItem({
+                ...currentVod.movie_data,
+                info: currentVod.info,
+                stream_id: vodId,
+            });
+            // Check favorite status after setting selected item
+            this.xtreamStore.checkFavoriteStatus();
         });
-        this.xtreamStore.checkFavoriteStatus();
     }
 
     ngOnDestroy() {