From e8924d0144b5be569b0cf68dace8b817a98993ef Mon Sep 17 00:00:00 2001 From: Mats Auraot <10709682+Mindgamesnl@users.noreply.github.com> Date: Sat, 7 Dec 2024 23:43:04 +0100 Subject: [PATCH] voicechat page revisions --- client/public/en.lang | 16 ++-- client/public/metadata.json | 2 +- .../src/client/services/voice/VoiceModule.jsx | 19 ++-- client/src/metadata.json | 2 +- client/src/state/store.jsx | 2 + .../views/client/pages/voice/VoicePage.jsx | 87 ++++++++++++++++++- 6 files changed, 106 insertions(+), 22 deletions(-) diff --git a/client/public/en.lang b/client/public/en.lang index 4b75a43a1..b439e6332 100644 --- a/client/public/en.lang +++ b/client/public/en.lang @@ -40,12 +40,6 @@ vc.badClient=VoiceChat requires a web client served over HTTPS, please update yo vc.notCompatible=Your browser does not support voice chat. Please use a modern (desktop) browser like Chrome, Safari, etc. vc.voiceModerationEnabled=This server has moderation enabled. Select staff may be listening in while your mic is active. vc.notice=Notice -vc.startingPopupTitle=Logging into voice chat... -vc.startingPopup=Please wait while we get you setup with a voice server... hold on tight, this shouldn't take too long. -vc.reloadingPopupTitle=Reloading voice system! -vc.reloadingPopup=Please wait while voice chat gets restarted to apply your new settings... This shouldn't take long -vc.updatingMicPopupTitle=Updating microphone! -vc.updatingMicPopup=Please wait while voice chat gets restarted with your new microphone... This shouldn't take long vc.micErrorPopupTitle=Microphone error vc.micErrorPopup=Something went wrong while trying to access your microphone. Please press "allow" when your browser asks you for microphone permissions, or visit the wiki for more information. vc.disabled=VoiceChat has temporarily been disabled by %serverName @@ -106,6 +100,16 @@ vc.tooltip.local=Proximity Voice Chat vc.tooltip.global=Global Voice Chat vc.peerLoading=Loading {name} +vc.state.loading.title=Connecting to Voice Chat +vc.state.loading.body=Setting up your voice connection... +vc.state.error.title=Voice Chat Connection Failed +vc.state.error.body=We couldn't establish a connection to the voice server. +vc.state.error.hints=Things you can check +vc.state.error.fix1=Check if you have a VPN or anti-webRTC software enabled +vc.state.error.fix2=Check if your browser has microphone permissions +vc.state.error.fix3=Try refreshing the page +vc.state.error.fix4=The server might be full and not have any more voice slots available + vc.channel.title=Voice Channels vc.channel.single=channel vc.channel.multiple=channels diff --git a/client/public/metadata.json b/client/public/metadata.json index f07493d9f..6e17265a1 100644 --- a/client/public/metadata.json +++ b/client/public/metadata.json @@ -1 +1 @@ -{"buildMajor":1,"buildMinor":125,"buildRevision":285,"buildTag":"dev","buildDate":"Fri Dec 06 2024","build":"1.125.285 dev"} \ No newline at end of file +{"buildMajor":1,"buildMinor":125,"buildRevision":286,"buildTag":"dev","buildDate":"Sat Dec 07 2024","build":"1.125.286 dev"} \ No newline at end of file diff --git a/client/src/client/services/voice/VoiceModule.jsx b/client/src/client/services/voice/VoiceModule.jsx index af61431fb..19d9a1637 100644 --- a/client/src/client/services/voice/VoiceModule.jsx +++ b/client/src/client/services/voice/VoiceModule.jsx @@ -109,7 +109,7 @@ export const VoiceModule = new class IVoiceModule { } // hide error popup - setGlobalState({ loadingOverlay: { visible: false } }); + setGlobalState({ voiceState: { loading: false } }); let stringifiedError = ''; // is it just a string? @@ -127,10 +127,9 @@ export const VoiceModule = new class IVoiceModule { panic(message = 'unknown', source = null) { setGlobalState({ - loadingOverlay: { - visible: false, - }, voiceState: { + loading: false, + failedGeneric: true, enabled: false, }, }); @@ -167,10 +166,8 @@ export const VoiceModule = new class IVoiceModule { showLoadingPopup() { setGlobalState({ - loadingOverlay: { - visible: true, - title: getTranslation(null, 'vc.startingPopupTitle'), - message: getTranslation(null, 'vc.startingPopup'), + voiceState: { + loading: true, }, }); } @@ -195,12 +192,8 @@ export const VoiceModule = new class IVoiceModule { SocketManager.send(PluginChannel.RTC_READY, { enabled: false }); setGlobalState({ - loadingOverlay: { - visible: true, - title: getTranslation(null, 'vc.updatingMicPopupTitle'), - message: getTranslation(null, 'vc.updatingMicPopup'), - }, voiceState: { + loading: true, peers: [], }, }); diff --git a/client/src/metadata.json b/client/src/metadata.json index f07493d9f..6e17265a1 100644 --- a/client/src/metadata.json +++ b/client/src/metadata.json @@ -1 +1 @@ -{"buildMajor":1,"buildMinor":125,"buildRevision":285,"buildTag":"dev","buildDate":"Fri Dec 06 2024","build":"1.125.285 dev"} \ No newline at end of file +{"buildMajor":1,"buildMinor":125,"buildRevision":286,"buildTag":"dev","buildDate":"Sat Dec 07 2024","build":"1.125.286 dev"} \ No newline at end of file diff --git a/client/src/state/store.jsx b/client/src/state/store.jsx index 0374d4628..f35b25568 100644 --- a/client/src/state/store.jsx +++ b/client/src/state/store.jsx @@ -91,6 +91,8 @@ const initialState = { }, voiceState: { + loading: false, + failedGeneric: true, autoJoinVoiceChat: false, serverHasVoiceChat: false, peersHidden: false, diff --git a/client/src/views/client/pages/voice/VoicePage.jsx b/client/src/views/client/pages/voice/VoicePage.jsx index db9e57d2e..14dfe1691 100644 --- a/client/src/views/client/pages/voice/VoicePage.jsx +++ b/client/src/views/client/pages/voice/VoicePage.jsx @@ -1,7 +1,8 @@ +/* eslint-disable */ import React from 'react'; import { connect } from 'react-redux'; import { - Users, UserPlus, Map, Radio, + Users, UserPlus, Map, Radio, AlertTriangle, Loader2, } from 'lucide-react'; import VoicePeerBox from '../../../../components/voice/VoicePeerBox'; import VoiceQuickSettings from '../../../../components/voice/ui/VoiceQuickSettings'; @@ -10,6 +11,81 @@ import { ModerationWarning } from '../../../../components/voice/ModerationWarnin import { msg } from '../../../../client/OpenAudioAppContainer'; import ChannelList from '../../../../components/voice/ui/VoiceChannels'; +function VoiceErrorState({ color }) { + return ( +
+
+
+
+
+ +
+ +
+

+ {msg('vc.state.error.title')} +

+

+ {msg('vc.state.error.body')} +

+
+ +
+
+

{msg('vc.state.error.hints')}

+
    +
  • {msg('vc.state.error.fix1')}
    • +
  • {msg('vc.state.error.fix2')}
    • +
  • {msg('vc.state.error.fix3')}
    • +
  • {msg('vc.state.error.fix4')}
    • +
+
+
+
+
+
+
+ ); +} + +function VoiceLoadingState({ color }) { + return ( +
+
+
+
+
+ +
+ +

+ {msg('vc.state.loading.title')} +

+ +
+
+
+
+

+ {msg('vc.state.loading.body')} +

+
+
+
+
+
+ ); +} + function DarkPanel({ children, className = '', color }) { return (
; + } + + if (voiceState.loading) { + return ; + } + return (