refactor(toolbar): rename addToFavorites to updateFavoriteStatus and improve button structure

This commit is contained in:
4gray committed 2024-12-25 21:02:25 +01:00
1 parent e8062d4d68
commit 71d11da14a
2 files changed
+26 -38

No files matched your search

@@ -10,7 +10,7 @@
@if ((playlistId$ | async) !== 'GLOBAL_FAVORITES') {
<button
mat-icon-button
(click)="addToFavorites(activeChannel)"
(click)="updateFavoriteStatus(activeChannel)"
[matTooltip]="'TOP_MENU.TOGGLE_FAVORITE_FLAG' | translate"
>
<mat-icon>
@@ -31,15 +31,15 @@
>
<mat-icon>settings</mat-icon>
</button>
<button
mat-icon-button
(click)="multiEpgClicked.emit()"
[matTooltip]="'TOP_MENU.OPEN_MULTI_EPG' | translate"
>
<mat-icon>view_list</mat-icon>
</button>
@let isEpgAvailable = isEpgAvailable$ | async;
@if (isEpgAvailable) {
<button
mat-icon-button
(click)="multiEpgClicked.emit()"
[matTooltip]="'TOP_MENU.OPEN_MULTI_EPG' | translate"
>
<mat-icon>view_list</mat-icon>
</button>
<button
mat-button
(click)="toggleRightDrawerClicked.emit()"
@@ -1,13 +1,12 @@
import { AsyncPipe, CommonModule } from '@angular/common';
import { AsyncPipe } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatButton, MatIconButton } from '@angular/material/button';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatIcon } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTooltip } from '@angular/material/tooltip';
import { Store } from '@ngrx/store';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import { Channel } from '../../../../../../shared/channel.interface';
import { SettingsComponent } from '../../../../settings/settings.component';
import { updateFavorites } from '../../../../state/actions';
@@ -21,13 +20,13 @@ import {
standalone: true,
imports: [
AsyncPipe,
CommonModule,
MatIconModule,
MatButtonModule,
MatToolbarModule,
MatTooltipModule,
TranslateModule,
MatButton,
MatDialogModule,
MatIcon,
MatIconButton,
MatToolbarModule,
MatTooltip,
TranslateModule,
],
selector: 'app-toolbar',
templateUrl: './toolbar.component.html',
@@ -39,31 +38,20 @@ export class ToolbarComponent {
@Output() toggleLeftDrawerClicked = new EventEmitter<void>();
@Output() toggleRightDrawerClicked = new EventEmitter<void>();
favorites$ = this.store.select(selectFavorites);
isEpgAvailable$ = this.store.select(selectIsEpgAvailable);
playlistId$ = this.store.select(selectActivePlaylistId);
readonly favorites$ = this.store.select(selectFavorites);
readonly isEpgAvailable$ = this.store.select(selectIsEpgAvailable);
readonly playlistId$ = this.store.select(selectActivePlaylistId);
constructor(
private snackBar: MatSnackBar,
private store: Store,
private translateService: TranslateService,
private dialog: MatDialog
private readonly dialog: MatDialog,
private readonly store: Store
) {}
/**
* Adds/removes a given channel to the favorites list
* @param channel channel to add
*/
addToFavorites(channel: Channel): void {
this.snackBar.open(
this.translateService.instant('CHANNELS.FAVORITES_UPDATED'),
null,
{ duration: 2000 }
);
updateFavoriteStatus(channel: Channel) {
this.store.dispatch(updateFavorites({ channel }));
}
openSettings(): void {
openSettings() {
this.dialog.open(SettingsComponent, {
width: '1000px',
height: '90%',