web: Option to hide blue dot

4 files changed, 26 insertions, 2 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 1e9d1ee4..75dfa34e 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -337,6 +337,15 @@
                   </td>
                   <td class="value-number" id="hid-mouse-scroll-value"></td>
                 </tr>
+                <tr>
+                      <td>Show the blue dot:</td>
+                      <td align="right">
+                        <div class="switch-box">
+                          <input checked type="checkbox" id="hid-mouse-dot-switch">
+                          <label for="hid-mouse-dot-switch"><span class="switch-inner"></span><span class="switch"></span></label>
+                        </div>
+                      </td>
+                </tr>
               </table>
             </div>
           </details>
diff --git a/web/kvm/navbar-system.pug b/web/kvm/navbar-system.pug
index cd8e7f26..f664feff 100644
--- a/web/kvm/navbar-system.pug
+++ b/web/kvm/navbar-system.pug
@@ -100,6 +100,8 @@ li(id="system-dropdown" class="right")
 						td Scroll rate:
 						td(class="value-slider") #[input(type="range" id="hid-mouse-scroll-slider" class="slider")]
 						td(id="hid-mouse-scroll-value" class="value-number")
+					tr
+						+menu_switch_notable("hid-mouse-dot-switch", "Show the blue dot", true, true)
 		table(class="kv")
 			tr(id="hid-connect" class="feature-disabled")
 				+menu_switch_notable("hid-connect-switch", "Connect HID to Server", true, true)
diff --git a/web/share/css/kvm/stream.css b/web/share/css/kvm/stream.css
index 383c0aea..956e1b30 100644
--- a/web/share/css/kvm/stream.css
+++ b/web/share/css/kvm/stream.css
@@ -77,9 +77,12 @@ div.stream-box-offline::after {
 	display: inline-block;
 	background: radial-gradient(transparent 20%, black);
 }
-div.stream-box-mouse-enabled {
+div.stream-box-mouse-dot {
 	cursor: url("../../svg/stream-mouse-cursor.svg") 5 5, pointer;
 }
+div.stream-box-mouse-none {
+	cursor: none;
+}
 
 img#stream-image,
 video#stream-video {
diff --git a/web/share/js/kvm/mouse.js b/web/share/js/kvm/mouse.js
index e070857f..984a3ba0 100644
--- a/web/share/js/kvm/mouse.js
+++ b/web/share/js/kvm/mouse.js
@@ -76,13 +76,14 @@ export function Mouse(__getGeometry, __recordWsEvent) {
 		let cumulative_scrolling = !(tools.browser.is_firefox && !tools.browser.is_mac);
 		tools.storage.bindSimpleSwitch($("hid-mouse-cumulative-scrolling-switch"), "hid.mouse.cumulative_scrolling", cumulative_scrolling);
 		tools.slider.setParams($("hid-mouse-scroll-slider"), 1, 25, 1, tools.storage.get("hid.mouse.scroll_rate", 5), __updateScrollRate);
+
+		tools.storage.bindSimpleSwitch($("hid-mouse-dot-switch"), "hid.mouse.dot", true, __updateOnlineLeds);
 	};
 
 	/************************************************************************/
 
 	self.setSocket = function(ws) {
 		__ws = ws;
-		$("stream-box").classList.toggle("stream-box-mouse-enabled", ws);
 		if (!__absolute && __isRelativeCaptured()) {
 			document.exitPointerLock();
 		}
@@ -168,6 +169,15 @@ export function Mouse(__getGeometry, __recordWsEvent) {
 		}
 		$("hid-mouse-led").className = led;
 		$("hid-mouse-led").title = title;
+
+		if (__absolute && is_captured) {
+			let dot = $("hid-mouse-dot-switch").checked;
+			$("stream-box").classList.toggle("stream-box-mouse-dot", (dot && __ws));
+			$("stream-box").classList.toggle("stream-box-mouse-none", (!dot && __ws));
+		} else {
+			$("stream-box").classList.toggle("stream-box-mouse-dot", false);
+			$("stream-box").classList.toggle("stream-box-mouse-none", false);
+		}
 	};
 
 	var __isRelativeCaptured = function() {