From 71d11da14ae3a81a91182d3a752348873d6c6f34 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Wed, 25 Dec 2024 21:02:25 +0100
Subject: [PATCH] refactor(toolbar): rename addToFavorites to
 updateFavoriteStatus and improve button structure

---
 .../toolbar/toolbar.component.html            | 16 +++----
 .../video-player/toolbar/toolbar.component.ts | 48 +++++++------------
 2 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/src/app/player/components/video-player/toolbar/toolbar.component.html b/src/app/player/components/video-player/toolbar/toolbar.component.html
index a2e1933e1..e5977b9c1 100644
--- a/src/app/player/components/video-player/toolbar/toolbar.component.html
+++ b/src/app/player/components/video-player/toolbar/toolbar.component.html
@@ -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()"
diff --git a/src/app/player/components/video-player/toolbar/toolbar.component.ts b/src/app/player/components/video-player/toolbar/toolbar.component.ts
index 592300a8f..c72e1e008 100644
--- a/src/app/player/components/video-player/toolbar/toolbar.component.ts
+++ b/src/app/player/components/video-player/toolbar/toolbar.component.ts
@@ -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%',