chore: replace TranslateModule with TranslatePipe in multiple components

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

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, inject, Output } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { Store } from '@ngrx/store';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { isTauri } from '@tauri-apps/api/core';
 import { open } from '@tauri-apps/plugin-dialog';
 import { readTextFile } from '@tauri-apps/plugin-fs';
@@ -9,10 +9,10 @@ import { parsePlaylist } from '../../state/actions';
 import { DragDropFileUploadDirective } from './drag-drop-file-upload.directive';
 
 @Component({
-    imports: [DragDropFileUploadDirective, MatIconModule, TranslateModule],
+    imports: [DragDropFileUploadDirective, MatIconModule, TranslatePipe],
     selector: 'app-file-upload',
     templateUrl: './file-upload.component.html',
-    styleUrls: ['./file-upload.component.scss']
+    styleUrls: ['./file-upload.component.scss'],
 })
 export class FileUploadComponent {
     @Output() fileSelected = new EventEmitter<{

src/app/home/home.component.ts

@@ -3,7 +3,7 @@ import { Component, NgZone } from '@angular/core';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Store } from '@ngrx/store';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { ERROR, PLAYLIST_PARSE_RESPONSE } from '../../../shared/ipc-commands';
 import { Playlist } from '../../../shared/playlist.interface';
 import { DataService } from '../services/data.service';
@@ -20,8 +20,8 @@ import { RecentPlaylistsComponent } from './recent-playlists/recent-playlists.co
         MatProgressBarModule,
         NgIf,
         RecentPlaylistsComponent,
-        TranslateModule,
-    ]
+        TranslatePipe,
+    ],
 })
 export class HomeComponent {
     /** Loading spinner state */

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

@@ -15,7 +15,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Store } from '@ngrx/store';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { isTauri } from '@tauri-apps/api/core';
 import { firstValueFrom } from 'rxjs';
 import { Playlist } from '../../../../../shared/playlist.interface';
