refactor: finalize localization

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "i18n-ally.localesPaths": "src/assets/i18n"
+    "i18n-ally.localesPaths": "src/assets/i18n",
+    "i18n-ally.keystyle": "nested"
 }

src/app/player/components/channel-list-container/channel-list-container.component.html

@@ -1,17 +1,21 @@
 <mat-tab-group>
-    <mat-tab label="All channels">
+    <mat-tab [label]="'CHANNELS.ALL_CHANNELS' | translate">
         <mat-list id="top-panel">
             <mat-list-item>
                 <input
                     class="full-width search-bar"
                     #search
-                    placeholder="Search channel ({{ _channelList?.length }})"
+                    placeholder="{{ 'CHANNELS.SEARCH_CHANNEL' | translate }} ({{
+                        _channelList?.length
+                    }})"
                     [(ngModel)]="searchTerm.name"
                 />
                 <button
                     mat-icon-button
                     routerLink="/"
-                    matTooltip="Upload or select other playlist"
+                    [matTooltip]="
+                        'CHANNELS.UPLOAD_OR_SELECT_OTHER_PLAYLIST' | translate
+                    "
                 >
                     <mat-icon>create_new_folder</mat-icon>
                 </button>
@@ -29,7 +33,10 @@
                     (click)="selectChannel(channel)"
                 >
                     <p matLine>
-                        {{ i + 1 + '. ' + channel?.name || 'Unnamed Channel' }}
+                        {{
+                            i + 1 + '. ' + channel?.name ||
+                                ('CHANNELS.UNNAMED_CHANNEL' | translate)
+                        }}
                     </p>
                     <mat-divider></mat-divider>
                 </mat-list-item>
@@ -37,7 +44,7 @@
         </mat-nav-list>
     </mat-tab>
 
-    <mat-tab label="Groups">
+    <mat-tab [label]="'CHANNELS.GROUPS' | translate">
         <mat-nav-list id="groups-list">
             <mat-accordion multi>
                 <ng-container *ngFor="let groups of groupedChannels | keyvalue">
@@ -45,9 +52,11 @@
                         <mat-expansion-panel-header
                             *ngIf="groups.value.length > 0"
                         >
-                            {{ groups.key || 'Ungrouped' | titlecase }} ({{
-                                groups.value.length
-                            }})
+                            {{
+                                groups.key || ('CHANNELS.UNGROUPED' | translate)
+                                    | titlecase
+                            }}
+                            ({{ groups.value.length }})
                         </mat-expansion-panel-header>
                         <ng-template matExpansionPanelContent>
                             <mat-list-item
@@ -58,7 +67,8 @@
                                 <p matLine>
                                     {{
                                         i + 1 + '. ' + channel?.name ||
-                                            'Unnamed Channel'
+                                            ('CHANNELS.UNNAMED_CHANNEL'
+                                                | translate)
                                     }}
                                 </p>
                                 <mat-divider></mat-divider>
@@ -70,7 +80,7 @@
         </mat-nav-list>
     </mat-tab>
 
-    <mat-tab label="Favorites">
+    <mat-tab [label]="'CHANNELS.FAVORITES' | translate">
         <mat-nav-list
             *ngIf="favorites$ | async as favorites"
             id="favorites-list"
@@ -85,12 +95,15 @@
                     (click)="selectChannel(channel)"
                 >
                     <p matLine>
-                        {{ i + 1 + '. ' + channel?.name || 'Unnamed Channel' }}
+                        {{
+                            i + 1 + '. ' + channel?.name ||
+                                ('CHANNELS.UNNAMED_CHANNEL' | translate)
+                        }}
                     </p>
                     <button
                         mat-icon-button
                         color="primary"
-                        matTooltip="Remove from favorites"
+                        [matTooltip]="'CHANNELS.REMOVE_FAVORITE' | translate"
                         (click)="toggleFavoriteChannel(channel, $event)"
                     >
                         <mat-icon>star</mat-icon>
@@ -99,10 +112,15 @@
                 </mat-list-item>
             </ng-container>
             <ng-template #noFavorites>
-                <mat-list-item><strong>No favorites yet</strong></mat-list-item>
+                <mat-list-item
+                    ><strong>{{
+                        'CHANNELS.NO_FAVORITES' | translate
+                    }}</strong></mat-list-item
+                >
                 <mat-list-item>
-                    Please use the "star" icon to add channels to this
-                    list.</mat-list-item
+                    {{
+                        'CHANNELS.USE_STAR_TO_FAVORITE' | translate
+                    }}</mat-list-item
                 >
             </ng-template>
         </mat-nav-list>

src/app/player/components/channel-list-container/channel-list-container.component.spec.ts

