From 685ea8a9fd1e7bd211ec5d4cd49cab2dd0f79a41 Mon Sep 17 00:00:00 2001
From: Karthik <32044378+Karthik99999@users.noreply.github.com>
Date: Wed, 16 Feb 2022 17:46:45 -0500
Subject: [PATCH] Fix visual bug with volume sliders (#1923)

---
 js/client-topbar.js | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/js/client-topbar.js b/js/client-topbar.js
index f2eb0d86b..4938ae3ab 100644
--- a/js/client-topbar.js
+++ b/js/client-topbar.js
@@ -375,9 +375,9 @@
 		initialize: function (data) {
 			var buf = '';
 			var muted = !!Dex.prefs('mute');
-			buf += '<p class="effect-volume"><label class="optlabel">Effect volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="range" min="0" max="100" step="1" name="effectvolume" value="' + (Dex.prefs('effectvolume') || 50) + '" />') + '</p>';
-			buf += '<p class="music-volume"><label class="optlabel">Music volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="range" min="0" max="100" step="1" name="musicvolume" value="' + (Dex.prefs('musicvolume') || 50) + '" />') + '</p>';
-			buf += '<p class="notif-volume"><label class="optlabel">Notification volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="range" min="0" max="100" step="1" name="notifvolume" value="' + (Dex.prefs('notifvolume') || 50) + '" />') + '</p>';
+			buf += '<p class="effect-volume"><label class="optlabel">Effect volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="range" min="0" max="100" step="1" name="effectvolume" value="' + this.getEffectVolume() + '" />') + '</p>';
+			buf += '<p class="music-volume"><label class="optlabel">Music volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="range" min="0" max="100" step="1" name="musicvolume" value="' + this.getMusicVolume() + '" />') + '</p>';
+			buf += '<p class="notif-volume"><label class="optlabel">Notification volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="range" min="0" max="100" step="1" name="notifvolume" value="' + this.getNotifVolume() + '" />') + '</p>';
 			buf += '<p><label class="optlabel"><input type="checkbox" name="muted"' + (muted ? ' checked' : '') + ' /> Mute sounds</label></p>';
 			this.$el.html(buf).css('min-width', 160);
 		},
@@ -407,9 +407,9 @@
 			BattleSound.setMute(muted);
 
 			if (!muted) {
-				this.$('.effect-volume').html('<label class="optlabel">Effect volume:</label><input type="range" min="0" max="100" step="1" name="effectvolume" value="' + (Dex.prefs('effectvolume') || 50) + '" />');
-				this.$('.music-volume').html('<label class="optlabel">Music volume:</label><input type="range" min="0" max="100" step="1" name="musicvolume" value="' + (Dex.prefs('musicvolume') || 50) + '" />');
-				this.$('.notif-volume').html('<label class="optlabel">Notification volume:</label><input type="range" min="0" max="100" step="1" name="notifvolume" value="' + (Dex.prefs('notifvolume') || 50) + '" />');
+				this.$('.effect-volume').html('<label class="optlabel">Effect volume:</label><input type="range" min="0" max="100" step="1" name="effectvolume" value="' + this.getEffectVolume() + '" />');
+				this.$('.music-volume').html('<label class="optlabel">Music volume:</label><input type="range" min="0" max="100" step="1" name="musicvolume" value="' + this.getMusicVolume() + '" />');
+				this.$('.notif-volume').html('<label class="optlabel">Notification volume:</label><input type="range" min="0" max="100" step="1" name="notifvolume" value="' + this.getNotifVolume() + '" />');
 			} else {
 				this.$('.effect-volume').html('<label class="optlabel">Effect volume:</label><em>(muted)</em>');
 				this.$('.music-volume').html('<label class="optlabel">Music volume:</label><em>(muted)</em>');
@@ -422,12 +422,24 @@
 			BattleSound.setEffectVolume(volume);
 			Storage.prefs('effectvolume', volume);
 		},
+		getEffectVolume: function () {
+			var volume = Dex.prefs('effectvolume');
+			return typeof volume === 'number' ? volume : 50;
+		},
 		setMusicVolume: function (volume) {
 			BattleSound.setBgmVolume(volume);
 			Storage.prefs('musicvolume', volume);
 		},
+		getMusicVolume: function () {
+			var volume = Dex.prefs('musicvolume');
+			return typeof volume === 'number' ? volume : 50;
+		},
 		setNotifVolume: function (volume) {
 			Storage.prefs('notifvolume', volume);
+		},
+		getNotifVolume: function () {
+			var volume = Dex.prefs('notifvolume');
+			return typeof volume === 'number' ? volume : 50;
 		}
 	});