From 6221d3ec72d0c12df1bca93eacac35006316ae61 Mon Sep 17 00:00:00 2001 From: 4gray Date: Sat, 16 Apr 2022 22:01:26 +0200 Subject: [PATCH] style: add navigation panel for playlists view --- .../recent-playlists.component.scss | 4 ++ .../channel-list-container.component.html | 26 ---------- .../channel-list-container.component.scss | 28 ----------- .../channel-list-container.component.ts | 19 -------- .../video-player/video-player.component.html | 47 +++++++++++++++++-- .../video-player/video-player.component.scss | 39 +++++++++++++++ .../video-player/video-player.component.ts | 16 ++++++- src/app/state/channel.store.ts | 3 +- 8 files changed, 104 insertions(+), 78 deletions(-) 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, })); } }