feat(player): add volume control and persistence for video players

src/app/player/components/html-video-player/html-video-player.component.html

@@ -1,7 +1 @@
-<video
-    #videoPlayer
-    id="video-player"
-    autoplay="true"
-    controls="true"
-    muted="muted"
-></video>
+<video #videoPlayer id="video-player" autoplay="true" controls="true"></video>

src/app/player/components/html-video-player/html-video-player.component.ts

@@ -4,6 +4,7 @@ import {
     Input,
     OnChanges,
     OnDestroy,
+    OnInit,
     SimpleChanges,
     ViewChild,
 } from '@angular/core';
@@ -22,10 +23,11 @@ import { DataService } from '../../../services/data.service';
     styleUrls: ['./html-video-player.component.scss'],
     standalone: true,
 })
-export class HtmlVideoPlayerComponent implements OnChanges, OnDestroy {
+export class HtmlVideoPlayerComponent implements OnInit, OnChanges, OnDestroy {
     /** Channel to play  */
     @Input() channel: Channel;
     dataService: DataService; // Declare the dataService property
+    @Input() volume = 1;
 
     constructor(dataService: DataService) {
         this.dataService = dataService; // Inject the DataService
@@ -41,6 +43,12 @@ export class HtmlVideoPlayerComponent implements OnChanges, OnDestroy {
     /** Captions/subtitles indicator */
     @Input() showCaptions!: boolean;
 
+    ngOnInit() {
+        this.videoPlayer.nativeElement.addEventListener('volumechange', () => {
+            this.onVolumeChange();
+        });
+    }
+
     /**
      * Listen for component input changes
      * @param changes component changes
@@ -49,6 +57,13 @@ export class HtmlVideoPlayerComponent implements OnChanges, OnDestroy {
         if (changes.channel && changes.channel.currentValue) {
             this.playChannel(changes.channel.currentValue);
         }
+        if (changes.volume?.currentValue !== undefined) {
+            console.log(
+                'Setting HTML5 player volume to:',
+                changes.volume.currentValue
+            );
+            this.videoPlayer.nativeElement.volume = changes.volume.currentValue;
+        }
     }
 
     /**
@@ -128,9 +143,22 @@ export class HtmlVideoPlayerComponent implements OnChanges, OnDestroy {
     }
 
     /**
-     * Destroy hls instance on component destroy
+     * Save volume when user changes it
+     */
+    onVolumeChange(): void {
+        const currentVolume = this.videoPlayer.nativeElement.volume;
+        console.log('Volume changed to:', currentVolume);
+        localStorage.setItem('volume', currentVolume.toString());
+    }
+
+    /**
+     * Destroy hls instance on component destroy and clean up event listener
      */
     ngOnDestroy(): void {
+        this.videoPlayer.nativeElement.removeEventListener(
+            'volumechange',
+            this.onVolumeChange
+        );
         if (this.hls) {
             this.hls.destroy();
         }

src/app/player/components/video-player/video-player.component.html

@@ -38,13 +38,15 @@
                             },
                         ],
                     }"
+                    [volume]="volume"
                     [class.hide-captions]="!playerSettings.showCaptions"
-                ></app-vjs-player>
+                />
 
                 <!-- default html player component -->
                 <app-html-video-player
                     *ngIf="playerSettings.player === 'html5'"
                     [channel]="activeChannel"
+                    [volume]="volume"
                     [showCaptions]="playerSettings.showCaptions"
                 />
                 <div
@@ -82,12 +84,12 @@
                 <app-info-overlay
                     [channel]="activeChannel"
                     [epgProgram]="epgProgram$ | async"
-                ></app-info-overlay>
+                />
             </ng-template>
         </ng-container>
     </mat-drawer-content>
     <!-- right sidebar content -->
     <mat-drawer position="end" #drawerRight mode="side" disableClose>
-        <app-epg-list *ngIf="isElectron"></app-epg-list>
+        <app-epg-list *ngIf="isElectron" />
     </mat-drawer>
 </mat-drawer-container>

src/app/player/components/video-player/video-player.component.ts

@@ -102,6 +102,8 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
     /** EPG overlay reference */
     overlayRef: OverlayRef;
 
+    volume = 1;
+
     constructor(
         private activatedRoute: ActivatedRoute,
         private dataService: DataService,
@@ -112,7 +114,13 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
         private snackBar: MatSnackBar,
         private storage: StorageMap,
         private store: Store
-    ) {}
+    ) {
+        // Initialize volume from localStorage in constructor
+        const savedVolume = localStorage.getItem('volume');
+        if (savedVolume !== null) {
+            this.volume = Number(savedVolume);
+        }
+    }
 
     /**
      * Sets video player and subscribes to channel list from the store
@@ -137,9 +145,9 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
                                 CHANNEL_SET_USER_AGENT,
                                 playlist.userAgent
                                     ? {
-                                        referer: 'localhost',
-                                        userAgent: playlist.userAgent,
-                                    }
+                                          referer: 'localhost',
+                                          userAgent: playlist.userAgent,
+                                      }
                                     : {}
                             );
 
@@ -205,6 +213,8 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
                     player: settings.player || VideoPlayer.VideoJs,
                     showCaptions: settings.showCaptions || false,
                 };
+                // Don't override volume from settings storage anymore
+                // as we're using localStorage for volume persistence
             }
         });
     }

src/app/player/components/vjs-player/vjs-player.component.ts

@@ -31,6 +31,7 @@ export class VjsPlayerComponent implements OnInit, OnChanges, OnDestroy {
     @Input() options: videoJs.PlayerOptions;
     /** VideoJs object */
     player: videoJs.Player;
+    @Input() volume = 1;
 
     /**
      * Instantiate Video.js on component init
@@ -42,8 +43,17 @@ export class VjsPlayerComponent implements OnInit, OnChanges, OnDestroy {
                 ...this.options,
                 autoplay: true,
             },
-            function onPlayerReady() {
-                this.volume(100);
+            () => {
+                console.log(
+                    'Setting VideoJS player initial volume to:',
+                    this.volume
+                );
+                this.player.volume(this.volume);
+
+                this.player.on('volumechange', () => {
+                    const currentVolume = this.player.volume();
+                    localStorage.setItem('volume', currentVolume.toString());
+                });
             }
         );
         this.player.hlsQualitySelector({
@@ -60,6 +70,13 @@ export class VjsPlayerComponent implements OnInit, OnChanges, OnDestroy {
         if (changes.options.previousValue) {
             this.player.src(changes.options.currentValue.sources[0]);
         }
+        if (changes.volume?.currentValue !== undefined && this.player) {
+            console.log(
+                'Setting VideoJS player volume to:',
+                changes.volume.currentValue
+            );
+            this.player.volume(changes.volume.currentValue);
+        }
     }
 
     /**