GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-01-29 09:01:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

web: auto-resize stream

Browse Source
This commit is contained in:
Devaev Maxim
2018-10-07 18:24:20 +03:00
parent 053755fdc0
commit 447b949273
6 changed files with 179 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
web/js/stream.js
View File

@@ -4,7 +4,7 @@ function Stream() {
/********************************************************************************/
var __prev_state = false;
var __normal_size = {width: 640, height: 480};
var __resolution = {width: 640, height: 480};
var __client_id = "";
var __fps = 0;
@@ -23,8 +23,13 @@ function Stream() {
tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
$("stream-quality-select").onchange = __changeQuality;
$("stream-size-slider").oninput = __resize;
$("stream-size-slider").onchange = __resize;
$("stream-size-slider").min = 50;
$("stream-size-slider").max = 150;
$("stream-size-slider").step = 10;
$("stream-size-slider").value = 100;
$("stream-size-slider").oninput = () => __resize;
$("stream-size-slider").onchange = () => __resize;
tools.setOnClick($("stream-reset-button"), __clickResetButton);
@@ -42,8 +47,6 @@ function Stream() {
if (http.status !== 200) {
tools.info("Refreshing stream ...");
__prev_state = false;
__fps = 0;
$("stream-image").className = "stream-image-inactive";
$("stream-box").classList.add("stream-box-inactive");
$("stream-led").className = "led-off";
@@ -52,24 +55,22 @@ function Stream() {
$("stream-quality-select").disabled = true;
$("stream-reset-button").disabled = true;
__updateStreamHeader(false);
__fps = 0;
__prev_state = false;
} else if (http.status === 200) {
if (__prev_state) {
if (__normal_size != response.stream.resolution) {
__normal_size = response.stream.resolution;
if (__quality != response.source.quality) {
document.querySelector("#stream-quality-select [value=\"" + response.source.quality + "\"]").selected = true;
__quality = response.source.quality;
}
if (__resolution.width !== response.source.resolution.width || __resolution.height !== response.source.resolution.height) {
__resolution = response.source.resolution;
if ($("stream-auto-resize-checkbox").checked) {
__adjustSizeFactor();
} else {
__applySizeFactor();
}
} else {
__normal_size = response.stream.resolution;
__refreshImage();
__prev_state = true;
$("stream-image").className = "stream-image-active";
$("stream-box").classList.remove("stream-box-inactive");
$("stream-led").className = "led-on";
$("stream-led").title = "Stream is active";
$("stream-screenshot-button").disabled = false;
$("stream-quality-select").disabled = false;
$("stream-reset-button").disabled = false;
}
var client_id = tools.getCookie("stream_client_id");
@@ -84,6 +85,19 @@ function Stream() {
}
__updateStreamHeader(true);
if (!__prev_state) {
tools.info("Stream acquired");
$("stream-image").src = "/streamer/stream?t=" + new Date().getTime();
$("stream-image").className = "stream-image-active";
$("stream-box").classList.remove("stream-box-inactive");
$("stream-led").className = "led-on";
$("stream-led").title = "Stream is active";
$("stream-screenshot-button").disabled = false;
$("stream-quality-select").disabled = false;
$("stream-reset-button").disabled = false;
__prev_state = true;
}
}
}
});
@@ -93,7 +107,7 @@ function Stream() {
var __updateStreamHeader = function(online) {
var el_grab = document.querySelector("#stream-window-header .window-grab");
if (online) {
el_grab.innerHTML = "Stream – " + __normal_size.width + "x" + __normal_size.height + " / " + __fps + " fps";
el_grab.innerHTML = "Stream – " + __resolution.width + "x" + __resolution.height + " / " + __fps + " fps";
} else {
el_grab.innerHTML = "Stream – offline";
}
@@ -133,35 +147,43 @@ function Stream() {
}
};
var __resize = function() {
var __resize = function(center=false) {
var percent = $("stream-size-slider").value;
$("stream-size-value").innerHTML = percent + "%";
__size_factor = percent / 100;
__applySizeFactor();
__applySizeFactor(center);
};
var __applySizeFactor = function() {
var el_stream_image = $("stream-image");
el_stream_image.style.width = __normal_size.width * __size_factor + "px";
el_stream_image.style.height = __normal_size.height * __size_factor + "px";
ui.showWindow($("stream-window"), false);
};
var __adjustSizeFactor = function() {
var el_window = $("stream-window");
var el_slider = $("stream-size-slider");
var view = ui.getViewGeometry();
var __refreshImage = function() {
var http = tools.makeRequest("GET", "/kvmd/streamer", function() {
if (http.readyState === 4 && http.status === 200) {
var result = JSON.parse(http.responseText).result;
for (var percent = 100; percent >= el_slider.min; percent -= el_slider.step) {
tools.info("Adjusting size:", percent);
$("stream-size-slider").value = percent;
__resize(true);
if (__quality != result.quality) {
tools.info("Quality changed:", result.quality);
document.querySelector("#stream-quality-select [value=\"" + result.quality + "\"]").selected = true;
__quality = result.quality;
}
__applySizeFactor();
$("stream-image").src = "/streamer/stream?t=" + new Date().getTime();
var rect = el_window.getBoundingClientRect();
if (
rect.bottom <= view.bottom
&& rect.top >= view.top
&& rect.left >= view.left
&& rect.right <= view.right
) {
return;
}
});
}
$("stream-size-slider").value = 100;
__resize();
};
var __applySizeFactor = function(center=false) {
var el_stream_image = $("stream-image");
el_stream_image.style.width = __resolution.width * __size_factor + "px";
el_stream_image.style.height = __resolution.height * __size_factor + "px";
ui.showWindow($("stream-window"), false, center);
};
__init__();

28
web/js/ui.js
View File

@@ -122,9 +122,9 @@ function Ui() {
return promise;
};
self.showWindow = function(el_window, raise=true) {
if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered")) {
var view = __getViewGeometry();
self.showWindow = function(el_window, raise=true, center=false) {
if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered") || center) {
var view = self.getViewGeometry();
var rect = el_window.getBoundingClientRect();
el_window.style.top = Math.max($("ctl").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
@@ -136,8 +136,17 @@ function Ui() {
}
};
self.getViewGeometry = function() {
return {
top: $("ctl").clientHeight,
bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
left: 0,
right: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
};
};
var __isWindowOnPage = function(el_window) {
var view = __getViewGeometry();
var view = self.getViewGeometry();
var rect = el_window.getBoundingClientRect();
return (
@@ -148,15 +157,6 @@ function Ui() {
);
};
var __getViewGeometry = function() {
return {
top: $("ctl").clientHeight,
bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
left: 0,
right: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
};
};
var __toggleMenu = function(el_a) {
var all_hidden = true;
@@ -211,7 +211,7 @@ function Ui() {
};
var __organizeWindowsOnResize = function(orientation) {
var view = __getViewGeometry();
var view = self.getViewGeometry();
Array.prototype.forEach.call($$("window"), function(el_window) {
if (el_window.style.visibility === "visible" && (orientation || el_window.hasAttribute("data-centered"))) {
var rect = el_window.getBoundingClientRect();