112 lines
3 KiB
JavaScript
112 lines
3 KiB
JavaScript
import React from 'react';
|
|
import { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Loader } from 'UI';
|
|
import { toggleFullscreen, closeBottomBlock } from 'Duck/components/player';
|
|
import { withRequest } from 'HOCs';
|
|
import { PlayerProvider, connectPlayer, init as initPlayer, clean as cleanPlayer } from 'Player';
|
|
import withPermissions from 'HOCs/withPermissions';
|
|
|
|
import PlayerBlockHeader from '../Session_/PlayerBlockHeader';
|
|
import PlayerBlock from '../Session_/PlayerBlock';
|
|
import styles from '../Session_/session.module.css';
|
|
|
|
const InitLoader = connectPlayer((state) => ({
|
|
loading: !state.initialized,
|
|
}))(Loader);
|
|
|
|
function LivePlayer({
|
|
session,
|
|
toggleFullscreen,
|
|
closeBottomBlock,
|
|
fullscreen,
|
|
loadingCredentials,
|
|
assistCredendials,
|
|
request,
|
|
isEnterprise,
|
|
userEmail,
|
|
userName,
|
|
}) {
|
|
const [fullView, setFullView] = useState(false);
|
|
useEffect(() => {
|
|
if (!loadingCredentials) {
|
|
const sessionWithAgentData = {
|
|
...session.toJS(),
|
|
agentInfo: {
|
|
email: userEmail,
|
|
name: userName,
|
|
},
|
|
};
|
|
initPlayer(sessionWithAgentData, assistCredendials, true);
|
|
}
|
|
return () => cleanPlayer();
|
|
}, [session.sessionId, loadingCredentials, assistCredendials]);
|
|
|
|
// LAYOUT (TODO: local layout state - useContext or something..)
|
|
useEffect(() => {
|
|
const queryParams = new URLSearchParams(window.location.search);
|
|
if (queryParams.has('fullScreen') && queryParams.get('fullScreen') === 'true') {
|
|
setFullView(true);
|
|
}
|
|
|
|
if (isEnterprise) {
|
|
request();
|
|
}
|
|
return () => {
|
|
toggleFullscreen(false);
|
|
closeBottomBlock();
|
|
};
|
|
}, []);
|
|
|
|
const TABS = {
|
|
EVENTS: 'User Steps',
|
|
HEATMAPS: 'Click Map',
|
|
};
|
|
const [activeTab, setActiveTab] = useState('');
|
|
|
|
return (
|
|
<PlayerProvider>
|
|
<InitLoader className="flex-1 p-3">
|
|
{!fullView && (
|
|
<PlayerBlockHeader
|
|
activeTab={activeTab}
|
|
setActiveTab={setActiveTab}
|
|
tabs={TABS}
|
|
fullscreen={fullscreen}
|
|
/>
|
|
)}
|
|
<div className={styles.session} data-fullscreen={fullscreen || fullView}>
|
|
<PlayerBlock fullView={fullView} />
|
|
</div>
|
|
</InitLoader>
|
|
</PlayerProvider>
|
|
);
|
|
}
|
|
|
|
export default withRequest({
|
|
initialData: null,
|
|
endpoint: '/assist/credentials',
|
|
dataWrapper: (data) => data,
|
|
dataName: 'assistCredendials',
|
|
loadingName: 'loadingCredentials',
|
|
})(
|
|
withPermissions(
|
|
['ASSIST_LIVE'],
|
|
'',
|
|
true
|
|
)(
|
|
connect(
|
|
(state) => {
|
|
return {
|
|
session: state.getIn(['sessions', 'current']),
|
|
showAssist: state.getIn(['sessions', 'showChatWindow']),
|
|
fullscreen: state.getIn(['components', 'player', 'fullscreen']),
|
|
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
|
|
userEmail: state.getIn(['user', 'account', 'email']),
|
|
userName: state.getIn(['user', 'account', 'name']),
|
|
};
|
|
},
|
|
{ toggleFullscreen, closeBottomBlock }
|
|
)(LivePlayer)
|
|
)
|
|
);
|