From 238394a7230d620896a43941c16bbfd184839c42 Mon Sep 17 00:00:00 2001 From: sylenien Date: Fri, 26 Aug 2022 18:04:36 +0200 Subject: [PATCH] change(ui): fix ui removing etc --- .../AssistActions/AssistActions.tsx | 21 ++++++++----------- .../VideoContainer/VideoContainer.tsx | 8 +++---- frontend/app/components/ui/Button/Button.tsx | 9 ++++++-- .../managers/AssistManager.ts | 3 +-- tracker/tracker-assist/src/RemoteControl.ts | 20 +++++++++++------- 5 files changed, 34 insertions(+), 27 deletions(-) diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx index af3dd544c..2ebd3562a 100644 --- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx +++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Popup, Icon, Button, IconButton } from 'UI'; -import logger from 'App/logger'; +import { Popup, Button } from 'UI'; import { connect } from 'react-redux'; import cn from 'classnames'; import { toggleChatWindow } from 'Duck/sessions'; @@ -19,14 +18,13 @@ function onReject() { toast.info(`Call was rejected.`); } -function onError(e) { +function onError(e: any) { console.log(e) toast.error(typeof e === 'string' ? e : e.message); } interface Props { userId: string; - toggleChatWindow: (state) => void; calling: CallingState; annotating: boolean; peerConnectionStatus: ConnectionStatus; @@ -38,7 +36,6 @@ interface Props { } function AssistActions({ - toggleChatWindow, userId, calling, annotating, @@ -77,7 +74,7 @@ function AssistActions({ }); } - function call(agentIds?: string[]) { + function call(additionalAgentIds?: string[]) { RequestLocalStream().then(lStream => { setLocalStream(lStream); setCallArgs( @@ -88,8 +85,8 @@ function AssistActions({ onError ) setCallObject(callPeer()); - if (agentIds) { - callPeer(agentIds) + if (additionalAgentIds) { + callPeer(additionalAgentIds) } }).catch(onError) } @@ -97,7 +94,7 @@ function AssistActions({ React.useEffect(() => { if (!onCall && isCallActive && agentIds) { setPrestart(true); - call(agentIds) + // call(agentIds); do not autocall on prestart, can change later } }, [agentIds, isCallActive]) @@ -109,7 +106,7 @@ function AssistActions({ confirmation: `Are you sure you want to call ${userId ? userId : 'User'}?`, }) ) { - call(); + call(agentIds); } }; @@ -156,8 +153,8 @@ function AssistActions({ onClick={onCall ? callObject?.end : confirmCall} role="button" > - {/* */} diff --git a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx index 8167283f2..c6fb7c585 100644 --- a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx +++ b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useRef } from 'react' interface Props { stream: MediaStream | null muted?: boolean, - width?: number + height?: number } function VideoContainer({ stream, muted = false, height = 280 }: Props) { @@ -20,15 +20,15 @@ function VideoContainer({ stream, muted = false, height = 280 }: Props) { if (!stream) { return } const iid = setInterval(() => { const settings = stream.getVideoTracks()[0]?.getSettings() - const isDummyVideoTrack = settings.width === 2 || settings.frameRate === 0 + const isDummyVideoTrack = settings ? (settings.width === 2 || settings.frameRate === 0) : true const shouldBeEnabled = !isDummyVideoTrack isEnabled !== shouldBeEnabled ? setEnabled(shouldBeEnabled) : null; - }, 1000) + }, 500) return () => clearInterval(iid) }, [ stream, isEnabled ]) return ( -
+
) diff --git a/frontend/app/components/ui/Button/Button.tsx b/frontend/app/components/ui/Button/Button.tsx index 8e6c62823..e7aa306dc 100644 --- a/frontend/app/components/ui/Button/Button.tsx +++ b/frontend/app/components/ui/Button/Button.tsx @@ -8,7 +8,7 @@ interface Props { onClick?: () => void; disabled?: boolean; type?: 'button' | 'submit' | 'reset'; - variant?: 'default' | 'primary' | 'text' | 'text-primary' | 'text-red' | 'outline' + variant?: 'default' | 'primary' | 'text' | 'text-primary' | 'text-red' | 'outline' | 'green' loading?: boolean; icon?: string; rounded?: boolean; @@ -31,6 +31,7 @@ export default (props: Props) => { } = props; let classes = ['relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap']; + let iconColor = variant === 'text' || variant === 'default' ? 'gray-dark' : 'teal'; if (variant === 'default') { classes.push('bg-white hover:bg-gray-light border border-gray-light'); @@ -40,6 +41,11 @@ export default (props: Props) => { classes.push('bg-teal color-white hover:bg-teal-dark'); } + if (variant === 'green') { + classes.push('bg-green color-white hover:bg-green-dark'); + iconColor = 'white'; + } + if (variant === 'text') { classes.push('bg-transparent color-gray-dark hover:bg-gray-light hover:color-gray-dark'); } @@ -60,7 +66,6 @@ export default (props: Props) => { classes.push('opacity-40 pointer-events-none'); } - let iconColor = variant === 'text' || variant === 'default' ? 'gray-dark' : 'teal'; if (variant === 'primary') { iconColor = 'white'; } diff --git a/frontend/app/player/MessageDistributor/managers/AssistManager.ts b/frontend/app/player/MessageDistributor/managers/AssistManager.ts index e45215fbb..f08d70775 100644 --- a/frontend/app/player/MessageDistributor/managers/AssistManager.ts +++ b/frontend/app/player/MessageDistributor/managers/AssistManager.ts @@ -2,11 +2,10 @@ import type { Socket } from 'socket.io-client'; import type Peer from 'peerjs'; import type { MediaConnection } from 'peerjs'; import type MessageDistributor from '../MessageDistributor'; -import type { Message } from '../messages' import store from 'App/store'; import type { LocalStream } from './LocalStream'; import { update, getState } from '../../store'; -import { iceServerConfigFromString } from 'App/utils' +// import { iceServerConfigFromString } from 'App/utils' import AnnotationCanvas from './AnnotationCanvas'; import MStreamReader from '../messages/MStreamReader'; import JSONRawMessageReader from '../messages/JSONRawMessageReader' diff --git a/tracker/tracker-assist/src/RemoteControl.ts b/tracker/tracker-assist/src/RemoteControl.ts index 5cad2ac18..5a122d837 100644 --- a/tracker/tracker-assist/src/RemoteControl.ts +++ b/tracker/tracker-assist/src/RemoteControl.ts @@ -24,7 +24,7 @@ export default class RemoteControl { constructor( private readonly options: AssistOptions, - private readonly onGrand: (sting?) => void, + private readonly onGrand: (sting?) => void, private readonly onRelease: (sting?) => void) {} reconnect(ids: string[]) { @@ -40,7 +40,7 @@ export default class RemoteControl { requestControl = (id: string) => { if (this.agentID !== null) { this.releaseControl(id) - return + return } setTimeout(() =>{ if (this.status === RCStatus.Requesting) { @@ -56,7 +56,14 @@ export default class RemoteControl { } else { this.releaseControl(id) } - }).catch(e => console.error(e)) + }) + .then(() => { + this.confirm?.remove() + }) + .catch(e => { + this.confirm?.remove() + console.error(e) + }) } grantControl = (id: string) => { this.agentID = id @@ -69,7 +76,6 @@ export default class RemoteControl { releaseControl = (id: string) => { if (this.agentID !== id) { return } - this.confirm?.remove() this.mouse?.remove() this.mouse = null this.status = RCStatus.Disabled @@ -81,16 +87,16 @@ export default class RemoteControl { scroll = (id, d) => { id === this.agentID && this.mouse?.scroll(d) } move = (id, xy) => { id === this.agentID && this.mouse?.move(xy) } private focused: HTMLElement | null = null - click = (id, xy) => { + click = (id, xy) => { if (id !== this.agentID || !this.mouse) { return } - this.focused = this.mouse.click(xy) + this.focused = this.mouse.click(xy) } focus = (id, el: HTMLElement) => { this.focused = el } input = (id, value: string) => { if (id !== this.agentID || !this.mouse || !this.focused) { return } - if (this.focused instanceof HTMLTextAreaElement + if (this.focused instanceof HTMLTextAreaElement || this.focused instanceof HTMLInputElement) { setInputValue.call(this.focused, value) const ev = new Event('input', { bubbles: true,})