@@ -37,15 +37,15 @@ import { XtreamStore } from '../../../xtream-tauri/xtream.store';
     ],
     providers: [DatePipe, XtreamStore],
     imports: [
-        TranslateModule,
+        CommonModule,
         MatButtonModule,
+        MatCheckboxModule,
+        MatDialogModule,
         MatIconModule,
         MatInputModule,
-        MatCheckboxModule,
-        CommonModule,
         ReactiveFormsModule,
-        MatDialogModule,
-    ]
+        TranslatePipe,
+    ],
 })
 export class PlaylistInfoComponent {
     isTauri = isTauri();

src/app/home/recent-playlists/playlist-item/playlist-item.component.ts

@@ -11,7 +11,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import {
     PortalStatus,
     PortalStatusService,
@@ -29,7 +29,7 @@ import { PlaylistMeta } from '../../../shared/playlist-meta.type';
         MatListModule,
         MatTooltipModule,
         NgIf,
-        TranslateModule,
+        TranslatePipe,
     ],
 })
 export class PlaylistItemComponent implements OnInit {

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

@@ -20,7 +20,7 @@ import { MatListModule } from '@angular/material/list';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
 import { BehaviorSubject, combineLatest, map } from 'rxjs';
 import { GLOBAL_FAVORITES_PLAYLIST_ID } from '../../../../shared/constants';
@@ -62,7 +62,7 @@ import { PlaylistItemComponent } from './playlist-item/playlist-item.component';
         NgIf,
         NgxSkeletonLoaderComponent,
         PlaylistItemComponent,
-        TranslateModule,
+        TranslatePipe,
     ],
 })
 export class RecentPlaylistsComponent implements OnDestroy {

src/app/home/stalker-portal-import/stalker-portal-import.component.ts

@@ -10,7 +10,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { Store } from '@ngrx/store';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { v4 as uuid } from 'uuid';
 import { Playlist } from '../../../../shared/playlist.interface';
 import { DataService } from '../../services/data.service';
@@ -19,11 +19,11 @@ import { addPlaylist } from '../../state/actions';
 @Component({
     imports: [
         FormsModule,
-        ReactiveFormsModule,
+        MatButtonModule,
         MatFormFieldModule,
         MatInputModule,
-        MatButtonModule,
-        TranslateModule,
+        ReactiveFormsModule,
+        TranslatePipe,
     ],
     selector: 'app-stalker-portal-import',
     templateUrl: './stalker-portal-import.component.html',
@@ -39,7 +39,7 @@ import { addPlaylist } from '../../state/actions';
                 width: 100%;
             }
         `,
-    ]
+    ],
 })
 export class StalkerPortalImportComponent {
     @Output() addClicked = new EventEmitter<void>();

src/app/home/text-import/text-import.component.ts

@@ -5,20 +5,15 @@ import {
     ReactiveFormsModule,
     Validators,
 } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButton } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
     selector: 'app-text-import',
     templateUrl: './text-import.component.html',
     styleUrls: ['./text-import.component.scss'],
-    imports: [
-        MatButtonModule,
-        MatInputModule,
-        ReactiveFormsModule,
-        TranslateModule,
-    ]
+    imports: [MatButton, MatInputModule, ReactiveFormsModule, TranslatePipe],
 })
 export class TextImportComponent {
     @Output() textAdded = new EventEmitter<string>();

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

@@ -9,7 +9,7 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatInputModule } from '@angular/material/input';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { DataService } from '../../services/data.service';
 
 @Component({
@@ -21,8 +21,8 @@ import { DataService } from '../../services/data.service';
         MatInputModule,
         NgIf,
         ReactiveFormsModule,
-        TranslateModule,
-    ]
+        TranslatePipe,
+    ],
 })
 export class UrlUploadComponent implements OnInit {
     /** Emits url string to the parent component on form submit */

src/app/home/xtream-code-import/xtream-code-import.component.ts

@@ -11,7 +11,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { Store } from '@ngrx/store';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { v4 as uuid } from 'uuid';
 import { Playlist } from '../../../../shared/playlist.interface';
 import {
@@ -23,12 +23,12 @@ import { addPlaylist } from '../../state/actions';
 @Component({
     imports: [
         FormsModule,
-        ReactiveFormsModule,
+        MatButton,
         MatFormFieldModule,
         MatIcon,
         MatInputModule,
-        MatButton,
-        TranslateModule,
+        ReactiveFormsModule,
+        TranslatePipe,
     ],
     selector: 'app-xtream-code-import',
     templateUrl: './xtream-code-import.component.html',
@@ -72,7 +72,7 @@ import { addPlaylist } from '../../state/actions';
                 justify-content: space-between;
             }
         `,
-    ]
+    ],
 })
 export class XtreamCodeImportComponent {
     @Output() addClicked = new EventEmitter<void>();

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

@@ -16,7 +16,10 @@
 
 .search-bar {
     @include mat.form-field-density(-5);
-    width: 96%;
+    
+    & {
+        width: 96%;
+    }
 }
 
 mat-nav-list {

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

@@ -22,7 +22,7 @@ import { MatListModule } from '@angular/material/list';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { Store } from '@ngrx/store';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import * as _ from 'lodash';
 import { map, skipWhile } from 'rxjs';
 import { Channel } from '../../../../../shared/channel.interface';
@@ -54,8 +54,8 @@ import { ChannelListItemComponent } from './channel-list-item/channel-list-item.
         MatTabsModule,
         ScrollingModule,
         TitleCasePipe,
-        TranslateModule,
-    ]
+        TranslatePipe,
+    ],
 })
 export class ChannelListContainerComponent {
     /**
@@ -119,10 +119,10 @@ export class ChannelListContainerComponent {
     );
 
     constructor(
+        private readonly epgService: EpgService,
+        private readonly snackBar: MatSnackBar,
         private readonly store: Store,
-        private snackBar: MatSnackBar,
-        private translateService: TranslateService,
-        private epgService: EpgService
+        private readonly translateService: TranslateService
     ) {}
 
     /**

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

@@ -6,7 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
     selector: 'app-channel-list-item',
@@ -56,8 +56,8 @@ import { TranslateModule } from '@ngx-translate/core';
         MatIconModule,
         MatListModule,
         MatTooltipModule,
-        TranslateModule,
-    ]
+        TranslatePipe,
+    ],
 })
 export class ChannelListItemComponent {
     @Input() isDraggable = false;

src/app/player/components/epg-list/epg-item-description/epg-item-description.component.ts

@@ -2,18 +2,19 @@ import { NgIf } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { EpgProgram } from './../../../models/epg-program.model';
 
 @Component({
     selector: 'app-epg-item-description',
     templateUrl: './epg-item-description.component.html',
     styleUrls: ['./epg-item-description.component.scss'],
-    imports: [MatButtonModule, MatDialogModule, NgIf, TranslateModule]
+    imports: [MatButtonModule, MatDialogModule, NgIf, TranslatePipe],
 })
 export class EpgItemDescriptionComponent {
     /** EPG program object */
     epgProgram: EpgProgram;
+
     /**
      * Creates an instance of the component and injects the program of the clicked epg program
      * @param epgProgram epg program

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

@@ -1,17 +1,17 @@
 import { Component, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslateModule } from '@ngx-translate/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslatePipe } from '@ngx-translate/core';
 import { MomentDatePipe } from '../../../../shared/pipes/moment-date.pipe';
 import { EpgProgram } from '../../../models/epg-program.model';
 import { EpgItemDescriptionComponent } from './../epg-item-description/epg-item-description.component';
 
 @Component({
-    imports: [MomentDatePipe, MatIconModule, MatTooltipModule, TranslateModule],
+    imports: [MomentDatePipe, MatIcon, MatTooltip, TranslatePipe],
     selector: 'app-epg-list-item',
     templateUrl: './epg-list-item.component.html',
-    styleUrls: ['./epg-list-item.component.scss']
+    styleUrls: ['./epg-list-item.component.scss'],
 })
 export class EpgListItemComponent {
     /** EPG Program to render */

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

@@ -7,7 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Store } from '@ngrx/store';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import moment from 'moment';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -43,11 +43,11 @@ const DATE_FORMAT = 'YYYY-MM-DD';
         MatListModule,
         MatTooltipModule,
         MomentDatePipe,
