💩(frontend) duplicate elements related to the participant tile

Duplicated LiveKit sources to customize the participant tile. It’s needed
to enhance the design and color of the participant placeholder.

More in the next commits.

src/frontend/src/features/rooms/livekit/components/FocusLayout.tsx

@@ -0,0 +1,6 @@
+import { ParticipantTile } from './ParticipantTile'
+import { FocusLayoutProps } from '@livekit/components-react'
+
+export function FocusLayout({ trackRef, ...htmlProps }: FocusLayoutProps) {
+  return <ParticipantTile trackRef={trackRef} {...htmlProps} />
+}

src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx

@@ -0,0 +1,145 @@
+import {
+  AudioTrack,
+  ConnectionQualityIndicator,
+  FocusToggle,
+  LockLockedIcon,
+  ParticipantName,
+  ParticipantPlaceholder,
+  ParticipantTileProps,
+  ScreenShareIcon,
+  TrackMutedIndicator,
+  useEnsureTrackRef,
+  useFeatureContext,
+  useIsEncrypted,
+  useMaybeLayoutContext,
+  useMaybeTrackRefContext,
+  useParticipantTile,
+  VideoTrack,
+  TrackRefContext,
+  ParticipantContextIfNeeded,
+} from '@livekit/components-react'
+import React from 'react'
+import {
+  isTrackReference,
+  isTrackReferencePinned,
+  TrackReferenceOrPlaceholder,
+} from '@livekit/components-core'
+import { Track } from 'livekit-client'
+
+export function TrackRefContextIfNeeded(
+  props: React.PropsWithChildren<{
+    trackRef?: TrackReferenceOrPlaceholder
+  }>
+) {
+  const hasContext = !!useMaybeTrackRefContext()
+  return props.trackRef && !hasContext ? (
+    <TrackRefContext.Provider value={props.trackRef}>
+      {props.children}
+    </TrackRefContext.Provider>
+  ) : (
+    <>{props.children}</>
+  )
+}
+
+export const ParticipantTile: (
+  props: ParticipantTileProps & React.RefAttributes<HTMLDivElement>
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
+  HTMLDivElement,
+  ParticipantTileProps
+>(function ParticipantTile(
+  {
+    trackRef,
+    children,
+    onParticipantClick,
+    disableSpeakingIndicator,
+    ...htmlProps
+  }: ParticipantTileProps,
+  ref
+) {
+  const trackReference = useEnsureTrackRef(trackRef)
+
+  const { elementProps } = useParticipantTile<HTMLDivElement>({
+    htmlProps,
+    disableSpeakingIndicator,
+    onParticipantClick,
+    trackRef: trackReference,
+  })
+  const isEncrypted = useIsEncrypted(trackReference.participant)
+  const layoutContext = useMaybeLayoutContext()
+
+  const autoManageSubscription = useFeatureContext()?.autoSubscription
+
+  const handleSubscribe = React.useCallback(
+    (subscribed: boolean) => {
+      if (
+        trackReference.source &&
+        !subscribed &&
+        layoutContext &&
+        layoutContext.pin.dispatch &&
+        isTrackReferencePinned(trackReference, layoutContext.pin.state)
+      ) {
+        layoutContext.pin.dispatch({ msg: 'clear_pin' })
+      }
+    },
+    [trackReference, layoutContext]
+  )
+
+  return (
+    <div ref={ref} style={{ position: 'relative' }} {...elementProps}>
+      <TrackRefContextIfNeeded trackRef={trackReference}>
+        <ParticipantContextIfNeeded participant={trackReference.participant}>
+          {children ?? (
+            <>
+              {isTrackReference(trackReference) &&
+              (trackReference.publication?.kind === 'video' ||
+                trackReference.source === Track.Source.Camera ||
+                trackReference.source === Track.Source.ScreenShare) ? (
+                <VideoTrack
+                  trackRef={trackReference}
+                  onSubscriptionStatusChanged={handleSubscribe}
+                  manageSubscription={autoManageSubscription}
+                />
+              ) : (
+                isTrackReference(trackReference) && (
+                  <AudioTrack
+                    trackRef={trackReference}
+                    onSubscriptionStatusChanged={handleSubscribe}
+                  />
+                )
+              )}
+              <div className="lk-participant-placeholder">
+                <ParticipantPlaceholder />
+              </div>
+              <div className="lk-participant-metadata">
+                <div className="lk-participant-metadata-item">
+                  {trackReference.source === Track.Source.Camera ? (
+                    <>
+                      {isEncrypted && (
+                        <LockLockedIcon style={{ marginRight: '0.25rem' }} />
+                      )}
+                      <TrackMutedIndicator
+                        trackRef={{
+                          participant: trackReference.participant,
+                          source: Track.Source.Microphone,
+                        }}
+                        show={'muted'}
+                      ></TrackMutedIndicator>
+                      <ParticipantName />
+                    </>
+                  ) : (
+                    <>
+                      <ScreenShareIcon style={{ marginRight: '0.25rem' }} />
+                      <ParticipantName>&apos;s screen</ParticipantName>
+                    </>
+                  )}
+                </div>
+                <ConnectionQualityIndicator className="lk-participant-metadata-item" />
+              </div>
+            </>
+          )}
+          <FocusToggle trackRef={trackReference} />
+        </ParticipantContextIfNeeded>
+      </TrackRefContextIfNeeded>
+    </div>
+  )
+})

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -16,11 +16,9 @@ import * as React from 'react'
 import {
   CarouselLayout,
   ConnectionStateToast,
-  FocusLayout,
   FocusLayoutContainer,
   GridLayout,
   LayoutContextProvider,
-  ParticipantTile,
   RoomAudioRenderer,
   MessageFormatter,
   usePinnedTracks,
@@ -35,6 +33,8 @@ import { cva } from '@/styled-system/css'
 import { ParticipantsList } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsList'
 import { useSnapshot } from 'valtio'
 import { participantsStore } from '@/stores/participants'
+import { FocusLayout } from '../components/FocusLayout'
+import { ParticipantTile } from '../components/ParticipantTile'
 
 const LayoutWrapper = styled(
   'div',