48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<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>
|