test publish

client/app/pages/index.vue

@@ -1,11 +1,62 @@
 <template>
-  <div class="flex items-center justify-center p-3">
-    <PrimeFieldset legend="Important information">
-      The chat is under development.
-    </PrimeFieldset>
+  <div class="flex flex-col gap-3 p-3 pt-12">
+    <PrimePanel header="Clients" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
+      <dl v-for="client in clients" :key="client.socketId" class="">
+        <div v-for="(value, key) in client" :key="key" class="py-2">
+          <dt class="font-bold">
+            {{ key }}
+          </dt>
+          <dd class="pl-8">
+            {{ value }}
+          </dd>
+        </div>
+      </dl>
+    </PrimePanel>
+
+    <PrimePanel header="Producers" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
+      <dl v-for="[_, producer] in Array.from(producers)" :key="producer.id" class="">
+        <div v-for="key in ['id', 'paused']" :key="key" class="py-2">
+          <dt class="font-bold">
+            {{ key }}
+          </dt>
+          <dd class="pl-8">
+            {{ producer[key] }}
+          </dd>
+        </div>
+      </dl>
+    </PrimePanel>
+
+    <PrimePanel header="Consumers" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
+      <dl v-for="[_, consumer] in Array.from(consumers)" :key="consumer.id" class="">
+        <div v-for="key in ['id', 'paused']" :key="key" class="py-2">
+          <dt class="font-bold">
+            {{ key }}
+          </dt>
+          <dd class="pl-8">
+            {{ consumer[key] }}
+          </dd>
+        </div>
+      </dl>
+    </PrimePanel>
   </div>
+
+<!--  <div class="flex items-center justify-center p-3"> -->
+<!--    <PrimeCard> -->
+<!--      <template #subtitle> -->
+<!--        Important information -->
+<!--      </template> -->
+
+<!--      <template #content> -->
+<!--        The chat is under development. -->
+<!--      </template> -->
+<!--    </PrimeCard> -->
+<!--  </div> -->
 </template>
 
 <script setup lang="ts">
-const { clients, inputMuted, toggleInput, outputMuted, toggleOutput } = useApp()
+const { clients } = useClients()
+const { producers, consumers } = useMediasoup()
+
+definePageMeta({
+})
 </script>