#6

client/app/app.vue

@@ -1,13 +1,24 @@
 <template>
-  <h1>yo</h1>
-  <pre>{{ connected }}</pre>
-  <audio v-for="(s, i) in streams" :key="i" :ref="(el) => onAudioRef(el, s)" autoplay controls />
+  <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 { connected, streams } = useMediasoup()
+const { initializing, connected, streams } = useMediasoup()
 
-function onAudioRef(ref: Element, stream: MediaStream) {
-  (ref as HTMLAudioElement).srcObject = stream
+function onAudioRef(ref: HTMLAudioElement, stream: MediaStream) {
+  if (!ref)
+    return
+
+  ref.srcObject = stream
 }
 </script>