refactor: localization of home module

src/app/home/file-upload/file-upload.component.html

@@ -6,8 +6,8 @@
     [uploadInput]="uploadInput"
 >
     <mat-icon class="upload-icon">save_alt</mat-icon>
-    <p class="upload-title">Drag & drop files here</p>
-    <p>or</p>
+    <p class="upload-title">{{ 'HOME.FILE_UPLOAD.DRAG_DROP' | translate }}</p>
+    <p>{{ 'HOME.FILE_UPLOAD.OR' | translate }}</p>
     <input
         type="file"
         ngFileSelect
@@ -19,5 +19,7 @@
         [uploadInput]="uploadInput"
         multiple
     />
-    <label for="file"> Choose a playlist </label>
+    <label for="file">{{
+        'HOME.FILE_UPLOAD.CHOOSE_PLAYLIST' | translate
+    }}</label>
 </div>

src/app/home/home.component.html

@@ -1,35 +1,57 @@
-<!-- Applications header-->
-<app-header fxLayout="row" title="IPTVnator" subtitle="Please select a playlist from the list or add a new playlist via file upload or via url"></app-header>
+<!-- Application header-->
+<app-header
+    fxLayout="row"
+    [title]="'HOME.TITLE' | translate"
+    [subtitle]="'HOME.SUBTITLE' | translate"
+></app-header>
 
 <!-- Tab-based layout -->
 <div fxLayout="row" fxFlexAlign="start start">
     <div fxFlex="100">
-        <mat-tab-group [dynamicHeight]="true" color="primary" backgroundColor="primary" mat-stretch-tabs>
+        <mat-tab-group
+            [dynamicHeight]="true"
+            color="primary"
+            backgroundColor="primary"
+            mat-stretch-tabs
+        >
             <mat-tab>
                 <ng-template mat-tab-label>
-                    <mat-icon class="tab-icon">list</mat-icon> Recently added playlists
+                    <mat-icon class="tab-icon">list</mat-icon>
+                    {{ 'HOME.TABS.RECENTLY_ADDED' | translate }}
                 </ng-template>
-                <app-recent-playlists [playlists]="playlists" (playlistClicked)="getPlaylist($event)"
-                    (removeClicked)="removePlaylist($event)">
+                <app-recent-playlists
+                    [playlists]="playlists"
+                    (playlistClicked)="getPlaylist($event)"
+                    (removeClicked)="removePlaylist($event)"
+                >
                 </app-recent-playlists>
             </mat-tab>
             <mat-tab>
                 <ng-template mat-tab-label>
-                    <mat-icon class="tab-icon">attach_file</mat-icon> Add via file upload
+                    <mat-icon class="tab-icon">attach_file</mat-icon>
+                    {{ 'HOME.TABS.FILE_UPLOAD' | translate }}
                 </ng-template>
                 <ng-template matTabContent>
-                    <app-file-upload (fileRejected)="rejectFile($event)" (fileSelected)="handlePlaylist($event)"></app-file-upload>
+                    <app-file-upload
+                        (fileRejected)="rejectFile($event)"
+                        (fileSelected)="handlePlaylist($event)"
+                    ></app-file-upload>
                 </ng-template>
             </mat-tab>
             <mat-tab>
                 <ng-template mat-tab-label>
-                    <mat-icon class="tab-icon">link</mat-icon> Add via URL
+                    <mat-icon class="tab-icon">link</mat-icon>
+                    {{ 'HOME.TABS.URL_UPLOAD' | translate }}
                 </ng-template>
                 <ng-template matTabContent>
-                    <app-url-upload (urlAdded)="sendPlaylistsUrl($event)"></app-url-upload>
+                    <app-url-upload
+                        (urlAdded)="sendPlaylistsUrl($event)"
+                    ></app-url-upload>
                 </ng-template>
             </mat-tab>
         </mat-tab-group>
     </div>
 </div>
-<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
+
+<!-- Loading spinner -->
+<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>

src/app/home/recent-playlists/playlist-info/playlist-info.component.html

@@ -1,24 +1,34 @@
-<h2 mat-dialog-title>Playlist details</h2>
+<h2 mat-dialog-title>
+    {{ 'HOME.PLAYLISTS.INFO_DIALOG.PLAYLIST_DETAILS' | translate }}
+</h2>
 <mat-dialog-content class="mat-typography">
     <mat-form-field class="full-width">
-        <mat-label>Title</mat-label>
+        <mat-label>{{
+            'HOME.PLAYLISTS.INFO_DIALOG.TITLE' | translate
+        }}</mat-label>
         <input matInput [value]="playlist.title" disabled="true" />
     </mat-form-field>
     <mat-form-field class="full-width" *ngIf="playlist.url">
-        <mat-label>Added from the URL</mat-label>
+        <mat-label>{{
+            'HOME.PLAYLISTS.INFO_DIALOG.FROM_URL' | translate
+        }}</mat-label>
         <input matInput [value]="playlist.url" disabled="true" />
     </mat-form-field>
     <mat-form-field class="full-width">
