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"
}