diff --git a/src/components/VideoConference/ControlBar/ControlBar.module.css b/src/components/VideoConference/ControlBar/ControlBar.module.css index be0e292..4d6ee44 100644 --- a/src/components/VideoConference/ControlBar/ControlBar.module.css +++ b/src/components/VideoConference/ControlBar/ControlBar.module.css @@ -132,3 +132,57 @@ line-height: normal; text-transform: uppercase; } + +@media (max-width: 768px) { + .controlBarButton:global(.lk-button) { + width: 36px; + height: 36px; + } + + .controlBarButton:not(.disabled) .controlMic { + height: 20px; + width: 14px; + } + + .controlBarButton.disabled .controlMic { + height: 20.625px; + width: 20.625px; + } + + .controlBarButtonGroup .lk-button.lk-button-menu { + padding-left: 10px; + padding-right: 10px; + } + + .controlShare { + width: 21.75px; + height: 15.75px; + } + + .chatToggleButton svg { + width: 22px; + height: 19.879px; + } + .chatToggleButton { + padding: calc(36px - 19.879px) calc(36px - 22px); + } + + .disconnectButton { + width: 56px; + height: 32px; + padding: 0; + margin-left: 0; + } + + .ControlBarCenterButtonGroup { + justify-content: space-between; + padding-left: 14px; + padding-right: 14px; + } + + .ControlBarRightButtonGroup { + position: relative; + display: flex; + justify-content: space-between; + } +} diff --git a/src/components/VideoConference/ControlBar/ControlBar.tsx b/src/components/VideoConference/ControlBar/ControlBar.tsx index 109096d..ef181e2 100644 --- a/src/components/VideoConference/ControlBar/ControlBar.tsx +++ b/src/components/VideoConference/ControlBar/ControlBar.tsx @@ -13,6 +13,7 @@ import { import classNames from 'classnames' import { LocalAudioTrack, LocalVideoTrack, Track } from 'livekit-client' import { t } from 'decentraland-dapps/dist/modules/translation/utils' +import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media/Media' import { Button, Popup } from 'decentraland-ui' import { useLayoutContext } from '../../../hooks/useLayoutContext' import { useMediaQuery } from '../../../hooks/useMediaQuery' @@ -48,6 +49,7 @@ export function ControlBar({ variation, controls, ...props }: ControlBarProps) { } = useRoomContext() const isTooLittleSpace = useMediaQuery(`(max-width: ${isChatOpen ? 1000 : 760}px)`) + const isMobile = useMobileMediaQuery() const defaultVariation = isTooLittleSpace ? 'minimal' : 'verbose' variation ??= defaultVariation @@ -146,17 +148,19 @@ export function ControlBar({ variation, controls, ...props }: ControlBarProps) { initialState={audioEnabled} onChange={enabled => setAudioEnabled(enabled)} > - + -
- setAudioDeviceId(id)} - /> -
+ {!isMobile && ( +
+ setAudioDeviceId(id)} + /> +
+ )} )} {visibleControls.camera && ( @@ -168,19 +172,22 @@ export function ControlBar({ variation, controls, ...props }: ControlBarProps) { initialState={videoEnabled} onChange={enabled => setVideoEnabled(enabled)} > - + -
- setVideoDeviceId(id)} - /> -
+ {!isMobile && ( +
+ setVideoDeviceId(id)} + /> +
+ )} )} + {visibleControls.screenShare && browserSupportsScreenSharing && ( - + } basic @@ -207,23 +214,38 @@ export function ControlBar({ variation, controls, ...props }: ControlBarProps) { }} /> )} + + {isMobile && ( +
+ {visibleControls.chat && ( + + {showIcon && } + {showText && 'Chat'} + + )} + {visibleControls.peoplePanel && } +
+ )} + {visibleControls.leave && ( {showIcon && } - {t('control_bar.leave')} + {!isMobile && t('control_bar.leave')} )} -
- {visibleControls.chat && ( - - {showIcon && } - {showText && 'Chat'} - - )} - {visibleControls.peoplePanel && } -
+ {!isMobile && ( +
+ {visibleControls.chat && ( + + {showIcon && } + {showText && 'Chat'} + + )} + {visibleControls.peoplePanel && } +
+ )} ) } diff --git a/src/components/VideoConference/ControlBar/PeoplePanelToggleButton/PeoplePanelToggleButton.module.css b/src/components/VideoConference/ControlBar/PeoplePanelToggleButton/PeoplePanelToggleButton.module.css index 9a93517..49e5c27 100644 --- a/src/components/VideoConference/ControlBar/PeoplePanelToggleButton/PeoplePanelToggleButton.module.css +++ b/src/components/VideoConference/ControlBar/PeoplePanelToggleButton/PeoplePanelToggleButton.module.css @@ -20,3 +20,10 @@ left: -14px; min-width: 40px; } + +@media (max-width: 768px) { + .label { + margin-right: -20px; + margin-left: -10px; + } +} diff --git a/src/components/VideoConference/VideoConference/VideoConference.module.css b/src/components/VideoConference/VideoConference/VideoConference.module.css index bda1f6b..7219cb2 100644 --- a/src/components/VideoConference/VideoConference/VideoConference.module.css +++ b/src/components/VideoConference/VideoConference/VideoConference.module.css @@ -13,3 +13,13 @@ padding: 0; margin-right: 12px; } + +@media (max-width: 768px) { + .VideoConferenceInnerContainer { + padding: 0px 2px; + } + + .GridLayout { + margin-right: 0; + } +} diff --git a/src/modules/config/env/dev.json b/src/modules/config/env/dev.json index 83ba899..2302cc9 100644 --- a/src/modules/config/env/dev.json +++ b/src/modules/config/env/dev.json @@ -1,6 +1,7 @@ { - "CHAIN_ID": "11155111", - "PEER_URL": "https://peer.decentraland.zone", - "WORLDS_CONTENT_SERVER_URL": "https://worlds-content-server.decentraland.zone", - "SEGMENT_API_KEY": "XiymjAbQV5OJZXaT1doKqHgvgoUGHprP" + "CHAIN_ID": "1", + "EXPLORER_URL": "https://play.decentraland.org", + "PEER_URL": "https://peer.decentraland.org", + "WORLDS_CONTENT_SERVER_URL": "https://worlds-content-server.decentraland.org", + "SEGMENT_API_KEY": "FLpPrzJ8NlZLoRDldyQz4VdRnFGtxCAb" }