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

Rework of #39 (#40)

Browse Source 
* 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
This commit is contained in:
Maxim Devaev
2021-04-12 15:26:32 +03:00
committed by GitHub
parent 8158941833
commit 3af4a8b852
15 changed files with 1478 additions and 1332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
web/share/js/kvm/stream.js
View File

@@ -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) {