server/web/src/components/Avatar.jsx

import React, { forwardRef } from 'react'
import { StatusBar } from './StatusBar'

export const Avatar = forwardRef(function Avatar({
  idleVideoSrc = '/avatar_videos/idle.mp4',
  wsStatus,
  rtcStatus,
  udpStatus,
  showRtcVideo,
  showCanvas
}, ref) {
  const { rtcVideoRef, canvasRef } = ref || {}

  return (
    <div className="avatar-section">
      <video
        className="idle-video"
        autoPlay
        loop
        muted
        playsInline
        preload="auto"
        src={idleVideoSrc}
      />
      <video
        ref={rtcVideoRef}
        className={`stream-video ${showRtcVideo ? 'active' : ''}`}
        autoPlay
        playsInline
      />
      <canvas
        ref={canvasRef}
        className={`stream-canvas ${showCanvas ? 'active' : ''}`}
      />
      <StatusBar
        wsStatus={wsStatus}
        rtcStatus={rtcStatus}
        udpStatus={udpStatus}
      />
    </div>
  )
})