improved slider api

3 files changed, 40 insertions, 57 deletions

diff --git a/web/share/js/kvm/mouse.js b/web/share/js/kvm/mouse.js
index 7b50cf27..3a137957 100644
--- a/web/share/js/kvm/mouse.js
+++ b/web/share/js/kvm/mouse.js
@@ -63,20 +63,9 @@ export function Mouse(__getResolution, __recordWsEvent) {
 		$("stream-box").onwheel = __streamWheelHandler;
 		$("stream-box").ontouchstart = (event) => __streamTouchMoveHandler(event);
 
-		let rate_slider = $("hid-mouse-rate-slider");
-		tools.slider.setParams(rate_slider, 10, 100, 10, 100);
-		rate_slider.oninput = rate_slider.onchange = __updateRate;
-		tools.slider.setValue(rate_slider, tools.storage.get("hid.mouse.rate", 100));
-
-		let sens_slider = $("hid-mouse-sens-slider");
-		tools.slider.setParams(sens_slider, 0.1, 1.9, 0.1, 1);
-		sens_slider.oninput = sens_slider.onchange = __updateRelativeSens;
-		tools.slider.setValue(sens_slider, tools.storage.get("hid.mouse.sens", 1.0));
-		__updateRelativeSens();
-
 		tools.storage.bindSimpleSwitch($("hid-mouse-squash-switch"), "hid.mouse.squash", true);
-
-		__updateRate(); // set __timer
+		tools.slider.setParams($("hid-mouse-sens-slider"), 0.1, 1.9, 0.1, tools.storage.get("hid.mouse.sens", 1.0), __updateRelativeSens);
+		tools.slider.setParams($("hid-mouse-rate-slider"), 10, 100, 10, tools.storage.get("hid.mouse.rate", 100), __updateRate); // set __timer
 	};
 
 	/************************************************************************/
@@ -110,20 +99,19 @@ export function Mouse(__getResolution, __recordWsEvent) {
 		__keypad.releaseAll();
 	};
 
