Add translations for english and spanish

cristofima · Mar 1, 2024 · 5c42d6f · 5c42d6f
1 parent be4693a
commit 5c42d6f
Show file tree

Hide file tree

Showing 20 changed files with 298 additions and 79 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,8 @@
     "@angular/platform-browser-dynamic": "^17.2.2",
     "@angular/router": "^17.2.2",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+    "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
     "ng-circle-progress": "^1.7.1",
     "ng-http-caching": "^17.0.1",
     "node-vibrant": "^3.1.6",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -15,10 +15,18 @@
     <div class="navbar-collapse" [class.collapse]="collapsed" id="navbarContent">
       <ul class="navbar-nav me-auto">
         <li class="nav-item">
-          <a class="nav-link" routerLink="/movies" routerLinkActive="active-link">Movies</a>
+          <a class="nav-link" routerLink="/movies" routerLinkActive="active-link">{{ 'Movies' | translate }}</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" routerLink="/tv-shows" routerLinkActive="active-link">TV Shows</a>
+          <a class="nav-link" routerLink="/tv-shows" routerLinkActive="active-link">{{ 'TV Shows' | translate }}</a>
+        </li>
+      </ul>
+      <ul class="navbar-nav ms-auto">
+        <li class="nav-item">
+          <select class="form-select" aria-label="Default language" (change)="onLanguageChange($event.target.value)">
+            <option value="">{{ 'SelectDefaultLanguage' | translate }}</option>
+            <option *ngFor="let lang of laguages" [value]="lang.code" [selected]="lang.code === selectedLanguage">{{lang.name | translate}}</option>
+          </select>
         </li>
       </ul>
     </div>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,11 +1,32 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 
   collapsed = true;
