From e2f2e8b3595f475222dc11067ef33bfbf410711d Mon Sep 17 00:00:00 2001 From: Devaev Maxim Date: Tue, 14 Jul 2020 09:06:03 +0300 Subject: [PATCH] ui for stream resolution --- kvmd/apps/kvmd/streamer.py | 6 ++-- web/kvm/index.html | 15 +++++++-- web/share/css/kvm/stream.css | 2 +- web/share/js/kvm/stream.js | 59 +++++++++++++++++++++++++----------- 4 files changed, 57 insertions(+), 25 deletions(-) diff --git a/kvmd/apps/kvmd/streamer.py b/kvmd/apps/kvmd/streamer.py index 59277db8..14485c3c 100644 --- a/kvmd/apps/kvmd/streamer.py +++ b/kvmd/apps/kvmd/streamer.py @@ -248,13 +248,13 @@ class Streamer: # pylint: disable=too-many-instance-attributes # ===== async def get_state(self) -> Dict: - state = None + streamer_state = None if self.__streamer_task: session = self.__ensure_http_session() try: async with session.get(self.__make_url("state")) as response: htclient.raise_not_200(response) - state = (await response.json())["result"] + streamer_state = (await response.json())["result"] except (aiohttp.ClientConnectionError, aiohttp.ServerConnectionError): pass except Exception: @@ -270,7 +270,7 @@ class Streamer: # pylint: disable=too-many-instance-attributes "limits": self.__params.get_limits(), "params": self.__params.get_params(), "snapshot": {"saved": snapshot}, - "state": state, + "streamer": streamer_state, "features": self.__params.get_features(), } diff --git a/web/kvm/index.html b/web/kvm/index.html index 5ff339b4..69b5414c 100644 --- a/web/kvm/index.html +++ b/web/kvm/index.html @@ -142,11 +142,20 @@ +
+
+
+ Stream resolution: +
+ +
+
+
Stream quality: 80% -
+
@@ -154,14 +163,14 @@
Stream FPS: 0 -
+
Stream size: 100% -
+
diff --git a/web/share/css/kvm/stream.css b/web/share/css/kvm/stream.css index e3c88243..def1a007 100644 --- a/web/share/css/kvm/stream.css +++ b/web/share/css/kvm/stream.css @@ -61,7 +61,7 @@ img.stream-image-inactive { filter: grayscale(100%) brightness(75%) sepia(75%); } -div.stream-slider-box { +div.stream-param-box { margin-top: 5px; display: flex; } diff --git a/web/share/js/kvm/stream.js b/web/share/js/kvm/stream.js index 80832c7f..646ee88e 100644 --- a/web/share/js/kvm/stream.js +++ b/web/share/js/kvm/stream.js @@ -33,6 +33,8 @@ export function Streamer() { /************************************************************************/ var __resolution = {width: 640, height: 480}; + var __resolution_str = "640x480"; + var __available_resolutions = []; var __size_factor = 1; var __client_key = tools.makeId(); var __client_id = ""; @@ -53,6 +55,11 @@ export function Streamer() { $("stream-desired-fps-slider").value = 0; tools.setOnUpSlider($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value)); + $("stream-resolution-selector").onchange = (() => { + wm.switchEnabled($("stream-resolution-selector"), false); + __sendParam("resolution", $("stream-resolution-selector").value); + }); + $("stream-size-slider").min = 20; $("stream-size-slider").max = 200; $("stream-size-slider").step = 5; @@ -68,35 +75,34 @@ export function Streamer() { self.setState = function(state) { if (state) { - tools.setFeatureEnabled($("stream-quality"), state.features.quality && (state.state === null || state.state.encoder.quality > 0)); + tools.setFeatureEnabled($("stream-quality"), state.features.quality && (state.streamer === null || state.streamer.encoder.quality > 0)); + tools.setFeatureEnabled($("stream-resolution"), state.features.resolution); } - if (state && state.state) { - let max_fps = state.limits.max_fps; - state = state.state; - + if (state && state.streamer) { if (!$("stream-quality-slider").activated) { wm.switchEnabled($("stream-quality-slider"), true); - if ($("stream-quality-slider").value !== state.encoder.quality) { - $("stream-quality-slider").value = state.encoder.quality; - __updateQualityValue(state.encoder.quality); + if ($("stream-quality-slider").value !== state.streamer.encoder.quality) { + $("stream-quality-slider").value = state.streamer.encoder.quality; + __updateQualityValue(state.streamer.encoder.quality); } } if (!$("stream-desired-fps-slider").activated) { - $("stream-desired-fps-slider").max = max_fps; + $("stream-desired-fps-slider").max = state.limits.max_fps; wm.switchEnabled($("stream-desired-fps-slider"), true); - if ($("stream-desired-fps-slider").value !== state.source.desired_fps) { - $("stream-desired-fps-slider").value = state.source.desired_fps; - __updateDesiredFpsValue(state.source.desired_fps); + if ($("stream-desired-fps-slider").value !== state.streamer.source.desired_fps) { + $("stream-desired-fps-slider").value = state.streamer.source.desired_fps; + __updateDesiredFpsValue(state.streamer.source.desired_fps); } } if ( - __resolution.width !== state.source.resolution.width - || __resolution.height !== state.source.resolution.height + __resolution.width !== state.streamer.source.resolution.width + || __resolution.height !== state.streamer.source.resolution.height ) { - __resolution = state.source.resolution; + __resolution = state.streamer.source.resolution; + __resolution_str = `${__resolution.width}x${__resolution.height}`; if ($("stream-auto-resize-checkbox").checked) { __adjustSizeFactor(); } else { @@ -104,7 +110,23 @@ export function Streamer() { } } - if (__ensureStream(state.stream.clients_stat)) { + if (state.features.resolution) { + if (__available_resolutions != state.limits.available_resolutions) { + __available_resolutions = state.limits.available_resolutions; + let resolutions_html = ""; + for (let variant of __available_resolutions) { + resolutions_html += ``; + } + if (!__available_resolutions.includes(__resolution_str)) { + resolutions_html += ``; + } + $("stream-resolution-selector").innerHTML = resolutions_html; + } + document.querySelector(`#stream-resolution-selector [value="${__resolution_str}"]`).selected = true; + wm.switchEnabled($("stream-resolution-selector"), true); + } + + if (__ensureStream(state.streamer.stream.clients_stat)) { $("stream-led").className = "led-green"; $("stream-led").title = "Stream is active"; wm.switchEnabled($("stream-screenshot-button"), true); @@ -114,7 +136,7 @@ export function Streamer() { tools.info("Stream: active"); } - __updateStreamWindow(true, state.source.online); + __updateStreamWindow(true, state.streamer.source.online); } else { $("stream-led").className = "led-gray"; @@ -123,6 +145,7 @@ export function Streamer() { wm.switchEnabled($("stream-reset-button"), false); wm.switchEnabled($("stream-quality-slider"), false); wm.switchEnabled($("stream-desired-fps-slider"), false); + wm.switchEnabled($("stream-resolution-selector"), false); tools.info("Stream: inactive"); __updateStreamWindow(false, false); @@ -177,7 +200,7 @@ export function Streamer() { if (!online) { title += "no signal / "; } - title += `${__resolution.width}x${__resolution.height}`; + title += __resolution_str; if (__client_fps >= 0) { title += ` / ${__client_fps} fps`; }