64 lines
No EOL
2.4 KiB
TypeScript
64 lines
No EOL
2.4 KiB
TypeScript
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, 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>
|
|
} |