-        <mat-label>Import date</mat-label>
+        <mat-label>{{
+            'HOME.PLAYLISTS.INFO_DIALOG.IMPORT_DATE' | translate
+        }}</mat-label>
         <input matInput [value]="playlist.importDate | date" disabled="true" />
     </mat-form-field>
     <mat-form-field class="full-width">
-        <mat-label>Number of channels</mat-label>
+        <mat-label>{{
+            'HOME.PLAYLISTS.INFO_DIALOG.CHANNELS' | translate
+        }}</mat-label>
         <input matInput [value]="playlist.count" disabled="true" />
     </mat-form-field>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
     <button mat-button mat-dialog-close cdkFocusInitial color="primary">
-        CLOSE
+        {{ 'HOME.PLAYLISTS.INFO_DIALOG.CLOSE' | translate }}
     </button>
 </mat-dialog-actions>

src/app/home/recent-playlists/recent-playlists.component.html

@@ -1,9 +1,9 @@
 <mat-nav-list>
     <mat-list-item *ngIf="playlists.length === 0">
         <mat-icon mat-list-icon>cloud</mat-icon>
-        <div mat-line>No playlists were added</div>
+        <div mat-line>{{ 'HOME.PLAYLISTS.NO_PLAYLISTS' | translate }}</div>
         <div mat-line class="meta">
-            Please add your first playlist from the other tab
+            {{ 'HOME.PLAYLISTS.ADD_FIRST' | translate }}
         </div>
     </mat-list-item>
     <a
@@ -14,27 +14,30 @@
         <mat-icon
             mat-list-icon
             *ngIf="item?.url"
-            matTooltip="Added via URL upload. URL: {{ item?.url }}"
+            [matTooltip]="
+                ('HOME.PLAYLISTS.ADDED_VIA_URL' | translate) + ' ' + item?.url
+            "
             >cloud</mat-icon
         >
         <mat-icon
             mat-list-icon
             *ngIf="!item?.url"
-            matTooltip="Added via file upload"
+            [matTooltip]="'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate"
             >folder</mat-icon
         >
         <div mat-line>{{ item.title || item.filename }}</div>
         <div mat-line class="meta">
-            Channels: {{ item.count }}
+            {{ 'HOME.PLAYLISTS.CHANNELS' | translate }}: {{ item.count }}
             <ng-container *ngIf="item.importDate?.length > 3">
-                | Added: {{ item.importDate | date }}
+                | {{ 'HOME.PLAYLISTS.ADDED' | translate }}:
+                {{ item.importDate | date }}
             </ng-container>
         </div>
         <button
             mat-icon-button
             color="primary"
             (click)="$event.stopPropagation(); openInfoDialog(item)"
-            matTooltip="Show playlist details"
+            [matTooltip]="'HOME.PLAYLISTS.SHOW_DETAILS' | translate"
         >
             <mat-icon>info</mat-icon>
         </button>
@@ -42,7 +45,7 @@
             mat-icon-button
             color="primary"
             (click)="$event.stopPropagation(); removeClicked.emit(item._id)"
-            matTooltip="Remove playlist"
+            [matTooltip]="'HOME.PLAYLISTS.REMOVE' | translate"
         >
             <mat-icon>delete</mat-icon>
         </button>

src/app/home/url-upload/url-upload.component.html

@@ -3,7 +3,7 @@
         <input
             type="url"
             matInput
-            placeholder="Playlist URL (m3u, m3u8)"
+            [placeholder]="'HOME.URL_UPLOAD.PLAYLIST_URL' | translate"
             formControlName="playlistUrl"
         />
     </mat-form-field>
@@ -13,6 +13,6 @@
         color="primary"
         type="submit"
     >
-        Add playlist
+        {{ 'HOME.URL_UPLOAD.ADD_PLAYLIST' | translate }}
     </button>
 </form>

src/assets/i18n/en.json

@@ -1,8 +1,38 @@
 {
-  "PAGES": {
     "HOME": {
-      "TITLE": "App works !",
-      "GO_TO_DETAIL": "Go to Detail"
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "Please select a playlist from the list or add a new playlist via file upload or via url",
+        "TABS": {
+            "RECENTLY_ADDED": "Recently added playlists",
+            "FILE_UPLOAD": "Add via file upload",
+            "URL_UPLOAD": "Add via URL"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "No playlists were added",
+            "ADD_FIRST": "Please add your first playlist from the other tab",
+            "ADDED_VIA_URL": "Added via URL upload. URL:",
+            "ADDED_VIA_FILE": "Added via file upload",
+            "CHANNELS": "Channels",
+            "ADDED": "Added",
+            "SHOW_DETAILS": "Show playlist details",
+            "REMOVE": "Remove playlist",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "Playlist details",
+                "TITLE": "Title",
+                "FROM_URL": "Added from the URL",
+                "IMPORT_DATE": "Import date",
+                "CHANNELS": "Number of channels",
+                "CLOSE": "Close"
+            }
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "Drag & drop files here",
+            "OR": "or",
+            "CHOOSE_PLAYLIST": "Choose a playlist"
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "Playlist URL (m3u, m3u8)",
+            "ADD_PLAYLIST": "Add playlist"
+        }
     }
-  }
 }