x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-11 11:06:16 -08:00
Code Issues Packages Projects Releases Wiki Activity

fix: refactor sidebar component for improved layout and responsiveness

Browse Source
This commit is contained in:
4gray committed 2025-03-10 22:32:13 +01:00
1 parent ef2b42f3f7
commit 820ef1145a
3 files changed
+66 -84
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/player/components/video-player/sidebar/sidebar.component.html
+32 -32
View File
@@ -1,33 +1,35 @@
<div id="playlists-navigation">
<div class="current-playlist">
<div class="left">
<button mat-icon-button matTooltip="Back" (click)="goBack()">
<mat-icon>arrow_back_ios</mat-icon>
</button>
<div class="playlist-info">
<div class="name">
@if (sidebarView === 'CHANNELS') {
{{ playlistTitle$ | async }}
} @else {
{{ 'HOME.PLAYLISTS.MY_PLAYLISTS' | translate }}
}
</div>
<div class="channels-count">
{{
sidebarView === 'CHANNELS'
? channels?.length +
' ' +
('HOME.PLAYLISTS.CHANNELS' | translate)
: ('HOME.PLAYLISTS.MY_PLAYLISTS_SUBTITLE'
| translate)
}}
</div>
</div>
</div>
<div class="current-playlist">
<div class="left">
<button
mat-icon-button
[matTooltip]="'SETTINGS.BACK_TO_HOME' | translate"
(click)="goBack()"
>
<mat-icon>arrow_back_ios</mat-icon>
</button>
<div class="playlist-info">
<div class="name">
@if (sidebarView === 'CHANNELS') {
{{ playlistTitle$ | async }}
} @else {
{{ 'HOME.PLAYLISTS.MY_PLAYLISTS' | translate }}
}
</div>
<div class="channels-count">
{{
sidebarView === 'CHANNELS'
? channels()?.length +
' ' +
('HOME.PLAYLISTS.CHANNELS' | translate)
: ('HOME.PLAYLISTS.MY_PLAYLISTS_SUBTITLE' | translate)
}}
</div>
</div>
</div>
@if (sidebarView === 'CHANNELS') {
<button
mat-icon-button
*ngIf="sidebarView === 'CHANNELS'"
routerLink="/"
[matTooltip]="
'CHANNELS.UPLOAD_OR_SELECT_OTHER_PLAYLIST' | translate
@@ -35,16 +37,14 @@
>
<mat-icon>playlist_add</mat-icon>
</button>
</div>
}
</div>
<!-- <mat-divider /> -->
@if (sidebarView === 'CHANNELS') {
<app-channel-list-container [channelList]="channels" />
<app-channel-list-container [channelList]="channels()" />
} @else {
<app-recent-playlists
class="recent-playlists"
[sidebarMode]="true"
[class.electron]="dataService.isElectron"
(playlistClicked)="selectPlaylist()"
/>
}
src/app/player/components/video-player/sidebar/sidebar.component.scss
+20 -28
View File
@@ -1,32 +1,28 @@
#playlists-navigation {
.current-playlist {
display: flex;
align-items: center;
padding: 8px;
justify-content: space-between;
.current-playlist {
.left {
display: flex;
align-items: center;
padding: 8px;
justify-content: space-between;
gap: 5px;
}
}
.left {
display: flex;
gap: 5px;
}
.playlist-info {
flex: 1;
max-width: 300px;
.name {
font-size: 1.1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.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;
}
.channels-count {
font-size: 0.8em;
}
}
@@ -36,10 +32,6 @@
width: 100%;
}
.electron {
height: calc(100vh - 85px) !important;
}
@media only screen and (max-width: 480px) {
.playlist-info {
.name {
src/app/player/components/video-player/sidebar/sidebar.component.ts
+14 -24
View File
@@ -1,15 +1,13 @@
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 { AsyncPipe } from '@angular/common';
import { Component, inject, input } from '@angular/core';
import { MatIconButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { MatTooltip } from '@angular/material/tooltip';
import { Router, RouterLink } from '@angular/router';
import { Store } from '@ngrx/store';
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';
import * as PlaylistActions from '../../../../state/actions';
import { selectPlaylistTitle } from '../../../../state/selectors';
import { SidebarView } from '../video-player.component';
@@ -21,32 +19,24 @@ import { ChannelListContainerComponent } from './../../channel-list-container/ch
imports: [
AsyncPipe,
ChannelListContainerComponent,
MatButtonModule,
MatDividerModule,
MatIconModule,
MatTooltipModule,
NgIf,
MatIcon,
MatIconButton,
MatTooltip,
RecentPlaylistsComponent,
TranslatePipe,
RouterLink,
TranslatePipe,
],
})
export class SidebarComponent {
@Input() channels: Channel[] = [];
readonly channels = input<Channel[]>([]);
isElectron = this.dataService.isElectron;
playlistTitle$ = this.store.select(selectPlaylistTitle);
private readonly router = inject(Router);
private readonly store = inject(Store);
readonly playlistTitle$ = this.store.select(selectPlaylistTitle);
sidebarView: SidebarView = 'CHANNELS';
constructor(
public dataService: DataService,
private router: Router,
private store: Store
) {}
goBack(): void {
goBack() {
if (this.sidebarView === 'PLAYLISTS') {
this.store.dispatch(PlaylistActions.resetActiveChannel());
this.router.navigate(['/']);