From 70159bbeb6e9f7d7d21a43e49f79c1a306e6263d Mon Sep 17 00:00:00 2001 From: ShiKhu Date: Tue, 29 Jun 2021 23:00:18 +0200 Subject: [PATCH] feat(frontend): assist func --- frontend/app/components/Assist/Assist.tsx | 45 ++-------------- .../Assist/ChatWindow/ChatWindow.tsx | 32 ++++------- .../VideoContainer/VideoContainer.tsx | 22 ++++---- .../app/components/Session_/Player/Player.js | 6 +-- .../MessageDistributor/MessageDistributor.ts | 53 +++++++++++++------ frontend/app/types/session/session.js | 2 + 6 files changed, 71 insertions(+), 89 deletions(-) diff --git a/frontend/app/components/Assist/Assist.tsx b/frontend/app/components/Assist/Assist.tsx index ced44fe9d..6c9f82c41 100644 --- a/frontend/app/components/Assist/Assist.tsx +++ b/frontend/app/components/Assist/Assist.tsx @@ -1,49 +1,12 @@ -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 React from 'react'; +import ChatWindow from './ChatWindow/ChatWindow'; -function Assist({ session, jwt }) { - const screeRef = useRef(null); - useEffect(() => { - initPlayer(session, jwt); - return () => cleanPlayer() - }, [ session.sessionId ]); - useEffect(() => { - if (screeRef.current) { - attachPlayer(findDOMNode(screeRef.current)); - } - }, [ ]) +export default function Assist() { return (
- {/*
*/} - +
) } - -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 1444dd3ba..6ef4a9ec8 100644 --- a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx +++ b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx @@ -1,41 +1,31 @@ import React, { useState, useEffect } from 'react'; -import { IconButton } from 'UI'; +//import { IconButton } from 'UI'; import VideoContainer from '../components/VideoContainer'; import stl from './chatWindow.css'; import { callPeer } from 'App/player'; -interface Props { - call: (oStream: MediaStream, cb: (iStream: MediaStream)=>void)=>void -} +// export interface Props { +// call: (oStream: MediaStream, cb: (iStream: MediaStream)=>void)=>void +// } -function ChatWindow({ call }: Props) { +function ChatWindow() { const [ inputStream, setInputStream ] = useState(null); const [ outputStream, setOutputStream ] = useState(null); useEffect(() => { - startOutputStream() - callPeer() - }, []) - - const startOutputStream = () => { navigator.mediaDevices.getUserMedia({video:true, audio:true}) .then(oStream => { setOutputStream(oStream); - call(oStream, setInputStream); // Returns false when unable to connect. + callPeer(oStream, setInputStream, () => { + console.log('endd') + outputStream?.getTracks().forEach(t => t.stop()); + //inputStream?. + }); // Returns false when unable to connect. // TODO: handle calling state }) .catch(console.log) // TODO: handle error in ui - } + }, []) - // 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/components/VideoContainer/VideoContainer.tsx b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx index 33e207b14..70301b5a0 100644 --- a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx +++ b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx @@ -2,13 +2,13 @@ import React, { useState, useEffect, useRef } from 'react' import { Button, Icon } from 'UI' interface Props { - stream: MediaProvider | null + stream: MediaStream | null muted?: boolean } function VideoContainer({ stream, muted = false }: Props) { - const [muteAudio, setMuteAudio] = useState(false) - const [muteVideo, setMuteVideo] = useState(false) + const [audioEnabled, setAudioEnabled] = useState(true) + const [videoEnabled, setVideoEnabled] = useState(true) const ref = useRef(null); useEffect(() => { @@ -18,13 +18,17 @@ function VideoContainer({ stream, muted = false }: Props) { }, [ ref.current, stream ]) const toggleAudio = () => { - // stream.getAudioTracks().forEach(track => track.enabled = !track.enabled); - setMuteAudio(!muteAudio) + if (!stream) { return; } + const aEn = !audioEnabled + stream.getAudioTracks().forEach(track => track.enabled = aEn); + setAudioEnabled(aEn); } const toggleVideo = () => { - // stream.getVideoTracks().forEach(track => track.enabled = !track.enabled); - setMuteVideo(!muteVideo) + if (!stream) { return; } + const vEn = !videoEnabled; + stream.getVideoTracks().forEach(track => track.enabled = vEn); + setVideoEnabled(vEn) } return ( @@ -33,11 +37,11 @@ function VideoContainer({ stream, muted = false }: Props) {
diff --git a/frontend/app/components/Session_/Player/Player.js b/frontend/app/components/Session_/Player/Player.js index 5bb8ee607..87d86d312 100644 --- a/frontend/app/components/Session_/Player/Player.js +++ b/frontend/app/components/Session_/Player/Player.js @@ -18,7 +18,7 @@ const ScreenWrapper = withOverlay()(React.memo(() =>
}
- { !inspectorMode && + { !removeOverlay &&
{ - const peer = new Peer(); + // @ts-ignore + console.log(new URL(window.ENV.API_EDP).host) + const peer = new Peer({ + // @ts-ignore + host: new URL(window.ENV.API_EDP).host, + path: '/assist', + port: 80, + }); this.peer = peer; peer.on("open", me => { console.log("peer opened", me); - const id = `3sWXSsqHgSKnEO5YkNJK-${this.session.sessionId}`; + const id = this.getPeerID(); console.log("trying to connect to", id) const conn = peer.connect(id); + console.log("Peer ", peer) + conn.on('open', () => { this.setMessagesLoading(false); let i = 0; @@ -177,22 +190,33 @@ export default class MessageDistributor extends StatedScreen { }); } - callPeer(localStream: MediaStream, cb: (s: MediaStream)=>void): boolean { - if (!this.peer) { return false; } - const conn = this.peer.connections[`3sWXSsqHgSKnEO5YkNJK-${this.session.sessionId}`]?.[0]; - if (!conn || !conn.open) { return false; } // Conn not established + callPeer(localStream: MediaStream, onStream: (s: MediaStream)=>void, onClose: () => void, onRefuse?: ()=> void): ()=>void { + if (!this.peer) { return Function; } + const conn = this.peer.connections[this.getPeerID()]?.[0]; + if (!conn || !conn.open) { return Function; } // Conn not established const call = this.peer.call(conn.peer, localStream); console.log('calling...') // on refuse? - call.on('stream', function(stream) { - cb(stream); - }); + call.on('stream', onStream); + call.on("close", onClose); + call.on("error", onClose) + + return () => call.close(); + } + + requestMouse(): ()=>void { + if (!this.peer) { return Function; } + const conn = this.peer.connections[this.getPeerID()]?.[0]; + if (!conn || !conn.open) { return Function; } + const onMouseMove = (e) => { + // @ts-ignore + const data = this._getInternalCoordinates(e) + conn.send({ x: Math.round(data.x), y: Math.round(data.y) }); // debounce? + } //@ts-ignore - this.document?. - addEventListener("mousemove", ({ x, y }) => { - conn.send([ x, y ]); // debounce? - }); - return true; + this.overlay.addEventListener("mousemove", onMouseMove); + //@ts-ignore + return () => this.overlay.removeEventListener("mousemove", onMouseMove); } @@ -419,7 +443,6 @@ export default class MessageDistributor extends StatedScreen { } break; case "set_viewport_size": - console.log("setvvs", msg) this.resizeManager.add(msg); break; case "mouse_move": diff --git a/frontend/app/types/session/session.js b/frontend/app/types/session/session.js index f5d10ce60..0db322332 100644 --- a/frontend/app/types/session/session.js +++ b/frontend/app/types/session/session.js @@ -26,6 +26,8 @@ function hashString(s: string): number { export default Record({ sessionId: '', siteId: '', + projectKey: '', + peerId: '', live: true, startedAt: 0, duration: 0,