63 lines
1.9 KiB
Vue
63 lines
1.9 KiB
Vue
<template>
|
|
<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 } = useClients()
|
|
const { producers, consumers } = useMediasoup()
|
|
|
|
definePageMeta({
|
|
})
|
|
</script>
|