Organize i18n fields

cristofima · Mar 7, 2024 · 606bd81 · 606bd81
1 parent 1fdaa3a
commit 606bd81
Show file tree

Hide file tree

Showing 12 changed files with 166 additions and 120 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -18,7 +18,7 @@
           <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' | translate }}</a>
+          <a class="nav-link" routerLink="/tv-shows" routerLinkActive="active-link">{{ 'TVShows' | translate }}</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" routerLink="/people" routerLinkActive="active-link">{{ 'People' | translate }}</a>
@@ -29,7 +29,7 @@
           <select class="form-select" aria-label="Default language" (change)="onLanguageChange($event.target.value)">
             <option value="">{{ 'SelectDefaultLanguage' | translate }}</option>
             @for (lang of laguages; track lang) {
-              <option [value]="lang.code" [selected]="lang.code === selectedLanguage">{{lang.name | translate}}</option>
+              <option [value]="lang.code" [selected]="lang.code === selectedLanguage">{{'Languages.'+lang.name | translate}}</option>
             }
           </select>
         </li>

diff --git a/src/app/features/home/components/home.component.html b/src/app/features/home/components/home.component.html
@@ -16,7 +16,7 @@ <h3>{{ 'Trending' | translate }}</h3>
       </ng-template>
     </li>
     <li [ngbNavItem]="2">
-      <button ngbNavLink>{{ 'This Week' | translate }}</button>
+      <button ngbNavLink>{{ 'ThisWeek' | translate }}</button>
       <ng-template ngbNavContent>
         <div class="row">
           <div class="media-container">
@@ -52,7 +52,7 @@ <h3>{{ 'Upcoming' | translate }}</h3>
       </ng-template>
     </li>
     <li [ngbNavItem]="2">
-      <button ngbNavLink>{{ 'TV Shows' | translate }}</button>
+      <button ngbNavLink>{{ 'TVShows' | translate }}</button>
       <ng-template ngbNavContent>
         <div class="row">
           <div class="media-container">
@@ -71,7 +71,7 @@ <h3>{{ 'Upcoming' | translate }}</h3>
 
   <br />
 
-  <h3>{{ 'What\'s Popular' | translate }}</h3>
+  <h3>{{ 'WhatsPopular' | translate }}</h3>
   <ul ngbNav #navPopular="ngbNav" [(activeId)]="activePopular" class="nav-tabs">
     <li [ngbNavItem]="1">
       <button ngbNavLink>{{ 'Streaming' | translate }}</button>
@@ -88,7 +88,7 @@ <h3>{{ 'What\'s Popular' | translate }}</h3>
       </ng-template>
     </li>
     <li [ngbNavItem]="2">
-      <button ngbNavLink>{{ 'On TV' | translate }}</button>
+      <button ngbNavLink>{{ 'OnTV' | translate }}</button>
       <ng-template ngbNavContent>
         <div class="row">
           <div class="media-container">
@@ -102,7 +102,7 @@ <h3>{{ 'What\'s Popular' | translate }}</h3>
       </ng-template>
     </li>
     <li [ngbNavItem]="3">
-      <button ngbNavLink>{{ 'In Theaters' | translate }}</button>
+      <button ngbNavLink>{{ 'InTheaters' | translate }}</button>
       <ng-template ngbNavContent>
         <div class="row">
           <div class="media-container">

diff --git a/src/app/features/movie/components/collection/collection.component.html b/src/app/features/movie/components/collection/collection.component.html
@@ -6,13 +6,13 @@ <h3>{{collection.name}}</h3>
       <div class="user-score-container">
         <circle-progress [percent]="collection.voteAverage * 10" [outerStrokeColor]="collection.voteAverage | borderClass"
         [titleFontSize]="20" [unitsFontSize]="15" [radius]="27" [outerStrokeWidth]="5"></circle-progress>
-        <h6 [innerHTML]="'User Score' | translate"></h6>
+        <h6 [innerHTML]="'UserScore' | translate"></h6>
       </div>
     }
 
     <h5>{{ 'Overview' | translate }}</h5>
     <p>{{collection.overview}}</p>
-    <p><b>{{ 'Number of Movies' | translate }}:</b> {{collection.movies.length}}</p>
+    <p><b>{{ 'NumberOfMovies' | translate }}:</b> {{collection.movies.length}}</p>
   </ng-template>
 
   <ng-template #aditionalInfo let-collection="data">

