From 372b9c4b2e024bc65ca57e69b8b2022f26d31572 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 16 Jun 2021 15:41:40 +0530
Subject: [PATCH] feature(ui): assist - wip

---
 frontend/app/components/Assist/Assist.tsx     |  2 +-
 .../Assist/ChatWindow/ChatWindow.tsx          | 17 +++++
 .../ChatWindow/chatWindow.css                 |  2 +-
 .../{components => }/ChatWindow/index.js      |  0
 .../AssistActions/AassistActions.css          |  3 +
 .../AssistActions/AssistActions.tsx           | 24 +++++++
 .../Assist/components/AssistActions/index.js  |  1 +
 .../components/ChatWindow/ChatWindow.tsx      | 15 -----
 .../VideoContainer/VideoContainer.tsx         | 41 ++----------
 .../app/components/BugFinder/BugFinder.js     | 16 ++---
 .../LiveSessionList/LiveSessionList.tsx       | 29 ++++++++
 .../BugFinder/LiveSessionList/index.js        |  1 +
 .../BugFinder/SessionList/SessionList.js      |  2 +-
 .../BugFinder/SessionsMenu/SessionsMenu.js    | 10 +++
 frontend/app/components/Session/LivePlayer.js | 66 +++++++++++++++++++
 frontend/app/components/Session/Session.js    |  3 +-
 .../components/Session_/PlayerBlockHeader.js  | 50 +++++++-------
 17 files changed, 196 insertions(+), 86 deletions(-)
 create mode 100644 frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
 rename frontend/app/components/Assist/{components => }/ChatWindow/chatWindow.css (77%)
 rename frontend/app/components/Assist/{components => }/ChatWindow/index.js (100%)
 create mode 100644 frontend/app/components/Assist/components/AssistActions/AassistActions.css
 create mode 100644 frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
 create mode 100644 frontend/app/components/Assist/components/AssistActions/index.js
 delete mode 100644 frontend/app/components/Assist/components/ChatWindow/ChatWindow.tsx
 create mode 100644 frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx
 create mode 100644 frontend/app/components/BugFinder/LiveSessionList/index.js
 create mode 100644 frontend/app/components/Session/LivePlayer.js

