diff --git a/frontend/app/components/Assist/Assist.tsx b/frontend/app/components/Assist/Assist.tsx index 1473a99a8..74f2095f8 100644 --- a/frontend/app/components/Assist/Assist.tsx +++ b/frontend/app/components/Assist/Assist.tsx @@ -5,7 +5,7 @@ import ChatWindow from './ChatWindow'; export default function Assist() { return (
- + {/* */}
) } diff --git a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx index 113e9c6a8..b1317b098 100644 --- a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx +++ b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx @@ -6,28 +6,30 @@ import { callPeer } from 'App/player' import cn from 'classnames' export interface Props { + inputStream: MediaStream | null, + outputStream: MediaStream | null // call: (oStream: MediaStream, cb: (iStream: MediaStream)=>void)=>void } -const ChatWindow: FC = function ChatWindow() { +const ChatWindow: FC = function ChatWindow({ inputStream, outputStream }) { const [minimize, setMinimize] = useState(false) - const [ inputStream, setInputStream ] = useState(null); - const [ outputStream, setOutputStream ] = useState(null); + // const [ inputStream, setInputStream ] = useState(null); + // const [ outputStream, setOutputStream ] = useState(null); - useEffect(() => { - navigator.mediaDevices.getUserMedia({video:true, audio:true}) - .then(oStream => { - setOutputStream(oStream); - 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 - }, []) + // useEffect(() => { + // navigator.mediaDevices.getUserMedia({video:true, audio:true}) + // .then(oStream => { + // setOutputStream(oStream); + // 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 + // }, []) return (
= function ChatWindow() { - + } content={ `Remote Control` } diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx index f5d18296e..465799d29 100644 --- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx +++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx @@ -1,26 +1,76 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import { Popup, Icon } from 'UI' import { connect } from 'react-redux' import cn from 'classnames' import { toggleChatWindow } from 'Duck/sessions'; import stl from './AassistActions.css' +import { connectPlayer } from 'Player/store'; +import ChatWindow from '../../ChatWindow'; +import { callPeer } from 'App/player' +import { CallingState } from 'Player/MessageDistributor/managers/AssistManager'; interface Props { userId: String, - toggleChatWindow: (state) => void + toggleChatWindow: (state) => void, + calling: CallingState } -function AssistActions({ toggleChatWindow, userId }: Props) { +function AssistActions({ toggleChatWindow, userId, calling }: Props) { + const [showChat, setShowChat] = useState(false) + const [ callBtnAction, setCallBtnAction ] = useState(()=>{}); + const [ inputStream, setInputStream ] = useState(null); + const [ outputStream, setOutputStream ] = useState(null); + + function onClose(stream) { + stream.getTracks().forEach(t => t.stop()); + } + + function onReject() { + console.log("Rejected"); + } + + function onError() { + console.log("Something went wrong"); + } + + const endCall = () => { + + } + + const startCall = () => { + navigator.mediaDevices.getUserMedia({video:true, audio:true}) + .then(lStream => { + setOutputStream(lStream); + setCallBtnAction( + callPeer( + lStream, + inputStream, + onClose.bind(null, lStream), + onReject, + onError + ) + ); + }).catch(onError); + + setShowChat(!showChat) + } + + const inCall = calling == CallingState.Requesting || CallingState.True + return (
toggleChatWindow(true)} + onClick={startCall} role="button" > - +
} content={ `Call ${userId}` } @@ -28,8 +78,15 @@ function AssistActions({ toggleChatWindow, userId }: Props) { inverted position="top right" /> +
+ { showChat && } +
) } -export default connect(null, { toggleChatWindow })(AssistActions) +const con = connect(null, { toggleChatWindow }) + +export default con(connectPlayer(state => ({ + calling: state.calling +}))(AssistActions)) diff --git a/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx index 0203ce28f..ee282f453 100644 --- a/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx +++ b/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx @@ -41,7 +41,7 @@ function LiveSessionList(props: Props) { show={ !loading && list && list.size === 0} > - {list?.filter(i => i.userId === userId).map(session => ( + {list && (userId ? list.filter(i => i.userId === userId) : list).map(session => ( + {'Elapsed'} + }
diff --git a/frontend/app/components/shared/SessionItem/Counter.tsx b/frontend/app/components/shared/SessionItem/Counter.tsx index 5d9a82f9b..efbfb58bf 100644 --- a/frontend/app/components/shared/SessionItem/Counter.tsx +++ b/frontend/app/components/shared/SessionItem/Counter.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import { Duration } from 'luxon'; import { durationFormatted, formatTimeOrDate } from 'App/date'; @@ -7,9 +7,17 @@ interface Props { } function Counter({ startTime }: Props) { + const [count, setCount] = useState(0) + + useEffect(() => { + setInterval(function() { + setCount(count + 1000) + }, 1000) + }, []) + return (
- {startTime && Duration.fromMillis(startTime).toFormat('m:ss')} + {startTime && Duration.fromMillis(startTime + count).toFormat('m:ss')}
) } diff --git a/frontend/app/duck/sessions.js b/frontend/app/duck/sessions.js index 54bab17b2..0c63941e3 100644 --- a/frontend/app/duck/sessions.js +++ b/frontend/app/duck/sessions.js @@ -55,7 +55,7 @@ const reducer = (state = initialState, action = {}) => { return state.set('errorStack', List(action.data.trace).map(ErrorStack)).set('sourcemapUploaded', action.data.sourcemapUploaded) case FETCH_LIVE_LIST.SUCCESS: // const { sessions, total } = action.data; - const liveList = List(action.data).map(Session); + const liveList = List(action.data).map(s => new Session({...s, live: true})); return state .set('liveSessions', liveList) case FETCH_LIST.SUCCESS: diff --git a/frontend/app/player/singletone.js b/frontend/app/player/singletone.js index de8be892f..93d33dfbd 100644 --- a/frontend/app/player/singletone.js +++ b/frontend/app/player/singletone.js @@ -79,4 +79,5 @@ export const Controls = { toggleSpeed, speedUp, speedDown, + callPeer } diff --git a/frontend/app/types/session/session.js b/frontend/app/types/session/session.js index 0db322332..3926c1901 100644 --- a/frontend/app/types/session/session.js +++ b/frontend/app/types/session/session.js @@ -28,7 +28,7 @@ export default Record({ siteId: '', projectKey: '', peerId: '', - live: true, + live: false, startedAt: 0, duration: 0, events: List(), diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index f229f5cae..b55899b8d 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -22,6 +22,8 @@ "Duck/*": ["./app/duck/*"], "Shared": ["./app/components/shared"], "Shared/*": ["./app/components/shared/*"], + "Player": ["./app/player"], + "Player/*": ["./app/player/*"], } }, "exclude": [