diff --git a/src/app/features/movie/components/details/movie.component.html b/src/app/features/movie/components/details/movie.component.html
@@ -28,12 +28,12 @@ <h6>
       @if(movie.voteAverage > 0) {
         <circle-progress [percent]="movie.voteAverage * 10" [outerStrokeColor]="movie.voteAverage | borderClass"
         [titleFontSize]="20" [unitsFontSize]="15" [radius]="27" [outerStrokeWidth]="5"></circle-progress>
-        <h6 [innerHTML]="'User Score' | translate"></h6>
+        <h6 [innerHTML]="'UserScore' | translate"></h6>
       }
 
       @if (movie.trailerKey) {
         <a class="btn btn-secondary" href="https://www.youtube.com/watch?v={{movie.trailerKey}}"
-        target="_blank">{{ 'Play Trailer' | translate }}</a>
+        target="_blank">{{ 'PlayTrailer' | translate }}</a>
       }
     </div>
 
@@ -60,7 +60,7 @@ <h5>{{ 'Overview' | translate }}</h5>
       <div class="media-info">
         @if (movie.topBilledCast.length) {
           <hr />
-          <h4>{{ 'Top Billed Cast' | translate }}</h4>
+          <h4>{{ 'TopBilledCast' | translate }}</h4>
           <div class="row">
             <div class="top-billed-cast-container">
               @for (cast of movie.topBilledCast; track cast) {
@@ -92,7 +92,7 @@ <h4>{{ 'Top Billed Cast' | translate }}</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' | translate }} {{movie.collection.name}}</h2>
+          <h2>{{ 'PartOfThe' | translate }} {{movie.collection.name}}</h2>
           <a class="btn rounded-pill" [style.background-color]="posterImgDominantColor"
           [routerLink]="['/movie/collection/', movie.collection.id]">{{ 'VIEW THE COLLECTION' | translate }}</a>
         </div>
@@ -127,10 +127,10 @@ <h4>{{ 'Recommendations' | translate }}</h4>
 
   <div class="minor-data">
     @if (movie.status) {
-      <div><span>{{ 'Status' | translate }}</span> <span>{{movie.status | translate}}</span></div>
+      <div><span>{{ 'Status' | translate }}</span> <span>{{ 'MovieStatus.'+movie.status | translate }}</span></div>
     }
     <div>
-      <span>{{ 'Production Company' | translate }}</span>
+      <span>{{ 'ProductionCompany' | translate }}</span>
       @if(movie.productionCompany) {
         <section>
           <img src="https://image.tmdb.org/t/p/h30{{movie.productionCompany.logoPath}}" [title]="movie.productionCompany.name"
@@ -142,7 +142,7 @@ <h4>{{ 'Recommendations' | translate }}</h4>
       }
     </div>
     @if (movie.originalLanguage) {
-      <div><span>{{ 'Original Language' | translate }}</span> <span>{{movie.originalLanguage}}</span></div>
+      <div><span>{{ 'OriginalLanguage' | translate }}</span> <span>{{ 'Languages.'+movie.originalLanguage | translate }}</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>

diff --git a/src/app/features/person/components/person.component.html b/src/app/features/person/components/person.component.html
@@ -11,14 +11,14 @@
           </div>
         </div>
       }
-      <h5>{{ 'Personal Info' | translate }}</h5>
+      <h5>{{ 'PersonalInfo' | translate }}</h5>
       <div class="personal-info">
         <div>
-          <span>{{ 'Known For' | translate }}</span>
+          <span>{{ 'KnownFor' | translate }}</span>
           <span>{{ person.knownForDepartment | translate }}</span>
         </div>
         <div>
-          <span>{{ 'Known Credits' | translate }}</span>
+          <span>{{ 'KnownCredits' | translate }}</span>
           <span>{{person.knownCredits}}</span>
         </div>
         <div>
@@ -28,20 +28,20 @@ <h5>{{ 'Personal Info' | translate }}</h5>
         <div>
           <span>{{ 'Birthday' | translate }}</span>
           @if (person.birthday) {
-            <span>{{person.birthday | date}} @if(!person.deathday) {({{person.age}} years old)}</span>
+            <span>{{person.birthday | date}} @if(!person.deathday) {({{ 'YearsOld' | translate:{age: person.age} }})}</span>
           }
           @if (!person.birthday) {
             <span>-</span>
           }
         </div>
         @if (person.deathday) {
           <div>
-            <span>{{ 'Day of Death' | translate }}</span>
-            <span>{{person.deathday | date}} ({{person.age}} years old)</span>
+            <span>{{ 'DayOfDeath' | translate }}</span>
+            <span>{{person.deathday | date}} ({{ 'YearsOld' | translate:{age: person.age} }})</span>
           </div>
         }
         <div>
-          <span>{{ 'Place of Birth' | translate }}</span>
+          <span>{{ 'PlaceOfBirth' | translate }}</span>
           <span>{{person.placeOfBirth || '-'}}</span>
         </div>
       </div>
@@ -59,9 +59,9 @@ <h5>{{ 'Biography' | translate }}</h5>
         }
       }
       @else {
-        <p [innerHTML]="'EmptyBiography' | translate:paramEmptyBiography"></p>
+        <p [innerHTML]="'EmptyBiography' | translate:{value: person.name}"></p>
       }
