front update

client/app/pages/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="grid grid-cols-2 h-screen">
+    <div class="flex flex-col shadow-xl overflow-y-hidden">
+      <div class="flex items-center bg-surface-950 border-b-2 border-surface-800 px-3 py-3">
+        <h1>
+          Шальные сиськи 18+
+        </h1>
+
+        <div class="inline-flex gap-2 ml-auto">
+          <PrimeButton icon="pi pi-headphones" text size="large" />
+          <PrimeButton icon="pi pi-microphone" text size="large" />
+        </div>
+      </div>
+
+      <div v-auto-animate class="p-3 overflow-y-auto flex-1 bg-surface-900 overflow-hidden divide-y divide-surface-800">
+        <ClientRow v-for="client of clients" :key="client.id" :client="client" />
+      </div>
+    </div>
+  </div>
+
+  <audio v-for="[id, producer] in Array.from(producers)" :key="id" :ref="(el) => onAudioRef(el, producer)" />
+
+  <PrimeBadge class="fixed top-3 right-3" severity="success" />
+</template>
+
+<script setup lang="ts">
+import type { Producer } from 'mediasoup-client/types'
+import { vAutoAnimate } from '@formkit/auto-animate'
+
+const { clients } = useGlobalState()
+const { producers } = useMediasoup()
+
+function onAudioRef(ref: HTMLAudioElement, producer: Producer) {
+  if (!ref || !producer.track)
+    return
+
+  console.log(onAudioRef)
+
+  const stream = new MediaStream()
+
+  stream.addTrack(producer.track)
+
+  ref.srcObject = stream
+
+  ref.play()
+}
+</script>