<template>
  <div>
    <div class="flex items-center justify-center">
      <PrimeCard>
        <template #content>
          The chat is under development.
        </template>
      </PrimeCard>
    </div>

    <video
      v-if="!!shareConsumer"
      ref="shareVideo"
      class="w-full aspect-video border border-surface-700 rounded mt-6 cursor-pointer"
      autoplay
      playsinline
      @click="toFullscreen"
    />
  </div>
</template>

<script setup lang="ts">
import { unrefElement } from '@vueuse/core'

definePageMeta({
  name: 'Index',
})

const shareVideoRef = useTemplateRef('shareVideo')

const { consumers } = useMediasoup()

const shareConsumer = computed(() => {
  return consumers.value.values().find(consumer => consumer.kind === 'video' && consumer.appData?.source === 'share')
})

watchEffect(() => {
  if (!shareVideoRef.value || !shareConsumer.value)
    return

  const stream = new MediaStream([shareConsumer.value.track])

  unrefElement(shareVideoRef)!.srcObject = stream
})

function toFullscreen() {
  unrefElement(shareVideoRef)?.requestFullscreen()
}
</script>
