update interfaces

src/app/modules/shared/components/media-inset-info/media-inset-info.component.ts

@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { IMedia } from '../../../shared/interfaces/imedia';
 import { TranslateService } from '@ngx-translate/core';
 import { IResponsiveOption } from '../../interfaces/iresponsive-option';
-import { IGenre } from '../../interfaces/igenres';
+import { IGenre } from '../../interfaces/igenre';
 
 @Component({
   selector: 'app-media-inset-info',

src/app/modules/shared/components/media-outset-info/media-outset-info.component.ts

@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { IResponsiveOption } from '../../interfaces/iresponsive-option';
 import { IMedia } from '../../interfaces/imedia';
-import { IGenre } from '../../interfaces/igenres';
+import { IGenre } from '../../interfaces/igenre';
 
 @Component({
   selector: 'app-media-outset-info',

src/app/modules/shared/components/media-people/media-people.component.html

@@ -0,0 +1,11 @@
+<article class="mb-4">
+  <h4 class="mb-3 text-center" translate="home.actors"></h4>
+  <p-carousel dir="ltr" [value]="people" [showIndicators]="false" [numVisible]="3.5" [numScroll]="2" [responsiveOptions]="responsiveOptions">
+    <ng-template let-person pTemplate="person">
+      <a class="text-center d-inline-block">
+        <img class="rounded-4" priority width="200" height="300" [ngSrc]="'https://image.tmdb.org/t/p/w200'+person.profile_path" [alt]="person.name">
+        <p class="mb-0 mt-1">{{person.name}}</p>
+      </a>
+    </ng-template>
+  </p-carousel>
+</article>

src/app/modules/shared/components/media-people/media-people.component.scss

@@ -0,0 +1,21 @@
+:host ::ng-deep {
+  .p-ripple {
+    color: white;
+    border-radius: 50%;
+    background-color: var(--ripple-bgc);
+    &.p-disabled {
+      opacity: 0;
+    }
+  }
+}
+a {
+  width: 280px;
+  height: 183px;
+  background-size: cover;
+  background-position: center;
+  @media screen and (max-width: 767px) {
+    & {
+      width: 100%;
+    }
+  }
+}

src/app/modules/shared/components/media-people/media-people.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaPeopleComponent } from './media-people.component';
+
+describe('MediaPeopleComponent', () => {
+  let component: MediaPeopleComponent;
+  let fixture: ComponentFixture<MediaPeopleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MediaPeopleComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MediaPeopleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/shared/components/media-people/media-people.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+import { IResponsiveOption } from '../../interfaces/iresponsive-option';
+import { IPerson } from '../../interfaces/iperson';
+
+@Component({
+  selector: 'app-media-people',
+  templateUrl: './media-people.component.html',
+  styleUrl: './media-people.component.scss'
+})
+export class MediaPeopleComponent {
+  constructor() {
+    this.responsiveOptions = [
+      { breakpoint: '1199px', numVisible: 2.7, numScroll: 2 },
+      { breakpoint: '991px', numVisible: 2, numScroll: 2 },
+      { breakpoint: '767px', numVisible: 1, numScroll: 1 }
+    ];
+  }
+  responsiveOptions: IResponsiveOption[];
+  @Input({required: true}) people!: IPerson[];
+}

src/app/modules/shared/interfaces/igenre.ts

@@ -0,0 +1,4 @@
+export interface IGenre {
+  id: number,
+  name: string
+}

src/app/modules/shared/interfaces/igenres.ts

@@ -1,7 +1,5 @@
-export interface IGenre {
-  id: number,
-  name: string
-}
+import { IGenre } from "./igenre";
+
 export interface IGenres {
   genres: IGenre[];
 }

src/app/modules/shared/interfaces/imedia.ts

@@ -5,6 +5,7 @@ export interface IMedia {
   video: boolean,
   adult: boolean,
   overview: string,
+  media_type: string,
   vote_count: number,
   popularity: number,
   poster_path: string,

src/app/modules/shared/interfaces/imedias.ts

@@ -4,6 +4,7 @@ interface IDates {
   maximum: string,
   minimum: string
 }
+
 export interface IMedias {
   page: number,
   dates: IDates,

src/app/modules/shared/interfaces/ipeople.ts

@@ -0,0 +1,8 @@
+import { IPerson } from "./iperson"
+
+export interface IPeople {
+  page: number,
+  results: IPerson[],
+  total_pages: number,
+  total_results: number
+}

src/app/modules/shared/interfaces/iperson.ts

@@ -0,0 +1,14 @@
+import { IMedia } from "./imedia";
+
+export interface IPerson {
+  id: number,
+  name: string,
+  adult: boolean,
+  gender: number,
+  media_type: string,
+  popularity: number,
+  known_for: IMedia[],
+  profile_path: string,
+  original_name: string,
+  known_for_department: string
+}

src/app/modules/shared/services/media.service.ts

@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { IMedias } from './../interfaces/imedias';
 import { IGenres } from '../interfaces/igenres';
+import { IPeople } from '../interfaces/ipeople';
 
 @Injectable({
   providedIn: 'root'
@@ -14,10 +15,13 @@ export class MediaService {
     'accept': 'application/json'
   };
   url: string = 'https://api.themoviedb.org/3/';
-  getMedia(media: string, type: string, page: number = 1): Observable<IMedias> {
-    return this.http.get<IMedias>(this.url + `${media}/${type}?language=en-US&page=${page}`, {headers: this.headers})
+  getPeople(): Observable<IPeople> {
+    return this.http.get<IPeople>(this.url + `trending/person/day?language=en-US`, {headers:this.headers})
   }
-  getGenres(media: string,language: string): Observable<IGenres> {
+  getGenres(media: string, language: string): Observable<IGenres> {
     return this.http.get<IGenres>(this.url + `genre/${media}/list?language=${language}`, {headers:this.headers})
   }
+  getMedia(media: string, type: string, page: number = 1): Observable<IMedias> {
+    return this.http.get<IMedias>(this.url + `${media}/${type}?language=en-US&page=${page}`, {headers: this.headers})
+  }
 }

src/app/modules/shared/shared.module.ts

@@ -5,12 +5,14 @@ import { CarouselModule } from 'primeng/carousel';
 import { MediaInsetInfoComponent } from './components/media-inset-info/media-inset-info.component';
 import { MediaOutsetInfoComponent } from './components/media-outset-info/media-outset-info.component';
 import { MediaPopularComponent } from './components/media-popular/media-popular.component';
+import { MediaPeopleComponent } from './components/media-people/media-people.component';
 
 @NgModule({
   declarations: [
+    MediaPeopleComponent,
+    MediaPopularComponent,
     MediaInsetInfoComponent,
-    MediaOutsetInfoComponent,
-    MediaPopularComponent
+    MediaOutsetInfoComponent
   ],
   imports: [
     CommonModule,
@@ -19,9 +21,10 @@ import { MediaPopularComponent } from './components/media-popular/media-popular.
     NgOptimizedImage
   ],
   exports: [
+    MediaPeopleComponent,
+    MediaPopularComponent,
     MediaInsetInfoComponent,
-    MediaOutsetInfoComponent,
-    MediaPopularComponent
+    MediaOutsetInfoComponent
   ]
 })
 export class SharedModule { }

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

@@ -1,5 +1,6 @@
 <main class="mt-3 mb-5">
   <div class="container">
+    <app-media-people [people]="people"></app-media-people>
     <app-media-inset-info [title]="'home.just-release'" [medias]="releaseMovies" [genres]="movieGenres"></app-media-inset-info>
     <app-media-popular [medias]="popularMovies"></app-media-popular>
     <app-media-outset-info [title]="'home.movies'" [medias]="movies" [genres]="movieGenres"></app-media-outset-info>

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

@@ -1,65 +1,67 @@
 import { Component } from '@angular/core';
 import { MediaService } from '../../modules/shared/services/media.service';
-import { IMedia } from '../../modules/shared/interfaces/imedia';
 import { SharedModule } from '../../modules/shared/shared.module';
-import { IGenre } from '../../modules/shared/interfaces/igenres';
 import { TranslateService } from '@ngx-translate/core';
+import { IMedia } from '../../modules/shared/interfaces/imedia';
+import { IGenre } from '../../modules/shared/interfaces/igenre';
+import { IPerson } from '../../modules/shared/interfaces/iperson';
 
 @Component({
   selector: 'app-home',
   standalone: true,
   imports: [SharedModule],
   templateUrl: './home.component.html',
-  styleUrl: './home.component.scss'
+  styleUrl: './home.component.scss',
 })
 export class HomeComponent {
-  constructor(private translate: TranslateService, private http: MediaService){
+  constructor(private translate: TranslateService, private http: MediaService) {
     translate.onLangChange.subscribe({
       next: () => {
-        if(this.translate.currentLang === "ar"){
-          this.getGenres('movie' ,'ar')
-          this.getGenres('tv' ,'ar')
-        } else{
-          this.getGenres('movie' ,'en')
-          this.getGenres('tv' ,'en')
+        if (this.translate.currentLang === 'ar') {
+          this.getGenres('movie', 'ar');
+          this.getGenres('tv', 'ar');
+        } else {
+          this.getGenres('movie', 'en');
+          this.getGenres('tv', 'en');
         }
-      }
-    })
-    this.getMedia('movie', 'upcoming')
-    this.getMedia('movie', 'popular')
-    this.getMedia('movie', 'top_rated')
-    this.getMedia('tv', 'top_rated')
+      },
+    });
+    this.getPeople();
+    this.getMedia('movie', 'upcoming');
+    this.getMedia('movie', 'popular');
+    this.getMedia('movie', 'top_rated');
+    this.getMedia('tv', 'top_rated');
   }
   releaseMovies!: IMedia[];
   popularMovies!: IMedia[];
   movieGenres!: IGenre[];
   tvGenres!: IGenre[];
+  people!: IPerson[];
   movies!: IMedia[];
   series!: IMedia[];
+  getPeople(): void {
+    this.http.getPeople().subscribe({
+      next: (data) => this.people = data.results,
+    });
+  }
   getMedia(media: string, type: string): void {
     this.http.getMedia(media, type).subscribe({
-      next: data => {
-        if(type === 'upcoming'){
-          this.releaseMovies = data.results
-        } else if(type === 'popular'){
-          this.popularMovies = data.results
-        } else if(media === 'movie' && type === 'top_rated'){
-          this.movies = data.results
-        } else if(media === 'tv' && type === 'top_rated'){
-          this.series = data.results
-        }
-      }
-    })
+      next: (data) => {
+        if (type === 'upcoming') this.releaseMovies = data.results;
+        else if (type === 'popular') this.popularMovies = data.results;
+        else if (media === 'movie' && type === 'top_rated')
+          this.movies = data.results;
+        else if (media === 'tv' && type === 'top_rated')
+          this.series = data.results;
+      },
+    });
   }
   getGenres(media: string, language: string): void {
     this.http.getGenres(media, language).subscribe({
-      next: data => {
-        if(media === 'movie'){
-          this.movieGenres = data.genres
-        } else if(media === 'tv'){
-          this.tvGenres = data.genres
-        }
-      }
-    })
+      next: (data) => {
+        if (media === 'movie') this.movieGenres = data.genres;
+        else if (media === 'tv') this.tvGenres = data.genres;
+      },
+    });
   }
 }

src/assets/i18n/ar.json

@@ -37,7 +37,8 @@
     "popular-week": "الأشهر خلال الأسبوع",
     "movies": "الأفلام",
     "series": "المسلسلات",
-    "movie": "فلم"
+    "movie": "فلم",
+    "actors": "الممثلين"
   },
   "footer": {
     "ourAchievment": "تحظى منصتنا بثقة الملايين وتتميز بأفضل الأفلام والمسلسلات المحدثة في جميع أنحاء العالم.",

src/assets/i18n/en.json

@@ -37,7 +37,8 @@
     "popular-week": "Popular of the week",
     "movies": "Movies",
     "series": "Series",
-    "movie": "Movie"
+    "movie": "Movie",
+    "actors": "Actors"
   },
   "footer": {
     "ourAchievment": "Our platform is trusted by millions & features best updated movies and series all around the world.",