diff options
author | Maxim Devaev <[email protected]> | 2021-04-12 15:26:32 +0300 |
---|---|---|
committer | GitHub <[email protected]> | 2021-04-12 15:26:32 +0300 |
commit | 3af4a8b852019993ee31becd5651734377da6ec9 (patch) | |
tree | 499b77bfaa0c6f939175ea167d5ccb3956be95f0 /web/share/js/kvm | |
parent | 8158941833bd8a50278b61967e00d23522e633d7 (diff) |
Rework of #39 (#40)
* Rework of #39 patch from @arykov (thanks)
* styled resize corner
* fixed squashing of resizaable window on moving
* keep window size and opsition after full screen
* not necessary
* attempt to fix desktop overflow
* improved
* ios fixes
* refactoring
Diffstat (limited to 'web/share/js/kvm')
-rw-r--r-- | web/share/js/kvm/mouse.js | 31 | ||||
-rw-r--r-- | web/share/js/kvm/session.js | 2 | ||||
-rw-r--r-- | web/share/js/kvm/stream.js | 64 |
3 files changed, 38 insertions, 59 deletions
diff --git a/web/share/js/kvm/mouse.js b/web/share/js/kvm/mouse.js index 3ac7935e..2893a5ae 100644 --- a/web/share/js/kvm/mouse.js +++ b/web/share/js/kvm/mouse.js @@ -40,8 +40,8 @@ export function Mouse(record_callback) { var __keypad = null; - var __current_pos = {x: 0, y:0}; - var __sent_pos = {x: 0, y:0}; + var __current_pos = {x: 0, y: 0}; + var __sent_pos = {x: 0, y: 0}; var __wheel_delta = {x: 0, y: 0}; var __relative_deltas = []; @@ -210,15 +210,16 @@ export function Mouse(record_callback) { if (__absolute) { let pos = __current_pos; if (pos.x !== __sent_pos.x || pos.y !== __sent_pos.y) { - let el_stream_image = $("stream-image"); - let to = { - x: __translate(pos.x, 0, el_stream_image.clientWidth, -32768, 32767), - y: __translate(pos.y, 0, el_stream_image.clientHeight, -32768, 32767), - }; - - tools.debug("Mouse: moved:", to); - __sendEvent("mouse_move", {"to": to}); - __sent_pos = pos; + let geometry = $("stream-box").stream_geometry; + if (geometry) { + let to = { + x: __translate(pos.x, geometry.x, geometry.width, -32768, 32767), + y: __translate(pos.y, geometry.y, geometry.height, -32768, 32767), + }; + tools.debug("Mouse: moved:", to); + __sendEvent("mouse_move", {"to": to}); + __sent_pos = pos; + } } } else if (__relative_deltas.length) { tools.debug("Mouse: relative:", __relative_deltas); @@ -228,7 +229,13 @@ export function Mouse(record_callback) { }; var __translate = function(x, a, b, c, d) { - return Math.round((x - a) / (b - a) * (d - c) + c); + let translated = Math.round((x - a) / b * (d - c) + c); + if (translated < c) { + return c; + } else if (translated > d) { + return d; + } + return translated; }; var __streamWheelHandler = function(event) { diff --git a/web/share/js/kvm/session.js b/web/share/js/kvm/session.js index 2e4c4f6d..5aa0a6a0 100644 --- a/web/share/js/kvm/session.js +++ b/web/share/js/kvm/session.js @@ -47,7 +47,7 @@ export function Session() { var __hid = new Hid(); var __atx = new Atx(); var __msd = new Msd(); - var __streamer = new Streamer(); + var __streamer = new Streamer(__hid); var __wol = new WakeOnLan(); var __gpio = new Gpio(); diff --git a/web/share/js/kvm/stream.js b/web/share/js/kvm/stream.js index 83e3c4d4..2db37608 100644 --- a/web/share/js/kvm/stream.js +++ b/web/share/js/kvm/stream.js @@ -34,8 +34,6 @@ export function Streamer() { var __resolution = {width: 640, height: 480}; - var __size_factor = 1; - var __mjpeg_key = tools.makeId(); var __mjpeg_id = ""; var __mjpeg_fps = -1; @@ -53,10 +51,6 @@ export function Streamer() { $("stream-resolution-selector").onchange = (() => __sendParam("resolution", $("stream-resolution-selector").value)); - tools.sliderSetParams($("stream-size-slider"), 20, 200, 5, 100); - $("stream-size-slider").oninput = () => __resize(); - $("stream-size-slider").onchange = () => __resize(); - tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton); tools.setOnClick($("stream-reset-button"), __clickResetButton); @@ -65,6 +59,7 @@ export function Streamer() { self.setState(__state_for_invisible); } }; + $("stream-window").resize_hook = __resizeHook; }; /************************************************************************/ @@ -88,6 +83,11 @@ export function Streamer() { } if (state && state.streamer) { + if (!window.ResizeObserver) { + // Browsers that don't support this API(on lower versions of iOS for example) + __resizeHook(); + } + if (!$("stream-quality-slider").activated) { wm.setElementEnabled($("stream-quality-slider"), true); if ($("stream-quality-slider").value !== state.streamer.encoder.quality) { @@ -107,13 +107,8 @@ export function Streamer() { } let resolution_str = __makeStringResolution(state.streamer.source.resolution); - if (__makeStringResolution(__resolution) != resolution_str) { + if (__makeStringResolution(__resolution) !== resolution_str) { __resolution = state.streamer.source.resolution; - if ($("stream-auto-resize-switch").checked) { - __adjustSizeFactor(); - } else { - __applySizeFactor(); - } } if (state.features.resolution) { @@ -260,40 +255,17 @@ export function Streamer() { }); }; - var __resize = function() { - let size = $("stream-size-slider").value; - $("stream-size-value").innerHTML = `${size}%`; - __size_factor = size / 100; - __applySizeFactor(); - }; - - var __adjustSizeFactor = function() { - let el_window = $("stream-window"); - let el_slider = $("stream-size-slider"); - let view = wm.getViewGeometry(); - - for (let size = 100; size >= el_slider.min; size -= el_slider.step) { - tools.info("Stream: adjusting size:", size); - $("stream-size-slider").value = size; - __resize(); - - let rect = el_window.getBoundingClientRect(); - if ( - rect.bottom <= view.bottom - && rect.top >= view.top - && rect.left >= view.left - && rect.right <= view.right - ) { - break; - } - } - }; - - var __applySizeFactor = function() { - let el = $("stream-image"); - el.style.width = __resolution.width * __size_factor + "px"; - el.style.height = __resolution.height * __size_factor + "px"; - wm.showWindow($("stream-window"), false); + var __resizeHook = function() { + let rect = $("stream-image").getBoundingClientRect(); + let width = $("stream-image").naturalWidth; + let height = $("stream-image").naturalHeight; + let ratio = Math.min(rect.width / width, rect.height / height); + $("stream-box").stream_geometry = { + "x": Math.round((rect.width - ratio * width) / 2), + "y": Math.round((rect.height - ratio * height) / 2), + "width": Math.round(ratio * width), + "height": Math.round(ratio * height), + }; }; var __makeStringResolution = function(resolution) { |