<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'

const props = defineProps<{ stream: MediaStream | null }>()
const el = ref<HTMLVideoElement | null>(null)

watch(
  () => props.stream,
  async s => {
    await nextTick()
    const v = el.value
    if (!v) return
    v.srcObject = s
    try {
      await v.play()
    } catch {
      /* autoplay policy / transient */
    }
  },
  { immediate: true, flush: 'post' },
)
</script>

<template>
  <!-- muted: remote video autoplay is often blocked without muted -->
  <video ref="el" class="vid" autoplay playsinline muted />
</template>

<style scoped>
.vid {
  width: 100%;
  max-height: 70vh;
  background: #000;
  border-radius: 8px;
}
</style>
