jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): disable active session tabs when in call

Browse source
This commit is contained in:
nick-delirium 2023-02-21 18:24:38 +01:00
parent f9c62f8960
commit d77fc93552
1 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/app/components/Session/Player/LivePlayer/AssistSessionsTabs/AssistSessionsTabs.tsx
View file

@ -6,18 +6,20 @@ import { observer } from 'mobx-react-lite';
import { useHistory } from 'react-router-dom';
import { multiview, liveSession, withSiteId } from 'App/routes';
import { connect } from 'react-redux';
import { PlayerContext, ILivePlayerContext } from 'App/components/Session/playerContext';
interface ITab {
onClick?: () => void;
classNames?: string;
children: React.ReactNode;
style?: Record<string, any>;
isDisabled?: boolean;
}
const Tab = (props: ITab) => (
<div
onClick={props.onClick}
className={cn('p-1 rounded flex items-center justify-center cursor-pointer', props.classNames)}
className={cn('p-1 rounded flex items-center justify-center', !props.isDisabled ? 'cursor-pointer' : 'cursor-not-allowed', props.classNames)}
style={props.style}
>
{props.children}
@ -25,7 +27,7 @@ const Tab = (props: ITab) => (
);
export const InactiveTab = React.memo((props: Omit<ITab, 'children'>) => (
<Tab onClick={props.onClick} classNames={cn("hover:bg-gray-bg bg-gray-light", props.classNames)}>
<Tab onClick={props.onClick} classNames={cn("hover:bg-gray-bg bg-gray-light", !props.isDisabled ? 'cursor-pointer' : 'cursor-not-allowed', props.classNames)}>
<Icon name="plus" size="22" color="white" />
</Tab>
));
@ -44,6 +46,10 @@ const CurrentTab = React.memo(() => (
function AssistTabs({ session, siteId }: { session: Record<string, any>; siteId: string }) {
const history = useHistory();
const { store } = React.useContext(PlayerContext) as unknown as ILivePlayerContext
const { recordingState, calling, remoteControl } = store.get()
const isDisabled = recordingState !== 0 || calling !== 0 || remoteControl !== 0
const { assistMultiviewStore } = useStore();
const placeholder = new Array(4 - assistMultiviewStore.sessions.length).fill(0);
@ -55,28 +61,30 @@ function AssistTabs({ session, siteId }: { session: Record<string, any>; siteId:
}, []);
const openGrid = () => {
if (isDisabled) return;
const sessionIdQuery = encodeURIComponent(assistMultiviewStore.sessions.map((s) => s.sessionId).join(','));
return history.push(withSiteId(multiview(sessionIdQuery), siteId));
};
const openLiveSession = (sessionId: string) => {
if (isDisabled) return;
assistMultiviewStore.setActiveSession(sessionId);
history.push(withSiteId(liveSession(sessionId), siteId));
};
return (
<div className="grid grid-cols-2 w-28 h-full" style={{ gap: '4px' }}>
<div className="grid grid-cols-2 w-28 h-full" style={{ gap: '4px', opacity: isDisabled ? 0.6 : 1, cursor: isDisabled ? 'not-allowed' : undefined }}>
{assistMultiviewStore.sortedSessions.map((session: { key: number, sessionId: string }) => (
<React.Fragment key={session.key}>
{assistMultiviewStore.isActive(session.sessionId) ? (
<CurrentTab />
) : (
<ActiveTab onClick={() => openLiveSession(session.sessionId)} />
<ActiveTab isDisabled={isDisabled} onClick={() => openLiveSession(session.sessionId)} />
)}
</React.Fragment>
))}
{placeholder.map((_, i) => (
<React.Fragment key={i}>
<InactiveTab onClick={openGrid} />
<InactiveTab isDisabled={isDisabled} onClick={openGrid} />
</React.Fragment>
))}
</div>