feature(ui) - assist ui changes

frontend/app/components/Assist/ChatWindow/ChatWindow.tsx

@@ -15,12 +15,13 @@ const ChatWindow: FC<Props> = function ChatWindow() {
     navigator.mediaDevices.getUserMedia({video:true, audio:true})
     .then(oStream => {
       setOutputStream(oStream);
-      callPeer(oStream, setInputStream, () => {
+      const call = callPeer(oStream, setInputStream, () => {
         console.log('endd')
         outputStream?.getTracks().forEach(t => t.stop());
         //inputStream?.
       }); // Returns false when unable to connect.
                   // TODO: handle calling state
+      console.log(call)
     })
     .catch(console.log) // TODO: handle error in ui
   }, [])

frontend/app/components/Assist/components/AssistActions/AssistActions.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
-import { Button, Icon } from 'UI'
+import { Popup, Icon } from 'UI'
 import { connect } from 'react-redux'
 import cn from 'classnames'
-import { callPeer } from 'App/player';
 import { toggleChatWindow } from 'Duck/sessions';
 import stl from './AassistActions.css'
 
@@ -14,14 +13,26 @@ interface Props {
 function AssistActions({ toggleChatWindow }: Props) {
   return (
     <div className="flex items-center">
-      <div
-        className={cn('cursor-pointer p-2 mr-2')}
-        onClick={() => toggleChatWindow(true)}
-      >
-        <Icon name="telephone" size="20" />
-      </div>
+      <Popup
+        trigger={
+          <div
+            className={cn('cursor-pointer p-2 mr-2')}
+            onClick={() => toggleChatWindow(true)}
+            role="button"
+          >
+            <Icon name="telephone-fill" size="20" color="teal" />
+          </div>
+        }
+        content={ `Start Video Call` }
+        size="tiny"
+        inverted
+        position="top center"
+      />      
       <div className="mx-1" />
-      <div className="flex items-center p-2 cursor-pointer">
+      <div
+        role="button"
+        className="flex items-center p-2 cursor-pointer"
+      >
         <Icon name="controller" size="20" />
         <span className="ml-2">Request Control</span>
       </div>

frontend/app/components/Session/Session.js

@@ -49,7 +49,7 @@ function Session({
     	<Loader className="flex-1" loading={ loading || sessionId !== session.sessionId }> 
     		{ session.isIOS 
     			? <IOSPlayer session={session} />
-    			: <LivePlayer />
+    			: (session.live ? <LivePlayer /> : <WebPlayer />)
       	}
     	</Loader>
     </NoContent>

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

@@ -307,7 +307,7 @@ export default class Controls extends React.Component {
                 </React.Fragment>
               }
               <div className={ styles.divider } />
-              { !live && showDevTools &&
+              { showDevTools &&
                 <ControlButton
                   disabled={ disabled }
                   onClick={ () => toggleBottomBlock(NETWORK) }
@@ -329,7 +329,7 @@ export default class Controls extends React.Component {
                   icon="fetch"
                 />
               }
-              { showGraphql &&
+              { !live && showGraphql &&
                 <ControlButton
                   disabled={disabled}
                   onClick={ ()=> toggleBottomBlock(GRAPHQL) }
@@ -339,7 +339,7 @@ export default class Controls extends React.Component {
                   icon="vendors/graphql"
                 />
               }
-              { showStorage && showDevTools &&
+              { !live && showStorage && showDevTools &&
                 <ControlButton
                   disabled={ disabled }
                   onClick={ () => toggleBottomBlock(STORAGE) }
@@ -360,7 +360,7 @@ export default class Controls extends React.Component {
                   hasErrors={ logRedCount > 0 }
                 />
               }
-              { showExceptions && showDevTools &&
+              { !live && showExceptions && showDevTools &&
                 <ControlButton
                   disabled={ disabled }
                   onClick={ () => toggleBottomBlock(EXCEPTIONS) }
@@ -371,7 +371,7 @@ export default class Controls extends React.Component {
                   hasErrors={ exceptionsCount > 0 }
                 />
               }
-              { !live && showDevTools && showStack &&
+              { showDevTools && showStack &&
                 <ControlButton
                   disabled={ disabled }
                   onClick={ () => toggleBottomBlock(STACKEVENTS) }
@@ -382,7 +382,7 @@ export default class Controls extends React.Component {
                   hasErrors={ stackRedCount > 0 }
                 />
               }
-              { showProfiler && showDevTools &&
+              { !live && showProfiler && showDevTools &&
                 <ControlButton
                   disabled={ disabled }
                   onClick={ () => toggleBottomBlock(PROFILER) }
@@ -391,7 +391,7 @@ export default class Controls extends React.Component {
                   label="Profiler"
                   icon="code"
                 />
-              }
+              }              
               <ControlButton
                 disabled={ disabled }
                 onClick={ () => toggleBottomBlock(PERFORMANCE) }
@@ -399,7 +399,7 @@ export default class Controls extends React.Component {
                 label="Performance"
                 icon="tachometer-slow"
               />
-              { showLongtasks &&
+              { !live && showLongtasks &&
                 <ControlButton
                   disabled={ disabled }
                   onClick={ () => toggleBottomBlock(LONGTASKS) }
@@ -420,13 +420,15 @@ export default class Controls extends React.Component {
                 </React.Fragment>
               }
                          
-              <ControlButton
-                disabled={ disabled && !inspectorMode }
-                active={ bottomBlock === INSPECTOR }
-                onClick={ () => toggleBottomBlock(INSPECTOR) }
-                icon={ inspectorMode ? 'close' : 'inspect' }
-                label="Inspect"
-              />
+              {!live && (
+                <ControlButton
+                  disabled={ disabled && !inspectorMode }
+                  active={ bottomBlock === INSPECTOR }
+                  onClick={ () => toggleBottomBlock(INSPECTOR) }
+                  icon={ inspectorMode ? 'close' : 'inspect' }
+                  label="Inspect"
+                />
+              )}
             </div>
           </div>
         }

frontend/app/components/shared/SessionItem/Counter.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Duration } from 'luxon';
+import { durationFormatted, formatTimeOrDate } from 'App/date';
+
+interface Props {
+  startTime: any
+}
+
+function Counter({ startTime }: Props) {
+  return (
+    <div className="mx-2">
+      {startTime && Duration.fromMillis(startTime).toFormat('m:ss')}
+    </div>
+  )
+}
+
+export default Counter

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

@@ -15,6 +15,8 @@ import { session as sessionRoute } from 'App/routes';
 import { durationFormatted, formatTimeOrDate } from 'App/date';
 import stl from './sessionItem.css';
 import LiveTag from 'Shared/LiveTag';
+import { session } from '../../../routes';
+import Counter from './Counter'
 
 const Label = ({ label = '', color = 'color-gray-medium'}) => (
   <div className={ cn('font-light text-sm', color)}>{label}</div>
@@ -53,7 +55,7 @@ export default class SessionItem extends React.PureComponent {
         userDeviceType,
         userUuid,
         userNumericHash,
-        live
+        live        
       },
       timezone,
       onUserClick,
@@ -108,6 +110,7 @@ export default class SessionItem extends React.PureComponent {
             </div>
           )}
 
+          { live && <Counter startTime={startedAt} /> }          
           { live && <LiveTag isLive={true} /> }
 
           <div className={ cn(stl.iconDetails, 'px-4') }>