From 13dce9ce146b956cc8c45b020027061aa05cfde2 Mon Sep 17 00:00:00 2001 From: Max Alyokhin <55048182+MaxAlyokhin@users.noreply.github.com> Date: Sat, 22 Apr 2023 14:50:45 +0300 Subject: [PATCH] bugfixes --- client/src/js/audio.js | 2 +- client/src/js/latency.js | 4 +- client/src/js/settings.js | 127 ++++++++++++++++++++------------------ package-lock.json | 14 ++++- package.json | 1 + 5 files changed, 82 insertions(+), 66 deletions(-) diff --git a/client/src/js/audio.js b/client/src/js/audio.js index 4da849c..4aaa9d8 100644 --- a/client/src/js/audio.js +++ b/client/src/js/audio.js @@ -468,7 +468,7 @@ const fourierCoefficients = { export function audioInit() { // Checking context support in the browser try { - audioContext = new (window.AudioContext || window.webkitAudioContext)() + audioContext = new (window.AudioContext || window.webkitAudioContext)({ latencyHint: 0 }) } catch (error) { window.alert(`Браузер не поддерживается / Browser is not support`) } diff --git a/client/src/js/latency.js b/client/src/js/latency.js index 75d2fd2..16bfb10 100644 --- a/client/src/js/latency.js +++ b/client/src/js/latency.js @@ -25,7 +25,7 @@ export function latency(device) { // From the smartphone returns pong with the same desktop time socket.on('pong', (dateOfPing) => { - latencyElement.textContent = (Date.now() - dateOfPing) / 2 + toFixedNumber(audioContext.outputLatency, 3) * 1000 + latencyElement.textContent = `${(Date.now() - dateOfPing) / 2} + ${toFixedNumber(audioContext.outputLatency || audioContext.baseLatency, 3) * 1000}` }) } @@ -42,7 +42,7 @@ export function latency(device) { intervalIsInit = true // Writing a latency in the DOM setInterval(() => { - latencyElement.textContent = toFixedNumber(audioContext.outputLatency, 3) * 1000 + latencyElement.textContent = toFixedNumber(audioContext.outputLatency || audioContext.baseLatency, 3) * 1000 }, updateFrequency) } } diff --git a/client/src/js/settings.js b/client/src/js/settings.js index 30e7b72..de9f77e 100644 --- a/client/src/js/settings.js +++ b/client/src/js/settings.js @@ -3,6 +3,8 @@ // Mutations are triggered by events in the interface // and synchronize settings over a websocket with the remote desktop +import device from 'current-device' + import { updateCompressorSettings } from './audio' import { toFixedNumber } from './helpers' import { language } from './language' @@ -549,46 +551,13 @@ export function syncSettings() { socket.emit('settings message', settings) } + updateCompressorSettings(settings.audio.compressor) syncLocalStorage(settings) } // Linking the settings object to the interface export function settingsInit() { - // Enabling the websocket on a smartphone - synthesisRegimeElement.addEventListener('change', function (event) { - if (!socketIsInit) { - socketInit() - - socket.connect() - - // On updating the settings object - socket.on('settings message', (settingsData) => { - Object.assign(settings, settingsData) // Updating an object - syncSettingsFrontend(settingsData) // Updating input fields - syncLocalStorage(settingsData) - }) - - // Hanging listeners of websocket events - socket.on('connect', () => { - connectionsToServer.textContent = language.connection.ready - connectionsToServer.classList.remove('connections--wait', 'connections--error') - connectionsToServer.classList.add('connections--ready') - }) - - socket.on('disconnect', () => { - connectionsToServer.textContent = language.connection.failed - connectionsToServer.classList.remove('connections--wait', 'connections--ready') - connectionsToServer.classList.add('connections--error') - }) - - // Here hangs the pong event listener from the desktop to calculate the latency to the desktop - latency('mobile') - } - - mutations.audio.setSynthesisRegime(event.target.value) - }) - frequencyRegimeElement.addEventListener('change', function (event) { mutations.audio.setFrequencyRegime(event.target.value) }) @@ -789,42 +758,78 @@ export function settingsInit() { // Setting up the compressor updateCompressorSettings(settings.audio.compressor) - // If the URL has ?remote, then immediately switch to the relevant mode - const markerFromURL = document.location.search.slice(1) + if (device.mobile()) { + // Enabling the websocket on a smartphone + synthesisRegimeElement.addEventListener('change', function (event) { + if (!socketIsInit) { + socketInit() - if (markerFromURL === 'remote') { - settings.audio.synthesisRegime = 'remote' - document.querySelector('#remote').checked = true + socket.connect() - if (!socketIsInit) { - socketInit() + // On updating the settings object + socket.on('settings message', (settingsData) => { + Object.assign(settings, settingsData) // Updating an object + syncSettingsFrontend(settingsData) // Updating input fields + syncLocalStorage(settingsData) + }) + + // Hanging listeners of websocket events + socket.on('connect', () => { + connectionsToServer.textContent = language.connection.ready + connectionsToServer.classList.remove('connections--wait', 'connections--error') + connectionsToServer.classList.add('connections--ready') + }) + + socket.on('disconnect', () => { + connectionsToServer.textContent = language.connection.failed + connectionsToServer.classList.remove('connections--wait', 'connections--ready') + connectionsToServer.classList.add('connections--error') + }) + + // Here hangs the pong event listener from the desktop to calculate the latency to the desktop + latency('mobile') + } - socket.connect() + mutations.audio.setSynthesisRegime(event.target.value) + }) - socket.on('settings message', (settingsData) => { - Object.assign(settings, settingsData) - syncSettingsFrontend(settingsData) - }) + // If the URL has ?remote, then immediately switch to the relevant mode + const markerFromURL = document.location.search.slice(1) - socket.on('connect', () => { - connectionsToServer.textContent = language.connection.ready - connectionsToServer.classList.remove('connections--wait', 'connections--error') - connectionsToServer.classList.add('connections--ready') - }) + if (markerFromURL === 'remote') { + settings.audio.synthesisRegime = 'remote' + document.querySelector('#remote').checked = true - socket.on('disconnect', () => { - connectionsToServer.textContent = language.connection.failed - connectionsToServer.classList.remove('connections--wait', 'connections--ready') - connectionsToServer.classList.add('connections--error') - }) + if (!socketIsInit) { + socketInit() + + socket.connect() + + socket.on('settings message', (settingsData) => { + Object.assign(settings, settingsData) + syncSettingsFrontend(settingsData) + }) + + socket.on('connect', () => { + connectionsToServer.textContent = language.connection.ready + connectionsToServer.classList.remove('connections--wait', 'connections--error') + connectionsToServer.classList.add('connections--ready') + }) + + socket.on('disconnect', () => { + connectionsToServer.textContent = language.connection.failed + connectionsToServer.classList.remove('connections--wait', 'connections--ready') + connectionsToServer.classList.add('connections--error') + }) + } + + mutations.audio.setSynthesisRegime('remote') } - mutations.audio.setSynthesisRegime('remote') + // Calculate the delay, which is equal to audioContext.outputLatency for the smartphone + // Also here hangs the pong event listener from the desktop to calculate the latency to the desktop + latency('mobile') } - - // Calculate the delay, which is equal to audioContext.outputLatency for the smartphone - // Also here hangs the pong event listener from the desktop to calculate the latency to the desktop - latency('mobile') } // Hotkey control diff --git a/package-lock.json b/package-lock.json index 3c8cae5..5db2d44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { + "component-emitter": "^1.3.0", "express": "^4.17.1", "open": "^8.4.0", "socket.io": "^4.1.2" @@ -105,6 +106,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/component-emitter": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", + "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==" + }, "node_modules/content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -922,6 +928,11 @@ "get-intrinsic": "^1.0.2" } }, + "component-emitter": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", + "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==" + }, "content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -1386,8 +1397,7 @@ } }, "socket.io-parser": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz", + "version": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz", "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==", "requires": { "@socket.io/component-emitter": "~3.1.0", diff --git a/package.json b/package.json index 6e30c2f..ce657ca 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "author": "Max Alyokhin", "license": "MIT", "dependencies": { + "component-emitter": "^1.3.0", "express": "^4.17.1", "open": "^8.4.0", "socket.io": "^4.1.2"