From 5d12bc62598ee8d03d49a9f746bd6dc8f3bddd8c Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 15 Jun 2021 13:37:46 +0530 Subject: [PATCH] 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