feat(ui) - assist status message

frontend/app/components/Session_/Player/Overlay.tsx

@@ -2,6 +2,7 @@ import React, {useEffect} from 'react';
 import { connectPlayer, markTargets } from 'Player';
 import { getStatusText } from 'Player/MessageDistributor/managers/AssistManager';
 import type { MarkedTarget } from 'Player/MessageDistributor/StatedScreen/StatedScreen';
+import { ConnectionStatus } from 'Player/MessageDistributor/managers/AssistManager';
 
 import AutoplayTimer from './Overlay/AutoplayTimer';
 import PlayIconLayer from './Overlay/PlayIconLayer';
@@ -17,6 +18,7 @@ interface Props {
   loading: boolean,
   live: boolean,
   liveStatusText: string,
+  concetionStatus: ConnectionStatus,
   autoplay: boolean,
   markedTargets: MarkedTarget[] | null,
   activeTargetIndex: number,
@@ -33,6 +35,7 @@ function Overlay({
   loading,
   live,
   liveStatusText,
+  concetionStatus,
   autoplay,
   markedTargets,
   activeTargetIndex,
@@ -53,7 +56,7 @@ function Overlay({
     <>
       { showAutoplayTimer && <AutoplayTimer /> }
       { showLiveStatusText && 
-        <LiveStatusText text={liveStatusText} />
+        <LiveStatusText text={liveStatusText} concetionStatus={concetionStatus} />
       }
       { messagesLoading && <Loader/> }
       { showPlayIconLayer && 
@@ -74,6 +77,7 @@ export default connectPlayer(state => ({
   autoplay: state.autoplay,
   live: state.live,
   liveStatusText: getStatusText(state.peerConnectionStatus),
+  concetionStatus: state.peerConnectionStatus,
   markedTargets: state.markedTargets,
   activeTargetIndex: state.activeTargetIndex,
 }))(Overlay);

frontend/app/components/Session_/Player/Overlay/LiveStatusText.tsx

@@ -1,11 +1,64 @@
 import React from 'react';
 import stl from './LiveStatusText.css';
 import ovStl from './overlay.css';
+import { ConnectionStatus } from 'Player/MessageDistributor/managers/AssistManager';
+import { Loader } from 'UI';
 
 interface Props {
   text: string;
+  concetionStatus: ConnectionStatus;
 }
 
-export default function LiveStatusText({ text }: Props) {
-  return <div className={ovStl.overlay}><div className={stl.text}>{text}</div></div>
+export default function LiveStatusText({ text, concetionStatus }: Props) {
+  const renderView = () => {
+    switch (concetionStatus) {
+      case ConnectionStatus.Connecting:
+        return (
+          <div className="flex flex-col items-center">
+            <Loader loading={true} size="small" />
+            <div className="text-lg -mt-8">Connecting...</div>
+            <div className="text-sm">Establishing a connection with the remote session.</div>
+          </div>
+        )
+      case ConnectionStatus.WaitingMessages:
+        return (
+          <div className="flex flex-col items-center">
+            <Loader loading={true} size="small" />
+            <div className="text-lg -mt-8">Waiting for the session to become active...</div>
+            <div className="text-sm">If it's taking too much time, it could mean the user is simply inactive.</div>
+          </div>
+        )
+      case ConnectionStatus.Connected:
+        return (
+          <div className="flex flex-col items-center">
+            <div className="text-lg -mt-8">Connected</div>
+          </div>
+        )
+      case ConnectionStatus.Inactive:
+        return (
+          <div className="flex flex-col items-center">
+            <Loader loading={true} size="small" />
+            <div className="text-lg -mt-8">Waiting for the session to become active...</div>
+            <div className="text-sm">If it's taking too much time, it could mean the user is simply inactive.</div>
+          </div>
+        )
+      case ConnectionStatus.Disconnected:
+        return (
+          <div className="flex flex-col items-center">
+            <div className="text-lg -mt-8">Disconnected</div>
+            <div className="text-sm">The connection was lost with the remote session. The user may have simply closed the tab/browser.</div>
+          </div>
+        )
+      case ConnectionStatus.Error:
+        return (
+          <div className="flex flex-col items-center">
+            <div className="text-lg -mt-8">Error</div>
+            <div className="text-sm">Something wrong just happened. Try refreshing the page.</div>
+          </div>
+        )
+    } 
+  }
+  return <div className={ovStl.overlay}>
+    { renderView()}
+  </div>
 }

frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.tsx

@@ -38,7 +38,7 @@ function LiveFilterModal(props: Props) {
       { showSearchList && (
         <Loader size="small" loading={fetchingFilterSearchList}>
           <div className="-mx-6 px-6">
-            { filterSearchList && Object.keys(filterSearchList).map((key, index) => {
+            { filterSearchList && Object.keys(filterSearchList).filter(i => filtersMap[i].isLive).map((key, index) => {
               const filter = filterSearchList[key];
               const option = filtersMap[key];
               return (