#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>

client/app/assets/styles/main.scss

@@ -0,0 +1,5 @@
+html,
+body {
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+}

client/app/components.d.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    PrimeButton: typeof import('primevue/button')['default']
+    PrimeChip: typeof import('primevue/chip')['default']
+    PrimeProgressSpinner: typeof import('primevue/progressspinner')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

client/app/composables/use-mediasoup.ts

@@ -184,6 +184,7 @@ export const useMediasoup = createGlobalState(() => {
   })()
 
   return {
+    initializing,
     connected,
     streams,
   }