Make Media menu disappear after connecting

src/client/actions/MediaActions.ts

@@ -1,5 +1,5 @@
 import { makeAction, AsyncAction } from '../async'
-import { MEDIA_AUDIO_CONSTRAINT_SET, MEDIA_VIDEO_CONSTRAINT_SET, MEDIA_ENUMERATE, MEDIA_STREAM } from '../constants'
+import { MEDIA_AUDIO_CONSTRAINT_SET, MEDIA_VIDEO_CONSTRAINT_SET, MEDIA_ENUMERATE, MEDIA_STREAM, MEDIA_VISIBLE_SET } from '../constants'
 
 export interface MediaDevice {
   id: string
@@ -91,6 +91,18 @@ export function setAudioConstraint(
   }
 }
 
+export interface MediaVisibleAction {
+  type: 'MEDIA_VISIBLE_SET'
+  payload: { visible: boolean }
+}
+
+export function setMediaVisible(visible: boolean): MediaVisibleAction {
+  return {
+    type: MEDIA_VISIBLE_SET,
+    payload: { visible },
+  }
+}
+
 export const getMediaStream = makeAction(
   MEDIA_STREAM,
   async (constraints: GetMediaConstraints) => getUserMedia(constraints),
@@ -103,4 +115,5 @@ export type MediaAction =
   MediaVideoConstraintAction |
   MediaAudioConstraintAction |
   MediaEnumerateAction |
-  MediaStreamAction
+  MediaStreamAction |
+  MediaVisibleAction

src/client/components/Media.tsx

@@ -27,6 +27,9 @@ const mapDispatchToProps = {
 const c = connect(mapStateToProps, mapDispatchToProps)
 
 export const Media = c(React.memo(function Media(props: MediaProps) {
+  if (!props.visible) {
+    return null
+  }
 
   React.useMemo(async () => await props.enumerateDevices(), [])
 

src/client/constants.ts

@@ -19,6 +19,7 @@ export const MEDIA_ENUMERATE = 'MEDIA_ENUMERATE'
 export const MEDIA_STREAM = 'MEDIA_STREAM'
 export const MEDIA_VIDEO_CONSTRAINT_SET = 'MEDIA_VIDEO_CONSTRAINT_SET'
 export const MEDIA_AUDIO_CONSTRAINT_SET = 'MEDIA_AUDIO_CONSTRAINT_SET'
+export const MEDIA_VISIBLE_SET = 'MEDIA_VISIBLE_SET'
 
 export const PEER_ADD = 'PEER_ADD'
 export const PEER_REMOVE = 'PEER_REMOVE'

src/client/reducers/media.ts

@@ -1,5 +1,5 @@
-import { MediaDevice, AudioConstraint, VideoConstraint, MediaAction, MediaEnumerateAction } from '../actions/MediaActions'
+import { MediaDevice, AudioConstraint, VideoConstraint, MediaAction, MediaEnumerateAction, MediaStreamAction } from '../actions/MediaActions'
-import { MEDIA_ENUMERATE, MEDIA_AUDIO_CONSTRAINT_SET, MEDIA_VIDEO_CONSTRAINT_SET } from '../constants'
+import { MEDIA_ENUMERATE, MEDIA_AUDIO_CONSTRAINT_SET, MEDIA_VIDEO_CONSTRAINT_SET, MEDIA_VISIBLE_SET, MEDIA_STREAM } from '../constants'
 
 export interface MediaState {
   devices: MediaDevice[]
@@ -7,6 +7,7 @@ export interface MediaState {
   audio: AudioConstraint
   loading: boolean
   error: string
+  visible: boolean
 }
 
 const defaultState: MediaState = {
@@ -15,6 +16,7 @@ const defaultState: MediaState = {
   audio: true,
   loading: false,
   error: '',
+  visible: true,
 }
 
 export function handleEnumerate(
@@ -42,6 +44,27 @@ export function handleEnumerate(
   }
 }
 
+export function handleMediaStream(
+  state: MediaState,
+  action: MediaStreamAction,
+): MediaState {
+  switch (action.status) {
+    case 'resolved':
+      return {
+        ...state,
+        visible: false,
+      }
+    case 'rejected':
+      return {
+        ...state,
+        error: action.payload.message,
+        visible: true,
+      }
+    default:
+      return state
+  }
+}
+
 export default function media(
   state = defaultState,
   action: MediaAction,
@@ -59,6 +82,13 @@ export default function media(
         ...state,
         video: action.payload,
       }
+    case MEDIA_VISIBLE_SET:
+      return {
+        ...state,
+        visible: action.payload.visible,
+      }
+    case MEDIA_STREAM:
+      return handleMediaStream(state, action)
     default:
       return state
   }

src/scss/_toolbar.scss

@@ -71,6 +71,12 @@
     }
   }
 
+  .send-file {
+    &:hover {
+      background: #407cf7;
+    }
+  }
+
   .mute-video {
     &:hover, &.on {
       background: #407cf7;