From 05f2ca1eb4ddb8e814647a18eba87dda6a2b9f80 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Thu, 28 Nov 2024 23:31:25 +0100
Subject: [PATCH] feat(toolbar): add settings and update toolbar buttons

Inject MatDialog into ToolbarComponent and implement openSettings
method to display the SettingsComponent. Update the toolbar HTML
to include a settings button and conditionally render the favorite
button based on the playlist ID. Enhance VideoPlayerComponent
to react to settings changes by integrating SettingsStore.
---
 .../toolbar/toolbar.component.html            | 34 ++++++++++++-------
 .../video-player/toolbar/toolbar.component.ts | 14 +++++++-
 .../video-player/video-player.component.ts    | 13 ++++++-
 3 files changed, 46 insertions(+), 15 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 4ba9644bf..a2e1933e1 100644
--- a/src/app/player/components/video-player/toolbar/toolbar.component.html
+++ b/src/app/player/components/video-player/toolbar/toolbar.component.html
@@ -7,22 +7,30 @@
     >
         <mat-icon>menu</mat-icon>
     </button>
-    <button
-        *ngIf="(playlistId$ | async) !== 'GLOBAL_FAVORITES'"
-        mat-icon-button
-        (click)="addToFavorites(activeChannel)"
-        [matTooltip]="'TOP_MENU.TOGGLE_FAVORITE_FLAG' | translate"
-    >
-        <mat-icon>
-            {{
-                (favorites$ | async).includes(activeChannel?.id)
-                    ? 'star'
-                    : 'star_outline'
-            }}</mat-icon
+    @if ((playlistId$ | async) !== 'GLOBAL_FAVORITES') {
+        <button
+            mat-icon-button
+            (click)="addToFavorites(activeChannel)"
+            [matTooltip]="'TOP_MENU.TOGGLE_FAVORITE_FLAG' | translate"
         >
-    </button>
+            <mat-icon>
+                {{
+                    (favorites$ | async).includes(activeChannel?.id)
+                        ? 'star'
+                        : 'star_outline'
+                }}</mat-icon
+            >
+        </button>
+    }
     {{ activeChannel?.name }}
     <div class="spacer"></div>
+    <button
+        mat-icon-button
+        (click)="openSettings()"
+        [matTooltip]="'MENU.SETTINGS' | translate"
+    >
+        <mat-icon>settings</mat-icon>
+    </button>
     @let isEpgAvailable = isEpgAvailable$ | async;
     @if (isEpgAvailable) {
         <button
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 7eea32a36..592300a8f 100644
--- a/src/app/player/components/video-player/toolbar/toolbar.component.ts
+++ b/src/app/player/components/video-player/toolbar/toolbar.component.ts
@@ -1,6 +1,7 @@
 import { AsyncPipe, CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { MatButtonModule } 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 { MatToolbarModule } from '@angular/material/toolbar';
@@ -8,6 +9,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { Store } from '@ngrx/store';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { Channel } from '../../../../../../shared/channel.interface';
+import { SettingsComponent } from '../../../../settings/settings.component';
 import { updateFavorites } from '../../../../state/actions';
 import {
     selectActivePlaylistId,
@@ -25,6 +27,7 @@ import {
         MatToolbarModule,
         MatTooltipModule,
         TranslateModule,
+        MatDialogModule,
     ],
     selector: 'app-toolbar',
     templateUrl: './toolbar.component.html',
@@ -43,7 +46,8 @@ export class ToolbarComponent {
     constructor(
         private snackBar: MatSnackBar,
         private store: Store,
-        private translateService: TranslateService
+        private translateService: TranslateService,
+        private dialog: MatDialog
     ) {}
 
     /**
@@ -58,4 +62,12 @@ export class ToolbarComponent {
         );
         this.store.dispatch(updateFavorites({ channel }));
     }
+
+    openSettings(): void {
+        this.dialog.open(SettingsComponent, {
+            width: '1000px',
+            height: '90%',
+            data: { isDialog: true },
+        });
+    }
 }
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 19da38575..3f0236e4f 100644
--- a/src/app/player/components/video-player/video-player.component.ts
+++ b/src/app/player/components/video-player/video-player.component.ts
@@ -8,6 +8,7 @@ import {
     NgZone,
     OnDestroy,
     OnInit,
+    effect,
 } from '@angular/core';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -25,6 +26,7 @@ import {
 import { Playlist } from '../../../../../shared/playlist.interface';
 import { DataService } from '../../../services/data.service';
 import { PlaylistsService } from '../../../services/playlists.service';
+import { SettingsStore } from '../../../services/settings-store.service';
 import { Settings, VideoPlayer } from '../../../settings/settings.interface';
 import { STORE_KEY } from '../../../shared/enums/store-keys.enum';
 import * as PlaylistActions from '../../../state/actions';
@@ -136,13 +138,22 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
         private router: Router,
         private snackBar: MatSnackBar,
         private storage: StorageMap,
-        private store: Store
+        private store: Store,
+        private settingsStore: SettingsStore
     ) {
         // Initialize volume from localStorage in constructor
         const savedVolume = localStorage.getItem('volume');
         if (savedVolume !== null) {
             this.volume = Number(savedVolume);
         }
+
+        // React to settings changes
+        effect(() => {
+            this.playerSettings = {
+                player: this.settingsStore.player(),
+                showCaptions: this.settingsStore.showCaptions(),
+            };
+        });
     }
 
     /**