voicechat page revisions

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

client/public/metadata.json

@@ -1 +1 @@
-{"buildMajor":1,"buildMinor":125,"buildRevision":285,"buildTag":"dev","buildDate":"Fri Dec 06 2024","build":"1.125.285 dev"}
+{"buildMajor":1,"buildMinor":125,"buildRevision":286,"buildTag":"dev","buildDate":"Sat Dec 07 2024","build":"1.125.286 dev"}

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 = '<unknown>';
       // 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: [],
       },
     });

client/src/metadata.json

@@ -1 +1 @@
-{"buildMajor":1,"buildMinor":125,"buildRevision":285,"buildTag":"dev","buildDate":"Fri Dec 06 2024","build":"1.125.285 dev"}
+{"buildMajor":1,"buildMinor":125,"buildRevision":286,"buildTag":"dev","buildDate":"Sat Dec 07 2024","build":"1.125.286 dev"}

client/src/state/store.jsx

@@ -91,6 +91,8 @@ const initialState = {
   },
 
   voiceState: {
+    loading: false,
+    failedGeneric: true,
     autoJoinVoiceChat: false,
     serverHasVoiceChat: false,
     peersHidden: false,

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 (
+    <div className="h-full p-3">
+      <div className="max-w-2/3 h-full mx-auto">
+        <div className="h-full flex items-center justify-center">
+          <div className="w-full max-w-md text-center">
+            <div
+              className="w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center"
+              style={{ backgroundColor: `${color}20` }}
+            >
+              <AlertTriangle size={32} className="text-red-500" />
+            </div>
+
+            <div className="bg-black/40 backdrop-blur-sm rounded-xl p-6 mb-6 border border-red-500/50">
+              <h3 className="text-lg font-medium text-red-400 mb-2">
+                {msg('vc.state.error.title')}
+              </h3>
+              <p className="text-gray-400">
+                {msg('vc.state.error.body')}
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="text-sm text-gray-400">
+                <p>{msg('vc.state.error.hints')}</p>
+                <ul className="list-disc text-left pl-4 mt-2 space-y-1">
+                  <li>{msg('vc.state.error.fix1')}</li>
+                  <li>{msg('vc.state.error.fix2')}</li>
+                  <li>{msg('vc.state.error.fix3')}</li>
+                  <li>{msg('vc.state.error.fix4')}</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function VoiceLoadingState({ color }) {
+  return (
+    <div className="h-full p-3">
+      <div className="max-w-2/3 h-full mx-auto">
+        <div className="h-full flex items-center justify-center">
+          <div className="text-center">
+            <div
+              className="w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center"
+              style={{ backgroundColor: `${color}20` }}
+            >
+              <Loader2 size={32} className="animate-spin" style={{ color }} />
+            </div>
+
+            <h2 className="text-xl font-medium text-gray-200 mb-3">
+              {msg('vc.state.loading.title')}
+            </h2>
+
+            <div className="flex flex-col items-center gap-4">
+              <div className="w-48 h-2 bg-black/40 rounded-full overflow-hidden">
+                <div
+                  className="h-full rounded-full animate-pulse"
+                  style={{ backgroundColor: color }}
+                />
+              </div>
+              <p className="text-sm text-gray-400">
+                {msg('vc.state.loading.body')}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function DarkPanel({ children, className = '', color }) {
   return (
     <div
@@ -46,6 +122,15 @@ function ActionCard({
 }
 
 function VoicePage({ voiceState, color }) {
+
+  if (voiceState.failedGeneric) {
+    return <VoiceErrorState color={color} />;
+  }
+
+  if (voiceState.loading) {
+    return <VoiceLoadingState color={color} />;
+  }
+
   return (
     <div className="h-full p-3">
       <div className="max-w-2/3 h-full mx-auto">