Improve PreJoin Component and add custom participant placeholders

[Simba14]

This PR improves the PreJoin component by fixing a few bugs, improving the UX and adding some new features.

Bug fixes:

• Video feed no longer flickers when enabling / disabling the audio (Due to Video stream being re-rendered each time)

Feature:

• Display selected devices
• Enabled selecting of device when audio / video is disabled.
• Improve UI of selecting device section to make it clearer which part disables / enables and which part selects the device.
• Also extended the ParticipantTile by adding the placeholders prop. This allows placeholders to be unique for each participant e.g. if they have an image associated with their account.

placeholders is an object where the key is the participant id and the value is a React node.

In order to implement the selected device feature, I added new hook - useSelectedDevice to return the current selected device by the user.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 59450867829bd805ed9887311d0524d7982171e1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@livekit/components-react	Minor
@livekit/components-styles	Minor
@livekit/component-example-next	Patch
@livekit/components-js-docs	Patch
@livekit/component-docs-storybook	Patch
@livekit/components-docs-gen	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[CLAassistant]

All committers have signed the CLA.