99 lines
2.3 KiB
TypeScript
99 lines
2.3 KiB
TypeScript
import withPermissions from 'HOCs/withPermissions';
|
|
import React from 'react';
|
|
import { useEffect } from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
import { clearLogs } from 'App/dev/console';
|
|
import usePageTitle from 'App/hooks/usePageTitle';
|
|
import { useStore } from 'App/mstore';
|
|
import { sessions as sessionsRoute } from 'App/routes';
|
|
import MobilePlayer from 'Components/Session/MobilePlayer';
|
|
import { fetchList as fetchSlackList } from 'Duck/integrations/slack';
|
|
import { clearCurrentSession, fetchV2 } from 'Duck/sessions';
|
|
import { Link, Loader, NoContent } from 'UI';
|
|
|
|
import WebPlayer from './WebPlayer';
|
|
|
|
const SESSIONS_ROUTE = sessionsRoute();
|
|
|
|
interface Props {
|
|
sessionId: string;
|
|
loading: boolean;
|
|
hasErrors: boolean;
|
|
fetchV2: (sessionId: string) => void;
|
|
clearCurrentSession: () => void;
|
|
session: Record<string, any>;
|
|
}
|
|
|
|
function Session({
|
|
sessionId,
|
|
hasErrors,
|
|
fetchV2,
|
|
clearCurrentSession,
|
|
session,
|
|
}: Props) {
|
|
usePageTitle('OpenReplay Session Player');
|
|
const { sessionStore } = useStore();
|
|
useEffect(() => {
|
|
if (sessionId != null) {
|
|
fetchV2(sessionId);
|
|
} else {
|
|
console.error('No sessionID in route.');
|
|
}
|
|
return () => {
|
|
clearCurrentSession();
|
|
};
|
|
}, [sessionId]);
|
|
|
|
useEffect(() => {
|
|
clearLogs();
|
|
sessionStore.resetUserFilter();
|
|
}, []);
|
|
|
|
const player = session.isMobileNative ? <MobilePlayer /> : <WebPlayer />;
|
|
return (
|
|
<NoContent
|
|
show={hasErrors}
|
|
title="Session not found."
|
|
subtext={
|
|
<span>
|
|
{'Please check your data retention plan, or try '}
|
|
<Link to={SESSIONS_ROUTE} className="link">
|
|
{'another one'}
|
|
</Link>
|
|
</span>
|
|
}
|
|
>
|
|
<Loader className="flex-1" loading={!session.sessionId}>
|
|
{player}
|
|
</Loader>
|
|
</NoContent>
|
|
);
|
|
}
|
|
|
|
export default withPermissions(
|
|
['SESSION_REPLAY'],
|
|
'',
|
|
true
|
|
)(
|
|
connect(
|
|
(state: any, props: any) => {
|
|
const {
|
|
match: {
|
|
params: { sessionId },
|
|
},
|
|
} = props;
|
|
return {
|
|
sessionId,
|
|
loading: state.getIn(['sessions', 'loading']),
|
|
hasErrors: !!state.getIn(['sessions', 'errors']),
|
|
session: state.getIn(['sessions', 'current']),
|
|
};
|
|
},
|
|
{
|
|
fetchSlackList,
|
|
fetchV2,
|
|
clearCurrentSession,
|
|
}
|
|
)(Session)
|
|
);
|