feat(ui) - toggle annotation manually

frontend/app/components/Assist/components/AssistActions/AassistActions.css

@@ -2,3 +2,10 @@
   opacity: 0.5;
   pointer-events: none;
 }
+
+.divider {
+  width: 1px;
+  height: 49px;
+  margin: 0 10px;
+  background-color: $gray-light;
+}

frontend/app/components/Assist/components/AssistActions/AssistActions.tsx

@@ -5,7 +5,7 @@ import cn from 'classnames'
 import { toggleChatWindow } from 'Duck/sessions';
 import { connectPlayer } from 'Player/store';
 import ChatWindow from '../../ChatWindow';
-import { callPeer, requestReleaseRemoteControl } from 'Player'
+import { callPeer, requestReleaseRemoteControl, toggleAnnotation } from 'Player'
 import { CallingState, ConnectionStatus, RemoteControlStatus } from 'Player/MessageDistributor/managers/AssistManager';
 import RequestLocalStream from 'Player/MessageDistributor/managers/LocalStream';
 import type { LocalStream } from 'Player/MessageDistributor/managers/LocalStream';
@@ -31,13 +31,14 @@ interface Props {
   userId: String,
   toggleChatWindow: (state) => void,
   calling: CallingState,
+  annotating: boolean,
   peerConnectionStatus: ConnectionStatus,
   remoteControlStatus: RemoteControlStatus,
   hasPermission: boolean,
   isEnterprise: boolean,
 }
 
-function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus, remoteControlStatus, hasPermission, isEnterprise }: Props) {
+function AssistActions({ toggleChatWindow, userId, calling, annotating, peerConnectionStatus, remoteControlStatus, hasPermission, isEnterprise }: Props) {
   const [ incomeStream, setIncomeStream ] = useState<MediaStream | null>(null);
   const [ localStream, setLocalStream ] = useState<LocalStream | null>(null);
   const [ callObject, setCallObject ] = useState<{ end: ()=>void } | null >(null);
@@ -81,6 +82,23 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus
 
   return (
     <div className="flex items-center">
+      {onCall && (
+        <>
+          <div
+            className={
+              cn(
+                'cursor-pointer p-2 flex items-center',
+                {[stl.disabled]: !onCall}
+              )
+            }
+            onClick={ toggleAnnotation }
+            role="button"
+          >
+            <IconButton label={`Annotate`} icon="pencil" primaryText redText={annotating} />
+          </div>
+          <div className={ stl.divider } />
+        </>
+      )}
       <div
         className={
           cn(
@@ -91,8 +109,9 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus
         onClick={ requestReleaseRemoteControl }
         role="button"
       >
-        <IconButton label={`${remoteActive ? 'Stop ' : ''} Remote Control`} icon="remote-control" primaryText redText={remoteActive} />
+        <IconButton label={`Remote Control`} icon="remote-control" primaryText redText={remoteActive} />
       </div>
+      <div className={ stl.divider } />
       
       <Popup
         trigger={
@@ -132,6 +151,7 @@ const con = connect(state => {
 
 export default con(connectPlayer(state => ({
   calling: state.calling,
+  annotating: state.annotating,
   remoteControlStatus: state.remoteControl,
   peerConnectionStatus: state.peerConnectionStatus,
 }))(AssistActions))

frontend/app/components/Session_/playerBlockHeader.css

@@ -8,7 +8,7 @@
 .divider {
   width: 1px;
   height: 49px;
-  margin: 0 15px;
+  margin: 0 10px;
   background-color: $gray-light;
 }
 

frontend/app/player/MessageDistributor/managers/AssistManager.ts

@@ -323,7 +323,7 @@ export default class AssistManager {
   private handleCallEnd() {
     this.callArgs && this.callArgs.onCallEnd()
     this.callConnection && this.callConnection.close()
-    update({ calling: CallingState.NoCall })
+    update({ calling: CallingState.NoCall, annotating: false })
     this.callArgs = null
     this.annot?.remove()
     this.annot = null
@@ -377,7 +377,7 @@ export default class AssistManager {
     if (typeof enable !== "boolean") {
       enable = !!getState().annotating
     }
-    if (enable && !this.annot) {
+    if (!enable && !this.annot) {
       const annot = this.annot = new AnnotationCanvas()
       annot.mount(this.md.overlay)
       annot.canvas.addEventListener("mousedown", e => {
@@ -404,7 +404,7 @@ export default class AssistManager {
         this.socket.emit("moveAnnotation", [ data.x, data.y ])
       })
       update({ annotating: true })
-    } else if (!enable && !!this.annot) {
+    } else if (enable && !!this.annot) {
       this.annot.remove()
       this.annot = null
       update({ annotating: false })