diff --git a/frontend/app/components/Session/WebPlayer.js b/frontend/app/components/Session/WebPlayer.js
index f1bcd2ddb..c7700dbdf 100644
--- a/frontend/app/components/Session/WebPlayer.js
+++ b/frontend/app/components/Session/WebPlayer.js
@@ -3,93 +3,109 @@ import { connect } from 'react-redux';
import { Loader } from 'UI';
import { toggleFullscreen, closeBottomBlock } from 'Duck/components/player';
import { fetchList } from 'Duck/integrations';
-import {
- PlayerProvider,
- connectPlayer,
- init as initPlayer,
- clean as cleanPlayer,
- Controls,
- toggleEvents,
-} from 'Player';
-import cn from 'classnames'
-import RightBlock from './RightBlock'
-import withLocationHandlers from "HOCs/withLocationHandlers";
+import { PlayerProvider, connectPlayer, init as initPlayer, clean as cleanPlayer, Controls } from 'Player';
+import cn from 'classnames';
+import RightBlock from './RightBlock';
+import withLocationHandlers from 'HOCs/withLocationHandlers';
import PlayerBlockHeader from '../Session_/PlayerBlockHeader';
import PlayerBlock from '../Session_/PlayerBlock';
import styles from '../Session_/session.module.css';
+import { countDaysFrom } from 'App/date';
-const InitLoader = connectPlayer(state => ({
- loading: !state.initialized
+const TABS = {
+ EVENTS: 'Events',
+ HEATMAPS: 'Click Map',
+};
+
+const InitLoader = connectPlayer((state) => ({
+ loading: !state.initialized,
}))(Loader);
-const PlayerContentConnected = connectPlayer(state => ({
- showEvents: !state.showEvents,
+const PlayerContentConnected = connectPlayer((state) => ({
+ showEvents: !state.showEvents,
+ hasError: state.error,
}))(PlayerContent);
-
-function PlayerContent({ live, fullscreen, activeTab }) {
- return (
-
- )
+function PlayerContent({ session, live, fullscreen, activeTab, setActiveTab, hasError }) {
+ const sessionDays = countDaysFrom(session.startedAt);
+ return (
+
+ {hasError ? (
+
+
+
{sessionDays > 2 ? 'Session not found.' : 'This session is still being processed.'}
+
{sessionDays > 2 ? 'Please check your data retention policy.' : 'Please check it again in a few minutes.'}
+
+
+ ) : (
+
+
+ {activeTab !== '' &&
}
+
+ )}
+
+ );
}
function RightMenu({ live, tabs, activeTab, setActiveTab, fullscreen }) {
- return !live && !fullscreen &&
+ return !live && !fullscreen && ;
}
-function WebPlayer (props) {
- const { session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, fetchList } = props;
+function WebPlayer(props) {
+ const { session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, fetchList } = props;
- const TABS = {
- EVENTS: 'Events',
- HEATMAPS: 'Click Map',
- }
+ const [activeTab, setActiveTab] = useState('');
- const [activeTab, setActiveTab] = useState('');
+ useEffect(() => {
+ fetchList('issues');
+ initPlayer(session, jwt);
- useEffect(() => {
- fetchList('issues')
- initPlayer(session, jwt);
+ const jumptTime = props.query.get('jumpto');
+ if (jumptTime) {
+ Controls.jump(parseInt(jumptTime));
+ }
- const jumptTime = props.query.get('jumpto');
- if (jumptTime) {
- Controls.jump(parseInt(jumptTime));
+ return () => cleanPlayer();
+ }, [session.sessionId]);
+
+ // LAYOUT (TODO: local layout state - useContext or something..)
+ useEffect(
+ () => () => {
+ toggleFullscreen(false);
+ closeBottomBlock();
+ },
+ []
+ );
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default connect(
+ (state) => ({
+ session: state.getIn(['sessions', 'current']),
+ jwt: state.get('jwt'),
+ fullscreen: state.getIn(['components', 'player', 'fullscreen']),
+ showEvents: state.get('showEvents'),
+ }),
+ {
+ toggleFullscreen,
+ closeBottomBlock,
+ fetchList,
}
-
- return () => cleanPlayer()
- }, [ session.sessionId ]);
-
- // LAYOUT (TODO: local layout state - useContext or something..)
- useEffect(() => () => {
- toggleFullscreen(false);
-
- closeBottomBlock();
- }, [])
-
- return (
-
-
-
-
-
- {activeTab !== '' &&
}
-
-
-
- );
-}
-
-export default connect(state => ({
- session: state.getIn([ 'sessions', 'current' ]),
- jwt: state.get('jwt'),
- // config: state.getIn([ 'user', 'account', 'iceServers' ]),
- fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
- showEvents: state.get('showEvents'),
-}), {
- toggleFullscreen,
- closeBottomBlock,
- fetchList,
-})(withLocationHandlers()(WebPlayer));
+)(withLocationHandlers()(WebPlayer));
diff --git a/frontend/app/date.ts b/frontend/app/date.ts
index dd87f1783..e043f33fd 100644
--- a/frontend/app/date.ts
+++ b/frontend/app/date.ts
@@ -128,3 +128,9 @@ export const convertTimestampToUtcTimestamp = (timestamp: number): number => {
export const nowFormatted = (format?: string): string => {
return DateTime.local().toFormat(format || 'LLL dd, yyyy, hh:mm a');
}
+
+export const countDaysFrom = (timestamp: number): number => {
+ const date = DateTime.fromMillis(timestamp);
+ const d = new Date();
+ return Math.round(Math.abs(d.getTime() - date.toJSDate().getTime()) / (1000 * 3600 * 24));
+}
\ No newline at end of file