-      <h5>{{ 'Known For' | translate }}</h5>
+      <h5>{{ 'KnownFor' | translate }}</h5>
       <div class="row">
         <div class="known-for-container">
           @for (media of person.knownFor; track media) {
@@ -101,28 +101,28 @@ <h2 ngbAccordionHeader>
                               }
                             }
                             @else {
-                            @for (job of media.jobs; track job) {
-                              <div>
-                                @if (job.episodeCount) {
-                                  <span>({{job.episodeCount}} {{ job.episodeCount > 1 ? ('episodes' | translate) : ('episode' | translate) }})</span>
-                                }
-                                @if (job.job) {
-                                  <span> {{ 'as' | translate }} </span>
-                                }
-                                @if (job.job) {
-                                  <span>{{ job.job }}</span>
-                                }
-                              </div>
+                              @for (job of media.jobs; track job) {
+                                <div>
+                                  @if (job.episodeCount) {
+                                    <span>({{job.episodeCount}} {{ job.episodeCount > 1 ? ('episodes' | translate) : ('episode' | translate) }})</span>
+                                  }
+                                  @if (job.job) {
+                                    <span> {{ 'as' | translate }} </span>
+                                  }
+                                  @if (job.job) {
+                                    <span>{{ job.job }}</span>
+                                  }
+                                </div>
+                              }
                             }
-                          }
-                        </span>
-                      </li>
-                    }
-                  </ul>
-                </ng-template>
+                          </span>
+                        </li>
+                      }
+                    </ul>
+                  </ng-template>
+                </div>
               </div>
             </div>
-          </div>
           }
         </div>
       </div>

