change(ui): remove unused files
This commit is contained in:
nick-delirium
Delirium
parent
cfa22a5004
commit
a1ce424df9
6 changed files with 0 additions and 324 deletions
|
|
@ -11,7 +11,6 @@ import LivePlayer from './LivePlayer';
|
|||
function LiveSession({
|
||||
sessionId,
|
||||
loading,
|
||||
session,
|
||||
fetchSession,
|
||||
fetchSlackList,
|
||||
hasSessionsPath,
|
||||
|
|
|
|||
|
|
@ -16,9 +16,7 @@ function Session({
|
|||
sessionId,
|
||||
loading,
|
||||
hasErrors,
|
||||
session,
|
||||
fetchSession,
|
||||
fetchSlackList,
|
||||
}) {
|
||||
usePageTitle("OpenReplay Session Player");
|
||||
const [ initializing, setInitializing ] = useState(true)
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Icon } from 'UI';
|
||||
|
||||
const HeaderInfo = ({ icon, label }) => {
|
||||
return (
|
||||
<div className="flex items-center mx-4">
|
||||
<Icon name={ icon } size="18" color="color-dark" />
|
||||
<div className="ml-2 mt-1 font-sm font-normal color-gray-darkest text-sm">{ label }</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderInfo;
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import cn from 'classnames';
|
||||
import { EscapeButton } from 'UI';
|
||||
import {
|
||||
NONE,
|
||||
CONSOLE,
|
||||
NETWORK,
|
||||
STACKEVENTS,
|
||||
STORAGE,
|
||||
PROFILER,
|
||||
PERFORMANCE,
|
||||
GRAPHQL,
|
||||
EXCEPTIONS,
|
||||
INSPECTOR,
|
||||
OVERVIEW,
|
||||
fullscreenOff,
|
||||
} from 'Duck/components/player';
|
||||
import NetworkPanel from 'Shared/DevTools/NetworkPanel';
|
||||
import Storage from '../Storage';
|
||||
import { ConnectedPerformance } from '../Performance';
|
||||
import GraphQL from '../GraphQL';
|
||||
import Exceptions from '../Exceptions/Exceptions';
|
||||
import Inspector from '../Inspector';
|
||||
import Controls from './Controls';
|
||||
import Overlay from './Overlay';
|
||||
import stl from './player.module.css';
|
||||
import { updateLastPlayedSession } from 'Duck/sessions';
|
||||
import OverviewPanel from '../OverviewPanel';
|
||||
import ConsolePanel from 'Shared/DevTools/ConsolePanel';
|
||||
import ProfilerPanel from 'Shared/DevTools/ProfilerPanel';
|
||||
import { PlayerContext } from 'App/components/Session/playerContext';
|
||||
import StackEventPanel from 'Shared/DevTools/StackEventPanel';
|
||||
|
||||
function Player(props) {
|
||||
const {
|
||||
className,
|
||||
fullscreen,
|
||||
fullscreenOff,
|
||||
nextId,
|
||||
closedLive,
|
||||
bottomBlock,
|
||||
activeTab,
|
||||
fullView,
|
||||
isMultiview,
|
||||
isClickmap,
|
||||
} = props;
|
||||
const playerContext = React.useContext(PlayerContext);
|
||||
const screenWrapper = React.useRef();
|
||||
const bottomBlockIsActive = !fullscreen && bottomBlock !== NONE;
|
||||
|
||||
React.useEffect(() => {
|
||||
props.updateLastPlayedSession(props.sessionId);
|
||||
if (!props.closedLive || isMultiview) {
|
||||
const parentElement = findDOMNode(screenWrapper.current); //TODO: good architecture
|
||||
playerContext.player.attach(parentElement);
|
||||
playerContext.player.play();
|
||||
}
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
playerContext.player.scale();
|
||||
}, [props.bottomBlock, props.fullscreen, playerContext.player]);
|
||||
|
||||
if (!playerContext.player) return null;
|
||||
|
||||
const maxWidth = activeTab ? 'calc(100vw - 270px)' : '100vw';
|
||||
return (
|
||||
<div
|
||||
className={cn(className, stl.playerBody, 'flex flex-col relative', fullscreen && 'pb-2')}
|
||||
data-bottom-block={bottomBlockIsActive}
|
||||
>
|
||||
{fullscreen && <EscapeButton onClose={fullscreenOff} />}
|
||||
<div className={cn("relative flex-1", isClickmap ? 'overflow-visible' : 'overflow-hidden')}>
|
||||
<Overlay nextId={nextId} closedLive={closedLive} isClickmap={isClickmap} />
|
||||
<div className={cn(stl.screenWrapper, isClickmap && '!overflow-y-scroll')} ref={screenWrapper} />
|
||||
</div>
|
||||
{!fullscreen && !!bottomBlock && (
|
||||
<div style={{ maxWidth, width: '100%' }}>
|
||||
{bottomBlock === OVERVIEW && <OverviewPanel />}
|
||||
{bottomBlock === CONSOLE && <ConsolePanel />}
|
||||
{bottomBlock === NETWORK && <NetworkPanel />}
|
||||
{/* {bottomBlock === STACKEVENTS && <StackEvents />} */}
|
||||
{bottomBlock === STACKEVENTS && <StackEventPanel />}
|
||||
{bottomBlock === STORAGE && <Storage />}
|
||||
{bottomBlock === PROFILER && <ProfilerPanel />}
|
||||
{bottomBlock === PERFORMANCE && <ConnectedPerformance />}
|
||||
{bottomBlock === GRAPHQL && <GraphQL />}
|
||||
{bottomBlock === EXCEPTIONS && <Exceptions />}
|
||||
{bottomBlock === INSPECTOR && <Inspector />}
|
||||
</div>
|
||||
)}
|
||||
{!fullView && !isMultiview && !isClickmap ? (
|
||||
<Controls
|
||||
speedDown={playerContext.player.speedDown}
|
||||
speedUp={playerContext.player.speedUp}
|
||||
jump={playerContext.player.jump}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
(state) => {
|
||||
const isAssist = window.location.pathname.includes('/assist/');
|
||||
return {
|
||||
fullscreen: state.getIn(['components', 'player', 'fullscreen']),
|
||||
nextId: state.getIn(['sessions', 'nextId']),
|
||||
sessionId: state.getIn(['sessions', 'current']).sessionId,
|
||||
bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
|
||||
closedLive:
|
||||
!!state.getIn(['sessions', 'errors']) ||
|
||||
(isAssist && !state.getIn(['sessions', 'current']).live),
|
||||
};
|
||||
},
|
||||
{
|
||||
fullscreenOff,
|
||||
updateLastPlayedSession,
|
||||
}
|
||||
)(Player);
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './Player';
|
||||
|
|
@ -1,185 +0,0 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import {
|
||||
sessions as sessionsRoute,
|
||||
assist as assistRoute,
|
||||
liveSession as liveSessionRoute,
|
||||
withSiteId,
|
||||
multiview,
|
||||
} from 'App/routes';
|
||||
import { BackLink, Link, Icon } from 'UI';
|
||||
import { toggleFavorite, setSessionPath } from 'Duck/sessions';
|
||||
import cn from 'classnames';
|
||||
import SessionMetaList from 'Shared/SessionItem/SessionMetaList';
|
||||
import UserCard from './EventsBlock/UserCard';
|
||||
import Tabs from 'Components/Session/Tabs';
|
||||
import { PlayerContext } from 'App/components/Session/playerContext';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { useStore } from 'App/mstore'
|
||||
import stl from './playerBlockHeader.module.css';
|
||||
import AssistActions from '../Assist/components/AssistActions';
|
||||
import AssistTabs from '../Assist/components/AssistTabs';
|
||||
|
||||
const SESSIONS_ROUTE = sessionsRoute();
|
||||
const ASSIST_ROUTE = assistRoute();
|
||||
|
||||
// TODO props
|
||||
function PlayerBlockHeader(props: any) {
|
||||
const [hideBack, setHideBack] = React.useState(false);
|
||||
const { player, store } = React.useContext(PlayerContext);
|
||||
const { assistMultiviewStore } = useStore();
|
||||
|
||||
const { width, height, showEvents } = store.get();
|
||||
|
||||
const {
|
||||
session,
|
||||
fullscreen,
|
||||
metaList,
|
||||
closedLive = false,
|
||||
siteId,
|
||||
isAssist,
|
||||
setActiveTab,
|
||||
activeTab,
|
||||
location,
|
||||
history,
|
||||
sessionPath,
|
||||
isMultiview,
|
||||
} = props;
|
||||
|
||||
React.useEffect(() => {
|
||||
const queryParams = new URLSearchParams(location.search);
|
||||
setHideBack(queryParams.has('iframe') && queryParams.get('iframe') === 'true');
|
||||
}, []);
|
||||
|
||||
const backHandler = () => {
|
||||
if (
|
||||
sessionPath.pathname === history.location.pathname ||
|
||||
sessionPath.pathname.includes('/session/') ||
|
||||
isAssist
|
||||
) {
|
||||
history.push(withSiteId(isAssist ? ASSIST_ROUTE : SESSIONS_ROUTE, siteId));
|
||||
} else {
|
||||
history.push(
|
||||
sessionPath ? sessionPath.pathname + sessionPath.search : withSiteId(SESSIONS_ROUTE, siteId)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const { sessionId, userId, userNumericHash, live, 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 TABS = [props.tabs.EVENTS, props.tabs.CLICKMAP].map((tab) => ({
|
||||
text: tab,
|
||||
key: tab,
|
||||
}));
|
||||
|
||||
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', { hidden: fullscreen })}>
|
||||
<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} />
|
||||
{isAssist && <AssistTabs userId={userId} userNumericHash={userNumericHash} />}
|
||||
|
||||
<div className={cn('ml-auto flex items-center h-full', { hidden: closedLive })}>
|
||||
{live && !isAssist && (
|
||||
<>
|
||||
<div className={cn(stl.liveSwitchButton, 'pr-4')}>
|
||||
<Link to={withSiteId(liveSessionRoute(sessionId), siteId)}>
|
||||
This Session is Now Continuing Live
|
||||
</Link>
|
||||
</div>
|
||||
{_metaList.length > 0 && <div className={stl.divider} />}
|
||||
</>
|
||||
)}
|
||||
|
||||
{_metaList.length > 0 && (
|
||||
<div className="border-l h-full flex items-center px-2">
|
||||
<SessionMetaList className="" metaList={_metaList} maxLength={2} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isAssist && (
|
||||
// @ts-ignore TODO
|
||||
<AssistActions userId={userId} isCallActive={isCallActive} agentIds={agentIds} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{!isAssist && (
|
||||
<div className="relative border-l" style={{ minWidth: '270px' }}>
|
||||
<Tabs
|
||||
tabs={TABS}
|
||||
active={activeTab}
|
||||
onClick={(tab) => {
|
||||
if (activeTab === tab) {
|
||||
setActiveTab('');
|
||||
player.toggleEvents();
|
||||
} else {
|
||||
setActiveTab(tab);
|
||||
!showEvents && player.toggleEvents();
|
||||
}
|
||||
}}
|
||||
border={false}
|
||||
/>
|
||||
</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']),
|
||||
local: state.getIn(['sessions', 'timezone']),
|
||||
funnelRef: state.getIn(['funnels', 'navRef']),
|
||||
siteId: state.getIn(['site', 'siteId']),
|
||||
metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key),
|
||||
closedLive: !!state.getIn(['sessions', 'errors']) || (isAssist && !session.live),
|
||||
};
|
||||
},
|
||||
{
|
||||
toggleFavorite,
|
||||
setSessionPath,
|
||||
}
|
||||
)(observer(PlayerBlockHeader));
|
||||
|
||||
export default withRouter(PlayerHeaderCont);
|
||||
Loading…
Add table
Reference in a new issue