GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-12 17:20:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
Devaev Maxim 2019-09-19 23:46:49 +03:00
parent f6e02e7219
commit aaa60e63a4
2 changed files with 84 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,7 +37,6 @@ export function Streamer() {
var __client_key = tools.makeId(); var __client_key = tools.makeId();
var __client_id = ""; var __client_id = "";
var __client_fps = -1; var __client_fps = -1;
var __prev = false;
var __init__ = function() { var __init__ = function() {
$("stream-led").title = "Stream inactive"; $("stream-led").title = "Stream inactive";
@ -69,34 +68,31 @@ export function Streamer() {
self.setState = function(state) { self.setState = function(state) {
if (state && state.state) { if (state && state.state) {
let encoder = state.state.encoder; let max_fps = state.limits.max_fps;
let source = state.state.source; state = state.state;
let stream = state.state.stream;
if (!__prev) {
$("stream-quality-slider").activated = false;
$("stream-desired-fps-slider").activated = false;
}
if (!$("stream-quality-slider").activated) { if (!$("stream-quality-slider").activated) {
wm.switchDisabled($("stream-quality-slider"), false); wm.switchDisabled($("stream-quality-slider"), false);
if ($("stream-quality-slider").value !== encoder.quality) { if ($("stream-quality-slider").value !== state.encoder.quality) {
$("stream-quality-slider").value = encoder.quality; $("stream-quality-slider").value = state.encoder.quality;
__updateQualityValue(encoder.quality); __updateQualityValue(state.encoder.quality);
} }
} }
if (!$("stream-desired-fps-slider").activated) { if (!$("stream-desired-fps-slider").activated) {
$("stream-desired-fps-slider").max = state.limits.max_fps; $("stream-desired-fps-slider").max = max_fps;
wm.switchDisabled($("stream-desired-fps-slider"), false); wm.switchDisabled($("stream-desired-fps-slider"), false);
if ($("stream-desired-fps-slider").value !== source.desired_fps) { if ($("stream-desired-fps-slider").value !== state.source.desired_fps) {
$("stream-desired-fps-slider").value = source.desired_fps; $("stream-desired-fps-slider").value = state.source.desired_fps;
__updateDesiredFpsValue(source.desired_fps); __updateDesiredFpsValue(state.source.desired_fps);
} }
} }
if (__resolution.width !== source.resolution.width || __resolution.height !== source.resolution.height) { if (
__resolution = source.resolution; __resolution.width !== state.source.resolution.width
|| __resolution.height !== state.source.resolution.height
) {
__resolution = state.source.resolution;
if ($("stream-auto-resize-checkbox").checked) { if ($("stream-auto-resize-checkbox").checked) {
__adjustSizeFactor(); __adjustSizeFactor();
} else { } else {
@ -104,20 +100,51 @@ export function Streamer() {
} }
} }
if (__ensureStream(state.stream.clients_stat)) {
$("stream-image").className = "stream-image-active";
$("stream-box").classList.remove("stream-box-inactive");
$("stream-led").className = "led-green";
$("stream-led").title = "Stream is active";
wm.switchDisabled($("stream-screenshot-button"), false);
wm.switchDisabled($("stream-reset-button"), false);
$("stream-quality-slider").activated = false;
$("stream-desired-fps-slider").activated = false;
tools.info("Stream: active");
}
__updateStreamHeader(true);
} else {
$("stream-image").className = "stream-image-inactive";
$("stream-box").classList.add("stream-box-inactive");
$("stream-led").className = "led-gray";
$("stream-led").title = "Stream inactive";
wm.switchDisabled($("stream-screenshot-button"), true);
wm.switchDisabled($("stream-reset-button"), true);
wm.switchDisabled($("stream-quality-slider"), true);
wm.switchDisabled($("stream-desired-fps-slider"), true);
tools.info("Stream: inactive");
__updateStreamHeader(false);
}
};
var __ensureStream = function(clients_stat) {
let stream_client = tools.getCookie("stream_client"); let stream_client = tools.getCookie("stream_client");
if (!__client_id && stream_client && stream_client.startsWith(__client_key + "/")) { if (!__client_id && stream_client && stream_client.startsWith(__client_key + "/")) {
tools.info("Stream: found acceptable stream_client cookie:", stream_client); tools.info("Stream: found acceptable stream_client cookie:", stream_client);
__client_id = stream_client.slice(stream_client.indexOf("/") + 1); __client_id = stream_client.slice(stream_client.indexOf("/") + 1);
} }
if (Object.prototype.hasOwnProperty.call(stream.clients_stat, __client_id)) { if (__client_id && __client_id in clients_stat) {
__client_fps = stream.clients_stat[__client_id].fps; __client_fps = clients_stat[__client_id].fps;
return false;
} else { } else {
__clearState(); __client_key = tools.makeId();
} __client_id = "";
__client_fps = -1;
if (!__prev) { let path = `/streamer/stream?key=${__client_key}`;
let path = "/streamer/stream?key=" + __client_key;
if (tools.browser.is_safari || tools.browser.is_ios) { if (tools.browser.is_safari || tools.browser.is_ios) {
// uStreamer fix for WebKit // uStreamer fix for WebKit
tools.info("Stream: using dual_final_frames=1 to fix WebKit MJPG bugs"); tools.info("Stream: using dual_final_frames=1 to fix WebKit MJPG bugs");
@ -127,49 +154,11 @@ export function Streamer() {
tools.info("Stream: using advance_headers=1 to fix Blink MJPG bugs"); tools.info("Stream: using advance_headers=1 to fix Blink MJPG bugs");
path += "&advance_headers=1"; path += "&advance_headers=1";
} }
$("stream-image").src = path;
$("stream-image").className = "stream-image-active";
$("stream-box").classList.remove("stream-box-inactive");
$("stream-led").className = "led-green";
$("stream-led").title = "Stream is active";
wm.switchDisabled($("stream-screenshot-button"), false);
wm.switchDisabled($("stream-reset-button"), false);
tools.info("Stream: acquired");
__prev = true;
}
__updateStreamHeader(true);
} else {
__clearState();
}
};
var __clearState = function() {
tools.info("Stream: refreshing ..."); tools.info("Stream: refreshing ...");
$("stream-image").src = path;
$("stream-image").className = "stream-image-inactive"; return true;
$("stream-box").classList.add("stream-box-inactive"); }
$("stream-led").className = "led-gray";
$("stream-led").title = "Stream inactive";
wm.switchDisabled($("stream-screenshot-button"), true);
wm.switchDisabled($("stream-reset-button"), true);
wm.switchDisabled($("stream-quality-slider"), true);
wm.switchDisabled($("stream-desired-fps-slider"), true);
__client_key = tools.makeId();
__client_id = "";
__client_fps = -1;
__prev = false;
__updateStreamHeader(false);
};
var __updateQualityValue = function(value) {
$("stream-quality-value").innerHTML = value + "%";
};
var __updateDesiredFpsValue = function(value) {
$("stream-desired-fps-value").innerHTML = (value === 0 ? "Unlimited" : value);
}; };
var __updateStreamHeader = function(online) { var __updateStreamHeader = function(online) {
@ -183,6 +172,14 @@ export function Streamer() {
} }
}; };
var __updateQualityValue = function(value) {
$("stream-quality-value").innerHTML = value + "%";
};
var __updateDesiredFpsValue = function(value) {
$("stream-desired-fps-value").innerHTML = (value === 0 ? "Unlimited" : value);
};
var __clickScreenshotButton = function() { var __clickScreenshotButton = function() {
let el_a = document.createElement("a"); let el_a = document.createElement("a");
el_a.href = "/streamer/snapshot"; el_a.href = "/streamer/snapshot";

25
web/share/js/tools.js
View File

@ -24,14 +24,14 @@
export var tools = new function() { export var tools = new function() {
let __debug = (new URL(window.location.href)).searchParams.get("debug");
this.setDefault = function(dict, key, value) { this.setDefault = function(dict, key, value) {
if (!(key in dict)) { if (!(key in dict)) {
dict[key] = value; dict[key] = value;
} }
}; };
/************************************************************************/
this.makeRequest = function(method, url, callback, body=null, content_type=null) { this.makeRequest = function(method, url, callback, body=null, content_type=null) {
let http = new XMLHttpRequest(); let http = new XMLHttpRequest();
http.open(method, url, true); http.open(method, url, true);
@ -44,6 +44,8 @@ export var tools = new function() {
return http; return http;
}; };
/************************************************************************/
this.makeId = function() { this.makeId = function() {
let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let id = ""; let id = "";
@ -53,6 +55,8 @@ export var tools = new function() {
return id; return id;
}; };
/************************************************************************/
this.getCookie = function(name) { this.getCookie = function(name) {
let matches = document.cookie.match(new RegExp( let matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)" // eslint-disable-line no-useless-escape "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)" // eslint-disable-line no-useless-escape
@ -106,13 +110,24 @@ export var tools = new function() {
}; };
}; };
/************************************************************************/
let __debug = (new URL(window.location.href)).searchParams.get("debug");
this.debug = function(...args) { this.debug = function(...args) {
if (__debug) { if (__debug) {
console.log("LOG/DEBUG", ...args); // eslint-disable-line no-console __log("DEBUG", ...args);
} }
}; };
this.info = (...args) => console.log("LOG/INFO", ...args); // eslint-disable-line no-console this.info = (...args) => __log("INFO", ...args);
this.error = (...args) => console.error("LOG/ERROR", ...args); // eslint-disable-line no-console this.error = (...args) => __log("ERROR", ...args);
let __log = function(label, ...args) {
let now = (new Date()).toISOString().split("T")[1].replace("Z", "");
console.log(`[${now}] LOG/${label} --`, ...args);
};
/************************************************************************/
this.browser = new function() { this.browser = new function() {
// https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769 // https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769