diff --git a/src/app/home/recent-playlists/recent-playlists.component.scss b/src/app/home/recent-playlists/recent-playlists.component.scss
index 9b6590509..15fba7be3 100644
--- a/src/app/home/recent-playlists/recent-playlists.component.scss
+++ b/src/app/home/recent-playlists/recent-playlists.component.scss
@@ -1,3 +1,7 @@
+.mat-list-base {
+ padding-top: 0;
+}
+
.meta {
font-size: 12px !important;
color: #666;
diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.html b/src/app/player/components/channel-list-container/channel-list-container.component.html
index dafcab6f2..b10a8c4a9 100644
--- a/src/app/player/components/channel-list-container/channel-list-container.component.html
+++ b/src/app/player/components/channel-list-container/channel-list-container.component.html
@@ -1,29 +1,3 @@
-
-
-
-
-
{{ playlistMeta?.filename }}
-
{{ playlistMeta?.count }} channels
-
-
-
-
-
-
diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.scss b/src/app/player/components/channel-list-container/channel-list-container.component.scss
index 7f5c0a9f7..cdd9b727a 100644
--- a/src/app/player/components/channel-list-container/channel-list-container.component.scss
+++ b/src/app/player/components/channel-list-container/channel-list-container.component.scss
@@ -78,31 +78,3 @@
background-size: 10px 10px;
color: #fff;
}
-
-#playlists-navigation {
- background-color: #000;
- color: #fff;
-
- .playlist-info {
- flex: 1;
- max-width: 300px;
-
- .name {
- font-size: 1.1em;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- .channels-count {
- font-size: 0.8em;
- color: #ccc;
- }
- }
-}
-
-.current-playlist {
- display: flex;
- align-items: center;
- padding: 8px;
-}
diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.ts b/src/app/player/components/channel-list-container/channel-list-container.component.ts
index d98d17aa3..8de54395a 100644
--- a/src/app/player/components/channel-list-container/channel-list-container.component.ts
+++ b/src/app/player/components/channel-list-container/channel-list-container.component.ts
@@ -1,17 +1,14 @@
import {
Component,
ElementRef,
- EventEmitter,
HostListener,
Input,
- Output,
ViewChild,
} from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import * as _ from 'lodash';
import { Observable } from 'rxjs';
import { Channel } from '../../../../../shared/channel.interface';
-import { Playlist } from '../../../../../shared/playlist.interface';
import { ChannelQuery, ChannelStore } from '../../../state';
@Component({
@@ -35,15 +32,6 @@ export class ChannelListContainerComponent {
this.groupedChannels = _.groupBy(value, 'group.title');
}
- /** Meta information about current playlist */
- playlistMeta: Pick = {
- count: this.channelQuery.getValue().playlistCount,
- filename: this.channelQuery.getValue().playlistFilename,
- };
-
- /** Toggles the sidebar view from channels to playlists */
- @Output() changeView = new EventEmitter();
-
/** Object with channels sorted by groups */
groupedChannels: { [key: string]: Channel[] };
@@ -118,11 +106,4 @@ export class ChannelListContainerComponent {
trackByFn(index: number, channel: Channel): string {
return channel.id;
}
-
- /**
- * Emits event to the parent to toggle to the playlists overview
- */
- showPlaylists() {
- this.changeView.emit('PLAYLISTS');
- }
}
diff --git a/src/app/player/components/video-player/video-player.component.html b/src/app/player/components/video-player/video-player.component.html
index e621fe94d..83553b069 100644
--- a/src/app/player/components/video-player/video-player.component.html
+++ b/src/app/player/components/video-player/video-player.component.html
@@ -8,15 +8,56 @@
disableClose
>
+
+
+
+
+
+ {{
+ sidebarView === 'CHANNELS'
+ ? playlistTitle
+ : 'My Playlists'
+ }}
+
+
+ {{
+ sidebarView === 'CHANNELS'
+ ? channels.length + ' channels'
+ : 'all available playlists'
+ }}
+
+
+
+
+
+
+
-
-
+
diff --git a/src/app/player/components/video-player/video-player.component.scss b/src/app/player/components/video-player/video-player.component.scss
index 32fea0b6a..a823336ee 100644
--- a/src/app/player/components/video-player/video-player.component.scss
+++ b/src/app/player/components/video-player/video-player.component.scss
@@ -19,3 +19,42 @@
.spacer {
flex: 1 1 auto;
}
+
+#playlists-navigation {
+ background-color: #000;
+ color: #fff;
+
+ .current-playlist {
+ display: flex;
+ align-items: center;
+ padding: 8px;
+ }
+
+ .playlist-info {
+ flex: 1;
+ max-width: 300px;
+
+ .name {
+ font-size: 1.1em;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .channels-count {
+ font-size: 0.8em;
+ color: #ccc;
+ }
+ }
+}
+
+.recent-playlists {
+ height: calc(100vh - 60px);
+ overflow: auto;
+ width: 100%;
+ display: block;
+}
+
+.electron {
+ height: calc(100vh - 85px) !important;
+}
diff --git a/src/app/player/components/video-player/video-player.component.ts b/src/app/player/components/video-player/video-player.component.ts
index 903a565ff..455e96dbb 100644
--- a/src/app/player/components/video-player/video-player.component.ts
+++ b/src/app/player/components/video-player/video-player.component.ts
@@ -1,6 +1,7 @@
import { Component, NgZone, OnInit, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
import { StorageMap } from '@ngx-pwa/local-storage';
import { filter, Observable } from 'rxjs';
import { Channel } from '../../../../../shared/channel.interface';
@@ -63,6 +64,9 @@ export class VideoPlayerComponent implements OnInit {
/** ID of the current playlist */
playlistId = this.channelQuery.getValue().playlistId;
+ /** Title of the current playlist */
+ playlistTitle = this.channelQuery.getValue().playlistFilename;
+
/** IPC Renderer commands list with callbacks */
commandsList = [
{
@@ -87,8 +91,9 @@ export class VideoPlayerComponent implements OnInit {
constructor(
private channelQuery: ChannelQuery,
private channelStore: ChannelStore,
- private dataService: DataService,
+ public dataService: DataService,
private ngZone: NgZone,
+ private router: Router,
private snackBar: MatSnackBar,
private storage: StorageMap
) {
@@ -169,4 +174,13 @@ export class VideoPlayerComponent implements OnInit {
id: playlistId,
});
}
+
+ /** Navigates back */
+ goBack(): void {
+ if (this.sidebarView === 'PLAYLISTS') {
+ this.router.navigate(['/']);
+ } else {
+ this.sidebarView = 'PLAYLISTS';
+ }
+ }
}
diff --git a/src/app/state/channel.store.ts b/src/app/state/channel.store.ts
index 19ec2ac1a..4eaf32aef 100644
--- a/src/app/state/channel.store.ts
+++ b/src/app/state/channel.store.ts
@@ -18,6 +18,7 @@ export interface ChannelState extends EntityState {
currentEpgProgram: EpgProgram;
favorites: string[];
playlistId: string;
+ playlistFilename: string;
}
@Injectable({ providedIn: 'root' })
@@ -34,6 +35,7 @@ export class ChannelStore extends EntityStore {
epgAvailable: false,
favorites: [],
playlistId: '',
+ playlistFilename: '',
});
}
@@ -157,7 +159,6 @@ export class ChannelStore extends EntityStore {
favorites,
playlistId: playlist._id,
playlistFilename: playlist.title || playlist.filename,
- playlistCount: playlist.count,
}));
}
}