refactor(portals): use translation strings in vod details view

src/app/xtream/vod-details/vod-details.component.html

@@ -23,27 +23,27 @@
             {{ item.info.description }}
         </label>
         <label *ngIf="item.info.releasedate">
-            <div class="label">Release date:</div>
+            <div class="label">{{ 'XTREAM.RELEASE_DATE' | translate }}:</div>
             {{ item.info.releasedate }}
         </label>
         <label *ngIf="item.info.genre">
-            <div class="label">Genre:</div>
+            <div class="label">{{ 'XTREAM.GENRE' | translate }}:</div>
             {{ item.info.genre }}
         </label>
         <label *ngIf="item.info.country">
-            <div class="label">Country:</div>
+            <div class="label">{{ 'XTREAM.COUNTRY' | translate }}:</div>
             {{ item.info.country }}
         </label>
         <div *ngIf="item.info.actors">
-            <div class="label">Actors:</div>
+            <div class="label">{{ 'XTREAM.ACTORS' | translate }}:</div>
             {{ item.info.actors }}
         </div>
         <label *ngIf="item.info.director">
-            <div class="label">Director:</div>
+            <div class="label">{{ 'XTREAM.DIRECTOR' | translate }}:</div>
             {{ item.info.director }}
         </label>
         <label *ngIf="item.info.duration">
-            <div class="label">Duration:</div>
+            <div class="label">{{ 'XTREAM.DURATION' | translate }}:</div>
             {{ item.info.duration }}
         </label>
         <div class="action-buttons">
@@ -52,7 +52,7 @@
                 color="accent"
                 (click)="playClicked.emit(item)"
             >
-                Play</button
+                {{ 'XTREAM.PLAY' | translate }}</button
             >&nbsp;
             <button
                 *ngIf="!isFavorite; else removeFromFavoritesButton"
@@ -60,7 +60,8 @@
                 color="accent"
                 (click)="toggleFavorite()"
             >
-                <mat-icon>star_outline</mat-icon> Add to favorites
+                <mat-icon>star_outline</mat-icon>
+                {{ 'PORTALS.ADD_TO_FAVORITES' | translate }}
             </button>
 
             <ng-template #removeFromFavoritesButton>
@@ -69,7 +70,8 @@
                     color="accent"
                     (click)="toggleFavorite()"
                 >
-                    <mat-icon>star</mat-icon>Remove from favorites
+                    <mat-icon>star</mat-icon>
+                    {{ 'PORTALS.REMOVE_FROM_FAVORITES' | translate }}
                 </button>
             </ng-template>
         </div>

src/app/xtream/vod-details/vod-details.component.ts

@@ -10,6 +10,7 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 import { XtreamVodDetails } from '../../../../shared/xtream-vod-details.interface';
 import { PlaylistsService } from '../../services/playlists.service';
 
@@ -18,7 +19,7 @@ import { PlaylistsService } from '../../services/playlists.service';
     templateUrl: './vod-details.component.html',
     styleUrls: ['../detail-view.scss'],
     standalone: true,
-    imports: [MatButtonModule, NgIf, MatIconModule],
+    imports: [MatButtonModule, NgIf, MatIconModule, TranslateModule],
 })
 export class VodDetailsComponent implements OnInit {
     @Input({ required: true }) item: XtreamVodDetails;

src/assets/i18n/en.json

@@ -227,6 +227,8 @@
     },
     "PORTALS": {
         "ALL_CATEGORIES": "All categories",
-        "MY_FAVORITES": "My favorites"
+        "MY_FAVORITES": "My favorites",
+        "ADD_TO_FAVORITES": "Add to favorites",
+        "REMOVE_FROM_FAVORITES": "Remove from favorites"
     }
 }