diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/kvm/index.html | 2 | ||||
-rw-r--r-- | web/kvm/window-stream.pug | 4 | ||||
-rw-r--r-- | web/share/css/kvm/stream.css | 4 | ||||
-rw-r--r-- | web/share/js/kvm/stream.js | 50 |
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">⤢</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) { |