Improve PreJoin Component and add custom participant placeholders

.changeset/odd-files-talk.md

@@ -0,0 +1,6 @@
+---
+'@livekit/components-react': minor
+'@livekit/components-styles': minor
+---
+
+Improves the PreJoin component and allows for custom placeholders for each participant

examples/nextjs/pages/index.tsx

@@ -27,6 +27,10 @@ const EXAMPLE_ROUTES = {
     title: 'Example usage of @livekit/track-processors for background blur',
     href: () => `/processors`,
   },
+  prejoin: {
+    title: 'Example usage of @livekit/prejoin',
+    href: () => `/prejoin`,
+  },
 } as const;
 
 const Home: NextPage = () => {

packages/react/etc/components-react.api.md

@@ -1100,6 +1100,13 @@ export interface UseRoomInfoOptions {
     room?: Room;
 }
 
+// @public
+export function useSelectedDevice({
+  kind: 'videoinput' | 'audioinput';
+  track?: T;
+  deviceId?: string;
+}): { device: any, deviceError: any };
+
 // @public
 export function useSortedParticipants(participants: Array<Participant>): Participant[];
 

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livekit/components-react",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "license": "Apache-2.0",
   "author": "LiveKit",
   "repository": {

packages/react/src/components/participant/ParticipantTile.tsx

@@ -73,6 +73,7 @@ export interface ParticipantTileProps extends React.HTMLAttributes<HTMLDivElemen
   disableSpeakingIndicator?: boolean;
 
   onParticipantClick?: (event: ParticipantClickEvent) => void;
+  placeholders?: { [index: string]: React.ReactNode };
 }
 
 /**
@@ -100,6 +101,7 @@ export const ParticipantTile: (
       children,
       onParticipantClick,
       disableSpeakingIndicator,
+      placeholders,
       ...htmlProps
     }: ParticipantTileProps,
     ref,
@@ -156,7 +158,9 @@ export const ParticipantTile: (
                   )
                 )}
                 <div className="lk-participant-placeholder">
-                  <ParticipantPlaceholder />
+                  {placeholders?.[trackReference.participant?.identity] ?? (
+                    <ParticipantPlaceholder />
+                  )}
                 </div>
                 <div className="lk-participant-metadata">
                   <div className="lk-participant-metadata-item">

packages/react/src/hooks/index.ts

@@ -29,6 +29,7 @@ export { usePinnedTracks } from './usePinnedTracks';
 export { type UseRemoteParticipantOptions, useRemoteParticipant } from './useRemoteParticipant';
 export { type UseRemoteParticipantsOptions, useRemoteParticipants } from './useRemoteParticipants';
 export { type UseRoomInfoOptions, useRoomInfo } from './useRoomInfo';
+export { useSelectedDevice } from './useSelectedDevice';
 export { useSortedParticipants } from './useSortedParticipants';
 export { useSpeakingParticipants } from './useSpeakingParticipants';
 export { type UseStartAudioProps, useStartAudio } from './useStartAudio';

packages/react/src/hooks/useSelectedDevice.ts

@@ -0,0 +1,72 @@
+import { type LocalAudioTrack, type LocalVideoTrack } from 'livekit-client';
+import * as React from 'react';
+import { useMediaDevices } from './useMediaDevices';
+
+/**
+ * /**
+ * The `useSelectedDevice` hook returns the current selected device (audio or video) of the participant.
+ *
+ * @example
+ * ```tsx
+ * const { selectedDevice } = useSelectedDevice({
+ *   kind: 'videoinput',
+ *   track: track,
+ * });
+ *
+ * <div>
+ *  {selectedDevice?.label}
+ * </div>
+ * ```
+ * @public
+ */
+export function useSelectedDevice<T extends LocalVideoTrack | LocalAudioTrack>({
+  kind,
+  track,
+  deviceId,
+}: {
+  kind: 'videoinput' | 'audioinput';
+  track?: T;
+  deviceId?: string;
+}) {
+  const [deviceError, setDeviceError] = React.useState<Error | null>(null);
+
+  const devices = useMediaDevices({ kind });
+  const [selectedDevice, setSelectedDevice] = React.useState<MediaDeviceInfo | undefined>(
+    undefined,
+  );
+  const [localDeviceId, setLocalDeviceId] = React.useState<string | undefined>(deviceId);
+
+  const prevDeviceId = React.useRef(localDeviceId);
+
+  const getDeviceId = async () => {
+    try {
+      const newDeviceId = await track?.getDeviceId(false);
+      if (newDeviceId && localDeviceId !== newDeviceId) {
+        prevDeviceId.current = newDeviceId;
+        setLocalDeviceId(newDeviceId);
+      }
+    } catch (e) {
+      if (e instanceof Error) {
+        setDeviceError(e);
+      }
+    }
+  };
+
+  React.useEffect(() => {
+    if (track) getDeviceId();
+  }, [track]);
+
+  React.useEffect(() => {
+    // in case track doesn't exist, utilize the deviceId passed in
+    if (!track) setLocalDeviceId(deviceId);
+  }, [deviceId]);
+
+  React.useEffect(() => {
+    setSelectedDevice(devices?.find((dev) => dev.deviceId === localDeviceId));
+  }, [localDeviceId, devices]);
+
+  return {
+    selectedDevice,
+    deviceError,
+  };
+}