Merge branch 'dev' of https://github.com/openreplay/openreplay into dev

frontend/app/components/BugFinder/SessionList/SessionList.js

@@ -21,6 +21,7 @@ var timeoutId;
   filters: state.getIn([ 'search', 'instance', 'filters' ]),
   metaList: state.getIn(['customFields', 'list']).map(i => i.key),
   currentPage: state.getIn([ 'search', 'currentPage' ]),
+  lastPlayedSessionId: state.getIn([ 'sessions', 'lastPlayedSessionId' ]),
 }), {
   applyFilter,
   addAttribute,
@@ -90,6 +91,7 @@ export default class SessionList extends React.PureComponent {
       metaList,
       currentPage,
       total,
+      lastPlayedSessionId,
     } = this.props;
     const _filterKeys = filters.map(i => i.key);
     const hasUserFilter = _filterKeys.includes(FilterKey.USERID) || _filterKeys.includes(FilterKey.USERANONYMOUSID);
@@ -127,6 +129,7 @@ export default class SessionList extends React.PureComponent {
               hasUserFilter={hasUserFilter}
               onUserClick={this.onUserClick}
               metaList={metaList}
+              lastPlayedSessionId={lastPlayedSessionId}
             />
           ))}
         </Loader>
@@ -139,18 +142,6 @@ export default class SessionList extends React.PureComponent {
             debounceRequest={1000}
           />
         </div>
-        {/* <LoadMoreButton
-          className="mt-12 mb-12"
-          displayedCount={displayedCount}
-          totalCount={list.size}
-          loading={loading}
-          onClick={this.addPage}
-          description={ displayedCount === list.size && 
-            <div className="color-gray-medium text-sm text-center my-3">
-              Haven't found the session in the above list? <br/>Try being a bit more specific by setting a specific time frame or simply use different filters
-            </div>
-          }
-        /> */}
       </NoContent>
     );
   }

frontend/app/components/Session_/Player/Player.js

@@ -9,6 +9,7 @@ import Controls from './Controls';
 import Overlay from './Overlay';
 import stl from './player.css';
 import EventsToggleButton from '../../Session/EventsToggleButton';
