neoris/meet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Mobile styles

Browse Source
This commit is contained in:
Kevin Szuchet 2023-08-09 10:18:54 +02:00
parent 2661796760
commit 30c23dc32e
No known key found for this signature in database
GPG Key ID: 1E083BC33700E594
3 changed files with 83 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Pages/ConnectToWorld/ConnectToWorld.module.css
View File

@ -1,6 +1,5 @@
:global(#root) {
height: 100%;
width: 100%;
}
.ConnectToWorld {
@ -29,6 +28,10 @@
letter-spacing: 0px;
}
.ConnectToWorld .content .form {
width: 100%;
}
.ConnectToWorld .content .description {
font-size: 15px;
font-weight: 400;
@ -53,4 +56,26 @@
font-weight: 400;
line-height: 15px;
letter-spacing: 0px;
}
.ConnectToWorld .content :global(.select-field.error.warning p.message) {
margin-bottom: 15px;
}
@media (min-width: 769px) {
.content :global(.SignIn.center) {
min-width: 700px;
}
}
@media (max-width: 768px) {
.ConnectToWorld .content :global(.dcl.field), .ConnectToWorld .content :global(.dcl.select-field) {
min-width: auto;
}
.ConnectToWorld .content {
height: 100%;
border-radius: unset;
padding: 24px;
}
}

106
src/components/Pages/ConnectToWorld/ConnectToWorld.tsx
View File

@ -2,7 +2,7 @@ import React, { ChangeEvent, useCallback, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { AuthIdentity } from '@dcl/crypto'
import { t } from 'decentraland-dapps/dist/modules/translation/utils'
import { Button, Loader, SelectField, Field, DropdownProps } from 'decentraland-ui'
import { Button, Loader, SelectField, Field, DropdownProps, Form } from 'decentraland-ui'
import meetOnDecentralandImg from '../../../assets/images/meet-on-decentraland.png'
import { locations } from '../../../modules/routing/locations'
import { signedFetch } from '../../../utils/auth'
@ -92,25 +92,29 @@ function ConnectToWorld(props: Props) {
throw Error('An error has occurred')
}
const handleClick = useCallback(async () => {
setError('')
const handleClick = useCallback(
async (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault()
setError('')
try {
if (!identity) return
try {
if (!identity) return
const response: { url: string; token: string } = await livekitConnect(
identity,
'https://worlds-content-server.decentraland.zone',
selectedServer
)
onSubmitConnectForm(response.url, response.token)
addServerToPreviouslyLoaded(selectedServer)
navigate(`/meet/${encodeURIComponent(response.url)}?token=${encodeURIComponent(response.token)}`)
} catch (error) {
console.error('ERROR livekit connect', error)
if (isErrorMessage(error)) setError(error.message)
}
}, [identity, selectedServer, onSubmitConnectForm])
const response: { url: string; token: string } = await livekitConnect(
identity,
'https://worlds-content-server.decentraland.zone',
selectedServer
)
onSubmitConnectForm(response.url, response.token)
addServerToPreviouslyLoaded(selectedServer)
navigate(`/meet/${encodeURIComponent(response.url)}?token=${encodeURIComponent(response.token)}`)
} catch (error) {
console.error('ERROR livekit connect', error)
if (isErrorMessage(error)) setError(error.message)
}
},
[identity, selectedServer, onSubmitConnectForm]
)
return (
<PageLayout>
@ -127,38 +131,40 @@ function ConnectToWorld(props: Props) {
alt={t('connect_to_world.image_alt')}
aria-label={t('connect_to_world.image_alt')}
/>
<div className={styles.inputContainer}>
<label className={styles.label} htmlFor="server">
{t('connect_to_world.input_label')}
</label>
{availableServers.length > 0 ? (
<SelectField
value={selectedServer}
options={availableServers.map(server => ({
value: server,
text: server
}))}
onAddItem={handleSelectChange}
onChange={handleSelectChange}
allowAdditions
error={!!error}
message={error}
/>
) : (
<Field
className={styles.input}
name="server"
value={selectedServer}
onChange={handleChange}
placeholder={t('connect_to_world.input_placeholder')}
error={!!error}
message={error}
/>
)}
</div>
<Button primary onClick={handleClick} fluid disabled={!selectedServer}>
{t('connect_to_world.cta')}
</Button>
<Form className={styles.form}>
<div className={styles.inputContainer}>
<label className={styles.label} htmlFor="server">
{t('connect_to_world.input_label')}
</label>
{availableServers.length > 0 ? (
<SelectField
value={selectedServer}
options={availableServers.map(server => ({
value: server,
text: server
}))}
onAddItem={handleSelectChange}
onChange={handleSelectChange}
allowAdditions
error={!!error}
message={error}
/>
) : (
<Field
name="server"
value={selectedServer}
onChange={handleChange}
placeholder={t('connect_to_world.input_placeholder')}
error={!!error}
message={error}
onEnter={handleClick}
/>
)}
</div>
<Button primary onClick={handleClick} fluid disabled={!selectedServer} type="submit">
{t('connect_to_world.cta')}
</Button>
</Form>
</div>
</div>
)}

2
src/utils/worldServers.ts
View File

@ -1,6 +1,6 @@
const KEY = 'previously-loaded-servers'
export const getPreviouslyLoadedServers = () => localStorage.getItem(KEY)?.split(',') || null
export const getPreviouslyLoadedServers = () => Array.from(new Set(localStorage.getItem(KEY)?.split(','))) || null
export const addServerToPreviouslyLoaded = (server: string) => {
const previouslyLoadedServers = getPreviouslyLoadedServers() || []