+  selectedLanguage: string = 'en-US';
+  laguages = [
+    { name: 'English', code: 'en-US' },
+    { name: 'Spanish', code: 'es-MX' }
+  ];
+
+  constructor(private translate: TranslateService) {}
+
+  ngOnInit(): void {
+    this.selectedLanguage = localStorage.getItem('language') || 'en-US';
+    this.translate.use(this.selectedLanguage);
+  }
+
+  onLanguageChange(code: string) {
+    if(!code && this.selectedLanguage !== code) return;
+
+    this.selectedLanguage = code;
+    localStorage.setItem('language', code);
+    window.location.reload();
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,7 +1,7 @@
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
+import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from "@angular/common/http";
 
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
@@ -14,11 +14,17 @@ import { PageNotFoundComponent } from "./shared/components/error-pages/page-not-
 import { SharedModule } from "./shared/shared.module";
 
 import { NgCircleProgressModule } from "ng-circle-progress";
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 
 const ngHttpCachingConfig: NgHttpCachingConfig = {
   store: new NgHttpCachingLocalStorage()
 };
 
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -30,6 +36,14 @@ const ngHttpCachingConfig: NgHttpCachingConfig = {
     AppRoutingModule,
     HttpClientModule,
     NgHttpCachingModule.forRoot(ngHttpCachingConfig),
+    TranslateModule.forRoot({
+      defaultLanguage: 'en-US',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    }),
     NgCircleProgressModule.forRoot({
       outerStrokeWidth: 12,
       titleColor: "white",

diff --git a/src/app/core/services/tmdb.service.ts b/src/app/core/services/tmdb.service.ts
@@ -8,13 +8,16 @@ import { HttpClient } from '@angular/common/http';
 export class TMDbService {
 
   private apiKey = environment.apiKey;
+  private language: string;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+    this.language = localStorage.getItem('language') || 'en-US';
+  }
 
   public getQuery(query: string, params: string = '') {
     const url = `https://api.themoviedb.org/3/${query}`;
 
-    params = `?api_key=${this.apiKey}&${params}`;
+    params = `?api_key=${this.apiKey}&language=${this.language}&${params}`;
 
     return this.http.get(`${url}${params}`);
   }

diff --git a/src/app/features/home/components/home.component.html b/src/app/features/home/components/home.component.html
@@ -1,8 +1,8 @@
 <div class="container">
-  <h3>Trending</h3>
+  <h3>{{ 'Trending' | translate }}</h3>
   <ul ngbNav #navTrending="ngbNav" [(activeId)]="activeTrending" class="nav-tabs">
     <li [ngbNavItem]="1">
-      <button ngbNavLink>Today</button>
+      <button ngbNavLink>{{ 'Today' | translate }}</button>
       <ng-template ngbNavContent>
         <div class="row">
           <div class="media-container">
@@ -14,7 +14,7 @@ <h3>Trending</h3>
       </ng-template>
     </li>
     <li [ngbNavItem]="2">
-      <button ngbNavLink>This Week</button>
+      <button ngbNavLink>{{ 'This Week' | translate }}</button>
       <ng-template ngbNavContent>
         <div class="row">
           <div class="media-container">
@@ -31,10 +31,10 @@ <h3>Trending</h3>
 
   <br />
 
-  <h3>What's Popular</h3>
+  <h3>{{ 'What\'s Popular' | translate }}</h3>
   <ul ngbNav #navPopular="ngbNav" [(activeId)]="activePopular" class="nav-tabs">
     <li [ngbNavItem]="1">
-      <button ngbNavLink>Streaming</button>
+      <button ngbNavLink>{{ 'Streaming' | translate }}</button>
       <ng-template ngbNavContent>
         <div class="row">
           <div class="media-container">
@@ -46,7 +46,7 @@ <h3>What's Popular</h3>
       </ng-template>
     </li>
     <li [ngbNavItem]="2">
-      <button ngbNavLink>On TV</button>
+      <button ngbNavLink>{{ 'On TV' | translate }}</button>
       <ng-template ngbNavContent>
         <div class="row">
           <div class="media-container">
@@ -58,7 +58,7 @@ <h3>What's Popular</h3>
       </ng-template>
     </li>
     <li [ngbNavItem]="3">
-      <button ngbNavLink>In Theaters</button>
+      <button ngbNavLink>{{ 'In Theaters' | translate }}</button>
       <ng-template ngbNavContent>
         <div class="row">
           <div class="media-container">

diff --git a/src/app/features/home/home.module.ts b/src/app/features/home/home.module.ts
@@ -6,6 +6,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from 'src/app/shared/shared.module';
 import { HomeService } from './services/home.service';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
 
 const routes: Routes = [
   {
@@ -21,7 +22,8 @@ const routes: Routes = [
     FormsModule,
     RouterModule.forChild(routes),    
     SharedModule,
-    NgbNavModule
+    NgbNavModule,
+    TranslateModule
   ],
   providers: [HomeService],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

diff --git a/src/app/features/movie/components/collection/collection.component.html b/src/app/features/movie/components/collection/collection.component.html
@@ -1,22 +1,22 @@
 <app-generic-details type="Collection" [callback]="collectionDetailsCallback">
-  <ng-template #mainInfo let-collection="data" let-contrastColor="contrastColor">
+  <ng-template #mainInfo let-collection="data">
     <h3>{{collection.name}}</h3>
 
     <div class="user-score-container" *ngIf="collection.voteAverage > 0">
       <circle-progress [percent]="collection.voteAverage * 10" [outerStrokeColor]="collection.voteAverage | borderClass"
         [titleFontSize]="20" [unitsFontSize]="15" [radius]="27" [outerStrokeWidth]="5"></circle-progress>
-      <h6>User<br />Score</h6>
+      <h6 [innerHTML]="'User Score' | translate"></h6>
     </div>
 
-    <h5>Overview</h5>
+    <h5>{{ 'Overview' | translate }}</h5>
     <p>{{collection.overview}}</p>
-    <p><b>Number of Movies:</b> {{collection.movies.length}}</p>
+    <p><b>{{ 'Number of Movies' | translate }}:</b> {{collection.movies.length}}</p>
   </ng-template>
 
   <ng-template #aditionalInfo let-collection="data">
     <hr />
     <div class="row">
-      <h3 style="width: 100%;">Movies</h3>
+      <h3 style="width: 100%;">{{ 'Movies' | translate }}</h3>
 
       <div *ngFor="let movie of collection.movies" class="col-lg-2 col-sm-6 mb-4">
         <div class="card h-100">

diff --git a/src/app/features/movie/components/details/movie.component.html b/src/app/features/movie/components/details/movie.component.html
@@ -1,5 +1,5 @@
 <app-generic-details type="Movie" [callback]="movieDetailsCallback">
-  <ng-template #mainInfo let-movie="data" let-contrastColor="contrastColor">
+  <ng-template #mainInfo let-movie="data">
     <h3>{{movie.title}} <span *ngIf="movie.releaseDate">({{movie.releaseDate | date:'yyyy'}})</span></h3>
     <h6>
       <span class="certification-box" *ngIf="movie.certification"
@@ -18,21 +18,21 @@ <h6>
       <ng-container *ngIf="movie.voteAverage > 0">
         <circle-progress [percent]="movie.voteAverage * 10" [outerStrokeColor]="movie.voteAverage | borderClass"
           [titleFontSize]="20" [unitsFontSize]="15" [radius]="27" [outerStrokeWidth]="5"></circle-progress>
-        <h6>User<br />Score</h6>
+        <h6 [innerHTML]="'User Score' | translate"></h6>
       </ng-container>
 
       <a *ngIf="movie.trailerKey" class="btn btn-secondary" href="https://www.youtube.com/watch?v={{movie.trailerKey}}"
-        target="_blank">Play Trailer</a>
+        target="_blank">{{ 'Play Trailer' | translate }}</a>
     </div>
 
     <p *ngIf="movie.tagline" class="tagline">{{movie.tagline}}</p>
-    <h5>Overview</h5>
+    <h5>{{ 'Overview' | translate }}</h5>
     <p>{{movie.overview}}</p>
 
     <div class="people" *ngIf="movie.people.length">
       <div class="profile" *ngFor="let person of movie.people">
         <span>{{person.name}}</span>
-        <span>{{person.job}}</span>
+        <span>{{person.job | translate}}</span>
       </div>
     </div>
   </ng-template>
@@ -42,7 +42,7 @@ <h5>Overview</h5>
       <div class="media-info">
         <ng-container *ngIf="movie.topBilledCast.length">
           <hr />
-          <h4>Top Billed Cast</h4>
+          <h4>{{ 'Top Billed Cast' | translate }}</h4>
           <div class="row">
             <div class="top-billed-cast-container">
               <div *ngFor="let cast of movie.topBilledCast" class="card">
@@ -73,16 +73,16 @@ <h4>Top Billed Cast</h4>
           <hr />
           <div class="row collection-container"
             style="background-image: linear-gradient(to right, rgba(3, 37, 65, 1) 0%, rgba(3, 37, 65, 0.6) 100%), url(https://media.themoviedb.org/t/p/w1440_and_h320_multi_faces{{movie.collection.backdropPath}})">
-            <h2>Part of the {{movie.collection.name}}</h2>
+            <h2>{{ 'Part of the' | translate }} {{movie.collection.name}}</h2>
             <a class="btn rounded-pill" [style.background-color]="posterImgDominantColor"
-              [routerLink]="['/movie/collection/', movie.collection.id]">VIEW THE COLLECTION</a>
+              [routerLink]="['/movie/collection/', movie.collection.id]">{{ 'VIEW THE COLLECTION' | translate }}</a>
           </div>
         </ng-container>
 
         <hr />
 
         <div class="row">
-          <h4>Recommendations</h4>
+          <h4>{{ 'Recommendations' | translate }}</h4>
           <div class="col-md-12 image-content">
             <ng-container *ngIf="movie.recommendations.length; else emptyRecommendations">
               <a *ngFor="let r of movie.recommendations" [routerLink]="['/', r.mediaType, r.id]">
@@ -99,34 +99,34 @@ <h4>Recommendations</h4>
             </ng-container>
 
             <ng-template #emptyRecommendations>
-              <p>We don't have enough data to suggest any movies based on <i>{{movie.title}}</i>.</p>
+              <p [innerHTML]="'EmptyRecommendations' | translate"></p>
             </ng-template>
           </div>
         </div>
       </div>
 
       <div class="minor-data">
-        <div *ngIf="movie.status"><span>Status</span> <span>{{movie.status}}</span></div>
+        <div *ngIf="movie.status"><span>{{ 'Status' | translate }}</span> <span>{{movie.status | translate}}</span></div>
         <div>
-          <span>Production Company</span>
+          <span>{{ 'Production Company' | translate }}</span>
           <section *ngIf="movie.productionCompany; else emptyProductionCompany">
             <img [src]="'https://image.tmdb.org/t/p/h30' + movie.productionCompany.logoPath"
               [title]="movie.productionCompany.name" loading="lazy">
           </section>
 
-          <ng-template #emptyProductionCompany><span>No production company has been added.</span></ng-template>
+          <ng-template #emptyProductionCompany><span>{{ 'EmptyProductionCompany' | translate }}</span></ng-template>
         </div>
-        <div *ngIf="movie.originalLanguage"><span>Original Language</span> <span>{{movie.originalLanguage}}</span></div>
-        <div><span>Budget</span> <span>{{movie.budget ? (movie.budget | currency) : '-'}}</span></div>
-        <div><span>Revenue</span> <span>{{movie.revenue ? (movie.revenue | currency) : '-'}}</span></div>
+        <div *ngIf="movie.originalLanguage"><span>{{ 'Original Language' | translate }}</span> <span>{{movie.originalLanguage}}</span></div>
+        <div><span>{{ 'Budget' | translate }}</span> <span>{{movie.budget ? (movie.budget | currency) : '-'}}</span></div>
+        <div><span>{{ 'Revenue' | translate }}</span> <span>{{movie.revenue ? (movie.revenue | currency) : '-'}}</span></div>
 
         <div>
-          <span>Keywords</span>
+          <span>{{ 'Keywords' | translate }}</span>
           <section class="keywords" *ngIf="movie.keywords.length; else emptyKeyworks">
             <span *ngFor="let keyword of movie.keywords" class="badge text-bg-secondary">{{keyword}}</span>
           </section>
 
-          <ng-template #emptyKeyworks><span>No keywords have been added.</span></ng-template>
+          <ng-template #emptyKeyworks><span>{{ 'EmptyKeyworks' | translate }}</span></ng-template>
         </div>
       </div>
     </div>

diff --git a/src/app/features/movie/movie.module.ts b/src/app/features/movie/movie.module.ts
@@ -7,6 +7,7 @@ import { NgCircleProgressModule } from 'ng-circle-progress';
 import { CollectionDetailsComponent } from './components/collection/collection.component';
 import { TimePipe } from './pipes/time.pipe';
 import { MovieService } from './services/movie.service';
+import { TranslateModule } from '@ngx-translate/core';
 
 const routes: Routes = [
   {
@@ -29,7 +30,8 @@ const routes: Routes = [
     CommonModule,
     RouterModule.forChild(routes),
     SharedModule,
-    NgCircleProgressModule
+    NgCircleProgressModule,
+    TranslateModule
   ],
   providers: [MovieService],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]