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>

client/app/pages/login.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="w-full h-full flex justify-center items-center">
+    <PrimeCard class="w-2/5">
+      <template #content>
+        <form class="flex flex-col gap-3" @submit.prevent="submit">
+          <PrimeInputText v-model="username" type="text" placeholder="Username" />
+
+          <PrimeButton size="large" icon="pi pi-arrow-right" icon-pos="right" label="Let's go" :disabled="!username" type="submit" />
+        </form>
+      </template>
+    </PrimeCard>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  name: 'Login',
+  layout: 'login',
+})
+
+const { username } = useGlobalState()
+const { init } = useMediasoup()
+
+async function submit() {
+  if (!username.value)
+    return
+
+  await navigateTo('/')
+}
+</script>