fix: ui-control-buttons (#16)

* fix: ui control buttons

* feat: hide device menu on mobile

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;
+  }
+}

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)}
             >
-              <MicrophoneIcon enabled={audioEnabled} />
+              <MicrophoneIcon className={styles.controlMic} enabled={audioEnabled} />
             </TrackToggle>
-            <div className={`lk-button-group-menu ${styles.controlBarMenuButton}`}>
-              <MediaDeviceMenu
-                initialSelection={audioDeviceId}
-                kind="audioinput"
-                disabled={!audioTrack}
-                tracks={{ audioinput: audioTrack }}
-                onActiveDeviceChange={(_, id) => setAudioDeviceId(id)}
-              />
-            </div>
+            {!isMobile && (
+              <div className={`lk-button-group-menu ${styles.controlBarMenuButton}`}>
+                <MediaDeviceMenu
+                  initialSelection={audioDeviceId}
+                  kind="audioinput"
+                  disabled={!audioTrack}
+                  tracks={{ audioinput: audioTrack }}
+                  onActiveDeviceChange={(_, id) => setAudioDeviceId(id)}
+                />
+              </div>
+            )}
           </div>
         )}
         {visibleControls.camera && (
@@ -168,19 +172,22 @@ export function ControlBar({ variation, controls, ...props }: ControlBarProps) {
               initialState={videoEnabled}
               onChange={enabled => setVideoEnabled(enabled)}
             >
-              <CameraIcon enabled={videoEnabled} />
+              <CameraIcon className={styles.controlCamera} enabled={videoEnabled} />
             </TrackToggle>
-            <div className={`lk-button-group-menu ${styles.controlBarMenuButton}`}>
-              <MediaDeviceMenu
-                kind="videoinput"
-                initialSelection={videoDeviceId}
-                disabled={!videoTrack}
-                tracks={{ videoinput: videoTrack }}
-                onActiveDeviceChange={(_, id) => setVideoDeviceId(id)}
-              />
-            </div>
+            {!isMobile && (
+              <div className={`lk-button-group-menu ${styles.controlBarMenuButton}`}>
+                <MediaDeviceMenu
+                  kind="videoinput"
+                  initialSelection={videoDeviceId}
+                  disabled={!videoTrack}
+                  tracks={{ videoinput: videoTrack }}
+                  onActiveDeviceChange={(_, id) => setVideoDeviceId(id)}
+                />
+              </div>
+            )}
           </div>
         )}
+
         {visibleControls.screenShare && browserSupportsScreenSharing && (
           <Popup
             position="top left"
@@ -197,7 +204,7 @@ export function ControlBar({ variation, controls, ...props }: ControlBarProps) {
             }
             trigger={
               <button className={classNames('lk-button', styles.controlBarButton, { [styles.screenShareEnabled]: isScreenShareEnabled })}>
-                <ShareScreenIcon enabled={isScreenShareEnabled} />
+                <ShareScreenIcon className={styles.controlShare} enabled={isScreenShareEnabled} />
               </button>
             }
             basic
@@ -207,23 +214,38 @@ export function ControlBar({ variation, controls, ...props }: ControlBarProps) {
             }}
           />
         )}
+
+        {isMobile && (
+          <div className={styles.ControlBarRightButtonGroup}>
+            {visibleControls.chat && (
+              <ChatToggle className={styles.chatToggleButton}>
+                {showIcon && <ChatIcon className={styles.chatToggleIcon} />}
+                {showText && 'Chat'}
+              </ChatToggle>
+            )}
+            {visibleControls.peoplePanel && <PeoplePanelToggleButton />}
+          </div>
+        )}
+
         {visibleControls.leave && (
           <DisconnectButton className={styles.disconnectButton}>
             {showIcon && <PhoneIcon />}
-            {t('control_bar.leave')}
+            {!isMobile && t('control_bar.leave')}
           </DisconnectButton>
         )}
       </div>
       <StartAudio label="Start Audio" />
-      <div className={styles.ControlBarRightButtonGroup}>
-        {visibleControls.chat && (
-          <ChatToggle className={styles.chatToggleButton}>
-            {showIcon && <ChatIcon className={styles.chatToggleIcon} />}
-            {showText && 'Chat'}
-          </ChatToggle>
-        )}
-        {visibleControls.peoplePanel && <PeoplePanelToggleButton />}
-      </div>
+      {!isMobile && (
+        <div className={styles.ControlBarRightButtonGroup}>
+          {visibleControls.chat && (
+            <ChatToggle className={styles.chatToggleButton}>
+              {showIcon && <ChatIcon className={styles.chatToggleIcon} />}
+              {showText && 'Chat'}
+            </ChatToggle>
+          )}
+          {visibleControls.peoplePanel && <PeoplePanelToggleButton />}
+        </div>
+      )}
     </div>
   )
 }

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;
+  }
+}

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;
+  }
+}

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