<template>
  <PrimeProgressSpinner v-if="initializing" />

  <template v-for="(s, producerId) in streams" :key="producerId">
    <PrimeChip :label="producerId" />
    <audio
      :ref="(el) => onAudioRef(el as HTMLAudioElement, s)"
      autoplay
      controls
      style="display: none;"
    />
  </template>
</template>

<script lang="ts" setup>
const { initializing, connected, streams } = useMediasoup()

function onAudioRef(ref: HTMLAudioElement, stream: MediaStream) {
  if (!ref)
    return

  ref.srcObject = stream
}
</script>
