Merge pull request #355 from openreplay/fixes

Chore(release): UI Fixes

frontend/app/components/Session/Session.js

@@ -16,11 +16,11 @@ const SESSIONS_ROUTE = sessionsRoute();
 function Session({ 
 	sessionId,
 	loading,
-  hasErrors,
+  	hasErrors,
 	session, 
 	fetchSession,
-  fetchSlackList,
-  hasSessionsPath
+  	fetchSlackList,
+  	hasSessionsPath
  }) {
  	usePageTitle("OpenReplay Session Player");
  	useEffect(() => {
@@ -51,7 +51,7 @@ function Session({
     	<Loader className="flex-1" loading={ loading || sessionId !== session.sessionId }> 
     		{ session.isIOS 
     			? <IOSPlayer session={session} />
-    			: (session.live && !hasSessionsPath ? <LivePlayer /> : <WebPlayer />)
+    			: <WebPlayer />
       	}
     	</Loader>
     </NoContent>

frontend/app/components/Session_/EventsBlock/Metadata/Metadata.js

@@ -10,13 +10,15 @@ export default connect(state => ({
   metadata: state.getIn([ 'sessions', 'current', 'metadata' ]),
 }))(function Metadata ({ metadata }) {
   const [ visible, setVisible ] = useState(false);
-  const toggle = useCallback(() => metadata.length > 0 && setVisible(v => !v), []);
+  const metaLenth = Object.keys(metadata).length;
+  const toggle = useCallback(() => metaLenth > 0 && setVisible(v => !v), []);
+  
   return (
     <>
       <Popup
         trigger={
           <IconButton
-            className={cn("w-full", { 'opacity-25' : metadata.length === 0 })}
+            className={cn("w-full", { 'opacity-25' : metaLenth === 0 })}
             onClick={ toggle }
             icon="id-card"
             plain
@@ -33,17 +35,17 @@ export default connect(state => ({
           </div>
         }
         on="click"
-        disabled={metadata.length > 0}
+        disabled={metaLenth > 0}
         size="tiny"
         inverted
         position="top center"
       />
       { visible && 
         <div className={ stl.modal } >
-          <NoContent show={ metadata.size === 0 } size="small">
-            { metadata.map((i) => {
-              const key = Object.keys(i)[0]
-              const value = i[key]
+          <NoContent show={ metaLenth === 0 } size="small">
+            { Object.keys(metadata).map((key) => {
+              // const key = Object.keys(i)[0]
+              const value = metadata[key]
               return <MetadataItem item={ { value, key } } key={ key } />
             }) }
           </NoContent>

frontend/app/components/Session_/EventsBlock/Metadata/MetadataItem.js

@@ -49,7 +49,7 @@ export default class extends React.PureComponent {
 					content={ open && <SessionList similarSessions={ similarSessions } loading={ loading } /> }
           onClose={ open ? this.switchOpen : () => null }
         />
-				<div className={ cn("flex justify-between items-center p-3", stl.field) } >
+				<div className={ cn("flex justify-between items-center p-3 capitalize", stl.field) } >
 	        <div>
 						<div className={ stl.key }>{ item.key }</div>
 						<TextEllipsis

frontend/app/components/Session_/Performance/Performance.js

@@ -115,7 +115,7 @@ const HeapTooltip = ({ active, payload}) => {
 }
 
 const NodesCountTooltip = ({ active, payload} ) => {
-  if (!active || payload.length === 0) return null;
+  if (!active || !payload || payload.length === 0) return null;
   return (
     <div className={ stl.tooltipWrapper } >
       <p>