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" - > + />
+ /> - + 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 cd8b14369..4e7aec970 100644 --- a/src/app/player/components/video-player/video-player.component.ts +++ b/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 } }); } diff --git a/src/app/player/components/vjs-player/vjs-player.component.ts b/src/app/player/components/vjs-player/vjs-player.component.ts index d8c032add..6f1cdc090 100644 --- a/src/app/player/components/vjs-player/vjs-player.component.ts +++ b/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); + } } /**