summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/kvm/index.html2
-rw-r--r--web/kvm/window-stream.pug4
-rw-r--r--web/share/css/kvm/stream.css4
-rw-r--r--web/share/js/kvm/stream.js50
4 files changed, 27 insertions, 33 deletions
diff --git a/web/kvm/index.html b/web/kvm/index.html
index aaf5c7a8..49bb5bff 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -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">
diff --git a/web/kvm/window-stream.pug b/web/kvm/window-stream.pug
index 5577ab0a..567654b7 100644
--- a/web/kvm/window-stream.pug
+++ b/web/kvm/window-stream.pug
@@ -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")
diff --git a/web/share/css/kvm/stream.css b/web/share/css/kvm/stream.css
index 1bbfb2d4..2c61bcc9 100644
--- a/web/share/css/kvm/stream.css
+++ b/web/share/css/kvm/stream.css
@@ -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;
diff --git a/web/share/js/kvm/stream.js b/web/share/js/kvm/stream.js
index 4867459d..9c714414 100644
--- a/web/share/js/kvm/stream.js
+++ b/web/share/js/kvm/stream.js
@@ -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) {