From 5d12bc62598ee8d03d49a9f746bd6dc8f3bddd8c Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 15 Jun 2021 13:37:46 +0530 Subject: [PATCH 01/48] feature(ui): assist - wip --- frontend/app/components/Assist/Assist.tsx | 14 +++++ .../Assist/ScreenSharing/ScreenSharing.tsx | 46 ++++++++++++++++ .../components/Assist/ScreenSharing/index.js | 1 + .../components/ChatWindow/ChatWindow.tsx | 15 ++++++ .../components/ChatWindow/chatWindow.css | 8 +++ .../Assist/components/ChatWindow/index.js | 1 + .../VideoContainer/VideoContainer.tsx | 54 +++++++++++++++++++ .../Assist/components/VideoContainer/index.js | 1 + frontend/app/components/Assist/index.js | 1 + .../app/components/BugFinder/BugFinder.js | 2 + frontend/app/svg/icons/camera-video-off.svg | 3 ++ frontend/app/svg/icons/camera-video.svg | 3 ++ frontend/app/svg/icons/mic-mute.svg | 4 ++ frontend/app/svg/icons/mic.svg | 4 ++ 14 files changed, 157 insertions(+) create mode 100644 frontend/app/components/Assist/Assist.tsx create mode 100644 frontend/app/components/Assist/ScreenSharing/ScreenSharing.tsx create mode 100644 frontend/app/components/Assist/ScreenSharing/index.js create mode 100644 frontend/app/components/Assist/components/ChatWindow/ChatWindow.tsx create mode 100644 frontend/app/components/Assist/components/ChatWindow/chatWindow.css create mode 100644 frontend/app/components/Assist/components/ChatWindow/index.js create mode 100644 frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx create mode 100644 frontend/app/components/Assist/components/VideoContainer/index.js create mode 100644 frontend/app/components/Assist/index.js create mode 100644 frontend/app/svg/icons/camera-video-off.svg create mode 100644 frontend/app/svg/icons/camera-video.svg create mode 100644 frontend/app/svg/icons/mic-mute.svg create mode 100644 frontend/app/svg/icons/mic.svg diff --git a/frontend/app/components/Assist/Assist.tsx b/frontend/app/components/Assist/Assist.tsx new file mode 100644 index 000000000..c59b32d03 --- /dev/null +++ b/frontend/app/components/Assist/Assist.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import ChatWindow from './components/ChatWindow/ChatWindow' +import ScreenSharing from './ScreenSharing/ScreenSharing' + +function Assist() { + return ( +
+ + {/* */} +
+ ) +} + +export default Assist diff --git a/frontend/app/components/Assist/ScreenSharing/ScreenSharing.tsx b/frontend/app/components/Assist/ScreenSharing/ScreenSharing.tsx new file mode 100644 index 000000000..767b388e7 --- /dev/null +++ b/frontend/app/components/Assist/ScreenSharing/ScreenSharing.tsx @@ -0,0 +1,46 @@ +import React from 'react' +import { Button } from 'UI' + +function ScreenSharing() { + const videoRef: React.RefObject = React.createRef() + + function handleSuccess(stream) { + // startButton.disabled = true; + // @ts-ignore + videoRef.current.srcObject = stream; + // @ts-ignore + window.stream = stream; // make variable available to browser console + + stream.getVideoTracks()[0].addEventListener('ended', () => { + console.log('The user has ended sharing the screen'); + }); + } + + function handleError(error) { + console.log(`getDisplayMedia error: ${error.name}`, error); + } + + const startScreenSharing = () => { + // @ts-ignore + navigator.mediaDevices.getDisplayMedia({video: true}) + .then(handleSuccess, handleError); + } + + const stopScreenSharing = () => { + // @ts-ignore + window.stream.stop() + console.log('Stop screen sharing') + } + + return ( +
+ +
+ + +
+
+ ) +} + +export default ScreenSharing diff --git a/frontend/app/components/Assist/ScreenSharing/index.js b/frontend/app/components/Assist/ScreenSharing/index.js new file mode 100644 index 000000000..f2bc82ab6 --- /dev/null +++ b/frontend/app/components/Assist/ScreenSharing/index.js @@ -0,0 +1 @@ +export { default } from './ScreenSharing' \ 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 new file mode 100644 index 000000000..5bf91e812 --- /dev/null +++ b/frontend/app/components/Assist/components/ChatWindow/ChatWindow.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import VideoContainer from '../VideoContainer/VideoContainer' +// impdort stl from './chatWindow.css' + +function ChatWindow() { + return ( +
+
+ +
+
+ ) +} + +export default ChatWindow diff --git a/frontend/app/components/Assist/components/ChatWindow/chatWindow.css b/frontend/app/components/Assist/components/ChatWindow/chatWindow.css new file mode 100644 index 000000000..0d84b5bc4 --- /dev/null +++ b/frontend/app/components/Assist/components/ChatWindow/chatWindow.css @@ -0,0 +1,8 @@ +.wrapepr { + background-color: white; + border: solid thin $gray-medium + border-radius: 3px; + position: fixed; + height: 400px; + width: 300px; +} \ No newline at end of file diff --git a/frontend/app/components/Assist/components/ChatWindow/index.js b/frontend/app/components/Assist/components/ChatWindow/index.js new file mode 100644 index 000000000..fbbd1c4c5 --- /dev/null +++ b/frontend/app/components/Assist/components/ChatWindow/index.js @@ -0,0 +1 @@ +export { default } from './ChatWindow' \ No newline at end of file diff --git a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx new file mode 100644 index 000000000..d9b805464 --- /dev/null +++ b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx @@ -0,0 +1,54 @@ +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); + }); + } + + 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); + }); + }, []) + return ( +
+
+ + + +
+
+ ) +} + +export default VideoContainer diff --git a/frontend/app/components/Assist/components/VideoContainer/index.js b/frontend/app/components/Assist/components/VideoContainer/index.js new file mode 100644 index 000000000..546964d7a --- /dev/null +++ b/frontend/app/components/Assist/components/VideoContainer/index.js @@ -0,0 +1 @@ +export { default } from './VideoContainer' \ No newline at end of file diff --git a/frontend/app/components/Assist/index.js b/frontend/app/components/Assist/index.js new file mode 100644 index 000000000..1c61fa2d8 --- /dev/null +++ b/frontend/app/components/Assist/index.js @@ -0,0 +1 @@ +export { default } from './Assist' \ No newline at end of file diff --git a/frontend/app/components/BugFinder/BugFinder.js b/frontend/app/components/BugFinder/BugFinder.js index b9b784ab6..e5d07f6d6 100644 --- a/frontend/app/components/BugFinder/BugFinder.js +++ b/frontend/app/components/BugFinder/BugFinder.js @@ -25,6 +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' const AUTOREFRESH_INTERVAL = 10 * 60 * 1000; @@ -143,6 +144,7 @@ export default class BugFinder extends React.PureComponent { return (
+
+ + \ No newline at end of file diff --git a/frontend/app/svg/icons/camera-video.svg b/frontend/app/svg/icons/camera-video.svg new file mode 100644 index 000000000..199e7a837 --- /dev/null +++ b/frontend/app/svg/icons/camera-video.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/mic-mute.svg b/frontend/app/svg/icons/mic-mute.svg new file mode 100644 index 000000000..5a520a12f --- /dev/null +++ b/frontend/app/svg/icons/mic-mute.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/mic.svg b/frontend/app/svg/icons/mic.svg new file mode 100644 index 000000000..57be2e560 --- /dev/null +++ b/frontend/app/svg/icons/mic.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file From 372b9c4b2e024bc65ca57e69b8b2022f26d31572 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Wed, 16 Jun 2021 15:41:40 +0530 Subject: [PATCH 02/48] 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 ( +
+
+ +
+ +
+
+ ) +} + +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 ( +
+
+ +
+
+ + Request Control +
+
+ ) +} + +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 ( -
-
- -
-
- ) -} - -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 (
-
+
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 (
-
-
- {activeFlow && activeFlow.type === 'flows' ? - - : - - } +
+ { activeFlow && activeFlow.type === 'flows' && } + { activeTab.type !== 'live' && } + { activeTab.type === 'live' && }
+} + +function LiveSessionList({ loading, list }: Props ) { + return ( +
+ + + +
+ ) +} + +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' })} />
+ +
+ onMenuItemClick({ name: 'Assist', type: 'live' })} + /> +
+
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 ( + + + + +
+ +
+ + + ); +} + + +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({ { session.isIOS ? - : + : } 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 {
- -
- - } + { live && ( + <> + +
- } - /> + + } + /> + + )} { !live && jiraConfig && jiraConfig.token && }
From 13aaa642d3376b6381a5b8093493951bf78e02bb Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Wed, 16 Jun 2021 15:42:05 +0530 Subject: [PATCH 03/48] feature(ui): assist - wip --- frontend/app/duck/sessions.js | 8 ++++++++ frontend/app/svg/icons/camera-video-off.svg | 2 +- frontend/app/svg/icons/camera-video.svg | 2 +- frontend/app/svg/icons/controller.svg | 4 ++++ frontend/app/svg/icons/mic-mute.svg | 2 +- frontend/app/svg/icons/mic.svg | 2 +- frontend/app/svg/icons/person.svg | 3 +++ frontend/app/svg/icons/telephone-fill.svg | 3 +++ frontend/app/svg/icons/telephone.svg | 3 +++ 9 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 frontend/app/svg/icons/controller.svg create mode 100644 frontend/app/svg/icons/person.svg create mode 100644 frontend/app/svg/icons/telephone-fill.svg create mode 100644 frontend/app/svg/icons/telephone.svg diff --git a/frontend/app/duck/sessions.js b/frontend/app/duck/sessions.js index 475f98177..726b9250e 100644 --- a/frontend/app/duck/sessions.js +++ b/frontend/app/duck/sessions.js @@ -12,6 +12,7 @@ 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'); +const FETCH_LIVE_LIST = new RequestTypes('sessions/FETCH_LIVE_LIST'); const TOGGLE_FAVORITE = new RequestTypes('sessions/TOGGLE_FAVORITE'); const FETCH_ERROR_STACK = new RequestTypes('sessions/FETCH_ERROR_STACK'); const SORT = 'sessions/SORT'; @@ -252,6 +253,13 @@ export function fetchFavoriteList() { }; } +export function fetchLiveList() { + return { + types: FETCH_LIVE_LIST.toArray(), + call: client => client.get('/sessions2/favorite'), + }; +} + export function sort(sortKey, sign = 1, listName = 'list') { return { type: SORT, diff --git a/frontend/app/svg/icons/camera-video-off.svg b/frontend/app/svg/icons/camera-video-off.svg index 7635e9b5c..17dcd971a 100644 --- a/frontend/app/svg/icons/camera-video-off.svg +++ b/frontend/app/svg/icons/camera-video-off.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/frontend/app/svg/icons/camera-video.svg b/frontend/app/svg/icons/camera-video.svg index 199e7a837..568193ff7 100644 --- a/frontend/app/svg/icons/camera-video.svg +++ b/frontend/app/svg/icons/camera-video.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/frontend/app/svg/icons/controller.svg b/frontend/app/svg/icons/controller.svg new file mode 100644 index 000000000..15e777456 --- /dev/null +++ b/frontend/app/svg/icons/controller.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/mic-mute.svg b/frontend/app/svg/icons/mic-mute.svg index 5a520a12f..b88c405d2 100644 --- a/frontend/app/svg/icons/mic-mute.svg +++ b/frontend/app/svg/icons/mic-mute.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/frontend/app/svg/icons/mic.svg b/frontend/app/svg/icons/mic.svg index 57be2e560..ff4015706 100644 --- a/frontend/app/svg/icons/mic.svg +++ b/frontend/app/svg/icons/mic.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/frontend/app/svg/icons/person.svg b/frontend/app/svg/icons/person.svg new file mode 100644 index 000000000..98de1b339 --- /dev/null +++ b/frontend/app/svg/icons/person.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/telephone-fill.svg b/frontend/app/svg/icons/telephone-fill.svg new file mode 100644 index 000000000..efc72c073 --- /dev/null +++ b/frontend/app/svg/icons/telephone-fill.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/telephone.svg b/frontend/app/svg/icons/telephone.svg new file mode 100644 index 000000000..8e359b825 --- /dev/null +++ b/frontend/app/svg/icons/telephone.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From 3190924c1d82137ae76438c8ba4d390f2b642079 Mon Sep 17 00:00:00 2001 From: ShiKhu Date: Tue, 22 Jun 2021 01:33:22 +0200 Subject: [PATCH 04/48] wip (frontent): assist call functionality --- frontend/app/components/Assist/Assist.tsx | 47 +- .../Assist/ChatWindow/ChatWindow.tsx | 31 +- .../Assist/ChatWindow/{index.js => index.ts} | 0 .../Assist/ScreenSharing/ScreenSharing.tsx | 5 +- .../AssistActions/{index.js => index.ts} | 0 .../VideoContainer/VideoContainer.tsx | 17 +- .../VideoContainer/{index.js => index.ts} | 0 .../components/Assist/{index.js => index.ts} | 0 .../app/components/Session_/Player/Player.js | 2 +- .../MessageDistributor/MessageDistributor.js | 478 -------------- .../MessageDistributor/MessageDistributor.ts | 526 ++++++++++++++++ .../MessageDistributor/MessageGenerator.js | 82 --- .../MessageDistributor/MessageReader.ts | 80 +++ .../MessageDistributor/PrimitiveReader.ts | 36 ++ .../StatedScreen/Screen/screen.css | 1 + .../{StatedScreen.js => StatedScreen.ts} | 6 + .../StatedScreen/{index.js => index.ts} | 0 .../app/player/MessageDistributor/Timed.js | 5 - .../app/player/MessageDistributor/Timed.ts | 5 + .../managers/{ListWalker.js => ListWalker.ts} | 17 +- .../app/player/MessageDistributor/messages.js | 596 ------------------ .../app/player/MessageDistributor/messages.ts | 543 ++++++++++++++++ .../MessageDistributor/readPrimitives.js | 31 - frontend/app/player/{Player.js => Player.ts} | 32 +- frontend/app/player/singletone.js | 1 + frontend/package-lock.json | 50 ++ frontend/package.json | 1 + frontend/tsconfig.json | 6 +- 28 files changed, 1362 insertions(+), 1236 deletions(-) rename frontend/app/components/Assist/ChatWindow/{index.js => index.ts} (100%) rename frontend/app/components/Assist/components/AssistActions/{index.js => index.ts} (100%) rename frontend/app/components/Assist/components/VideoContainer/{index.js => index.ts} (100%) rename frontend/app/components/Assist/{index.js => index.ts} (100%) delete mode 100644 frontend/app/player/MessageDistributor/MessageDistributor.js create mode 100644 frontend/app/player/MessageDistributor/MessageDistributor.ts delete mode 100644 frontend/app/player/MessageDistributor/MessageGenerator.js create mode 100644 frontend/app/player/MessageDistributor/MessageReader.ts create mode 100644 frontend/app/player/MessageDistributor/PrimitiveReader.ts rename frontend/app/player/MessageDistributor/StatedScreen/{StatedScreen.js => StatedScreen.ts} (90%) rename frontend/app/player/MessageDistributor/StatedScreen/{index.js => index.ts} (100%) delete mode 100644 frontend/app/player/MessageDistributor/Timed.js create mode 100644 frontend/app/player/MessageDistributor/Timed.ts rename frontend/app/player/MessageDistributor/managers/{ListWalker.js => ListWalker.ts} (89%) delete mode 100644 frontend/app/player/MessageDistributor/messages.js create mode 100644 frontend/app/player/MessageDistributor/messages.ts delete mode 100644 frontend/app/player/MessageDistributor/readPrimitives.js rename frontend/app/player/{Player.js => Player.ts} (87%) diff --git a/frontend/app/components/Assist/Assist.tsx b/frontend/app/components/Assist/Assist.tsx index 9c8156631..0140fcdd0 100644 --- a/frontend/app/components/Assist/Assist.tsx +++ b/frontend/app/components/Assist/Assist.tsx @@ -1,14 +1,49 @@ -import React from 'react' +import React, { useEffect, useRef } from 'react'; +import { connect } from 'react-redux'; +import { findDOMNode } from 'react-dom'; +import { + PlayerProvider, + attach as attachPlayer, + init as initPlayer, + clean as cleanPlayer, + callPeer, + // scale +} from 'App/player'; import ChatWindow from './ChatWindow/ChatWindow' -import ScreenSharing from './ScreenSharing/ScreenSharing' +//import ScreenSharing from './ScreenSharing/ScreenSharing' -function Assist() { +function Assist({ session, jwt }) { + const screeRef = useRef(null); + useEffect(() => { + initPlayer(session, jwt); + return () => cleanPlayer() + }, [ session.sessionId ]); + useEffect(() => { + if (screeRef.current) { + attachPlayer(findDOMNode(screeRef.current)); + + } + }, [ ]) return ( -
- +
+
+ {/* */}
) } -export default Assist +export default connect(state => ({ + session: { // Testing mock. Should be retrieved from redux + startedAt: 1624314191394, + live: true, + sessionId: "4870254843916045", + }, + jwt: state.get('jwt'), +}))(Assist); diff --git a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx index b142cd3a2..e6bcc001a 100644 --- a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx +++ b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx @@ -1,14 +1,35 @@ -import React from 'react' -import VideoContainer from '../components/VideoContainer/VideoContainer' +import React, { useState } from 'react'; +import { IconButton } from 'UI'; +import VideoContainer from '../components/VideoContainer'; // import stl from './chatWindow.css'; -function ChatWindow() { + +interface Props { + call: (oStream: MediaStream, cb: (iStream: MediaStream)=>void)=>void +} + +function ChatWindow({ call }: Props) { + const [ inputStream, setInputStream ] = useState(null); + const [ outputStream, setOutputStream ] = useState(null); + + const onCallClick = () => { + navigator.mediaDevices.getUserMedia({video:true, audio:true}) + .then(oStream => { + setOutputStream(oStream); + call(oStream, setInputStream); // Returns false when unable to connect. + // TODO: handle calling state + }) + .catch(console.log) // TODO: handle error in ui + } return (
- +
- + +
+ +
) diff --git a/frontend/app/components/Assist/ChatWindow/index.js b/frontend/app/components/Assist/ChatWindow/index.ts similarity index 100% rename from frontend/app/components/Assist/ChatWindow/index.js rename to frontend/app/components/Assist/ChatWindow/index.ts diff --git a/frontend/app/components/Assist/ScreenSharing/ScreenSharing.tsx b/frontend/app/components/Assist/ScreenSharing/ScreenSharing.tsx index 767b388e7..35d67f91b 100644 --- a/frontend/app/components/Assist/ScreenSharing/ScreenSharing.tsx +++ b/frontend/app/components/Assist/ScreenSharing/ScreenSharing.tsx @@ -2,12 +2,11 @@ import React from 'react' import { Button } from 'UI' function ScreenSharing() { - const videoRef: React.RefObject = React.createRef() + const videoRef = React.createRef() function handleSuccess(stream) { // startButton.disabled = true; - // @ts-ignore - videoRef.current.srcObject = stream; + //videoRef.current?.srcObject = stream; // @ts-ignore window.stream = stream; // make variable available to browser console diff --git a/frontend/app/components/Assist/components/AssistActions/index.js b/frontend/app/components/Assist/components/AssistActions/index.ts similarity index 100% rename from frontend/app/components/Assist/components/AssistActions/index.js rename to frontend/app/components/Assist/components/AssistActions/index.ts diff --git a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx index cab7d5af4..b03702fe4 100644 --- a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx +++ b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx @@ -1,13 +1,22 @@ -import React, { useEffect } from 'react' +import React, { useEffect, useRef } from 'react' import { Button, Icon } from 'UI' -function VideoContainer() { +interface Props { + stream: MediaProvider | null + muted?: boolean +} + +function VideoContainer({ stream, muted = false }: Props) { + const ref = useRef(null); useEffect(() => { - // TODO check for video stream and display - }, []) + if (ref.current) { + ref.current.srcObject = stream; + } + }, [ ref.current, stream ]) return (
+