Skip to content

Commit 5de0f3b

Browse files
thelamerthelamer
committed
fix dashboard getting in the way of client rendering performance
1 parent 38f2920 commit 5de0f3b

File tree

3 files changed

+87
-42
lines changed

3 files changed

+87
-42
lines changed

‎addons/gst-web-core/lib/input.js

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1111,6 +1111,7 @@ export class Input {
11111111
constructor(element, send, isSharedMode = false, playerIndex = 0, useCssScaling = false) {
11121112
this.element = element;
11131113
this.send = send;
1114+
this._isSidebarOpen = false;
11141115
this.isSharedMode = isSharedMode;
11151116
this.playerIndex = playerIndex;
11161117
this.cursorDiv = document.createElement('canvas');
@@ -1182,6 +1183,14 @@ export class Input {
11821183
this._touchScrollLastCentroid = null;
11831184
}
11841185

1186+
_handleVisibilityMessage(event) {
1187+
if (event.origin !== window.location.origin) return;
1188+
const message = event.data;
1189+
if (typeof message === "object" && message !== null && message.type === 'sidebarVisibilityChanged') {
1190+
this._isSidebarOpen = !!message.isOpen;
1191+
}
1192+
}
1193+
11851194
static _nextGuacID = 0;
11861195

11871196
_drawAndScaleCursor() {
@@ -2242,13 +2251,17 @@ export class Input {
22422251
_gamepadButton(gp_num, btn_num, val) {
22432252
const server_gp_num = this.playerIndex;
22442253
this.send("js,b," + server_gp_num + "," + btn_num + "," + val);
2245-
window.postMessage({ type: 'gamepadButtonUpdate', gamepadIndex: server_gp_num, buttonIndex: btn_num, value: val }, window.location.origin);
2254+
if (this._isSidebarOpen) {
2255+
window.postMessage({ type: 'gamepadButtonUpdate', gamepadIndex: server_gp_num, buttonIndex: btn_num, value: val }, window.location.origin);
2256+
}
22462257
}
22472258

22482259
_gamepadAxis(gp_num, axis_num, val) {
22492260
const server_gp_num = this.playerIndex;
22502261
this.send("js,a," + server_gp_num + "," + axis_num + "," + val);
2251-
window.postMessage({ type: 'gamepadAxisUpdate', gamepadIndex: server_gp_num, axisIndex: axis_num, value: val }, window.location.origin);
2262+
if (this._isSidebarOpen) {
2263+
window.postMessage({ type: 'gamepadAxisUpdate', gamepadIndex: server_gp_num, axisIndex: axis_num, value: val }, window.location.origin);
2264+
}
22522265
}
22532266

22542267
_onFullscreenChange() {
@@ -2291,6 +2304,7 @@ export class Input {
22912304
this.listeners.push(addListener(window, 'resize', this._windowMath, this));
22922305
this.listeners.push(addListener(window, 'gamepadconnected', this._gamepadConnected, this));
22932306
this.listeners.push(addListener(window, 'gamepaddisconnected', this._gamepadDisconnect, this));
2307+
this.listeners.push(addListener(window, 'message', this._handleVisibilityMessage, this));
22942308

22952309
if (!this.isSharedMode) {
22962310
this.attach_context();

‎addons/gst-web-core/selkies-core.js

Lines changed: 62 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
Input
1212
} from './lib/input.js';
1313
let decoder;
14+
let isSidebarOpen = false;
1415
let audioDecoderWorker = null;
1516
let canvas = null;
1617
let canvasContext = null;
@@ -40,8 +41,10 @@ let micWorkletNode = null;
4041
let preferredInputDeviceId = null;
4142
let preferredOutputDeviceId = null;
4243
let metricsIntervalId = null;
43-
const METRICS_INTERVAL_MS = 50;
44+
const METRICS_INTERVAL_MS = 500;
4445
const UPLOAD_CHUNK_SIZE = (1024 * 1024) - 1;
46+
const FILE_UPLOAD_THROTTLE_MS = 200;
47+
let fileUploadProgressLastSent = {};
4548
// Resources for resolution controls
4649
window.isManualResolutionMode = false;
4750
let manualWidth = null;
@@ -1220,6 +1223,9 @@ function receiveMessage(event) {
12201223
return;
12211224
}
12221225
switch (message.type) {
1226+
case 'sidebarVisibilityChanged':
1227+
isSidebarOpen = !!message.isOpen;
1228+
break;
12231229
case 'setScaleLocally':
12241230
if (isSharedMode) {
12251231
console.log("Shared mode: setScaleLocally message ignored (forced true behavior).");
@@ -2436,33 +2442,41 @@ function handleDecodedFrame(frame) { // frame.codedWidth/Height are physical pix
24362442
const sendClientMetrics = () => {
24372443
if (isSharedMode) return; // Shared mode does not have client-side FPS display in this context
24382444

2439-
const now = performance.now();
2440-
const elapsedStriped = now - lastStripedFpsUpdateTime;
2441-
const elapsedFullFrame = now - lastFpsUpdateTime;
2442-
const fpsUpdateInterval = 1000; // ms
2443-
2444-
if (uniqueStripedFrameIdsThisPeriod.size > 0) {
2445-
if (elapsedStriped >= fpsUpdateInterval) {
2446-
const stripedFps = (uniqueStripedFrameIdsThisPeriod.size * 1000) / elapsedStriped;
2447-
window.fps = Math.round(stripedFps);
2448-
uniqueStripedFrameIdsThisPeriod.clear();
2449-
lastStripedFpsUpdateTime = now;
2450-
frameCount = 0; // Reset full frame count as striped is primary
2451-
lastFpsUpdateTime = now; // Also reset its timer
2452-
}
2453-
} else if (frameCount > 0) {
2454-
if (elapsedFullFrame >= fpsUpdateInterval) {
2455-
const fullFrameFps = (frameCount * 1000) / elapsedFullFrame;
2456-
window.fps = Math.round(fullFrameFps);
2457-
frameCount = 0;
2458-
lastFpsUpdateTime = now;
2459-
lastStripedFpsUpdateTime = now; // Reset its timer too
2445+
if (isSidebarOpen) {
2446+
const now = performance.now();
2447+
const elapsedStriped = now - lastStripedFpsUpdateTime;
2448+
const elapsedFullFrame = now - lastFpsUpdateTime;
2449+
const fpsUpdateInterval = 1000; // ms
2450+
2451+
if (uniqueStripedFrameIdsThisPeriod.size > 0) {
2452+
if (elapsedStriped >= fpsUpdateInterval) {
2453+
const stripedFps = (uniqueStripedFrameIdsThisPeriod.size * 1000) / elapsedStriped;
2454+
window.fps = Math.round(stripedFps);
2455+
uniqueStripedFrameIdsThisPeriod.clear();
2456+
lastStripedFpsUpdateTime = now;
2457+
frameCount = 0; // Reset full frame count as striped is primary
2458+
lastFpsUpdateTime = now; // Also reset its timer
2459+
}
2460+
} else if (frameCount > 0) {
2461+
if (elapsedFullFrame >= fpsUpdateInterval) {
2462+
const fullFrameFps = (frameCount * 1000) / elapsedFullFrame;
2463+
window.fps = Math.round(fullFrameFps);
2464+
frameCount = 0;
2465+
lastFpsUpdateTime = now;
2466+
lastStripedFpsUpdateTime = now; // Reset its timer too
2467+
}
2468+
} else {
2469+
if (elapsedStriped >= fpsUpdateInterval || elapsedFullFrame >= fpsUpdateInterval) {
2470+
window.fps = 0;
2471+
lastFpsUpdateTime = now;
2472+
lastStripedFpsUpdateTime = now;
2473+
}
24602474
}
2461-
} else {
2462-
if (elapsedStriped >= fpsUpdateInterval || elapsedFullFrame >= fpsUpdateInterval) {
2463-
window.fps = 0;
2464-
lastFpsUpdateTime = now;
2465-
lastStripedFpsUpdateTime = now;
2475+
2476+
if (audioWorkletProcessorPort) {
2477+
audioWorkletProcessorPort.postMessage({
2478+
type: 'getBufferSize'
2479+
});
24662480
}
24672481
}
24682482

@@ -3682,6 +3696,7 @@ function uploadFileObject(file, pathToSend) {
36823696
}, window.location.origin);
36833697
websocket.send(`FILE_UPLOAD_START:${pathToSend}:${file.size}`);
36843698
let offset = 0;
3699+
fileUploadProgressLastSent[pathToSend] = 0;
36853700
const reader = new FileReader();
36863701
reader.onload = function(e) {
36873702
if (!websocket || websocket.readyState !== WebSocket.OPEN) {
@@ -3704,17 +3719,26 @@ function uploadFileObject(file, pathToSend) {
37043719
websocket.send(prefixedView.buffer);
37053720
offset += e.target.result.byteLength;
37063721
const progress = file.size > 0 ? Math.round((offset / file.size) * 100) : 100;
3707-
window.postMessage({
3708-
type: 'fileUpload',
3709-
payload: {
3710-
status: 'progress',
3711-
fileName: pathToSend,
3712-
progress: progress,
3713-
fileSize: file.size
3714-
}
3715-
}, window.location.origin);
3716-
if (offset < file.size) readChunk(offset);
3717-
else {
3722+
const now = Date.now();
3723+
if (now - fileUploadProgressLastSent[pathToSend] > FILE_UPLOAD_THROTTLE_MS) {
3724+
window.postMessage({
3725+
type: 'fileUpload',
3726+
payload: {
3727+
status: 'progress',
3728+
fileName: pathToSend,
3729+
progress: progress,
3730+
fileSize: file.size
3731+
}
3732+
}, window.location.origin);
3733+
fileUploadProgressLastSent[pathToSend] = now;
3734+
}
3735+
if (offset < file.size) {
3736+
setTimeout(() => readChunk(offset), 0);
3737+
} else {
3738+
window.postMessage({
3739+
type: 'fileUpload',
3740+
payload: { status: 'progress', fileName: pathToSend, progress: 100, fileSize: file.size }
3741+
}, window.location.origin);
37183742
websocket.send(`FILE_UPLOAD_END:${pathToSend}`);
37193743
window.postMessage({
37203744
type: 'fileUpload',

‎addons/selkies-dashboard/src/components/Sidebar.jsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const dpiScalingOptions = [
5454
];
5555
const DEFAULT_SCALING_DPI = 96;
5656

57-
const STATS_READ_INTERVAL_MS = 100;
57+
const STATS_READ_INTERVAL_MS = 500;
5858
const MAX_AUDIO_BUFFER = 10;
5959
const DEFAULT_FRAMERATE = 60;
6060
const DEFAULT_VIDEO_BITRATE = 8000;
@@ -516,6 +516,9 @@ const getPrefixedKey = (key) => `${storageAppName}_${key}`;
516516
function Sidebar({ isOpen }) {
517517
const [langCode, setLangCode] = useState("en");
518518
const [translator, setTranslator] = useState(() => getTranslator("en"));
519+
useEffect(() => {
520+
window.postMessage({ type: 'sidebarVisibilityChanged', isOpen }, window.location.origin);
521+
}, [isOpen]);
519522
const [isMobile, setIsMobile] = useState(false);
520523
const [isTrackpadModeActive, setIsTrackpadModeActive] = useState(false);
521524
const [hasDetectedTouch, setHasDetectedTouch] = useState(false);
@@ -1474,6 +1477,9 @@ function Sidebar({ isOpen }) {
14741477
window.dispatchEvent(new CustomEvent("requestFileUpload"));
14751478

14761479
useEffect(() => {
1480+
if (!isOpen) {
1481+
return;
1482+
}
14771483
const readStats = () => {
14781484
const cs = window.system_stats,
14791485
su = cs?.mem_used ?? null,
@@ -1507,7 +1513,7 @@ function Sidebar({ isOpen }) {
15071513
};
15081514
const intervalId = setInterval(readStats, STATS_READ_INTERVAL_MS);
15091515
return () => clearInterval(intervalId);
1510-
}, []);
1516+
}, [isOpen]);
15111517

15121518
useEffect(() => {
15131519
const handleWindowMessage = (event) => {
@@ -1661,6 +1667,7 @@ function Sidebar({ isOpen }) {
16611667
removeNotification,
16621668
t,
16631669
dynamicEncoderOptions,
1670+
isOpen,
16641671
]);
16651672

16661673
const sidebarClasses = `sidebar ${isOpen ? "is-open" : ""} theme-${theme}`;

0 commit comments

Comments
 (0)