@@ -1,3 +1,4 @@
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslatePipe } from '@ngx-translate/core';
 /* eslint-disable @typescript-eslint/unbound-method */
 import { ComponentFixture, TestBed } from '@angular/core/testing';
@@ -48,6 +49,7 @@ describe('ChannelListContainerComponent', () => {
                 MockModule(MatListModule),
                 MockModule(ScrollingModule),
                 MockModule(MatTabsModule),
+                MockModule(MatTooltipModule),
                 MockModule(MatExpansionModule),
                 FormsModule,
                 RouterTestingModule,

src/app/player/components/epg-list/epg-list.component.html

@@ -15,7 +15,9 @@
                 </div>
                 <div class="program-name">
                     {{
-                        playingNow ? playingNow.title[0]?.value : 'Live stream'
+                        playingNow
+                            ? playingNow.title[0]?.value
+                            : ('EPG.LIVE_STREAM' | translate)
                     }}
                 </div>
             </div>
@@ -25,7 +27,7 @@
                 fxFlex="40px"
                 mat-icon-button
                 (click)="changeDate('prev')"
-                matTooltip="Previous day"
+                [matTooltip]="'EPG.PREVIOUS_DAY' | translate"
             >
                 <mat-icon>chevron_left</mat-icon>
             </button>
@@ -40,7 +42,7 @@
                 fxFlex="40px"
                 mat-icon-button
                 (click)="changeDate('next')"
-                matTooltip="Next day"
+                [matTooltip]="'EPG.NEXT_DAY' | translate"
             >
                 <mat-icon>chevron_right</mat-icon>
             </button>
@@ -82,7 +84,7 @@
                     <span
                         *ngIf="timeNow >= item.start && timeNow <= item.stop"
                         class="live badge"
-                        matTooltip="Live now"
+                        [matTooltip]="'EPG.LIVE_NOW' | translate"
                         >live</span
                     >
                     <span
@@ -92,7 +94,7 @@
                             item.start > timeshiftUntil
                         "
                         class="rec badge"
-                        matTooltip="Timeshift is available, click to play"
+                        [matTooltip]="'EPG.TIMESHIFT_AVAILABLE' | translate"
                         >r</span
                     >
                 </div>
@@ -101,10 +103,9 @@
             </mat-list-option>
         </ng-container>
         <ng-template #epgNotAvailable>
-            <mat-list-option
-                >Ooops, EPG is not available for the selected
-                date</mat-list-option
-            >
+            <mat-list-option>{{
+                'EPG.EPG_NOT_AVAILABLE_DATE' | translate
+            }}</mat-list-option>
         </ng-template>
     </mat-selection-list>
 </ng-container>
@@ -112,8 +113,8 @@
 <ng-template #noEpg>
     <mat-list>
         <mat-list-item>
-            Ooops, EPG is not available for this channel.<br />
-            Please add/change the url of EPG list the settings of the app.
+            {{ 'EPG.EPG_NOT_AVAILABLE_CHANNEL_TITLE' | translate }}<br />
+            {{ 'EPG.EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION' | translate }}
         </mat-list-item>
     </mat-list>
 </ng-template>

src/app/player/components/epg-list/epg-list.component.spec.ts

@@ -1,3 +1,5 @@
+import { TranslatePipe } from '@ngx-translate/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
 /* eslint-disable @typescript-eslint/unbound-method */
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { EpgListComponent, EpgData } from './epg-list.component';
@@ -84,8 +86,16 @@ describe('EpgListComponent', () => {
     beforeEach(
         waitForAsync(() => {
             TestBed.configureTestingModule({
-                declarations: [EpgListComponent, MockPipe(MomentDatePipe)],
-                imports: [MockModule(MatIconModule), MockModule(MatListModule)],
+                declarations: [
+                    EpgListComponent,
+                    MockPipe(MomentDatePipe),
+                    MockPipe(TranslatePipe),
+                ],
+                imports: [
+                    MockModule(MatIconModule),
+                    MockModule(MatTooltipModule),
+                    MockModule(MatListModule),
+                ],
                 providers: [
                     { provide: ElectronService, useClass: ElectronServiceStub },
                 ],

src/app/player/components/html-video-player/html-video-player.component.spec.ts

@@ -1,3 +1,5 @@
+import { MockPipe } from 'ng-mocks';
+import { TranslatePipe } from '@ngx-translate/core';
 /* eslint-disable @typescript-eslint/unbound-method */
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SimpleChange } from '@angular/core';
@@ -16,11 +18,16 @@ describe('HtmlVideoPlayerComponent', () => {
         },
     };
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [HtmlVideoPlayerComponent],
-        }).compileComponents();
-    }));
+    beforeEach(
+        waitForAsync(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    HtmlVideoPlayerComponent,
+                    MockPipe(TranslatePipe),
+                ],
+            }).compileComponents();
+        })
+    );
 
     beforeEach(() => {
         fixture = TestBed.createComponent(HtmlVideoPlayerComponent);

src/app/player/components/video-player/video-player.component.html

@@ -20,14 +20,14 @@
                 <button
                     mat-icon-button
                     (click)="drawer.toggle()"
-                    matTooltip="Open channels list"
+                    [matTooltip]="'TOP_MENU.OPEN_CHANNELS_LIST' | translate"
                 >
                     <mat-icon>menu</mat-icon>
                 </button>
                 <button
                     mat-icon-button
                     (click)="addToFavorites(activeChannel)"
-                    matTooltip="Toggle favorite flag"
+                    [matTooltip]="'TOP_MENU.TOGGLE_FAVORITE_FLAG' | translate"
                 >
                     <mat-icon>
                         {{
@@ -43,7 +43,7 @@
                     *ngIf="epgAvailable$ | async"
                     mat-button
                     (click)="drawerRight.toggle()"
-                    matTooltip="Open EPG list"
+                    [matTooltip]="'TOP_MENU.OPEN_EPG_LIST' | translate"
                 >
                     EPG
                 </button>

src/app/settings/settings.component.ts

@@ -1,3 +1,4 @@
+import { TranslateService } from '@ngx-translate/core';
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { StorageMap } from '@ngx-pwa/local-storage';
@@ -28,11 +29,11 @@ export class SettingsComponent implements OnInit, OnDestroy {
     players = [
         {
             id: 'html5',
-            label: ' HTML5 Video Player',
+            label: 'HTML5 Video Player',
         },
         {
             id: 'videojs',
-            label: ' VideoJs Player',
+            label: 'VideoJs Player',
         },
     ];
 
@@ -67,7 +68,8 @@ export class SettingsComponent implements OnInit, OnDestroy {
         private http: HttpClient,
         private router: Router,
         private snackBar: MatSnackBar,
-        private storage: StorageMap
+        private storage: StorageMap,
+        private translate: TranslateService
     ) {
         this.settingsForm = this.formBuilder.group({
             player: ['videojs'], // default value
@@ -85,9 +87,15 @@ export class SettingsComponent implements OnInit, OnDestroy {
                     );
 
                     if (isOutdated) {
-                        this.updateMessage = `There is a new version available: ${response.version}`;
+                        this.updateMessage = `${
+                            this.translate.instant(
+                                'SETTINGS.NEW_VERSION_AVAILABLE'
+                            ) as string
+                        }: ${response.version}`;
                     } else {
-                        this.updateMessage = 'You are using the latest version';
+                        this.updateMessage = this.translate.instant(
+                            'SETTINGS.LATEST_VERSION'
+                        );
                     }
                 })
         );

src/app/settings/settings.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SettingsComponent } from './settings.component';
 import { SettingsRoutingModule } from './settings.routing';
-import { SharedModule } from 'app/shared/shared.module';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
     imports: [CommonModule, SettingsRoutingModule, SharedModule],

src/assets/i18n/en.json

@@ -46,6 +46,35 @@
         "VIDEO_PLAYER_PLACEHOLDER": "Select an option",
         "VERSION": "Version",
         "SAVE_CHANGES": "Save changes",
-        "BACK_TO_HOME": "Back to home"
+        "BACK_TO_HOME": "Back to home",
+        "NEW_VERSION_AVAILABLE": "There is a new version available",
+        "LATEST_VERSION": "You are using the latest version"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "Search channel",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Upload or select other playlist",
+        "ALL_CHANNELS": "All channels",
+        "GROUPS": "Groups",
+        "UNGROUPED": "Ungrouped",
+        "UNNAMED_CHANNEL": "Unnamed Channel",
+        "FAVORITES": "Favorites",
+        "NO_FAVORITES": "No favorites yet",
+        "USE_STAR_TO_FAVORITE": "Please use the 'star' icon to add channels to this list.",
+        "REMOVE_FAVORITE": "Remove from favorites"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "Open channels list",
+        "TOGGLE_FAVORITE_FLAG": "Toggle favorite flag",
+        "OPEN_EPG_LIST": "Open EPG list"
+    },
+    "EPG": {
+        "NEXT_DAY": "Next day",
+        "PREVIOUS_DAY": "Previous day",
+        "LIVE_NOW": "Live now",
+        "LIVE_STREAM": "Live stream",
+        "TIMESHIFT_AVAILABLE": "Timeshift is available, click to play",
+        "EPG_NOT_AVAILABLE_DATE": "Ooops, EPG is not available for the selected date",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Ooops, EPG is not available for this channel.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Please add/change the url of EPG list the settings of the app."
     }
 }