Added logic to prevent reconnection warning when switching media servers

packages/client-core/i18n/en/common.json

@@ -29,6 +29,7 @@
     "loadingAllowed": "Loading allowed routes...",
     "loadingXRSystems": "Loading immersive session...",
     "connectingToWorld": "Connecting to world...",
+    "connectingToMedia": "Connecting to media...",
     "entering": "Entering world...",
     "loading": "Loading...",
     "objectRemaining": "{{count}} object remaining",

packages/client-core/src/common/services/MediaInstanceConnectionService.ts

@@ -49,7 +49,8 @@ export const MediaInstanceState = defineState({
   name: 'MediaInstanceState',
   initial: () => ({
     instances: {} as { [id: string]: InstanceState },
-    joiningNonInstanceMediaChannel: false
+    joiningNonInstanceMediaChannel: false,
+    joiningNewMediaChannel: false
   })
 })
 
@@ -93,6 +94,7 @@ export const MediaInstanceConnectionServiceReceptor = (action) => {
     })
     .when(MediaInstanceConnectionAction.serverConnected.matches, (action) => {
       s.joiningNonInstanceMediaChannel.set(false)
+      s.joiningNewMediaChannel.set(false)
       return s.instances[action.instanceId].merge({
         connected: true,
         connecting: false,
@@ -107,7 +109,8 @@ export const MediaInstanceConnectionServiceReceptor = (action) => {
     .when(MediaInstanceConnectionAction.disconnect.matches, (action) => {
       return s.instances[action.instanceId].set(none)
     })
-    .when(MediaInstanceConnectionAction.joiningNonInstanceMediaChannel.matches, (action) => {
+    .when(MediaInstanceConnectionAction.joiningNonInstanceMediaChannel.matches, () => {
+      s.joiningNewMediaChannel.set(true)
       return s.joiningNonInstanceMediaChannel.set(true)
     })
     .when(MediaInstanceConnectionAction.changeActiveConnectionHostId.matches, (action) => {
@@ -119,6 +122,9 @@ export const MediaInstanceConnectionServiceReceptor = (action) => {
       s.instances.merge({ [action.newInstanceId]: currentNetwork })
       s.instances[action.currentInstanceId].set(none)
     })
+    .when(MediaInstanceConnectionAction.joiningNewMediaChannel.matches, () => {
+      return s.joiningNewMediaChannel.set(true)
+    })
 }
 
 //Service
@@ -203,6 +209,9 @@ export const MediaInstanceConnectionService = {
         Engine.instance.api.service('instance-provision').off('created', listener)
       }
     }, [])
+  },
+  setJoining: (joining: boolean) => {
+    dispatchAction(MediaInstanceConnectionAction.joiningNewMediaChannel({}))
   }
 }
 
@@ -243,6 +252,10 @@ export class MediaInstanceConnectionAction {
     type: 'ee.client.MediaInstanceConnection.JOINING_NON_INSTANCE_MEDIA_CHANNEL' as const
   })
 
+  static joiningNewMediaChannel = defineAction({
+    type: 'ee.client.MediaInstanceConnection.JOINING_NEW_MEDIA_CHANNEL' as const
+  })
+
   static changeActiveConnectionHostId = defineAction({
     type: 'ee.client.MediaInstanceConnection.MEDIA_INSTANCE_SERVER_CHANGE_HOST_ID' as const,
     currentInstanceId: matchesUserId,

packages/client-core/src/components/MediaIconsBox/index.module.scss

@@ -72,3 +72,11 @@
     flex-direction: column;
   }
 }
+
+.loader {
+  display: flex;
+  padding: 0;
+  align-items: center;
+  text-align: center;
+  margin: 5px;
+}

packages/client-core/src/components/MediaIconsBox/index.tsx

@@ -1,3 +1,4 @@
+import { t } from 'i18next'
 import React, { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 
@@ -15,6 +16,7 @@ import { EngineActions, EngineState } from '@etherealengine/engine/src/ecs/class
 import { NetworkState } from '@etherealengine/engine/src/networking/NetworkState'
 import { XRAction, XRState } from '@etherealengine/engine/src/xr/XRState'
 import { dispatchAction, getMutableState, useHookstate } from '@etherealengine/hyperflux'
+import CircularProgress from '@etherealengine/ui/src/primitives/mui/CircularProgress'
 import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
 
 import { VrIcon } from '../../common/components/Icons/VrIcon'
@@ -69,6 +71,22 @@ export const MediaIconsBox = () => {
 
   return (
     <section className={`${styles.drawerBox} ${topShelfStyle}`}>
+      {(currentChannelInstanceConnection == null || !currentChannelInstanceConnection?.connected.value) && (
+        <div className={styles.loader}>
+          <CircularProgress />
+          <div
+            style={{
+              // default values will be overridden by theme
+              fontFamily: 'Lato',
+              fontSize: '12px',
+              color: '#585858',
+              padding: '16px'
+            }}
+          >
+            {t('common:loader.connectingToMedia') as string}
+          </div>
+        </div>
+      )}
       {audioEnabled &&
       hasAudioDevice.value &&
       mediaNetworkReady &&

packages/client-core/src/networking/ClientNetworkingSystem.tsx

@@ -14,6 +14,7 @@ import {
   MediaInstanceConnectionService,
   MediaInstanceConnectionServiceReceptor
 } from '../common/services/MediaInstanceConnectionService'
+import { MediaInstanceState } from '../common/services/MediaInstanceConnectionService'
 import { NetworkConnectionService } from '../common/services/NetworkConnectionService'
 import { DataChannels } from '../components/World/ProducersAndConsumers'
 import { PeerConsumers } from '../media/PeerMedia'
@@ -100,6 +101,7 @@ const execute = () => {
 
   for (const action of mediaInstanceDisconnectedQueue()) {
     const transport = Engine.instance.mediaNetwork as SocketWebRTCClientNetwork
+    const mediaInstanceState = getState(MediaInstanceState)
     if (transport?.reconnecting) continue
 
     const channels = chatState.channels.channels
@@ -108,7 +110,7 @@ const execute = () => {
       (channel) => channel.channelType === 'party' && channel.partyId === authState.user.partyId
     )
     const channelId = partyChannel ? partyChannel.id : instanceChannel ? instanceChannel.id : null
-    if (channelId)
+    if (channelId && !mediaInstanceState.joiningNewMediaChannel)
       WarningUIService.openWarning({
         title: 'Media disconnected',
         body: "You've lost your connection with the media server. We'll try to reconnect when the following time runs out.",

packages/client-core/src/social/services/PartyService.ts

@@ -141,12 +141,10 @@ export const PartyService = {
   },
   createParty: async () => {
     try {
+      MediaInstanceConnectionService.setJoining(true)
       const network = Engine.instance.mediaNetwork as SocketWebRTCClientNetwork
-      console.log('ending video chat')
       await endVideoChat(network, {})
-      console.log('ended video chat, now leaving network')
       await leaveNetwork(network)
-      console.log('left network, making party')
       await Engine.instance.api.service('party').create()
       PartyService.getParty()
     } catch (err) {
@@ -205,6 +203,7 @@ export const PartyService = {
       const instanceChannel = Object.values(channels).find(
         (channel) => channel.instanceId === Engine.instance.worldNetwork?.hostId
       )
+      MediaInstanceConnectionService.setJoining(true)
       if (instanceChannel) await MediaInstanceConnectionService.provisionServer(instanceChannel?.id!, true)
     }
   },