diff --git a/src/app/app.component.html b/src/app/app.component.html
index b82fe6908..e50f4028a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,5 +5,4 @@
(closeModal)="setDialogVisibility(false)"
[items]="modals"
[options]="options"
->
-
+/>
diff --git a/src/app/home/recent-playlists/recent-playlists.component.html b/src/app/home/recent-playlists/recent-playlists.component.html
index 2a2650d31..6978593bb 100644
--- a/src/app/home/recent-playlists/recent-playlists.component.html
+++ b/src/app/home/recent-playlists/recent-playlists.component.html
@@ -1,9 +1,5 @@
@if (allPlaylistsLoaded()) {
-
+
-
+
@if (sidebarView === 'CHANNELS') {
} @else {
diff --git a/src/app/player/components/video-player/sidebar/sidebar.component.ts b/src/app/player/components/video-player/sidebar/sidebar.component.ts
index edac9557f..f81f7db5d 100644
--- a/src/app/player/components/video-player/sidebar/sidebar.component.ts
+++ b/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[] = [];
diff --git a/src/app/player/player.module.ts b/src/app/player/player.module.ts
index e6147e9f6..a940def21 100644
--- a/src/app/player/player.module.ts
+++ b/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,
],
diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html
index 577bad3f7..4255420d4 100644
--- a/src/app/shared/components/header/header.component.html
+++ b/src/app/shared/components/header/header.component.html
@@ -163,5 +163,4 @@
(closeModal)="setDialogVisibility(false)"
[items]="modals"
[options]="options"
->
-
+/>
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 3763621b0..21e1eedf3 100644
--- a/src/app/shared/shared.module.ts
+++ b/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,