refactor: code style improvements

src/app/app.component.html

@@ -5,5 +5,4 @@
     (closeModal)="setDialogVisibility(false)"
     [items]="modals"
     [options]="options"
->
-</ngx-whats-new>
+/>

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

@@ -1,9 +1,5 @@
 @if (allPlaylistsLoaded()) {
-    <mat-form-field
-        class="full-width"
-        subscriptSizing="dynamic"
-        style="border-radius: 0px"
-    >
+    <mat-form-field class="full-width search-field" subscriptSizing="dynamic">
         <input
             matInput
             #searchQuery

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

@@ -6,6 +6,10 @@
     padding: 0;
 }
 
+.search-field {
+    border-radius: 0;
+}
+
 .meta {
     font-size: 12px !important;
     color: #666;

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

@@ -61,7 +61,7 @@ export class ChannelListContainerComponent {
     @Input('channelList')
     set channelList(value: Channel[]) {
         this._channelList = value;
-        this.groupedChannels = _.groupBy(value, 'group.title');
+        this.groupedChannels = _.default.groupBy(value, 'group.title');
     }
 
     /** Object with channels sorted by groups */

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

@@ -37,7 +37,7 @@
         </button>
     </div>
 </div>
-<mat-divider></mat-divider>
+<mat-divider />
 @if (sidebarView === 'CHANNELS') {
     <app-channel-list-container [channelList]="channels" />
 } @else {

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

@@ -1,16 +1,35 @@
+import { AsyncPipe, NgIf } from '@angular/common';
 import { Component, Input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
+import { TranslateModule } 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';
 import * as PlaylistActions from '../../../../state/actions';
 import { selectPlaylistTitle } from '../../../../state/selectors';
 import { SidebarView } from '../video-player.component';
-
+import { ChannelListContainerComponent } from './../../channel-list-container/channel-list-container.component';
 @Component({
+    standalone: true,
     selector: 'app-sidebar',
     templateUrl: './sidebar.component.html',
     styleUrls: ['./sidebar.component.scss'],
+    imports: [
+        AsyncPipe,
+        ChannelListContainerComponent,
+        MatButtonModule,
+        MatDividerModule,
+        MatIconModule,
+        MatTooltipModule,
+        NgIf,
+        RecentPlaylistsComponent,
+        TranslateModule,
+    ],
 })
 export class SidebarComponent {
     @Input() channels: Channel[] = [];

src/app/player/player.module.ts

@@ -5,8 +5,6 @@ import { RouterModule, Routes } from '@angular/router';
 import { RecentPlaylistsComponent } from '../home/recent-playlists/recent-playlists.component';
 import { SharedModule } from '../shared/shared.module';
 import { AudioPlayerComponent } from './components/audio-player/audio-player.component';
-import { ChannelListContainerComponent } from './components/channel-list-container/channel-list-container.component';
-import { ChannelListItemComponent } from './components/channel-list-container/channel-list-item/channel-list-item.component';
 import { EpgItemDescriptionComponent } from './components/epg-list/epg-item-description/epg-item-description.component';
 import { EpgListItemComponent } from './components/epg-list/epg-list-item/epg-list-item.component';
 import { EpgListComponent } from './components/epg-list/epg-list.component';
@@ -23,14 +21,13 @@ const routes: Routes = [{ path: '', component: VideoPlayerComponent }];
 @NgModule({
     imports: [
         AudioPlayerComponent,
-        ChannelListContainerComponent,
-        ChannelListItemComponent,
         CommonModule,
         EpgItemDescriptionComponent,
         HtmlVideoPlayerComponent,
         OverlayModule,
         RecentPlaylistsComponent,
         RouterModule.forChild(routes),
+        SidebarComponent,
         SharedModule,
         VjsPlayerComponent,
     ],
@@ -39,7 +36,6 @@ const routes: Routes = [{ path: '', component: VideoPlayerComponent }];
         EpgListItemComponent,
         InfoOverlayComponent,
         MultiEpgContainerComponent,
-        SidebarComponent,
         ToolbarComponent,
         VideoPlayerComponent,
     ],

src/app/shared/components/header/header.component.html

@@ -163,5 +163,4 @@
     (closeModal)="setDialogVisibility(false)"
     [items]="modals"
     [options]="options"
->
-</ngx-whats-new>
+/>

src/app/shared/shared.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { NgxWhatsNewModule } from 'ngx-whats-new';
 import { MaterialModule } from '../material.module';
 import { FilterPipe } from './pipes/filter.pipe';
 import { MomentDatePipe } from './pipes/moment-date.pipe';
@@ -14,6 +15,7 @@ import { MomentDatePipe } from './pipes/moment-date.pipe';
         CommonModule,
         FormsModule,
         MaterialModule,
+        NgxWhatsNewModule,
         ReactiveFormsModule,
         TranslateModule,
         NgxSkeletonLoaderModule.forRoot({
@@ -25,6 +27,7 @@ import { MomentDatePipe } from './pipes/moment-date.pipe';
         FilterPipe,
         FormsModule,
         MaterialModule,
+        NgxWhatsNewModule,
         MomentDatePipe,
         ReactiveFormsModule,
         TranslateModule,