diff --git a/src/app/features/person/components/person.component.ts b/src/app/features/person/components/person.component.ts
@@ -12,7 +12,6 @@ import { PersonService } from '../services/person.service';
 export class PersonDetailsComponent implements OnInit {
 
   person: Person;
-  paramEmptyBiography: any;
   showFullBiography = false;
   @ViewChild('accordion', { static: false }) accordion: NgbAccordionDirective;
 
@@ -26,9 +25,6 @@ export class PersonDetailsComponent implements OnInit {
 
   private async loadDetails() {
     this.person = await this.personService.getPersonDetails(this.personId).toPromise();
-    this.paramEmptyBiography = {
-      value: this.person.name
-    };
 
     this.titleService.setTitle(`${this.person.name} | Movies Db`);
     setTimeout(() => {

diff --git a/src/app/features/tv/components/tv.component.html b/src/app/features/tv/components/tv.component.html
@@ -22,12 +22,12 @@ <h6>
         @if(tv.voteAverage > 0) {
           <circle-progress [percent]="tv.voteAverage * 10" [outerStrokeColor]="tv.voteAverage | borderClass"
           [titleFontSize]="20" [unitsFontSize]="15" [radius]="27" [outerStrokeWidth]="5"></circle-progress>
-          <h6 [innerHTML]="'User Score' | translate"></h6>
+          <h6 [innerHTML]="'UserScore' | translate"></h6>
         }
 
         @if (tv.trailerKey) {
           <a class="btn btn-secondary" href="https://www.youtube.com/watch?v={{tv.trailerKey}}"
-          target="_blank">{{ 'Play Trailer' | translate }}</a>
+          target="_blank">{{ 'PlayTrailer' | translate }}</a>
         }
       </div>
 
@@ -54,7 +54,7 @@ <h5>{{ 'Overview' | translate }}</h5>
         <div class="media-info">
           @if (tv.topBilledCast.length) {
             <hr />
-            <h4>{{ 'Series Cast' | translate }}</h4>
+            <h4>{{ 'SeriesCast' | translate }}</h4>
             <div class="row">
               <div class="top-billed-cast-container">
                 @for (cast of tv.topBilledCast; track cast) {
@@ -87,7 +87,7 @@ <h4>{{ 'Series Cast' | translate }}</h4>
           <hr />
 
           @if(tv.lastSeason) {
-            <h5>{{ (tv.status === 'Ended' ? 'LastSeason' : 'CurrentSeason') | translate }}</h5>
+            <h5>{{ ((tv.status === 'Ended' || tv.status === 'Canceled') ? 'LastSeason' : 'CurrentSeason') | translate }}</h5>
             <div class="last-season">
               <div class="img-container">
                 <img src="https://image.tmdb.org/t/p/w130_and_h195_bestv2{{tv.lastSeason.posterPath}}" [alt]="tv.lastSeason.name" loading="lazy">
@@ -130,7 +130,7 @@ <h4>{{ 'Recommendations' | translate }}</h4>
 
       <div class="minor-data">
         @if (tv.status) {
-          <div><span>{{ 'Status' | translate }}</span> <span>{{tv.status}}</span></div>
+          <div><span>{{ 'Status' | translate }}</span> <span>{{ 'TVStatus.'+tv.status | translate }}</span></div>
         }
         <div>
           <span>{{ 'Network' | translate }}</span>
@@ -147,7 +147,7 @@ <h4>{{ 'Recommendations' | translate }}</h4>
         <div><span>{{ 'Type' | translate }}</span> <span>{{tv.type}}</span></div>
       }
       @if (tv.originalLanguage) {
-        <div><span>{{ 'Original Language' | translate }}</span> <span>{{tv.originalLanguage}}</span></div>
+        <div><span>{{ 'OriginalLanguage' | translate }}</span> <span>{{ 'Languages.'+tv.originalLanguage | translate }}</span></div>
       }
       <div>
         <span>{{ 'Keywords' | translate }}</span>

diff --git a/src/app/shared/components/error-pages/page-not-found/page-not-found.component.html b/src/app/shared/components/error-pages/page-not-found/page-not-found.component.html
@@ -1,9 +1,9 @@
 <div id="notfound">
   <h2 class="notfound">
     <div class="notfound-404">
-      <h1>Oops!</h1>
+      <h1>{{ 'Errors.404.Exclamation' | translate }}</h1>
     </div>
-    <h2>404 - Page not found</h2>
-    <p>The page you are looking for may have been deleted or is temporarily unavailable.</p>
+    <h2>{{ 'Errors.404.Title' | translate }}</h2>
+    <p>{{ 'Errors.404.Description' | translate }}</p>
   </h2>
 </div>
diff --git a/src/app/shared/components/media-list/media-list.component.html b/src/app/shared/components/media-list/media-list.component.html
@@ -1,6 +1,7 @@
 <div class="container">
   <div class="search-container">
-    <input type="search" [(ngModel)]="search" (keydown.enter)="searchMedia()" placeholder="{{ 'SearchPlaceHolder' | translate}}"
+    <input type="search" [(ngModel)]="search" (keydown.enter)="searchMedia()" 
+      placeholder="{{ 'SearchPlaceHolder' | translate:{mediaType: (languageKeyMediaType | translate)} }}"
       (click)="loadMedia()" />
     <button type="button" class="btn btn-primary" (click)="searchMedia()">{{ 'Search' | translate}}</button>
   </div>

diff --git a/src/app/shared/components/media-list/media-list.component.ts b/src/app/shared/components/media-list/media-list.component.ts
@@ -25,10 +25,13 @@ export class MediaListComponent implements OnInit {
   @Input() genreId: number;
   @Input({required: true}) mediaType: 'movie' | 'tv';
 
+  languageKeyMediaType: string;
+
   constructor(private mediaService: MediaService, private titleService: Title) { }
 
   ngOnInit() {
     const prefix = this.mediaType === 'movie' ? 'Movies' : 'TV Shows';
+    this.languageKeyMediaType = this.mediaType === 'movie' ? 'Movies' : 'TVShows';
     this.titleService.setTitle(`${prefix} | Movies Db`);
     this.loadParams();
   }