add input type range for the volume

static/css/main.css

@@ -149,7 +149,7 @@ a {
 
 #response {
   position: absolute;
-  bottom: 0;
+  top: 0;
   width: 100%;
   color: #fff;
   background: #748c26;

static/js/main.js

@@ -3,6 +3,7 @@ let pointer, scroller, response, screenshotImg
 let scrollLastTimestamp, scrollLastValue
 let mousePosX, mousePosY, mouseInitPosX, mouseInitPosY
 let isLive = false
+let wsLock = false
 let isPointerLive = false
 let isScreenshotWaiting = null
 let isPointerScreenshotWaiting = false
@@ -12,17 +13,20 @@ function createWebSocketConnection() {
 
   ws = new WebSocket(`${protocol}://${window.location.hostname}:${window.location.port}/ws`)
 
-  ws.onopen = function(event) {
+  ws.addEventListener('open', function(event) {
     document.querySelector('#disconneced').style.display = 'none'
-  }
+    unLock()
+  })
 
-  ws.onclose = function(event) {
+  ws.addEventListener('close', function(event) {
+    unLock()
     document.querySelector('#disconneced').style.display = 'block'
 
     window.setTimeout(createWebSocketConnection, 5000)
-  }
-
-  ws.onmessage = function(event) {
+  })
+  
+  ws.addEventListener('message', function(event) {
+    unLock()
     let data = JSON.parse(event.data)
 
     if (data.type === 'response') {
@@ -32,7 +36,19 @@ function createWebSocketConnection() {
       window.setTimeout(function() {
         response.style.display = 'none'
       }, 2500)
-    } else if (data.type === 'screenshot') {
+
+      return
+    }
+
+    if (data.type === 'volume') {
+      if (data.value.length) {
+        setVolume(parseInt(data.value))
+      }
+
+      return
+    }
+
+    if (data.type === 'screenshot') {
       if (isScreenshotWaiting || isScreenshotWaiting === null) {
         if (isScreenshotWaiting) {
           isScreenshotWaiting = false
@@ -50,7 +66,31 @@ function createWebSocketConnection() {
         pointer.style.backgroundImage = 'none'
       }
     }
+
+    return
+  })
+}
+
+function isLocked() {
+  return wsLock === true
+}
+
+function lock() {
+  wsLock = true
+}
+
+function unLock() {
+  wsLock = false
+}
+
+function send(message) {
+  if (isLocked()) {
+    return
   }
+
+  lock()
+
+  ws.send(message)
 }
 
 function navigationClickHandler(e) {
@@ -72,7 +112,7 @@ function navigationClickHandler(e) {
 }
 
 function buttonClickHandler(e) {
-  ws.send(e.target.getAttribute('data-msg'))
+  send(e.target.getAttribute('data-msg'))
 }
 
 function shortcutClearClickHandler(e) {
@@ -97,7 +137,7 @@ function shortcutSendClickHandler(e) {
       keys.push(key)
     }
 
-    ws.send('{"type":"keys","value": "' + (keys.join(',').replace('"', '\\"')) + '"}')
+    send('{"type":"keys","value": "' + (keys.join(',').replace('"', '\\"')) + '"}')
   }
 }
 
@@ -109,7 +149,7 @@ function textSendClickHandler(e) {
   const keys = document.querySelector('#text').value
 
   if (keys.length) {
-    ws.send('{"type":"text","value": "' + (keys.replace('"', '\\"')) + '"}')
+    send('{"type":"text","value": "' + (keys.replace('"', '\\"')) + '"}')
   }
 }
 
@@ -117,7 +157,7 @@ function textKeyUpHandler(e) {
   const keys = document.querySelector('#text').value
 
   if (e.keyCode === 13) {
-    ws.send('{"type":"text","value": "' + (keys.replace('"', '\\"')) + '"}')
+    send('{"type":"text","value": "' + (keys.replace('"', '\\"')) + '"}')
   }
 }
 
@@ -125,14 +165,14 @@ function liveTextKeyUpHandler(e) {
   const value = e.target.value
 
   if (e.keyCode === 8) {
-    ws.send('{"type":"key","value": "backspace"}')
+    send('{"type":"key","value": "backspace"}')
   } else if (e.keyCode === 13) {
-    ws.send('{"type":"key","value": "enter"}')
+    send('{"type":"key","value": "enter"}')
   } else if (value.length) {
     if (value === ' ') {
-      ws.send('{"type":"key","value": "space"}')
+      send('{"type":"key","value": "space"}')
     } else {
-      ws.send('{"type":"text","value": "' + (value.replace('"', '\\"')) + '"}')
+      send('{"type":"text","value": "' + (value.replace('"', '\\"')) + '"}')
     }
 
     e.target.value = ''
@@ -152,7 +192,7 @@ function shortcutsSpecialKeysOnChangeHandler(e) {
 }
 
 function pointerClickHandler(e) {
-  ws.send('{"type":"pointer","click":"left"}')
+  send('{"type":"pointer","click":"left"}')
 }
 
 function scrollerTouchStartHandler(e) {
@@ -172,7 +212,7 @@ function scrollerTouchMoveHandler(e) {
   scrollLastValue = value
   mouseInitPosY = touch.pageY
 
-  ws.send('{"type":"scroll","value": "' + value + '"}')
+  send('{"type":"scroll","value": "' + value + '"}')
 }
 
 function pointerTouchStartHandler(e) {
@@ -337,6 +377,34 @@ function addListeners() {
   addEventListenerOn('.btn-fullscreen', 'click', fullscreenHandler)
 }
 
+function getVolume() {
+  if (document.querySelectorAll('.volume').length) {
+    try {
+      send('{"type":"volume","value":"value"}')
+    } catch (e) {
+    }
+
+    document.querySelectorAll('.volume input[type="range"]').forEach(function(input) {
+      if (input.getAttribute('data-event')) {
+        return
+      }
+
+      input.setAttribute('data-event', 'ok')
+      input.addEventListener('change', (e) => {
+        send(`{"type":"volume","value":"${e.target.value}"}`)
+      })
+    })
+  }
+
+  window.setTimeout(getVolume, 2000)
+}
+
+function setVolume(value) {
+  document.querySelectorAll('.volume').forEach(function(item) {
+    item.querySelector('input[type="range"]').value = value
+  })
+}
+
 function bootstrap() {
   pointer = document.querySelector('#pointer')
   scroller = document.querySelector('#scrollbar')
@@ -347,6 +415,7 @@ function bootstrap() {
   createWebSocketConnection()
   addListeners()
   documentHashHandler()
+  getVolume()
 
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/static/js/service_worker.js')