GH-47: 1) fixed wrong id indexing on BE; 2) added automatic playback …

…and camera type swithing if data stream is not yet started
WaverleySoftware · Jan 18, 2023 · 3f90aae · 3f90aae
1 parent 2b2bc01
commit 3f90aae
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 10 deletions.
diff --git a/backend/mini_pupper_webrtc/main.py b/backend/mini_pupper_webrtc/main.py
@@ -40,7 +40,7 @@ def get_robots() -> List[RobotSettings]:
 
 @app.get('/robot_types')
 def get_robot_types() -> List[RobotTypeDTO]:
-    return [RobotTypeDTO(id=id, label=robot_type.value) for id, robot_type in enumerate(RobotType)]
+    return [RobotTypeDTO(id=id + 1, label=robot_type.value) for id, robot_type in enumerate(RobotType)]
 
 
 @app.get('/widgets')

diff --git a/frontend/src/components/videoControls/components/CameraControls/index.js b/frontend/src/components/videoControls/components/CameraControls/index.js
@@ -7,11 +7,18 @@ import { IS_SIMULATING } from '../../../../constants'
 
 const CameraLabel = observer(({name, marginLeft = 0, connected}) => {
   const theme = useTheme()
-  const {videoPlayerStore: { isFullscreen }} = useStore()
+  const {
+    videoPlayerStore: { isFullscreen, isStreamStarted },
+    webRTCStore: { isDataChannelOpened },
+  } = useStore()
   const color = connected
     ? isFullscreen ? theme.palette.common.white : theme.palette.text.primary
     : theme.palette.text.disabledVideoPlayerIcon
 
+  const isDisabled = () => {
+    return !connected || (connected && isStreamStarted && !isDataChannelOpened)
+  }
+
   return (
     <FormControlLabel
       labelPlacement='start'
@@ -30,7 +37,7 @@ const CameraLabel = observer(({name, marginLeft = 0, connected}) => {
           }}
         />
       }
-      disabled={!connected}
+      disabled={isDisabled()}
       label={name.toUpperCase()}
       sx={{
         marginLeft,

diff --git a/frontend/src/components/videoControls/components/ObjectDetectionSwitch/index.js b/frontend/src/components/videoControls/components/ObjectDetectionSwitch/index.js
@@ -6,8 +6,8 @@ import { useStore } from '../../../../store'
 
 const ObjectDetectionControls = observer(({ connected }) => {
   const {
-    webRTCStore: { selectedMode, useNN, setNN },
-    videoPlayerStore: { isFullscreen, restart }
+    webRTCStore: { selectedMode, useNN, setNN, isDataChannelOpened },
+    videoPlayerStore: { isFullscreen, restart, isStreamStarted }
   } = useStore()
 
   const theme = useTheme()
@@ -20,6 +20,10 @@ const ObjectDetectionControls = observer(({ connected }) => {
     await restart()
   }
 
+  const isDisabled = () => {
+    return !connected || selectedMode === 'depth' || (connected && isStreamStarted && !isDataChannelOpened)
+  }
+
   return (
       <Grid direction='row' container item alignItems='center' marginLeft='22px' width='auto'>
         <Typography sx={{
@@ -29,7 +33,7 @@ const ObjectDetectionControls = observer(({ connected }) => {
         }}>Detect Objects</Typography>
         <Switch
           checked={useNN && selectedMode !== 'depth'}
-          disabled={!connected || selectedMode === 'depth'}
+          disabled={isDisabled()}
           onChange={handleNNChange}
           inputProps={{ 'aria-label': 'ant design' }}
           sx={{

diff --git a/frontend/src/components/videoControls/components/PlaybackControls/index.js b/frontend/src/components/videoControls/components/PlaybackControls/index.js
@@ -7,20 +7,27 @@ import { alpha } from '@mui/material/styles'
 import { useTheme } from '@mui/material/styles'
 
 const PlaybackControls = observer(({ connected }) => {
-  const {videoPlayerStore: { isFullscreen, isStreamStarted, onClick, duration }} = useStore()
+  const {
+    videoPlayerStore: { isFullscreen, isStreamStarted, onClick, duration },
+    webRTCStore: { isDataChannelOpened },
+  } = useStore()
   const theme = useTheme()
 
   const playIcon = () => {
     return isStreamStarted ? Pause : PlayArrow
   }
 
+  const isDisabled = () => {
+    return !connected || (connected && isStreamStarted && !isDataChannelOpened)
+  }
+
   return (
     <Grid item sx={{ marginLeft: duration ? 0 : '38px' }}>
       <Tooltip title={`${isStreamStarted ? 'Pause' : 'Play'}`} placement='top'>
         <span>
           <IconButton
             onClick={onClick}
-            disabled={!connected}
+            disabled={isDisabled()}
             sx={{
               width: '44px',
               height: '44px',

diff --git a/frontend/src/store/WebRtc/index.js b/frontend/src/store/WebRtc/index.js
@@ -9,6 +9,7 @@ export default class WebRTC {
   @observable useNN = false
   @observable isWebRtcConnected = false
   @observable dataChannel = null
+  @observable isDataChannelOpened = false
 
   constructor(rootStore) {
     makeObservable(this)
@@ -36,13 +37,25 @@ export default class WebRTC {
     console.log(action)
   }
 
+  @action
+  onDataChannelOpened = () => {
+    this.isDataChannelOpened = true
+    console.log('[DC] opened')
+  }
+
+  @action
+  onDataChannelClosed = () => {
+    this.isDataChannelOpened = false
+    console.log('[DC] closed')
+  }
+
   @action
   startWebRtc = async () => {
     this.initConnection()
     const dataChannel = this.createDataChannel(
       'pingChannel',
-      () => console.log('[DC] closed'),
-      () => console.log('[DC] opened'),
+      this.onDataChannelClosed,
+      this.onDataChannelOpened,
       this.onMessage
     )
     this.setDataChannel(dataChannel)