From 0a40e7202aac5d5102ba7197aebe70792b19e17c Mon Sep 17 00:00:00 2001
From: Jerko Steiner <jerko.steiner@gmail.com>
Date: Sun, 17 Nov 2019 09:46:11 -0300
Subject: [PATCH] Make Media menu disappear after connecting

---
 src/client/actions/MediaActions.ts | 17 +++++++++++++--
 src/client/components/Media.tsx    |  3 +++
 src/client/constants.ts            |  1 +
 src/client/reducers/media.ts       | 34 ++++++++++++++++++++++++++++--
 src/scss/_toolbar.scss             |  6 ++++++
 5 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/client/actions/MediaActions.ts b/src/client/actions/MediaActions.ts
index 5253a42..44d8230 100644
--- a/src/client/actions/MediaActions.ts
+++ b/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
diff --git a/src/client/components/Media.tsx b/src/client/components/Media.tsx
index 34dca6b..3924a5f 100644
--- a/src/client/components/Media.tsx
+++ b/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(), [])
 
diff --git a/src/client/constants.ts b/src/client/constants.ts
index 8ba071f..67377c4 100644
--- a/src/client/constants.ts
+++ b/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'
diff --git a/src/client/reducers/media.ts b/src/client/reducers/media.ts
index 0600e92..57c463a 100644
--- a/src/client/reducers/media.ts
+++ b/src/client/reducers/media.ts
@@ -1,5 +1,5 @@
-import { MediaDevice, AudioConstraint, VideoConstraint, MediaAction, MediaEnumerateAction } from '../actions/MediaActions'
-import { MEDIA_ENUMERATE, MEDIA_AUDIO_CONSTRAINT_SET, MEDIA_VIDEO_CONSTRAINT_SET } from '../constants'
+import { MediaDevice, AudioConstraint, VideoConstraint, MediaAction, MediaEnumerateAction, MediaStreamAction } from '../actions/MediaActions'
+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
   }
diff --git a/src/scss/_toolbar.scss b/src/scss/_toolbar.scss
index 2ab32a1..23ced5f 100644
--- a/src/scss/_toolbar.scss
+++ b/src/scss/_toolbar.scss
@@ -71,6 +71,12 @@
     }
   }
 
+  .send-file {
+    &:hover {
+      background: #407cf7;
+    }
+  }
+
   .mute-video {
     &:hover, &.on {
       background: #407cf7;