diff --git a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx index 63d67dc0f..e1e5ba1a6 100644 --- a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx +++ b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx @@ -5,6 +5,7 @@ import cn from 'classnames' import Counter from 'App/components/shared/SessionItem/Counter' import stl from './chatWindow.css' import ChatControls from '../ChatControls/ChatControls' +import Draggable from 'react-draggable'; export interface Props { incomeStream: MediaStream | null, @@ -17,38 +18,24 @@ const ChatWindow: FC = function ChatWindow({ userId, incomeStream, localS const [minimize, setMinimize] = useState(false) return ( -
-
-
+ +
+
Meeting {userId}
- {/* */} +
- - {/* - - - } - content={ `Remote Control` } - size="tiny" - inverted - position="top center" - /> */} -
-
- -
- +
+ +
+ +
+
- -
+ ) } diff --git a/frontend/app/components/Assist/ChatWindow/chatWindow.css b/frontend/app/components/Assist/ChatWindow/chatWindow.css index 2fc4e451e..0f1f7694b 100644 --- a/frontend/app/components/Assist/ChatWindow/chatWindow.css +++ b/frontend/app/components/Assist/ChatWindow/chatWindow.css @@ -3,7 +3,7 @@ border: solid thin #000; border-radius: 3px; position: fixed; - width: 300px; + width: 300px; } .headerTitle { @@ -12,4 +12,10 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; +} + +.videoWrapper { + height: 180px; + overflow: hidden; + background-color: #000; } \ 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 index d3a219f57..9b32c2eb2 100644 --- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx +++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx @@ -3,7 +3,6 @@ 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 'Player' @@ -73,7 +72,7 @@ function AssistActions({ toggleChatWindow, userId, calling }: Props) { inverted position="top right" /> -
+
{ inCall && }
diff --git a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.css b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.css index fc45fc800..e69de29bb 100644 --- a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.css +++ b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.css @@ -1,25 +0,0 @@ -.controls { - height: 28px; - background-color: red; -} - -.btnWrapper { - width: 24px; - height: 24px; - display: flex; - justify-content: center; - align-items: center; - background-color: white; - border-radius: 50%; - margin-left: 8px; - /* &:hover { - background-color: $teal; - } */ - - &.disabled { - background-color: red; - & svg { - fill: white; - } - } -} \ 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 index 42a5279b7..b0b600cac 100644 --- a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx +++ b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx @@ -1,57 +1,23 @@ -import React, { useState, useEffect, useRef } from 'react' -import { Button, Icon } from 'UI' -import cn from 'classnames' -import stl from './VideoContainer.css' +import React, { useEffect, useRef } from 'react' interface Props { stream: MediaStream | null muted?: boolean, - height?: number + width?: number } -function VideoContainer({ stream, muted = false, height = 280 }: Props) { - // const [audioEnabled, setAudioEnabled] = useState(true) - // const [videoEnabled, setVideoEnabled] = useState(true) +function VideoContainer({ stream, muted = false, width = 280 }: Props) { const ref = useRef(null); useEffect(() => { if (ref.current) { ref.current.srcObject = stream; } - }, [ ref.current, stream ]) - - // const toggleAudio = () => { - // if (!stream) { return; } - // const aEn = !audioEnabled - // stream.getAudioTracks().forEach(track => track.enabled = aEn); - // setAudioEnabled(aEn); - // } - - // const toggleVideo = () => { - // if (!stream) { return; } - // const vEn = !videoEnabled; - // stream.getVideoTracks().forEach(track => track.enabled = vEn); - // setVideoEnabled(vEn) - // } + }, [ ref.current, stream ]) return ( -
-
-
+
+
) } diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..f85b56483 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,114 @@ +{ + "name": "openreplay", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "dependencies": { + "react-draggable": "^4.4.3" + } + }, + "node_modules/classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + }, + "node_modules/react-draggable": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.3.tgz", + "integrity": "sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==", + "dependencies": { + "classnames": "^2.2.5", + "prop-types": "^15.6.0" + } + }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + }, + "dependencies": { + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + }, + "react-draggable": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.3.tgz", + "integrity": "sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==", + "requires": { + "classnames": "^2.2.5", + "prop-types": "^15.6.0" + } + }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 000000000..92fa0e3d7 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "react-draggable": "^4.4.3" + } +}