-        TranslateModule,
+        TranslatePipe,
     ],
     selector: 'app-epg-list',
     templateUrl: './epg-list.component.html',
-    styleUrls: ['./epg-list.component.scss']
+    styleUrls: ['./epg-list.component.scss'],
 })
 export class EpgListComponent {
     /** Channel info in EPG format */

src/app/player/components/multi-epg/multi-epg-container.component.ts

@@ -14,9 +14,9 @@ import {
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslateModule } from '@ngx-translate/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslatePipe } from '@ngx-translate/core';
 import { invoke } from '@tauri-apps/api/core';
 import { addDays, differenceInMinutes, format, parse, subDays } from 'date-fns';
 import { BehaviorSubject, Observable } from 'rxjs';
@@ -42,15 +42,15 @@ interface EnrichedChannel extends EpgChannel {
     imports: [
         CommonModule,
         MatButtonModule,
-        MatIconModule,
-        MatTooltipModule,
+        MatIcon,
+        MatTooltip,
         MomentDatePipe,
-        TranslateModule,
+        TranslatePipe,
     ],
     selector: 'app-multi-epg-container',
     templateUrl: './multi-epg-container.component.html',
     styleUrls: ['./multi-epg-container.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MultiEpgContainerComponent
     implements OnInit, AfterViewInit, OnDestroy

src/app/player/components/video-player/sidebar/sidebar.component.ts

@@ -6,7 +6,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Router, RouterLink } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { Channel } from '../../../../../../shared/channel.interface';
 import { RecentPlaylistsComponent } from '../../../../home/recent-playlists/recent-playlists.component';
 import { DataService } from '../../../../services/data.service';
@@ -27,9 +27,9 @@ import { ChannelListContainerComponent } from './../../channel-list-container/ch
         MatTooltipModule,
         NgIf,
         RecentPlaylistsComponent,
-        TranslateModule,
+        TranslatePipe,
         RouterLink,
-    ]
+    ],
 })
 export class SidebarComponent {
     @Input() channels: Channel[] = [];

src/app/player/components/video-player/toolbar/toolbar.component.ts

@@ -6,7 +6,7 @@ import { MatIcon } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltip } from '@angular/material/tooltip';
 import { Store } from '@ngrx/store';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { Channel } from '../../../../../../shared/channel.interface';
 import { SettingsComponent } from '../../../../settings/settings.component';
 import { updateFavorites } from '../../../../state/actions';
@@ -25,11 +25,11 @@ import {
         MatIconButton,
         MatToolbarModule,
         MatTooltip,
-        TranslateModule,
+        TranslatePipe,
     ],
     selector: 'app-toolbar',
     templateUrl: './toolbar.component.html',
-    styleUrls: ['./toolbar.component.scss']
+    styleUrls: ['./toolbar.component.scss'],
 })
 export class ToolbarComponent {
     @Input() activeChannel!: Channel;