Localize Movie+TV information panel

src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input } from "@angular/core";
 import { IDiscoverCardResult } from "../../interfaces";
 import { RequestType } from "../../../interfaces";
 import { MessageService, RequestService, SearchV2Service } from "../../../services";
+import { TranslateService } from "@ngx-translate/core";
 import { MatDialog } from "@angular/material/dialog";
 import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
 import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
@@ -30,7 +31,7 @@ export class DiscoverCardComponent implements OnInit {
     private tvSearchResult: ISearchTvResultV2;
 
     constructor(private searchService: SearchV2Service, private dialog: MatDialog, private requestService: RequestService,
-        public messageService: MessageService) { }
+        public messageService: MessageService, private translate: TranslateService) { }
 
     public ngOnInit() {
         if (this.result.type == RequestType.tvShow) {
@@ -98,13 +99,13 @@ export class DiscoverCardComponent implements OnInit {
 
     public getAvailbilityStatus(): string {
         if (this.result.available) {
-            return "Available";
+            return this.translate.instant("Common.Available");
         }
         if (this.result.approved) {
-            return "Approved";
+            return this.translate.instant("Common.Approved");
         }
         if (this.result.requested) {
-            return "Pending";
+            return this.translate.instant("Common.Pending");
         }
         return "";
     }

src/Ombi/ClientApp/src/app/media-details/components/movie/panels/movie-information-panel.component.html

@@ -17,7 +17,7 @@
     </div>
     <div *ngIf="streams?.length > 0" class="streaming-on">
         <hr>
-        <span class="label">{{'MediaDetails.StreamingOn' | translate }}:</span>
+        <span class="label">{{'MediaDetails.StreamingOn' | translate }}</span>
         <div>
         <span *ngFor="let stream of streams">
             <img class="stream-small" [matTooltip]="stream.streamingProvider" src="https://image.tmdb.org/t/p/original{{stream.logo}}">
@@ -26,11 +26,11 @@
     </div>
     <hr>
     <div>
-        <span class="label">{{'MediaDetails.Status' | translate }}:</span>
-        {{movie.status}}
+        <span class="label">{{'MediaDetails.Status' | translate }}</span>
+        <span id="status">{{ getMovieStatusLabel()}}</span>
     </div>
     <div>
-        <span class="label">{{'MediaDetails.Availability' | translate }}:</span>
+        <span class="label">{{'MediaDetails.Availability' | translate }}</span>
         <span *ngIf="movie.available"> {{'Common.Available' | translate}}</span>
         <span *ngIf="!movie.available"> {{'Common.NotAvailable' | translate}}</span>
     </div>
@@ -44,23 +44,23 @@
     </div>
 
     <div *ngIf="request">
-        <span class="label">{{'Requests.RequestedBy' | translate }}: </span>
+        <span class="label">{{'MediaDetails.RequestedBy' | translate }}</span>
         <span id="requestedByInfo">{{request.requestedUser.userAlias}}</span>
     </div>
 
     <div *ngIf="request">
-        <span class="label">{{'Requests.RequestDate' | translate }}:</span>
+        <span class="label">{{'MediaDetails.RequestDate' | translate }}</span>
         {{request.requestedDate | date}}
     </div>
 
     <div *ngIf="request && request.denied">
-        <span class="label">{{'Requests.DeniedReason' | translate }}: </span>
+        <span class="label">{{'MediaDetails.DeniedReason' | translate }}</span>
         <span id="deniedReasonInfo">{{request.deniedReason}}</span>
     </div>
 
 
     <div *ngIf="movie.quality">
-        <span class="label">{{'MediaDetails.Quality' | translate }}:</span>
+        <span class="label">{{'MediaDetails.Quality' | translate }}</span>
         <div>{{movie.quality | quality}}</div>
     </div>
 
@@ -77,34 +77,34 @@
 
     <hr>
 
-    <span class="label">{{'MediaDetails.TheatricalRelease' | translate }}:</span>
+    <span class="label">{{'MediaDetails.TheatricalRelease' | translate }}</span>
     {{movie.releaseDate | date: 'mediumDate'}}
 
     <div *ngIf="movie.digitalReleaseDate">
-        <span class="label">{{'MediaDetails.DigitalRelease' | translate }}:</span>
+        <span class="label">{{'MediaDetails.DigitalRelease' | translate }}</span>
         {{movie.digitalReleaseDate | date: 'mediumDate'}}
     </div>
 
     <div *ngIf="movie.voteCount">
-        <span class="label">{{'MediaDetails.Votes' | translate }}:</span>
+        <span class="label">{{'MediaDetails.Votes' | translate }}</span>
         {{movie.voteCount | thousandShort: 1}}
     </div>
     <div>
-        <span class="label">{{'MediaDetails.Runtime' | translate }}:</span>
+        <span class="label">{{'MediaDetails.Runtime' | translate }}</span>
         {{'MediaDetails.Minutes' | translate:{runtime: movie.runtime} }}
     </div>
     <div *ngIf="movie.revenue">
-        <span class="label">{{'MediaDetails.Revenue' | translate }}:</span>
+        <span class="label">{{'MediaDetails.Revenue' | translate }}</span>
         {{movie.revenue | currency: 'USD'}}
     </div>
     <div *ngIf="movie.budget">
-        <span class="label">{{'MediaDetails.Budget' | translate }}:</span>
+        <span class="label">{{'MediaDetails.Budget' | translate }}</span>
         {{movie.budget | currency: 'USD'}}
     </div>
 
     <hr />
     <div class="genre-button-container" *ngIf="movie.genres">
-        <span class="label">{{'MediaDetails.Genres' | translate }}:</span>
+        <span class="label">{{'MediaDetails.Genres' | translate }}</span>
         <div>
             <mat-chip-list>
                 <mat-chip selected *ngFor="let genre of movie.genres">
@@ -116,7 +116,7 @@
 
     <hr />
     <div class="keyword-button-container" *ngIf="movie?.keywords?.keywordsValue?.length > 0">
-        <span class="label">{{'MediaDetails.Keywords' | translate }}:</span>
+        <span class="label">{{'MediaDetails.Keywords' | translate }}</span>
         <mat-chip-list>
             <mat-chip selected *ngFor="let keyword of movie.keywords.keywordsValue">
                 {{keyword.name}}

src/Ombi/ClientApp/src/app/media-details/components/movie/panels/movie-information-panel.component.ts

@@ -1,4 +1,5 @@
 import { Component, ViewEncapsulation, Input, OnInit, Inject } from "@angular/core";
+import { TranslateService } from "@ngx-translate/core";
 import { ISearchMovieResultV2 } from "../../../../interfaces/ISearchMovieResultV2";
 import { IMovieRequests } from "../../../../interfaces";
 import { SearchV2Service } from "../../../../services/searchV2.service";
@@ -13,7 +14,8 @@ import { IStreamingData } from "../../../../interfaces/IStreams";
 })
 export class MovieInformationPanelComponent implements OnInit {
 
-    constructor(private searchService: SearchV2Service, @Inject(APP_BASE_HREF) public internalBaseUrl: string) { }
+    constructor(private searchService: SearchV2Service, @Inject(APP_BASE_HREF) public internalBaseUrl: string,
+        private translate: TranslateService) { }
 
     @Input() public movie: ISearchMovieResultV2;
     @Input() public request: IMovieRequests;
@@ -33,4 +35,14 @@ export class MovieInformationPanelComponent implements OnInit {
 
             this.searchService.getMovieStreams(this.movie.id).subscribe(x => this.streams = x);
     }
+
+    public getMovieStatusLabel() {
+        const textKey = 'MediaDetails.StatusValues.' + this.movie.status;
+        const text = this.translate.instant(textKey);
+         if (text !== textKey) {
+            return text;
+         } else {
+             return this.movie.status;
+         }
+    }
 }

src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-information-panel/tv-information-panel.component.html

@@ -11,7 +11,7 @@
         <div *ngIf="streams?.length > 0" id="streamingContainer" class="streaming-on-container">
             <hr>
             <div class="streaming-on-content">
-                <span class="label">{{'MediaDetails.StreamingOn' | translate }}:</span>
+                <span class="label">{{'MediaDetails.StreamingOn' | translate }}</span>
                 <div>
                     <span *ngFor="let stream of sortBy('order')">
                         <img class="stream-small" id="stream{{stream.streamingProvider}}" [matTooltip]="stream.streamingProvider" src="https://image.tmdb.org/t/p/original{{stream.logo}}">
@@ -21,44 +21,44 @@
         </div>
         <hr>
         <div *ngIf="tv.status">
-            <span  class="label">{{'MediaDetails.Status' | translate }}:</span>
-                <span id="status"> {{tv.status}}</span>
+            <span  class="label">{{'MediaDetails.Status' | translate }}</span>
+                <span id="status">{{ getTVStatusLabel()}}</span>
         </div>
-        <span class="label">First Aired:</span>
+        <span class="label">{{'MediaDetails.FirstAired' | translate }}</span>
             {{tv.firstAired | date: 'mediumDate'}}
     </div>
 
     <div *ngIf="seasonCount">
-        <span class="label">Seasons:</span>
+        <span class="label">{{'MediaDetails.Seasons' | translate }}</span>
             {{seasonCount}}
     </div>
     <div *ngIf="totalEpisodes">
-        <span class="label">Episodes:</span>
+        <span class="label">{{'MediaDetails.Episodes' | translate }}</span>
             {{totalEpisodes}}
     </div>
 
     <div *ngIf="advancedOptions && request?.rootPathOverrideTitle">
-        <span class="label">{{'MediaDetails.RootFolderOverride' | translate }}:</span>
+        <span class="label">{{'MediaDetails.RootFolderOverride' | translate }}</span>
         <div>{{request.rootPathOverrideTitle}}</div>
     </div>
     <div *ngIf="advancedOptions && request?.qualityOverrideTitle">
-        <span class="label">{{'MediaDetails.QualityOverride' | translate }}:</span>
+        <span class="label">{{'MediaDetails.QualityOverride' | translate }}</span>
         <div>{{request.qualityOverrideTitle}}</div>
     </div>
 
     <div>
-        <span class="label">{{'MediaDetails.Runtime' | translate }}:</span>
+        <span class="label">{{'MediaDetails.Runtime' | translate }}</span>
             {{'MediaDetails.Minutes' | translate:{ runtime: tv.runtime} }}
     </div>
 
     <div *ngIf="tv.network">
-        <span class="label">Network:</span>
+        <span class="label">{{'MediaDetails.Network' | translate }}</span>
             {{tv.network.name}}
     </div>
 
 
     <div class="genre-button-container" *ngIf="tv.genres">
-        <span class="label">{{'MediaDetails.Genres' | translate }}:</span>
+        <span class="label">{{'MediaDetails.Genres' | translate }}</span>
         <div>
             <mat-chip-list>
                 <mat-chip selected *ngFor="let genre of tv.genres">

src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-information-panel/tv-information-panel.component.ts

@@ -1,5 +1,6 @@
 import { APP_BASE_HREF } from "@angular/common";
 import { Component, ViewEncapsulation, Input, OnInit, Inject } from "@angular/core";
+import { TranslateService } from "@ngx-translate/core";
 import { ITvRequests } from "../../../../../interfaces";
 import { ITvRatings } from "../../../../../interfaces/IRatings";
 import { ISearchTvResultV2 } from "../../../../../interfaces/ISearchTvResultV2"; 
@@ -14,7 +15,8 @@ import { SearchV2Service } from "../../../../../services";
 })
 export class TvInformationPanelComponent implements OnInit {
 
-    constructor(private searchService: SearchV2Service, @Inject(APP_BASE_HREF) public internalBaseUrl: string) { }
+    constructor(private searchService: SearchV2Service, @Inject(APP_BASE_HREF) public internalBaseUrl: string, 
+        private translate: TranslateService) { }
 
     @Input() public tv: ISearchTvResultV2;
     @Input() public request: ITvRequests;
@@ -43,5 +45,15 @@ export class TvInformationPanelComponent implements OnInit {
 
     public sortBy(prop: string) {
         return this.streams.sort((a, b) => a[prop] > b[prop] ? 1 : a[prop] === b[prop] ? 0 : -1);
-      }
+    }
+
+    public getTVStatusLabel() {
+        const textKey = 'MediaDetails.StatusValues.' + this.tv.status;
+        const text = this.translate.instant(textKey);
+        if (text !== textKey) {
+            return text;
+        } else {
+            return this.tv.status;
+        }
+    }
 }

