Page MenuHomePhorge
Differential D3551 Diff 10190 src/resources/vue/Meet/RoomStats.vue

Changeset View

Standalone View

View Options

src/resources/vue/Meet/RoomStats.vue

<template> <template>
<div id="room-stats-dialog" class="modal" tabindex="-1" role="dialog"> <modal-dialog id="room-stats-dialog" ref="dialog" title="Statistics">
<div class="modal-dialog" role="document"> <p>
<div class="modal-content" style="max-height: 90vh">
<div class="modal-header">
<h5 class="modal-title">Statistics</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
</div>
<div class="modal-body overflow-auto">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span class="fw-bold">Room Id:</span> <span class="fw-bold">Room Id:</span>
<pre class="text-muted m-0">{{ room }}</pre> <pre class="text-muted m-0">{{ room }}</pre>
</li> </p>
<li class="list-group-item"> <p>
<span class="fw-bold">Mediaserver Room Id:</span> <span class="fw-bold">Mediaserver Room Id:</span>
<pre class="text-muted m-0">{{ stats.roomId }}</pre> <pre class="text-muted m-0">{{ stats.roomId }}</pre>
</li> </p>
<li class="list-group-item"> <p>
<span class="fw-bold">Send Transport state:</span> <span class="fw-bold">Sender Transport:</span>
<pre class="text-muted m-0">{{ stats.sendTransportState }}</pre> <pre class="text-muted m-0">{{ stats.sendTransportState }}</pre>
<pre class="text-muted m-0">{{ toText(stats.sendTransportStats) }}</pre> <pre class="text-muted m-0">{{ toText(stats.sendTransportStats) }}</pre>
</li> </p>
<li class="list-group-item"> <p>
<span class="fw-bold">Receive Transport state:</span> <span class="fw-bold">Receiver Transport:</span>
<pre class="text-muted m-0">{{ stats.receiveTransportState }}</pre> <pre class="text-muted m-0">{{ stats.receiveTransportState }}</pre>
<pre class="text-muted m-0">{{ toText(stats.receiveTransportStats) }}</pre> <pre class="text-muted m-0">{{ toText(stats.receiveTransportStats) }}</pre>
</li> </p>
<li class="list-group-item"> <p>
<span class="fw-bold">Consumers:</span> <span class="fw-bold">Consumers:</span>
<pre class="text-muted m-0">{{ toText(stats.consumerStats) }}</pre> <pre class="text-muted m-0">{{ toText(stats.consumerStats) }}</pre>
</li> </p>
<li class="list-group-item"> <p>
<span class="fw-bold">Camera Producer:</span> <span class="fw-bold">Camera Producer:</span>
<pre class="text-muted m-0">{{ toText(stats.camProducerStats) }}</pre> <pre class="text-muted m-0">{{ toText(stats.camProducerStats) }}</pre>
</li> </p>
<li class="list-group-item"> <p>
<span class="fw-bold">Mic Producer:</span> <span class="fw-bold">Mic Producer:</span>
<pre class="text-muted m-0">{{ toText(stats.micProducerStats) }}</pre> <pre class="text-muted m-0">{{ toText(stats.micProducerStats) }}</pre>
</li> </p>
<li class="list-group-item"> <p>
<span class="fw-bold">Screen Producer:</span> <span class="fw-bold">Screen Producer:</span>
<pre class="text-muted m-0">{{ toText(stats.screenProducerStats) }}</pre> <pre class="text-muted m-0">{{ toText(stats.screenProducerStats) }}</pre>
</li> </p>
</ul> </modal-dialog>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
import ModalDialog from '../Widgets/ModalDialog'
export default { export default {
components: {
ModalDialog
},
props: { props: {
stats: { type: Object, default: () => null },
room: { type: String, default: () => null } room: { type: String, default: () => null }
}, },
data() {
return {
stats: {}
}
},
mounted() {
this.$refs.dialog.events({
show: () => {
clearInterval(this.statsRequest)
this.refreshStats()
this.statsRequest = setInterval(() => { this.refreshStats() }, 3000)
},
hide: () => {
clearInterval(this.statsRequest)
}
})
},
methods: { methods: {
async refreshStats() {
let stats = await this.meet.getStats()
this.stats = stats
},
toggle(meet) {
this.meet = meet
this.$refs.dialog[this.statsRequest ? 'hide' : 'show']()
},
toText(o) { toText(o) {
return JSON.stringify(o, null, ' ') return JSON.stringify(o, null, ' ')
} }
} }
} }
</script> </script>