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.
gouwazi · Nov 28, 2024 · 05f2ca1 · 05f2ca1
1 parent 03493cc
commit 05f2ca1
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 14 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
@@ -7,22 +7,30 @@
     >
         <mat-icon>menu</mat-icon>
     </button>
+    @if ((playlistId$ | async) !== 'GLOBAL_FAVORITES') {
+        <button
+            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
+            >
+        </button>
+    }
+    {{ activeChannel?.name }}
+    <div class="spacer"></div>
     <button
-        *ngIf="(playlistId$ | async) !== 'GLOBAL_FAVORITES'"
         mat-icon-button
-        (click)="addToFavorites(activeChannel)"
-        [matTooltip]="'TOP_MENU.TOGGLE_FAVORITE_FLAG' | translate"
+        (click)="openSettings()"
+        [matTooltip]="'MENU.SETTINGS' | translate"
     >
-        <mat-icon>
-            {{
-                (favorites$ | async).includes(activeChannel?.id)
-                    ? 'star'
-                    : 'star_outline'
-            }}</mat-icon
-        >
+        <mat-icon>settings</mat-icon>
     </button>
-    {{ activeChannel?.name }}
-    <div class="spacer"></div>
     @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
@@ -1,13 +1,15 @@
 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';
 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
@@ -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(),
+            };
+        });
     }
 
     /**