120 lines
4 KiB
TypeScript
120 lines
4 KiB
TypeScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { withRouter } from 'react-router-dom';
|
|
import {
|
|
assist as assistRoute,
|
|
withSiteId,
|
|
multiview,
|
|
} from 'App/routes';
|
|
import { BackLink, Icon } from 'UI';
|
|
import cn from 'classnames';
|
|
import SessionMetaList from 'Shared/SessionItem/SessionMetaList';
|
|
import UserCard from '../ReplayPlayer/EventsBlock/UserCard';
|
|
import { PlayerContext } from 'Components/Session/playerContext';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { useStore } from 'App/mstore'
|
|
import stl from '../ReplayPlayer/playerBlockHeader.module.css';
|
|
import AssistActions from 'Components/Assist/components/AssistActions';
|
|
|
|
const ASSIST_ROUTE = assistRoute();
|
|
|
|
// TODO props
|
|
function LivePlayerBlockHeader(props: any) {
|
|
const [hideBack, setHideBack] = React.useState(false);
|
|
const { store } = React.useContext(PlayerContext);
|
|
const { assistMultiviewStore } = useStore();
|
|
|
|
const { width, height } = store.get();
|
|
|
|
const {
|
|
session,
|
|
metaList,
|
|
closedLive = false,
|
|
siteId,
|
|
location,
|
|
history,
|
|
isMultiview,
|
|
} = props;
|
|
|
|
React.useEffect(() => {
|
|
const queryParams = new URLSearchParams(location.search);
|
|
setHideBack(queryParams.has('iframe') && queryParams.get('iframe') === 'true');
|
|
}, []);
|
|
|
|
const backHandler = () => {
|
|
history.push(withSiteId(ASSIST_ROUTE, siteId));
|
|
};
|
|
|
|
const { userId, metadata, isCallActive, agentIds } = session;
|
|
let _metaList = Object.keys(metadata)
|
|
.filter((i) => metaList.includes(i))
|
|
.map((key) => {
|
|
const value = metadata[key];
|
|
return { label: key, value };
|
|
});
|
|
|
|
const openGrid = () => {
|
|
const sessionIdQuery = encodeURIComponent(assistMultiviewStore.sessions.map((s) => s?.sessionId).join(','));
|
|
return history.push(withSiteId(multiview(sessionIdQuery), siteId));
|
|
};
|
|
|
|
return (
|
|
<div className={cn(stl.header, 'flex justify-between')}>
|
|
<div className="flex w-full items-center">
|
|
{!hideBack && (
|
|
<div
|
|
className="flex items-center h-full cursor-pointer group"
|
|
onClick={() => (assistMultiviewStore.sessions.length > 1 || isMultiview ? openGrid() : backHandler())}
|
|
>
|
|
{assistMultiviewStore.sessions.length > 1 || isMultiview ? (
|
|
<>
|
|
<div className="rounded-full border group-hover:border-teal group-hover:text-teal group-hover:fill-teal p-1 mr-2">
|
|
<Icon name="close" color="inherit" size={13} />
|
|
</div>
|
|
<span className="group-hover:text-teal group-hover:fill-teal">
|
|
Close
|
|
</span>
|
|
<div className={stl.divider} />
|
|
</>
|
|
) : (
|
|
<>
|
|
{/* @ts-ignore TODO */}
|
|
<BackLink label="Back" className="h-full" />
|
|
<div className={stl.divider} />
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
<UserCard className="" width={width} height={height} />
|
|
|
|
<div className={cn('ml-auto flex items-center h-full', { hidden: closedLive })}>
|
|
{_metaList.length > 0 && (
|
|
<div className="border-l h-full flex items-center px-2">
|
|
<SessionMetaList className="" metaList={_metaList} maxLength={2} />
|
|
</div>
|
|
)}
|
|
|
|
<AssistActions userId={userId} isCallActive={isCallActive} agentIds={agentIds} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const PlayerHeaderCont = connect(
|
|
(state: any) => {
|
|
const isAssist = window.location.pathname.includes('/assist/');
|
|
const session = state.getIn(['sessions', 'current']);
|
|
|
|
return {
|
|
isAssist,
|
|
session,
|
|
sessionPath: state.getIn(['sessions', 'sessionPath']),
|
|
siteId: state.getIn(['site', 'siteId']),
|
|
metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key),
|
|
closedLive: !!state.getIn(['sessions', 'errors']) || (isAssist && !session.live),
|
|
};
|
|
}
|
|
)(observer(LivePlayerBlockHeader));
|
|
|
|
export default withRouter(PlayerHeaderCont);
|