diff --git a/src/app/player/components/html-video-player/html-video-player.component.html b/src/app/player/components/html-video-player/html-video-player.component.html
index 2c9a82ce5..5442850b1 100644
--- a/src/app/player/components/html-video-player/html-video-player.component.html
+++ b/src/app/player/components/html-video-player/html-video-player.component.html
@@ -1,7 +1 @@
-
+
diff --git a/src/app/player/components/html-video-player/html-video-player.component.ts b/src/app/player/components/html-video-player/html-video-player.component.ts
index 0b78edc50..9624d94d3 100644
--- a/src/app/player/components/html-video-player/html-video-player.component.ts
+++ b/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();
}
diff --git a/src/app/player/components/video-player/video-player.component.html b/src/app/player/components/video-player/video-player.component.html
index fca5fff8d..327a10371 100644
--- a/src/app/player/components/video-player/video-player.component.html
+++ b/src/app/player/components/video-player/video-player.component.html
@@ -38,13 +38,15 @@
},
],
}"
+ [volume]="volume"
[class.hide-captions]="!playerSettings.showCaptions"
- >
+ />