Fix direct H.264 issues and optimize UI

feat: support custom mouse wheel speed
fix: prevent direct H.264 stream buffer overflow and replay
style: optimize virtual keyboard layout
style: optimize menu bar and settings styling

Author: wj-xiao

server/proto/vm.go

@@ -87,6 +87,10 @@ type GetOLEDRsp struct {
 	Sleep int  `json:"sleep"`
 }
 
+type GetGetHdmiStateRsp struct {
+	Enabled bool `json:"enabled"`
+}
+
 type GetSSHStateRsp struct {
 	Enabled bool `json:"enabled"`
 }

server/router/vm.go

@@ -35,8 +35,9 @@ func vmRouter(r *gin.Engine) {
 	api.GET("/vm/oled", service.GetOLED)  // get OLED configuration
 	api.POST("/vm/oled", service.SetOLED) // set OLED configuration
 
+	// Only supported by PCIe version
 	api.GET("/vm/hdmi", service.GetHdmiState)         // get HDMI state
-	api.POST("/vm/hdmi/reset", service.ResetHdmi)     // reset hdmi (pcie only)
+	api.POST("/vm/hdmi/reset", service.ResetHdmi)     // reset hdmi
 	api.POST("/vm/hdmi/enable", service.EnableHdmi)   // enable hdmi
 	api.POST("/vm/hdmi/disable", service.DisableHdmi) // disable hdmi
 

server/service/stream/direct/h264.go

@@ -21,9 +21,10 @@ type Frame struct {
 }
 
 var (
-	mutex    = sync.Mutex{}
-	wsMap    = make(map[*websocket.Conn]bool)
-	upgrader = websocket.Upgrader{
+	mutex     = sync.Mutex{}
+	wsMap     = make(map[*websocket.Conn]bool)
+	isSending = false
+	upgrader  = websocket.Upgrader{
 		CheckOrigin: func(r *http.Request) bool {
 			return true
 		},
@@ -47,7 +48,7 @@ func Connect(c *gin.Context) {
 
 	mutex.Lock()
 	wsMap[ws] = true
-	if len(wsMap) == 1 {
+	if len(wsMap) == 1 && !isSending {
 		go send()
 	}
 	mutex.Unlock()
@@ -62,6 +63,7 @@ func Connect(c *gin.Context) {
 }
 
 func send() {
+	isSending = true
 	screen := common.GetScreen()
 	common.CheckScreen()
 
@@ -76,6 +78,7 @@ func send() {
 
 	for range ticker.C {
 		if len(wsMap) == 0 {
+			isSending = false
 			return
 		}
 

server/service/vm/hdmi.go

@@ -1,15 +1,15 @@
 package vm
 
 import (
+	"time"
+
 	"NanoKVM-Server/common"
 	"NanoKVM-Server/proto"
-	"time"
 
 	"github.com/gin-gonic/gin"
 	log "github.com/sirupsen/logrus"
 )
 
-// ideally read state from the device
 var hdmiEnabled = true
 
 func (s *Service) ResetHdmi(c *gin.Context) {
@@ -53,15 +53,9 @@ func (s *Service) DisableHdmi(c *gin.Context) {
 func (s *Service) GetHdmiState(c *gin.Context) {
 	var rsp proto.Response
 
-	if hdmiEnabled {
-		rsp.OkRspWithData(c, &map[string]string{
-			"state": "enabled",
-		})
-	} else {
-		rsp.OkRspWithData(c, &map[string]string{
-			"state": "disabled",
-		})
-	}
+	rsp.OkRspWithData(c, &proto.GetGetHdmiStateRsp{
+		Enabled: hdmiEnabled,
+	})
 
 	log.Debug("get hdmi state")
 }

web/package.json

@@ -34,7 +34,8 @@
     "react-simple-keyboard": "^3.8.19",
     "semver": "^7.6.3",
     "vaul": "^0.9.9",
-    "websocket": "^1.0.35"
+    "websocket": "^1.0.35",
+    "yocto-queue": "^1.2.1"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",

web/pnpm-lock.yaml

@@ -78,8 +78,8 @@ export function disableHdmi() {
 }
 
 // set HDMI state
-export function setHdmiState(state: string) {
-  if (state === 'enabled') {
+export function setHdmiState(enabled: boolean) {
+  if (enabled) {
     return enableHdmi();
   }
   return disableHdmi();

web/src/api/vm.ts

@@ -64,9 +64,7 @@ const en = {
       frameDetect: 'Frame Detect',
       frameDetectTip:
         "Calculate the difference between frames. Stop transmitting video stream when no changes are detected on the remote host's screen.",
-      resetHdmi: 'Reset HDMI',
-      enableHdmi: 'Enable HDMI',
-      disableHdmi: 'Disable HDMI',
+      resetHdmi: 'Reset HDMI'
     },
     keyboard: {
       title: 'Keyboard',
@@ -75,8 +73,7 @@ const en = {
       placeholder: 'Please input',
       submit: 'Submit',
       virtual: 'Keyboard',
-      ctrlaltdel: 'Ctrl+Alt+Del',
-      layout: 'Keyboard Layout'
+      ctrlaltdel: 'Ctrl+Alt+Del'
     },
     mouse: {
       title: 'Mouse',
@@ -90,6 +87,9 @@ const en = {
       mode: 'Mouse mode',
       absolute: 'Absolute mode',
       relative: 'Relative mode',
+      speed: 'Wheel speed',
+      fast: 'Fast',
+      slow: 'Slow',
       requestPointer: 'Using relative mode. Please click desktop to get mouse pointer.',
       resetHid: 'Reset HID',
       hidOnly: {
@@ -213,8 +213,7 @@ const en = {
         menuBar: 'Menu Bar',
         menuBarDesc: 'Display icons in the menu bar',
         webTitle: 'Web Title',
-        webTitleDesc: 'Customize the web page title',
-        keyboardLayout: 'Keyboard Layout'
+        webTitleDesc: 'Customize the web page title'
       },
       device: {
         title: 'Device',
@@ -262,6 +261,9 @@ const en = {
           description: 'Enable mDNS discovery service',
           tip: "Turning it off if it's not needed"
         },
+        hdmi: {
+          description: 'Enable HDMI/monitor output'
+        },
         hidOnly: 'HID-Only Mode',
         disk: 'Virtual Disk',
         diskDesc: 'Mount virtual U-disk on the remote host',

web/src/i18n/locales/en.ts

@@ -85,6 +85,9 @@ const zh = {
       mode: '鼠标模式',
       absolute: '绝对模式',
       relative: '相对模式',
+      speed: '滚轮速度',
+      fast: '快',
+      slow: '慢',
       requestPointer: '正在使用鼠标相对模式，请点击桌面获取鼠标指针。',
       resetHid: '重置 HID',
       hidOnly: {
@@ -238,6 +241,9 @@ const zh = {
           description: '启用 mDNS 发现服务',
           tip: '如果您未使用此功能，建议将其关闭'
         },
+        hdmi: {
+          description: '启用 HDMI/显示器 输出功能'
+        },
         hidOnly: 'HID-Only 模式',
         disk: '虚拟U盘',
         diskDesc: '在远程主机中挂载虚拟U盘',