summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/css/mobile.css13
-rw-r--r--web/css/sliders.css60
-rw-r--r--web/css/stream.css57
-rw-r--r--web/css/vars.css1
-rw-r--r--web/index.html14
-rw-r--r--web/js/stream.js78
6 files changed, 125 insertions, 98 deletions
diff --git a/web/css/mobile.css b/web/css/mobile.css
index 04e548e7..1e5df8fd 100644
--- a/web/css/mobile.css
+++ b/web/css/mobile.css
@@ -54,7 +54,7 @@
}
div#stream-window {
- padding-top: 9px !important;
+ padding-top: 3px !important;
border-top: 0 !important;
border-radius: 0 0 8px 8px !important;
top: 50px !important;
@@ -65,6 +65,14 @@
div#stream-window-header {
display: none !important;
}
+ div#stream-info {
+ display: block !important;
+ margin: 0;
+ padding: 0;
+ padding-bottom: 3px;
+ font-size: 0.8em;
+ color: var(--fg-color-dark);
+ }
div#stream-mouse-buttons {
display: block !important;
}
@@ -80,9 +88,10 @@
}
@supports (-webkit-appearance:none) {
- div#stream-size-slider-box input[type=range] {
+ input[type=range].slider {
margin: 20px 0 20px 0 !important;
}
+
table#stream-auto-resize-box {
margin: 20px 0 20px 0 !important;
}
diff --git a/web/css/sliders.css b/web/css/sliders.css
new file mode 100644
index 00000000..8e60e078
--- /dev/null
+++ b/web/css/sliders.css
@@ -0,0 +1,60 @@
+@supports (-webkit-appearance:none) {
+ input[type=range].slider {
+ cursor: pointer;
+ outline: none;
+ width: 100%;
+ box-shadow: none;
+ background: transparent;
+ margin: 8px 0 8px 0;
+ -webkit-appearance: none;
+ -webkit-tap-highlight-color: transparent;
+ }
+}
+@supports not (-webkit-appearance:none) {
+ input[type=range].slider {
+ cursor: pointer;
+ outline: none;
+ width: 100%;
+ box-shadow: none;
+ margin-left: 0;
+ margin-right: 0;
+ }
+}
+
+input[type=range].slider::-webkit-slider-runnable-track {
+ height: 5px;
+ background: var(--bg-color-light);
+ border-radius: 3px;
+}
+
+input[type=range].slider::-webkit-slider-thumb {
+ border: var(--intensive-border);
+ height: 18px;
+ width: 18px;
+ border-radius: 25px;
+ background: var(--bg-color-intensive);
+ -webkit-appearance: none;
+ margin-top: -7px;
+}
+input[type=range].slider:disabled::-webkit-slider-thumb {
+ border: var(--inactive-border);
+ background: var(--bg-color-normal);
+}
+
+input[type=range].slider::-moz-range-track {
+ height: 5px;
+ background: var(--bg-color-light);
+ border-radius: 3px;
+}
+
+input[type=range].slider::-moz-range-thumb {
+ border: var(--intensive-border);
+ height: 18px;
+ width: 18px;
+ border-radius: 25px;
+ background: var(--bg-color-intensive);
+}
+input[type=range].slider:disabled::-moz-range-thumb {
+ border: var(--inactive-border);
+ background: var(--bg-color-normal);
+}
diff --git a/web/css/stream.css b/web/css/stream.css
index 2e7aa32c..d0166fa9 100644
--- a/web/css/stream.css
+++ b/web/css/stream.css
@@ -1,3 +1,7 @@
+div#stream-info {
+ display: none;
+}
+
img#stream-image {
width: 640px;
height: 480px;
@@ -35,61 +39,10 @@ div.stream-box-mouse-enabled {
cursor: url("../svg/stream-mouse-cursor.svg"), pointer;
}
-select#stream-quality-select {
- margin: 8px 0 8px 0;
-}
-
-div#stream-size-slider-box {
+div.stream-slider-box {
margin-top: 5px;
display: flex;
}
-@supports (-webkit-appearance:none) {
- div#stream-size-slider-box input[type=range] {
- cursor: pointer;
- outline: none;
- width: 100%;
- box-shadow: none;
- background: transparent;
- margin: 8px 0 8px 0;
- -webkit-appearance: none;
- }
-}
-@supports not (-webkit-appearance:none) {
- div#stream-size-slider-box input[type=range] {
- cursor: pointer;
- outline: none;
- width: 100%;
- box-shadow: none;
- margin-left: 0;
- margin-right: 0;
- }
-}
-div#stream-size-slider-box input[type=range]::-webkit-slider-runnable-track {
- height: 5px;
- background: var(--bg-color-light);
- border-radius: 3px;
-}
-div#stream-size-slider-box input[type=range]::-webkit-slider-thumb {
- border: var(--intensive-border);
- height: 18px;
- width: 18px;
- border-radius: 25px;
- background: var(--bg-color-intensive);
- -webkit-appearance: none;
- margin-top: -7px;
-}
-div#stream-size-slider-box input[type=range]::-moz-range-track {
- height: 5px;
- background: var(--bg-color-light);
- border-radius: 3px;
-}
-div#stream-size-slider-box input[type=range]::-moz-range-thumb {
- border: var(--intensive-border);
- height: 18px;
- width: 18px;
- border-radius: 25px;
- background: var(--bg-color-intensive);
-}
table#stream-auto-resize-box {
width: 100%;
diff --git a/web/css/vars.css b/web/css/vars.css
index d6d5a604..73143366 100644
--- a/web/css/vars.css
+++ b/web/css/vars.css
@@ -26,6 +26,7 @@
--grey-border: thin solid var(--border-color-grey);
--normal-border: thin solid var(--border-color-normal);
--black-border: thin solid black;
+ --inactive-border: 2px solid var(--border-color-normal);
--intensive-border: 2px solid var(--border-color-intensive);
--thin-intensive-border: thin solid var(--border-color-intensive);
diff --git a/web/index.html b/web/index.html
index 0f3c1d0a..7baf44e6 100644
--- a/web/index.html
+++ b/web/index.html
@@ -14,6 +14,7 @@
<link rel="stylesheet" href="css/windows.css">
<link rel="stylesheet" href="css/modals.css">
<link rel="stylesheet" href="css/leds.css">
+ <link rel="stylesheet" href="css/sliders.css">
<link rel="stylesheet" href="css/switches.css">
<link rel="stylesheet" href="css/stream.css">
<link rel="stylesheet" href="css/hid.css">
@@ -77,14 +78,16 @@
</div>
<hr>
<div data-dont-hide-menu class="ctl-dropdown-content-text">
- Stream quality:
- <select disabled id="stream-quality-select"></select>
+ Stream quality: <span id="stream-quality-value">80%</span>
+ <div class="stream-slider-box">
+ <input disabled type="range" id="stream-quality-slider" class="slider" />
+ </div>
</div>
<hr>
<div data-dont-hide-menu class="ctl-dropdown-content-text">
Stream size: <span id="stream-size-value">100%</span>
- <div id="stream-size-slider-box">
- <input id="stream-size-slider" type="range" />
+ <div class="stream-slider-box">
+ <input type="range" id="stream-size-slider" class="slider" />
</div>
</div>
<hr>
@@ -93,7 +96,7 @@
<td>Auto-resize stream:</td>
<td align="right">
<div class="switch-box">
- <input type="checkbox" class="switch-checkbox" id="stream-auto-resize-checkbox" checked />
+ <input type="checkbox" id="stream-auto-resize-checkbox" class="switch-checkbox" checked />
<label class="switch-label" for="stream-auto-resize-checkbox">
<span class="switch-inner"></span>
<span class="switch"></span>
@@ -280,6 +283,7 @@
<div id="stream-window" class="window" style="z-index: 1" tabindex="0">
<div id="stream-window-header" class="window-header"><div class="window-grab">Stream</div></div>
+ <div id="stream-info"></div>
<div id="stream-box" class="stream-box-inactive">
<img id="stream-image" class="stream-image-inactive" src="png/blank-stream.png" />
</div>
diff --git a/web/js/stream.js b/web/js/stream.js
index 91f2dc92..c632766d 100644
--- a/web/js/stream.js
+++ b/web/js/stream.js
@@ -5,32 +5,29 @@ function Stream() {
var __prev_state = false;
var __resolution = {width: 640, height: 480};
+ var __size_factor = 1;
var __client_id = "";
var __fps = 0;
-
- var __quality = 10;
- var __size_factor = 1;
+ var __quality_timer = null;
var __init__ = function() {
$("stream-led").title = "Stream inactive";
- var quality = 10;
- $("stream-quality-select").innerHTML = "";
- for (; quality <= 100; quality += 10) {
- $("stream-quality-select").innerHTML += "<option value=\"" + quality + "\">" + quality + "%</option>";
- }
-
- tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
-
- $("stream-quality-select").onchange = __changeQuality;
+ $("stream-quality-slider").min = 10;
+ $("stream-quality-slider").max = 100;
+ $("stream-quality-slider").step = 5;
+ $("stream-quality-slider").value = 80;
+ $("stream-quality-slider").oninput = __setQuality;
+ $("stream-quality-slider").onchange = __setQuality;
- $("stream-size-slider").min = 50;
- $("stream-size-slider").max = 150;
- $("stream-size-slider").step = 10;
+ $("stream-size-slider").min = 20;
+ $("stream-size-slider").max = 200;
+ $("stream-size-slider").step = 5;
$("stream-size-slider").value = 100;
- $("stream-size-slider").oninput = () => __resize;
- $("stream-size-slider").onchange = () => __resize;
+ $("stream-size-slider").oninput = () => __resize();
+ $("stream-size-slider").onchange = () => __resize();
+ tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
tools.setOnClick($("stream-reset-button"), __clickResetButton);
__startPoller();
@@ -52,16 +49,16 @@ function Stream() {
$("stream-led").className = "led-off";
$("stream-led").title = "Stream inactive";
$("stream-screenshot-button").disabled = true;
- $("stream-quality-select").disabled = true;
+ $("stream-quality-slider").disabled = true;
$("stream-reset-button").disabled = true;
__updateStreamHeader(false);
__fps = 0;
__prev_state = false;
} else if (http.status === 200) {
- if (__quality != response.source.quality) {
- document.querySelector("#stream-quality-select [value=\"" + response.source.quality + "\"]").selected = true;
- __quality = response.source.quality;
+ if ($("stream-quality-slider").value != response.source.quality && !__quality_timer) {
+ $("stream-quality-slider").value = response.source.quality;
+ $("stream-quality-value").innerHTML = response.source.quality + "%";
}
if (__resolution.width !== response.source.resolution.width || __resolution.height !== response.source.resolution.height) {
@@ -94,7 +91,7 @@ function Stream() {
$("stream-led").className = "led-on";
$("stream-led").title = "Stream is active";
$("stream-screenshot-button").disabled = false;
- $("stream-quality-select").disabled = false;
+ $("stream-quality-slider").disabled = false;
$("stream-reset-button").disabled = false;
__prev_state = true;
}
@@ -106,10 +103,11 @@ function Stream() {
var __updateStreamHeader = function(online) {
var el_grab = document.querySelector("#stream-window-header .window-grab");
+ var el_info = $("stream-info");
if (online) {
- el_grab.innerHTML = "Stream &ndash; " + __resolution.width + "x" + __resolution.height + " / " + __fps + " fps";
+ el_grab.innerHTML = el_info.innerHTML = "Stream &ndash; " + __resolution.width + "x" + __resolution.height + " / " + __fps + " fps";
} else {
- el_grab.innerHTML = "Stream &ndash; offline";
+ el_grab.innerHTML = el_info.innerHTML = "Stream &ndash; offline";
}
};
@@ -133,24 +131,29 @@ function Stream() {
});
};
- var __changeQuality = function() {
- var quality = parseInt($("stream-quality-select").value);
- if (__quality != quality) {
- $("stream-quality-select").disabled = true;
+ var __setQuality = function() {
+ var quality = $("stream-quality-slider").value;
+ $("stream-quality-value").innerHTML = quality + "%";
+ if (__quality_timer) {
+ clearTimeout(__quality_timer);
+ }
+ __quality_timer = setTimeout(function() {
+ $("stream-quality-slider").disabled = true;
var http = tools.makeRequest("POST", "/kvmd/streamer/set_params?quality=" + quality, function() {
if (http.readyState === 4) {
if (http.status !== 200) {
ui.error("Can't configure stream:<br>", http.responseText);
}
+ __quality_timer = null;
}
});
- }
+ }, 1000);
};
var __resize = function(center=false) {
- var percent = $("stream-size-slider").value;
- $("stream-size-value").innerHTML = percent + "%";
- __size_factor = percent / 100;
+ var size = $("stream-size-slider").value;
+ $("stream-size-value").innerHTML = size + "%";
+ __size_factor = size / 100;
__applySizeFactor(center);
};
@@ -159,9 +162,9 @@ function Stream() {
var el_slider = $("stream-size-slider");
var view = ui.getViewGeometry();
- for (var percent = 100; percent >= el_slider.min; percent -= el_slider.step) {
- tools.info("Adjusting size:", percent);
- $("stream-size-slider").value = percent;
+ for (var size = 100; size >= el_slider.min; size -= el_slider.step) {
+ tools.info("Adjusting size:", size);
+ $("stream-size-slider").value = size;
__resize(true);
var rect = el_window.getBoundingClientRect();
@@ -171,12 +174,9 @@ function Stream() {
&& rect.left >= view.left
&& rect.right <= view.right
) {
- return;
+ break;
}
}
-
- $("stream-size-slider").value = 100;
- __resize();
};
var __applySizeFactor = function(center=false) {
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 22:48:31 +0000