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

some stream fixes

Browse Source
This commit is contained in:
Devaev Maxim 2021-04-22 20:02:51 +03:00
parent a3a17440dc
commit e1c3692045
4 changed files with 27 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/kvm/index.html
View File

@ -511,7 +511,7 @@
<button class="window-button-full-screen">&#10530;</button>
</div>
<div id="stream-info"></div>
<div class="stream-box-inactive" id="stream-box"><img class="stream-image-inactive" id="stream-image" src="/share/png/blank-stream.png"></div>
<div class="stream-box-offline" id="stream-box"><img id="stream-image" src="/share/png/blank-stream.png"></div>
<div class="keypad" id="stream-mouse-buttons" align="center">
<div class="keypad-block">
<div class="keypad-row">

4
web/kvm/window-stream.pug
View File

@ -7,8 +7,8 @@ div(id="stream-window" class="window window-resizable" data-show-by-button="show
div(id="stream-info")
div(id="stream-box" class="stream-box-inactive")
img(id="stream-image" class="stream-image-inactive" src=`${png_dir}/blank-stream.png`)
div(id="stream-box" class="stream-box-offline")
img(id="stream-image" src=`${png_dir}/blank-stream.png`)
div(id="stream-mouse-buttons" class="keypad" align="center")
div(class="keypad-block")

4
web/share/css/kvm/stream.css
View File

@ -37,11 +37,11 @@ div#stream-box {
display: inline-block;
border: var(--border-window-thin);
}
div.stream-box-inactive {
div.stream-box-offline {
-webkit-filter: grayscale(100%) brightness(75%) sepia(75%);
filter: grayscale(100%) brightness(75%) sepia(75%);
}
div.stream-box-inactive::after {
div.stream-box-offline::after {
cursor: wait;
content: "";
position: absolute;

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

@ -27,7 +27,7 @@ import {tools, $} from "../tools.js";
import {wm} from "../wm.js";
function _MjpegStreamer(set_online_callback, set_offline_callback, set_info_callback) {
function _MjpegStreamer(set_active_callback, set_inactive_callback, set_info_callback) {
var self = this;
/************************************************************************/
@ -35,30 +35,26 @@ function _MjpegStreamer(set_online_callback, set_offline_callback, set_info_call
var __key = tools.makeId();
var __id = "";
var __fps = -1;
var __clients_stat = null;
var __state = null;
var __timer = null;
var __timer_retries = 0;
/************************************************************************/
self.getFps = function() {
return __fps;
};
self.ensureStream = function(state) {
if (state && state.streamer) {
__clients_stat = state.streamer.stream.clients_stat;
__state = state.streamer;
__findId();
if (__id.length > 0 && __id in __clients_stat) {
__setOnline();
if (__id.length > 0 && __id in __state.stream.clients_stat) {
__setActive();
__stopChecking();
} else {
__ensureChecking();
}
} else {
__stopChecking();
__setOffline();
__setInactive();
}
};
@ -67,26 +63,26 @@ function _MjpegStreamer(set_online_callback, set_offline_callback, set_info_call
$("stream-image").src = "/share/png/blank-stream.png";
};
var __setOnline = function() {
var __setActive = function() {
let old_fps = __fps;
__fps = __clients_stat[__id].fps;
__fps = __state.stream.clients_stat[__id].fps;
if (old_fps < 0) {
tools.info("Stream [MJPEG]: Active");
set_online_callback();
set_active_callback();
}
set_info_callback(true, `${__fps} fps`);
set_info_callback(true, __state.source.online, `${__fps} fps`);
};
var __setOffline = function() {
var __setInactive = function() {
let old_fps = __fps;
__key = tools.makeId();
__id = "";
__fps = -1;
__clients_stat = null;
__state = null;
if (old_fps >= 0) {
tools.info("Stream [MJPEG]: Inactive");
set_offline_callback();
set_info_callback(false, "");
set_inactive_callback();
set_info_callback(false, false, "");
}
};
@ -116,15 +112,15 @@ function _MjpegStreamer(set_online_callback, set_offline_callback, set_info_call
var __checkStream = function() {
__findId();
if (__id.legnth > 0 && __id in __clients_stat) {
__setOnline();
if (__id.legnth > 0 && __id in __state.stream.clients_stat) {
__setActive();
__stopChecking();
} else if (__id.length > 0 && __timer_retries >= 0) {
__timer_retries -= 1;
} else {
__setOffline();
__setInactive();
__stopChecking();
let path = `/streamer/stream?key=${__key}`;
@ -157,7 +153,7 @@ export function Streamer() {
var __state_for_invisible = null;
var __init__ = function() {
__mjpeg = new _MjpegStreamer(__setOnline, __setOffline, __setInfo);
__mjpeg = new _MjpegStreamer(__setActive, __setInactive, __setInfo);
$("stream-led").title = "Stream inactive";
@ -185,7 +181,6 @@ export function Streamer() {
if (!wm.isWindowVisible($("stream-window"))) {
if (__state_for_invisible === null) {
__mjpeg.stopStream();
$("stream-box").classList.add("stream-box-inactive");
}
__state_for_invisible = state;
state = null;
@ -244,8 +239,7 @@ export function Streamer() {
__mjpeg.ensureStream(state);
};
var __setOnline = function() {
$("stream-box").classList.remove("stream-box-inactive");
var __setActive = function() {
$("stream-led").className = "led-green";
$("stream-led").title = "Stream is active";
wm.setElementEnabled($("stream-screenshot-button"), true);
@ -254,8 +248,7 @@ export function Streamer() {
$("stream-desired-fps-slider").activated = false;
};
var __setOffline = function() {
$("stream-box").classList.add("stream-box-inactive");
var __setInactive = function() {
$("stream-led").className = "led-gray";
$("stream-led").title = "Stream inactive";
wm.setElementEnabled($("stream-screenshot-button"), false);
@ -265,7 +258,8 @@ export function Streamer() {
wm.setElementEnabled($("stream-resolution-selector"), false);
};
var __setInfo = function(is_active, text) {
var __setInfo = function(is_active, online, text) {
$("stream-box").classList.toggle("stream-box-offline", !online);
let el_grab = document.querySelector("#stream-window-header .window-grab");
let el_info = $("stream-info");
if (is_active) {