diff --git a/src/Room.jsx b/src/Room.jsx index 68012a5..b6a124d 100644 --- a/src/Room.jsx +++ b/src/Room.jsx @@ -78,7 +78,7 @@ export function Room({ client }) { return (
- +
); } @@ -224,6 +224,8 @@ function RoomSetupView({ ); } +function useMediaManager() {} + function InRoomView({ roomName, microphoneMuted, @@ -239,6 +241,15 @@ function InRoomView({ }) { const [layout, toggleLayout] = useVideoGridLayout(); + const { + audioDeviceId, + audioDevices, + setAudioDevice, + videoDeviceId, + videoDevices, + setVideoDevice, + } = useMediaManager(); + const items = useMemo(() => { const participants = []; @@ -284,10 +295,25 @@ function InRoomView({ )}
- + setAudioDevice(value)} + options={audioDevices.map(({ label, deviceId }) => ({ + label, + value: deviceId, + }))} + /> setVideoDevice(value)} + options={videoDevices.map(({ label, deviceId }) => ({ + label, + value: deviceId, + }))} /> { + function onClick() { + if (open) { + setOpen(false); + } + } + + window.addEventListener("click", onClick); + + return () => { + window.removeEventListener("click", onClick); + }; + }, [open]); + return ( - - {muted ? : } - +
+ {children} + + {open && ( +
+
    + {options.map((item) => ( +
  • onChange(item)} + > + {item.label} +
  • + ))} +
+
+ )} +
); } -export function VideoButton({ enabled, ...rest }) { +export function MicButton({ muted, onChange, value, options, ...rest }) { return ( - - {enabled ? : } - + + + {muted ? : } + + + ); +} + +export function VideoButton({ enabled, onChange, value, ...rest }) { + return ( + + + {enabled ? : } + + ); } diff --git a/src/RoomButton.module.css b/src/RoomButton.module.css index c0f62d1..97fced4 100644 --- a/src/RoomButton.module.css +++ b/src/RoomButton.module.css @@ -15,7 +15,8 @@ limitations under the License. */ .roomButton, -.headerButton { +.headerButton, +.dropdownButton { display: flex; justify-content: center; align-items: center; @@ -29,7 +30,7 @@ limitations under the License. width: 50px; height: 50px; border-radius: 50px; - background-color: rgba(111, 120, 130, 0.3); + background-color: #394049; } .roomButton:hover { @@ -73,3 +74,34 @@ limitations under the License. .screenshareButton.on svg * { fill: #0dbd8b; } + +.dropdownButtonContainer { + position: relative; +} + +.dropdownButton { + width: 15px; + height: 15px; + border-radius: 15px; + background-color: #394049; + position: absolute; + bottom: 0; + right: 0; +} + +.dropdownButton:hover { + background-color: #8d97a5; +} + +.dropdownButton:hover svg * { + fill: #8d97a5; +} + +.dropdownContainer { + position: absolute; + left: 50%; + transform: translate(-50%, -100%); + top: 0; + background-color: #394049; + border-radius: 8px; +}