From 352f7f08cf249445fcffdd875878307cd6acc9d2 Mon Sep 17 00:00:00 2001
From: Omkar Patil <omkar.spatil@outlook.com>
Date: Thu, 26 Dec 2024 18:24:43 +0530
Subject: [PATCH] Add feature to save user volume preference in localStorage
---
src/components/VideoPlayer2.tsx | 26 ++++++++++++++++++++++++++
1 file changed, 26 insertions(+)
diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx
index 1561175d7..146cef5e3 100644
--- a/src/components/VideoPlayer2.tsx
+++ b/src/components/VideoPlayer2.tsx
@@ -101,6 +101,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
if (!player) return;
const savedCaptionSetting = localStorage.getItem('captionSetting');
+ const savedvolumeLevel = localStorage.getItem('volumeLevel');
const tracks = player.textTracks();
if (savedCaptionSetting && player) {
@@ -114,6 +115,14 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
}
}
+ if (savedvolumeLevel) {
+ player.volume(parseFloat(savedvolumeLevel).toFixed(2));
+ } else {
+ const defaultVolume = 1;
+ player.volume(defaultVolume);
+ localStorage.setItem('volumeLevel', defaultVolume.toString());
+ }
+
const handleTrackChange = () => {
for (let i = 0; i < tracks.length; i++) {
const track = tracks[i];
@@ -125,12 +134,25 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
}
};
+ const handleVolumeChange = () => {
+ const updateVolume = () => {
+ localStorage.setItem('volumeLevel', player.volume().toFixed(2).toString());
+ };
+ player.on('volumechange', updateVolume);
+ return () => {
+ player.off('volumechange', updateVolume);
+ };
+ };
+
+ const detachVolumeChange = handleVolumeChange();
handleTrackChange();
+
return () => {
for (let i = 0; i < tracks.length; i++) {
const track = tracks[i];
track.removeEventListener('modechange', handleTrackChange);
}
+ detachVolumeChange();
};
}, [player]);
@@ -207,6 +229,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
);
}, 1000);
player.volume(VOLUME_LEVELS[newIndexUp]);
+ localStorage.setItem('volumeLevel', player.volume().toFixed(2));
event.stopPropagation();
break;
case 'ArrowDown': // Decrease volume
@@ -220,6 +243,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
);
}, 1000);
player.volume(VOLUME_LEVELS[newIndexDown]);
+ localStorage.setItem('volumeLevel', player.volume().toFixed(2));
event.stopPropagation();
break;
}
@@ -248,11 +272,13 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
case 'ArrowUp': // Arrow up for increasing volume
event.preventDefault();
player.volume(player.volume() + 0.1);
+ localStorage.setItem('volumeLevel', player.volume().toFixed(2));
event.stopPropagation();
break;
case 'ArrowDown': // Arow dowwn for decreasing volume
event.preventDefault();
player.volume(player.volume() - 0.1);
+ localStorage.setItem('volumeLevel', player.volume().toFixed(2));
event.stopPropagation();
break;
case 'KeyF': // F key for fullscreen