Skip to content

Commit

Permalink
GH-47: 1) fixed wrong id indexing on BE; 2) added automatic playback …
Browse files Browse the repository at this point in the history
…and camera type swithing if data stream is not yet started
  • Loading branch information
sskorol committed Jan 18, 2023
1 parent 2b2bc01 commit 3f90aae
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 10 deletions.
2 changes: 1 addition & 1 deletion backend/mini_pupper_webrtc/main.py
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -30,7 +37,7 @@ const CameraLabel = observer(({name, marginLeft = 0, connected}) => {
}}
/>
}
disabled={!connected}
disabled={isDisabled()}
label={name.toUpperCase()}
sx={{
marginLeft,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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={{
Expand All @@ -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={{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
17 changes: 15 additions & 2 deletions frontend/src/store/WebRtc/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export default class WebRTC {
@observable useNN = false
@observable isWebRtcConnected = false
@observable dataChannel = null
@observable isDataChannelOpened = false

constructor(rootStore) {
makeObservable(this)
Expand Down Expand Up @@ -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)
Expand Down

0 comments on commit 3f90aae

Please sign in to comment.