diff --git a/frontend/app/components/Assist/Assist.tsx b/frontend/app/components/Assist/Assist.tsx
index c59b32d03..9c8156631 100644
--- a/frontend/app/components/Assist/Assist.tsx
+++ b/frontend/app/components/Assist/Assist.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import ChatWindow from './components/ChatWindow/ChatWindow'
+import ChatWindow from './ChatWindow/ChatWindow'
 import ScreenSharing from './ScreenSharing/ScreenSharing'
 
 function Assist() {
diff --git a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
new file mode 100644
index 000000000..b142cd3a2
--- /dev/null
+++ b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import VideoContainer from '../components/VideoContainer/VideoContainer'
+// import stl from './chatWindow.css';
+
+function ChatWindow() {
+  return (
+    <div className="fixed border radius bg-white z-50 shadow-xl mt-16">
+      <div className="p-2">
+        <VideoContainer />
+        <div className="py-1" />
+        <VideoContainer />
+      </div>
+    </div>
+  )
+}
+
+export default ChatWindow
diff --git a/frontend/app/components/Assist/components/ChatWindow/chatWindow.css b/frontend/app/components/Assist/ChatWindow/chatWindow.css
similarity index 77%
rename from frontend/app/components/Assist/components/ChatWindow/chatWindow.css
rename to frontend/app/components/Assist/ChatWindow/chatWindow.css
index 0d84b5bc4..48e7501bc 100644
--- a/frontend/app/components/Assist/components/ChatWindow/chatWindow.css
+++ b/frontend/app/components/Assist/ChatWindow/chatWindow.css
@@ -1,6 +1,6 @@
 .wrapepr {
   background-color: white;
-  border: solid thin $gray-medium
+  border: solid thin #CCC;
   border-radius: 3px;
   position: fixed;  
   height: 400px;
diff --git a/frontend/app/components/Assist/components/ChatWindow/index.js b/frontend/app/components/Assist/ChatWindow/index.js
similarity index 100%
rename from frontend/app/components/Assist/components/ChatWindow/index.js
rename to frontend/app/components/Assist/ChatWindow/index.js
diff --git a/frontend/app/components/Assist/components/AssistActions/AassistActions.css b/frontend/app/components/Assist/components/AssistActions/AassistActions.css
new file mode 100644
index 000000000..aacce0805
--- /dev/null
+++ b/frontend/app/components/Assist/components/AssistActions/AassistActions.css
@@ -0,0 +1,3 @@
+.btn {
+  
+}
\ No newline at end of file
diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
new file mode 100644
index 000000000..6b2b89279
--- /dev/null
+++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Button, Icon } from 'UI'
+import cn from 'classnames'
+// import stl from './AassistActions.css'
+
+interface Props {
+  isLive: false;  
+}
+
+function AssistActions({ }: Props) {
+  return (
+    <div className="flex items-center">
+      <div className={cn('cursor-pointer p-2 mr-2')}>
+        <Icon name="telephone" size="20" />
+      </div>
+      <div className="flex items-center p-2 cursor-pointer">
+          <Icon name="controller" size="20" />
+          <span className="ml-2">Request Control</span>
+        </div>
+    </div>
+  )
+}
+
+export default AssistActions
diff --git a/frontend/app/components/Assist/components/AssistActions/index.js b/frontend/app/components/Assist/components/AssistActions/index.js
new file mode 100644
index 000000000..3e5108198
--- /dev/null
+++ b/frontend/app/components/Assist/components/AssistActions/index.js
@@ -0,0 +1 @@
+export { default } from './AssistActions'
\ No newline at end of file
diff --git a/frontend/app/components/Assist/components/ChatWindow/ChatWindow.tsx b/frontend/app/components/Assist/components/ChatWindow/ChatWindow.tsx
deleted file mode 100644
index 5bf91e812..000000000
--- a/frontend/app/components/Assist/components/ChatWindow/ChatWindow.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import VideoContainer from '../VideoContainer/VideoContainer'
-// impdort stl from './chatWindow.css'
-
-function ChatWindow() {
-  return (
-    <div className="fixed border radius bg-white z-50 shadow-md">
-      <div className="p-2">
-        <VideoContainer /> 
-      </div>
-    </div>
-  )
-}
-
-export default ChatWindow
diff --git a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
index d9b805464..cab7d5af4 100644
--- a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
+++ b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
@@ -1,50 +1,19 @@
 import React, { useEffect } from 'react'
 import { Button, Icon } from 'UI'
 
-function VideoContainer() {
-  const constraints = {
-    'video': true,
-    'audio': true
-  }
-
-  async function playVideoFromCamera() {
-    try {
-        const constraints = {'video': true, 'audio': true};
-        const stream = await navigator.mediaDevices.getUserMedia(constraints);
-        const videoElement = document.querySelector('video#localVideo');
-        // videoElement.srcObject = stream;
-    } catch(error) {
-        console.error('Error opening video camera.', error);
-    }
-}
-
-  function getConnectedDevices(type, callback) {
-    navigator.mediaDevices.enumerateDevices()
-        .then(devices => {
-            const filtered = devices.filter(device => device.kind === type);
-            callback(filtered);
-        });
-  }
-
+function VideoContainer() {  
   useEffect(() => {
-    getConnectedDevices('videoinput', cameras => console.log('Cameras found', cameras));
-    navigator.mediaDevices.getUserMedia(constraints)
-    .then(stream => {
-        console.log('Got MediaStream:', stream);
-    })
-    .catch(error => {
-        console.error('Error accessing media devices.', error);
-    });    
+    // TODO check for video stream and display
   }, [])
   return (
     <div className="relative h-20 bg-gray-light-shade border p-1" style={{ height: '160px', width: '200px' }}>      
-      <div className="absolute left-0 right-0 bottom-0 flex justify-center border border-gray-300 p-1 bg-white radius">        
+      <div className="absolute left-0 right-0 bottom-0 flex justify-center border border-gray-300 p-1 bg-white radius bg-opacity-25">        
         <Button plain size="small">
-          <Icon name="mic" size="20" />
+          <Icon name="mic" size="16" />
         </Button>
 
         <Button plain size="small">
-          <Icon name="camera-video" size="20" />
+          <Icon name="camera-video" size="16" />
         </Button>
       </div>
     </div>
diff --git a/frontend/app/components/BugFinder/BugFinder.js b/frontend/app/components/BugFinder/BugFinder.js
index e5d07f6d6..a5d5d87ed 100644
--- a/frontend/app/components/BugFinder/BugFinder.js
+++ b/frontend/app/components/BugFinder/BugFinder.js
@@ -25,7 +25,7 @@ import { LAST_7_DAYS } from 'Types/app/period';
 import { resetFunnel } from 'Duck/funnels';
 import { resetFunnelFilters } from 'Duck/funnelFilters'
 import NoSessionsMessage from '../shared/NoSessionsMessage';
-import Assist from 'Components/Assist'
+import LiveSessionList from './LiveSessionList'
 
 const AUTOREFRESH_INTERVAL = 10 * 60 * 1000;
 
@@ -135,16 +135,16 @@ export default class BugFinder extends React.PureComponent {
 
   setActiveTab = tab => {
     this.props.setActiveTab(tab);
-
   }
 
   render() {
     const { activeFlow, activeTab } = this.props;    
     const { showRehydratePanel } = this.state;
 
+    console.log('activeTab', activeTab)
+
     return (
       <div className="page-margin container-90 flex relative">
-        <Assist />
         <div className="flex-1 flex">
           <div className="side-menu">
             <SessionsMenu
@@ -159,12 +159,10 @@ export default class BugFinder extends React.PureComponent {
               className="mb-5"
             >
               <EventFilter />
-            </div>
-            {activeFlow && activeFlow.type === 'flows' ?            
-            <FunnelList />
-            :
-            <SessionList onMenuItemClick={this.setActiveTab} />
-            }
+            </div>            
+            { activeFlow && activeFlow.type === 'flows' && <FunnelList /> }
+            { activeTab.type !== 'live' && <SessionList onMenuItemClick={this.setActiveTab} /> }
+            { activeTab.type === 'live' && <LiveSessionList /> }
           </div>
         </div>
         <RehydrateSlidePanel
diff --git a/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx
new file mode 100644
index 000000000..6d03af4ad
--- /dev/null
+++ b/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+// import { fetchLiveList } from 'Duck/sessions'
+import { connect } from 'react-redux';
+import { NoContent } from 'UI';
+import { List } from 'immutable';
+
+interface Props {
+  loading: Boolean,
+  list?: List<any>
+}
+
+function LiveSessionList({ loading, list }: Props ) {
+  return (
+    <div>
+      <NoContent
+        title={"No live sessions!"}
+        subtext="Please try changing your search parameters."
+        icon="exclamation-circle"
+        show={ !loading && list && list.size === 0}
+      >
+
+      </NoContent>
+    </div>
+  )
+}
+
+export default connect(state => ({
+
+}), { })(LiveSessionList)
diff --git a/frontend/app/components/BugFinder/LiveSessionList/index.js b/frontend/app/components/BugFinder/LiveSessionList/index.js
new file mode 100644
index 000000000..eb38fa3e7
--- /dev/null
+++ b/frontend/app/components/BugFinder/LiveSessionList/index.js
@@ -0,0 +1 @@
+export { default } from './LiveSessionList'
\ No newline at end of file
diff --git a/frontend/app/components/BugFinder/SessionList/SessionList.js b/frontend/app/components/BugFinder/SessionList/SessionList.js
index 13ddf9baa..7d4048782 100644
--- a/frontend/app/components/BugFinder/SessionList/SessionList.js
+++ b/frontend/app/components/BugFinder/SessionList/SessionList.js
@@ -123,7 +123,7 @@ export default class SessionList extends React.PureComponent {
     const { activeTab, allList, total }  = this.props;
     var filteredList;
 
-    if (activeTab.type !== ALL && activeTab.type !== 'bookmark') { // Watchdog sessions
+    if (activeTab.type !== ALL && activeTab.type !== 'bookmark' && activeTab.type !== 'live') { // Watchdog sessions
       filteredList = allList.filter(session => activeTab.fits(session))
     } else {
       filteredList = allList
diff --git a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
index af5adf937..f01b88f24 100644
--- a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
+++ b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
@@ -81,6 +81,16 @@ function SessionsMenu(props) {
           onClick={() => onMenuItemClick({ name: 'Bookmarks', type: 'bookmark' })}
         />
       </div>
+      
+      <div className="my-3">
+        <SideMenuitem
+          title="Assist"
+          iconName="person"
+          active={activeTab.type === 'live'}
+          onClick={() => onMenuItemClick({ name: 'Assist', type: 'live' })}
+        />
+      </div>
+      
       <div className={cn(stl.divider, 'mb-4')} />
       <SavedSearchList />
     </div>
diff --git a/frontend/app/components/Session/LivePlayer.js b/frontend/app/components/Session/LivePlayer.js
new file mode 100644
index 000000000..7c26c3c95
--- /dev/null
+++ b/frontend/app/components/Session/LivePlayer.js
@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Loader } from 'UI';
+import { toggleFullscreen, closeBottomBlock } from 'Duck/components/player';
+import { 
+  PlayerProvider,
+  connectPlayer,
+  init as initPlayer,
+  clean as cleanPlayer,
+} from 'Player';
+import { Controls as PlayerControls } from 'Player';
+import Assist from 'Components/Assist'
+
+
+import PlayerBlockHeader from '../Session_/PlayerBlockHeader';
+import EventsBlock from '../Session_/EventsBlock';
+import PlayerBlock from '../Session_/PlayerBlock';
+import styles from '../Session_/session.css';
+
+
+
+const EventsBlockConnected = connectPlayer(state => ({
+  currentTimeEventIndex: state.eventListNow.length > 0 ? state.eventListNow.length - 1 : 0,
+  playing: state.playing,
+}))(EventsBlock)
+
+
+const InitLoader = connectPlayer(state => ({ 
+  loading: !state.initialized
+}))(Loader);
+
+
+function WebPlayer ({ session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt }) {
+  useEffect(() => {
+    initPlayer(session, jwt);
+    return () => cleanPlayer()
+  }, [ session.sessionId ]);
+
+  // LAYOUT (TODO: local layout state - useContext or something..)
+  useEffect(() => () => {
+    toggleFullscreen(false);
+    closeBottomBlock();
+  }, [])
+  return (
+    <PlayerProvider>
+      <InitLoader className="flex-1">
+        <Assist />
+        <PlayerBlockHeader fullscreen={fullscreen}/>
+        <div className={ styles.session } data-fullscreen={fullscreen}>
+          <PlayerBlock />          
+        </div>
+      </InitLoader>
+    </PlayerProvider>
+  );
+}
+
+
+export default connect(state => ({
+  session: state.getIn([ 'sessions', 'current' ]),
+  jwt: state.get('jwt'),
+  fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
+}), {
+  toggleFullscreen,
+  closeBottomBlock,
+})(WebPlayer) 
+
diff --git a/frontend/app/components/Session/Session.js b/frontend/app/components/Session/Session.js
index 27c87875c..5f921bc38 100644
--- a/frontend/app/components/Session/Session.js
+++ b/frontend/app/components/Session/Session.js
@@ -6,6 +6,7 @@ import { fetchList as fetchSlackList } from 'Duck/integrations/slack';
 import { Link, NoContent, Loader } from 'UI';
 import { sessions as sessionsRoute } from 'App/routes';
 
+import LivePlayer from './LivePlayer';
 import WebPlayer from './WebPlayer';
 import IOSPlayer from './IOSPlayer';
 
@@ -48,7 +49,7 @@ function Session({
     	<Loader className="flex-1" loading={ loading || sessionId !== session.sessionId }> 
     		{ session.isIOS 
     			? <IOSPlayer session={session} />
-    			: <WebPlayer />
+    			: <LivePlayer />
       	}
     	</Loader>
     </NoContent>
diff --git a/frontend/app/components/Session_/PlayerBlockHeader.js b/frontend/app/components/Session_/PlayerBlockHeader.js
index 60773b57a..639c163f8 100644
--- a/frontend/app/components/Session_/PlayerBlockHeader.js
+++ b/frontend/app/components/Session_/PlayerBlockHeader.js
@@ -14,6 +14,7 @@ import { fetchList as fetchListIntegration } from 'Duck/integrations/actions';
 import cls from './playerBlockHeader.css';
 import Issues from './Issues/Issues';
 import Autoplay from './Autoplay';
+import AssistActions from '../Assist/components/AssistActions';
 
 const SESSIONS_ROUTE = sessionsRoute();
 
@@ -89,7 +90,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
       live,
       disabled,
       jiraConfig,
-      fullscreen
+      fullscreen,
     } = this.props;
 
     return (
@@ -112,31 +113,36 @@ export default class PlayerBlockHeader extends React.PureComponent {
           <HeaderInfo icon={ osIcon(userOs) } label={ userOs } />
 
           <div className='ml-auto flex items-center'>
-            <Autoplay />
-            <div className={ cls.divider } />
-            <IconButton
-              className="mr-2"
-              tooltip="Bookmark"
-              onClick={ this.toggleFavorite }
-              loading={ loading }
-              icon={ favorite ? 'star-solid' : 'star' }
-              // label={ favorite ? 'Favourited' : 'Favourite' }
-              plain
-            />
-            <SharePopup
-              entity="sessions"
-              id={ sessionId }
-              trigger={
+            { !live && <AssistActions isLive /> }
+            { live && (
+              <>
+                <Autoplay />            
+                <div className={ cls.divider } />
                 <IconButton
                   className="mr-2"
-                  tooltip="Share Session"
-                  disabled={ disabled }
-                  icon={ 'share-alt' }
-                  //label="Share"
+                  tooltip="Bookmark"
+                  onClick={ this.toggleFavorite }
+                  loading={ loading }
+                  icon={ favorite ? 'star-solid' : 'star' }
+                  // label={ favorite ? 'Favourited' : 'Favourite' }
                   plain
                 />
-              }
-            />
+                <SharePopup
+                  entity="sessions"
+                  id={ sessionId }
+                  trigger={
+                    <IconButton
+                      className="mr-2"
+                      tooltip="Share Session"
+                      disabled={ disabled }
+                      icon={ 'share-alt' }
+                      //label="Share"
+                      plain
+                    />
+                  }
+                />
+              </>
+            )}
             { !live && jiraConfig && jiraConfig.token && <Issues sessionId={ sessionId } /> }
           </div>
         </div>