-	var __updateRate = function() {
-		let rate = tools.slider.getValue($("hid-mouse-rate-slider"));
-		$("hid-mouse-rate-value").innerHTML = rate;
-		tools.storage.set("hid.mouse.rate", rate);
+	var __updateRate = function(value) {
+		$("hid-mouse-rate-value").innerHTML = value;
+		tools.storage.set("hid.mouse.rate", value);
 		if (__timer) {
 			clearInterval(__timer);
 		}
-		__timer = setInterval(__sendMove, rate);
+		__timer = setInterval(__sendMove, value);
 	};
 
-	var __updateRelativeSens = function() {
-		__relative_sens = tools.slider.getValue($("hid-mouse-sens-slider"));
-		$("hid-mouse-sens-value").innerHTML = __relative_sens.toFixed(1);
-		tools.storage.set("hid.mouse.sens", __relative_sens);
+	var __updateRelativeSens = function(value) {
+		$("hid-mouse-sens-value").innerHTML = value.toFixed(1);
+		tools.storage.set("hid.mouse.sens", value);
+		__relative_sens = value;
 	};
 
 	var __streamHoveredHandler = function(hovered) {
diff --git a/web/share/js/kvm/stream.js b/web/share/js/kvm/stream.js
index c949aa65..c2784d73 100644
--- a/web/share/js/kvm/stream.js
+++ b/web/share/js/kvm/stream.js
@@ -427,14 +427,20 @@ export function Streamer() {
 
 		$("stream-led").title = "Stream inactive";
 
-		tools.slider.setParams($("stream-quality-slider"), 5, 100, 5, 80);
-		tools.slider.setOnUpDelayed($("stream-quality-slider"), 1000, __updateQualityValue, (value) => __sendParam("quality", value));
+		tools.slider.setParams($("stream-quality-slider"), 5, 100, 5, 80, function(value) {
+			$("stream-quality-value").innerHTML = `${value}%`;
+		});
+		tools.slider.setOnUpDelayed($("stream-quality-slider"), 1000, (value) => __sendParam("quality", value));
 
-		tools.slider.setParams($("stream-h264-bitrate-slider"), 100, 16000, 100, 5000);
-		tools.slider.setOnUpDelayed($("stream-h264-bitrate-slider"), 1000, __updateH264BitrateValue, (value) => __sendParam("h264_bitrate", value));
+		tools.slider.setParams($("stream-h264-bitrate-slider"), 100, 16000, 100, 5000, function(value) {
+			$("stream-h264-bitrate-value").innerHTML = value;
+		});
+		tools.slider.setOnUpDelayed($("stream-h264-bitrate-slider"), 1000, (value) => __sendParam("h264_bitrate", value));
 
-		tools.slider.setParams($("stream-desired-fps-slider"), 0, 120, 1, 0);
-		tools.slider.setOnUpDelayed($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value));
+		tools.slider.setParams($("stream-desired-fps-slider"), 0, 120, 1, 0, function(value) {
+			$("stream-desired-fps-value").innerHTML = (value === 0 ? "Unlimited" : value);
+		});
+		tools.slider.setOnUpDelayed($("stream-desired-fps-slider"), 1000, (value) => __sendParam("desired_fps", value));
 
 		$("stream-resolution-selector").onchange = (() => __sendParam("resolution", $("stream-resolution-selector").value));
 
@@ -508,17 +514,17 @@ export function Streamer() {
 
 			if (state.streamer) {
 				tools.el.setEnabled($("stream-quality-slider"), true);
-				tools.slider.setValue($("stream-quality-slider"), state.streamer.encoder.quality, __updateQualityValue);
+				tools.slider.setValue($("stream-quality-slider"), state.streamer.encoder.quality);
 
 				if (state.features.h264 && __janus_enabled) {
 					__setMinMax($("stream-h264-bitrate-slider"), state.limits.h264_bitrate);
 					tools.el.setEnabled($("stream-h264-bitrate-slider"), true);
-					tools.slider.setValue($("stream-h264-bitrate-slider"), state.streamer.h264.bitrate, __updateH264BitrateValue);
+					tools.slider.setValue($("stream-h264-bitrate-slider"), state.streamer.h264.bitrate);
 				}
 
 				__setMinMax($("stream-desired-fps-slider"), state.limits.desired_fps);
 				tools.el.setEnabled($("stream-desired-fps-slider"), true);
-				tools.slider.setValue($("stream-desired-fps-slider"), state.streamer.source.desired_fps, __updateDesiredFpsValue);
+				tools.slider.setValue($("stream-desired-fps-slider"), state.streamer.source.desired_fps);
 
 				let resolution_str = __makeStringResolution(state.streamer.source.resolution);
 				if (__makeStringResolution(__resolution) !== resolution_str) {
@@ -597,18 +603,6 @@ export function Streamer() {
 		el.max = limits.max;
 	};
 
-	var __updateQualityValue = function(value) {
-		$("stream-quality-value").innerHTML = `${value}%`;
-	};
-
-	var __updateDesiredFpsValue = function(value) {
-		$("stream-desired-fps-value").innerHTML = (value === 0 ? "Unlimited" : value);
-	};
-
-	var __updateH264BitrateValue = function(value) {
-		$("stream-h264-bitrate-value").innerHTML = value;
-	};
-
 	var __clickModeRadio = function() {
 		if (_Janus !== null) {
 			let mode = tools.radio.getValue("stream-mode-radio");
diff --git a/web/share/js/tools.js b/web/share/js/tools.js
index eb3ab957..79dbd432 100644
--- a/web/share/js/tools.js
+++ b/web/share/js/tools.js
@@ -129,13 +129,13 @@ export var tools = new function() {
 
 	self.slider = new function() {
 		return {
-			"setOnUpDelayed": function(el, delay, display_callback, execute_callback) {
-				el.execution_timer = null;
+			"setOnUpDelayed": function(el, delay, execute_callback) {
+				el.__execution_timer = null;
 
 				let clear_timer = function() {
-					if (el.execution_timer) {
-						clearTimeout(el.execution_timer);
-						el.execution_timer = null;
+					if (el.__execution_timer) {
+						clearTimeout(el.__execution_timer);
+						el.__execution_timer = null;
 					}
 				};
 
@@ -147,26 +147,27 @@ export var tools = new function() {
 					let value = self.slider.getValue(el);
 					event.preventDefault();
 					clear_timer();
-					el.execution_timer = setTimeout(function() {
+					el.__execution_timer = setTimeout(function() {
 						execute_callback(value);
 					}, delay);
 				};
-
-				let value = self.slider.getValue(el);
-				el.oninput = el.onchange = () => display_callback(value);
-				display_callback(value);
 			},
-			"setParams": function(el, min, max, step, value) {
+			"setParams": function(el, min, max, step, value, display_callback=null) {
 				el.min = min;
 				el.max = max;
 				el.step = step;
 				el.value = value;
+				if (display_callback) {
+					el.oninput = el.onchange = () => display_callback(self.slider.getValue(el));
+					display_callback(self.slider.getValue(el));
+					el.__display_callback = display_callback;
+				}
 			},
-			"setValue": function(el, value, callback=null) {
+			"setValue": function(el, value) {
 				if (el.value != value) {
 					el.value = value;
-					if (callback) {
-						callback(value);
+					if (el.__display_callback) {
+						el.__display_callback(value);
 					}
 				}
 			},