+import { updateLastPlayedSession } from 'Duck/sessions';
 
 @connectPlayer(state => ({
   live: state.live,
@@ -18,16 +19,19 @@ import EventsToggleButton from '../../Session/EventsToggleButton';
   return {
     fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
     nextId: state.getIn([ 'sessions', 'nextId' ]),
+    sessionId: state.getIn([ 'sessions', 'current', 'sessionId' ]),
     closedLive: !!state.getIn([ 'sessions', 'errors' ]) || (isAssist && !state.getIn([ 'sessions', 'current', 'live' ])),
   }
 }, {
   hideTargetDefiner,
   fullscreenOff,
+  updateLastPlayedSession,
 })
 export default class Player extends React.PureComponent {
   screenWrapper = React.createRef();
 
   componentDidMount() {
+    this.props.updateLastPlayedSession(this.props.sessionId);
     if (this.props.closedLive) return;
 
     const parentElement = findDOMNode(this.screenWrapper.current);  //TODO: good architecture

frontend/app/components/shared/SessionItem/SessionItem.js

@@ -3,29 +3,25 @@ import cn from 'classnames';
 import { 
   Link,
   Icon,
-  OsIcon,
-  BrowserIcon,
   CountryFlag,
   Avatar,
   TextEllipsis,
   Label,
 } from 'UI';
-import { deviceTypeIcon } from 'App/iconNames';
 import { toggleFavorite, setSessionPath } from 'Duck/sessions';
 import { session as sessionRoute, liveSession as liveSessionRoute, withSiteId } from 'App/routes';
 import { durationFormatted, formatTimeOrDate } from 'App/date';
 import stl from './sessionItem.css';
-import LiveTag from 'Shared/LiveTag';
-import Bookmark from 'Shared/Bookmark';
 import Counter from './Counter'
 import { withRouter } from 'react-router-dom';
 import SessionMetaList from './SessionMetaList';
 import ErrorBars from './ErrorBars';
-import { assist as assistRoute, liveSession, isRoute } from "App/routes";
+import { assist as assistRoute, liveSession, sessions as sessionsRoute, isRoute } from "App/routes";
 import { capitalize } from 'App/utils';
 
 const ASSIST_ROUTE = assistRoute();
 const ASSIST_LIVE_SESSION = liveSession()
+const SESSIONS_ROUTE = sessionsRoute();
 
 // const Label = ({ label = '', color = 'color-gray-medium'}) => (
 //   <div className={ cn('font-light text-sm', color)}>{label}</div>
@@ -69,10 +65,13 @@ export default class SessionItem extends React.PureComponent {
       disableUser = false,
       metaList = [],
       showActive = false,
+      lastPlayedSessionId,
     } = this.props;
     const formattedDuration = durationFormatted(duration);
     const hasUserId = userId || userAnonymousId;
+    const isSessions = isRoute(SESSIONS_ROUTE, this.props.location.pathname);
     const isAssist = isRoute(ASSIST_ROUTE, this.props.location.pathname) || isRoute(ASSIST_LIVE_SESSION, this.props.location.pathname);
+    const isLastPlayed = lastPlayedSessionId === sessionId;
 
     const _metaList = Object.keys(metadata).filter(i => metaList.includes(i)).map(key => {
       const value = metadata[key];
@@ -125,7 +124,7 @@ export default class SessionItem extends React.PureComponent {
                 </span>
               </div>
             </div>
-            { !isAssist && (
+            { isSessions && (
               <div style={{ width: "10%"}} className="self-center px-2 flex items-center">
                 <ErrorBars count={issueTypes.length} />
               </div>
@@ -139,6 +138,15 @@ export default class SessionItem extends React.PureComponent {
               </Label>
             )}
             <div className={ stl.playLink } id="play-button" data-viewed={ viewed }>
+              { isSessions && (
+                <div className="mr-4 flex-shrink-0 w-24">
+                  { isLastPlayed && (
+                    <Label className="bg-gray-lightest p-1 px-2 rounded-lg">
+                      <span className="color-gray-medium text-xs" style={{ whiteSpace: 'nowrap'}}>LAST PLAYED</span>
+                    </Label>
+                  )}
+                </div>
+              )}
               <Link to={ isAssist ? liveSessionRoute(sessionId) : sessionRoute(sessionId) }>
                 <Icon name={ !viewed && !isAssist ? 'play-fill' : 'play-circle-light' } size="42" color={isAssist ? "tealx" : "teal"} />
               </Link>

frontend/app/duck/sessions.js

@@ -7,9 +7,9 @@ import withRequestState, { RequestTypes } from './requestStateCreator';
 import { getRE } from 'App/utils';
 import { LAST_7_DAYS } from 'Types/app/period';
 import { getDateRangeFromValue } from 'App/dateRange';
+const name = 'sessions';
 
 const INIT = 'sessions/INIT';
-
 const FETCH_LIST = new RequestTypes('sessions/FETCH_LIST');
 const FETCH = new RequestTypes('sessions/FETCH');
 const FETCH_FAVORITE_LIST = new RequestTypes('sessions/FETCH_FAVORITE_LIST');
@@ -26,6 +26,7 @@ const TOGGLE_CHAT_WINDOW = 'sessions/TOGGLE_CHAT_WINDOW';
 const SET_FUNNEL_PAGE_FLAG = 'sessions/SET_FUNNEL_PAGE_FLAG';
 const SET_TIMELINE_POINTER = 'sessions/SET_TIMELINE_POINTER';
 const SET_SESSION_PATH = 'sessions/SET_SESSION_PATH';
+const LAST_PLAYED_SESSION_ID = `${name}/LAST_PLAYED_SESSION_ID`;
 
 const SET_ACTIVE_TAB = 'sessions/SET_ACTIVE_TAB';
 
@@ -60,6 +61,7 @@ const initialState = Map({
   funnelPage: Map(),
   timelinePointer: null,
   sessionPath: '',
+  lastPlayedSessionId: null,
 });
 
 const reducer = (state = initialState, action = {}) => {
@@ -248,11 +250,21 @@ const reducer = (state = initialState, action = {}) => {
       return state.set('timelinePointer', action.pointer);
     case SET_SESSION_PATH:
       return state.set('sessionPath', action.path);
+    case LAST_PLAYED_SESSION_ID:
+      return updateListItem(state, action.sessionId, { viewed: true }).set('lastPlayedSessionId', action.sessionId);
     default:
       return state;
   }
 };
 
+function updateListItem(state, sourceSessionId, instance) {
+  const list = state.get('list');
+  const index = list.findIndex(({ sessionId }) => sessionId === sourceSessionId);
+  if (index === -1) return state;
+  
+  return state.updateIn([ 'list', index ], session => session.merge(instance));
+}
+
 export default withRequestState({
   _: [ FETCH, FETCH_LIST ],
   fetchLiveListRequest: FETCH_LIVE_LIST,
@@ -390,4 +402,11 @@ export function setSessionPath(path) {
     type: SET_SESSION_PATH,
     path
   }
+}
+
+export function updateLastPlayedSession(sessionId) {
+  return {
+    type: LAST_PLAYED_SESSION_ID,
+    sessionId,
+  };
 }