Notflix App

src/app/components/item/item.component.ts

@@ -4,6 +4,8 @@ import { IMAGES_SIZES } from '../../constants/images-sizes';
 import { Tv } from 'src/app/models/tv';
 import { ActivatedRoute, Router } from '@angular/router';
 
+
+
 @Component({
   selector: 'item',
   templateUrl: './item.component.html',
@@ -15,9 +17,11 @@ export class ItemComponent implements OnInit {
   imagesSizes = IMAGES_SIZES;
   currentRoute!: string;
 
-  constructor(private route: ActivatedRoute, private router: Router) {}
+
+  constructor(private route: ActivatedRoute, private router: Router ) {}
 
   ngOnInit(): void {
     this.currentRoute = this.router.url;
+
   }
 }

src/app/components/items-banner/items-banner.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <h1 style="text-align: center;">{{page}}</h1>
+  <h1 style="text-align: center;">{{page}}&nbsp;<span *ngIf="genreName">|</span>&nbsp;{{genreName}}</h1>
   <h2>{{ title }}</h2>
   <div class="grid">
     <div class="col-6 md:col-3 lg:col-2" *ngFor="let item of items">

src/app/components/items-banner/items-banner.component.ts

@@ -1,6 +1,8 @@
 import { Component, Input } from '@angular/core';
 import { Movie } from '../../models/movie';
 import { ActivatedRoute, Router } from '@angular/router';
+import { MoviesService } from 'src/app/services/movies.service';
+import { ShowsService } from './../../services/shows.service';
 
 @Component({
   selector: 'items-banner',
@@ -11,21 +13,64 @@ export class ItemsBannerComponent {
   @Input() items: Movie[] = [];
   @Input() title: string = '';
   page!:string;
+  genreName:string='';
   currentRoute!: string;
+  moviesgenres: any[] = [];
+  showsgenres: any[] = [];
 
-  constructor(private route: ActivatedRoute, private router: Router) {}
+  constructor(private route: ActivatedRoute, private router: Router,private moviesService: MoviesService , private ShowsService : ShowsService) {}
 
   ngOnInit(): void {
+
+    this.pageName();
+
+
+  this.moviesService.getMoviesGenres().subscribe((genresData) => {
+    this.moviesgenres = genresData;
+    this.handleGenres();
+    console.log(this.genreName,this.moviesgenres)
+  });
+
+  this.ShowsService.getShowsGenres().subscribe((genresData) => {
+    this.showsgenres = genresData;
+    this.handleGenres();
+    console.log(this.genreName,this.showsgenres)
+  });
+  }
+
+  pageName(){
     this.currentRoute = this.router.url;
-    if(this.currentRoute.includes('/movie'))
+    if(this.currentRoute.includes('/movie')) {
       this.page = 'MOVIES';
-  else 
-    if(this.currentRoute.includes('/shows'))
-    this.page = 'TV SHOWS';
-  else {
-    this.page = '';
+    } else if (this.currentRoute.includes('/shows')) {
+      this.page = 'TV SHOWS';
+    } else {
+      this.page = '';
+
+    }
   }
+
+  getGenreName(genres: any[]) {
+    for (let genre of genres) {
+      if (this.currentRoute.includes(genre.id)) {
+        console.log(genre.name)
+        return genre.name;
+      }
+    }
+    return '';
   }
 
+handleGenres() {
+    if (this.moviesgenres.length > 0 && this.showsgenres.length > 0) {
+        if (this.currentRoute.includes('/movie')) {
+            this.genreName = this.getGenreName(this.moviesgenres);
+        } else if (this.currentRoute.includes('/shows')) {
+            this.genreName = this.getGenreName(this.showsgenres);
+        }
+        console.log(this.genreName);
+    }
+}
+
+
 
 }

src/app/models/tv.ts

@@ -34,3 +34,8 @@ export interface ShowVideo {
   site: string;
   key: string;
 }
+
+export interface Genre {
+  id: number;
+  name: string;
+}

src/app/pages/home/home.component.html

@@ -39,7 +39,7 @@ <h2 style="padding: 10px;">Upcoming Movies</h2>
 <h2 style="padding: 10px;">Browse Movies  By  Category</h2>
 <div class="stock-ticker" >
   <ul>
-    <li class="minus" *ngFor="let genre of genres">
+    <li class="minus" *ngFor="let genre of moviesgenres">
       <a class="genre-link" [routerLink]="'/movies/genres/' + genre.id"><span class="company">{{ genre.name }}</span></a>
     </li>
   </ul>
@@ -65,6 +65,16 @@ <h2 style="padding: 10px;">Popular Tv Shows</h2>
  </ng-template>
 
 </p-carousel>
+<br>
+<h2 style="padding: 10px;">Browse Tv Shows By Category</h2>
+<div class="stock-ticker" >
+  <ul>
+    <li class="minus" *ngFor="let genre of showsgenres">
+      <a class="genre-link" [routerLink]="'/shows/genres/' + genre.id"><span class="company">{{ genre.name }}</span></a>
+    </li>
+  </ul>
+</div>
+<br>
 </div>
 
 <!-- <items-banner [items]="popularTvShows" title="Popular Tv Shows"></items-banner>

src/app/pages/home/home.component.ts

@@ -19,7 +19,8 @@ export class HomeComponent implements OnInit , OnChanges {
   topRatedMovies: Movie[] = [];
   popularTvShows: Tv[] = [];
   movies: Movie[] = [];
-  genres: any[] = [];
+  moviesgenres: any[] = [];
+  showsgenres: any[] = [];
   genreId: string | null = null;
   readonly imagesSizes = IMAGES_SIZES;
   responsiveOptions: any[]=[];
@@ -53,7 +54,11 @@ export class HomeComponent implements OnInit , OnChanges {
     });
 
     this.moviesService.getMoviesGenres().subscribe((genresData) => {
-      this.genres = genresData;
+      this.moviesgenres = genresData;
+    });
+
+    this.ShowsService.getShowsGenres().subscribe((genresData) => {
+      this.showsgenres = genresData;
     });
 
     this.responsiveOptions = [
@@ -116,6 +121,7 @@ export class HomeComponent implements OnInit , OnChanges {
         this.getPagedMovies(pageNumber);
       }
     }
+  window.scrollTo(0, 0);
   }
 
     getMoviesByGenre(genreId: string, page: number) {

src/app/pages/movies/movies.component.ts

@@ -73,6 +73,7 @@ export class MoviesComponent implements OnInit , OnChanges{
         this.getPagedMovies(pageNumber);
       }
     }
+    window.scrollTo(0, 0);
   }
 
   searchChanged() {

src/app/pages/shows/shows.component.ts

@@ -83,6 +83,7 @@ export class ShowsComponent implements OnInit {
         this.getPagedShows(pageNumber);
       }
     }
+    window.scrollTo(0, 0);
   }
 
   searchChanged() {