<ParticipantTile>
  <TrackRefContext.Consumer>
    {(trackReference) => {
      return (
        <>
          {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
                    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>
        </>
      );
    }}
  </TrackRefContext.Consumer>
</ParticipantTile>