Audience List Component

import { LiveAudienceList } from 'tuikit-atomicx-react';
import type { AudienceInfo } from 'tuikit-atomicx-react';

// Custom component props, must match LiveAudienceList component children props
interface CustomAudienceProps {
  params: {audience: AudienceInfo} 
}

// User custom component, display user role
const CustomAudience: React.FC<CustomAudienceProps> = ({ params }) => {
  return (
    <div className="custom-audience-item">
      {
        params.audience.userRole === 2 ? "[Audience]" : (params.audience.userRole === 1 ? "[Admin]" : "[Host]")
      }
    </div>
  );
};

const LivePlayer: React.FC<LivePlayerProps> = ({ className }) => {
  return (
    <div className={`${styles.livePlayer} ${className || ''}`}>
          <div className={styles.livePlayer__audienceListContent}>
            {/* Set height, className, style properties */}
            <LiveAudienceList height="100%" className="my-class-name" style={{backgroundColor: "transparent"}}>
              {(params) => <CustomAudience params={params} />} {/* Use custom component in player page audience list to display user role */}
            </LiveAudienceList>
          </div>
    </div>
  );
};