diff --git a/src/components/VideoConference/ParticipantTile/ParticipantTile.container.ts b/src/components/VideoConference/ParticipantTile/ParticipantTile.container.ts new file mode 100644 index 0000000..e489c7b --- /dev/null +++ b/src/components/VideoConference/ParticipantTile/ParticipantTile.container.ts @@ -0,0 +1,13 @@ +import { connect } from 'react-redux' +import { getData as getProfiles } from 'decentraland-dapps/dist/modules/profile/selectors' +import { RootState } from '../../../modules/reducer' +import { ParticipantTile } from './ParticipantTile' +import type { MapStateProps } from './ParticipantTile.types' + +const mapStateToProps = (state: RootState): MapStateProps => { + return { + profiles: getProfiles(state) + } +} + +export default connect(mapStateToProps)(ParticipantTile) diff --git a/src/components/VideoConference/ParticipantTile.tsx b/src/components/VideoConference/ParticipantTile/ParticipantTile.tsx similarity index 88% rename from src/components/VideoConference/ParticipantTile.tsx rename to src/components/VideoConference/ParticipantTile/ParticipantTile.tsx index 7cd6b7c..9900008 100644 --- a/src/components/VideoConference/ParticipantTile.tsx +++ b/src/components/VideoConference/ParticipantTile/ParticipantTile.tsx @@ -16,8 +16,9 @@ import { } from '@livekit/components-react' import { Track } from 'livekit-client' import Profile from 'decentraland-dapps/dist/containers/Profile' -import type { ParticipantClickEvent, TrackReferenceOrPlaceholder } from '@livekit/components-core' -import type { Participant, TrackPublication } from 'livekit-client' +import type { TrackReferenceOrPlaceholder } from '@livekit/components-core' +import type { Participant } from 'livekit-client' +import type { Props } from './ParticipantTile.types' /** @public */ export function ParticipantContextIfNeeded( @@ -33,16 +34,6 @@ export function ParticipantContextIfNeeded( ) } -/** @public */ -export interface ParticipantTileProps extends React.HTMLAttributes { - disableSpeakingIndicator?: boolean - participant?: Participant - source?: Track.Source - publication?: TrackPublication - onParticipantClick?: (event: ParticipantClickEvent) => void - imageSize?: 'normal' | 'large' | 'huge' | 'massive' -} - /** * The ParticipantTile component is the base utility wrapper for displaying a visual representation of a participant. * This component can be used as a child of the `TrackLoop` component or by spreading a track reference as properties. @@ -63,8 +54,9 @@ export function ParticipantTile({ publication, disableSpeakingIndicator, imageSize, + profiles, ...htmlProps -}: ParticipantTileProps) { +}: Props) { const p = useEnsureParticipant(participant) const trackRef: TrackReferenceOrPlaceholder = useMaybeTrackContext() ?? { participant: p, @@ -101,9 +93,9 @@ export function ParticipantTile({ const participantWithProfile: Participant = React.useMemo( () => ({ ...trackRef.participant, - name: 'Edita me' + name: profiles[trackRef.participant.identity]?.avatars[0]?.name ?? trackRef.participant.identity }), - [trackRef.participant] + [trackRef.participant, profiles] ) as Participant return ( diff --git a/src/components/VideoConference/ParticipantTile/ParticipantTile.types.ts b/src/components/VideoConference/ParticipantTile/ParticipantTile.types.ts new file mode 100644 index 0000000..e5179ac --- /dev/null +++ b/src/components/VideoConference/ParticipantTile/ParticipantTile.types.ts @@ -0,0 +1,18 @@ +import type { ParticipantClickEvent } from '@livekit/components-core' +import type { Participant, Track, TrackPublication } from 'livekit-client' + +/** @public */ +export interface OwnProps extends React.HTMLAttributes { + disableSpeakingIndicator?: boolean + participant?: Participant + source?: Track.Source + publication?: TrackPublication + onParticipantClick?: (event: ParticipantClickEvent) => void + imageSize?: 'normal' | 'large' | 'huge' | 'massive' +} + +export type Props = OwnProps & { + profiles: ReturnType +} + +export type MapStateProps = Pick diff --git a/src/components/VideoConference/ParticipantTile/index.tsx b/src/components/VideoConference/ParticipantTile/index.tsx new file mode 100644 index 0000000..1a23f55 --- /dev/null +++ b/src/components/VideoConference/ParticipantTile/index.tsx @@ -0,0 +1,3 @@ +import ParticipantTile from './ParticipantTile.container' + +export default ParticipantTile diff --git a/src/components/VideoConference/Videoconference.tsx b/src/components/VideoConference/Videoconference.tsx index a1830a4..3b4a848 100644 --- a/src/components/VideoConference/Videoconference.tsx +++ b/src/components/VideoConference/Videoconference.tsx @@ -17,7 +17,7 @@ import { useTracks } from '@livekit/components-react' import { RoomEvent, Track } from 'livekit-client' -import { ParticipantTile } from './ParticipantTile' +import ParticipantTile from './ParticipantTile' import type { TrackReferenceOrPlaceholder, WidgetState } from '@livekit/components-core' /** diff --git a/src/modules/config/env/dev.json b/src/modules/config/env/dev.json index b4bebf8..4564368 100644 --- a/src/modules/config/env/dev.json +++ b/src/modules/config/env/dev.json @@ -1,6 +1,5 @@ { - "NETWORK": "mainnet", - "CHAIN_ID": "1", - "PEER_URL": "https://peer.decentraland.org", + "CHAIN_ID": "11155111", + "PEER_URL": "https://peer.decentraland.zone", "WORLDS_CONTENT_SERVER_URL": "https://worlds-content-server.decentraland.zone" } diff --git a/src/modules/config/env/prod.json b/src/modules/config/env/prod.json index a3a443a..164b59b 100644 --- a/src/modules/config/env/prod.json +++ b/src/modules/config/env/prod.json @@ -1,5 +1,4 @@ { - "NETWORK": "mainnet", "CHAIN_ID": "1", "EXPLORER_URL": "https://play.decentraland.org", "PEER_URL": "https://peer.decentraland.org", diff --git a/src/modules/config/env/stg.json b/src/modules/config/env/stg.json index 1ec2121..1b898f4 100644 --- a/src/modules/config/env/stg.json +++ b/src/modules/config/env/stg.json @@ -1,5 +1,4 @@ { - "NETWORK": "mainnet", "CHAIN_ID": "1", "PEER_URL": "https://peer.decentraland.org", "WORLDS_CONTENT_SERVER_URL": "https://worlds-content-server.decentraland.org"