src/Ombi/wwwroot/translations/en.json

@@ -14,6 +14,8 @@
     "Common": {
         "ContinueButton": "Continue",
         "Available": "Available",
+        "Approved": "Approved",
+        "Pending": "Pending",
         "PartiallyAvailable": "Partially Available",
         "Monitored": "Monitored",
         "NotAvailable": "Not Available",
@@ -269,21 +271,33 @@
         "QualityProfilesSelect":"Select A Quality Profile",
         "RootFolderSelect":"Select A Root Folder",
         "LanguageProfileSelect":"Select A Language Profile",
-        "Status":"Status",
-        "Availability":"Availability",
+        "Status":"Status:",
+        "StatusValues" : {
+            "Planned": "Planned",
+            "In Production": "In Production",
+            "Released": "Released",
+            "Returning Series": "Returning Series",
+            "Ended": "Ended",
+            "Canceled": "Canceled"
+        },
+        "Seasons": "Seasons:",
+        "Episodes": "Episodes:",
+        "Availability":"Availability:",
         "RequestStatus":"Request Status",
-        "Quality":"Quality",
-        "RootFolderOverride":"Root Folder Override",
-        "QualityOverride":"Quality Override",
-        "Genres":"Genres",
-        "TheatricalRelease":"Release",
-        "DigitalRelease":"Digital Release",
-        "Votes":"Votes",
-        "Runtime":"Runtime",
+        "Quality":"Quality:",
+        "RootFolderOverride":"Root Folder Override:",
+        "QualityOverride":"Quality Override:",
+        "Network":"Network:",
+        "Genres":"Genres:",
+        "FirstAired":"First Aired:",
+        "TheatricalRelease":"Release:",
+        "DigitalRelease":"Digital Release:",
+        "Votes":"Votes:",
+        "Runtime":"Runtime:",
         "Minutes": "{{runtime}} Minutes",
-        "Revenue":"Revenue",
-        "Budget":"Budget",
-        "Keywords":"Keywords/Tags",
+        "Revenue":"Revenue:",
+        "Budget":"Budget:",
+        "Keywords":"Keywords/Tags:",
         "Casts": {
             "CastTitle": "Cast"
         },
@@ -297,7 +311,10 @@
         "RadarrConfiguration": "Radarr Configuration",
         "RequestOnBehalf": "Request on behalf of",
         "PleaseSelectUser": "Please select a user",
-        "StreamingOn": "Streaming On",
+        "StreamingOn": "Streaming On:",
+        "RequestedBy": "Requested By:",
+        "RequestDate": "Request Date:",
+        "DeniedReason": "Denied Reason:",
         "ReProcessRequest": "Re-Process Request"
     },
     "Discovery": {