<script lang="ts">
  import type {Track} from "livekit-client"
  import cx from "classnames"

  type Props = {
    track: Track
    muted?: boolean
    fit?: "cover" | "contain"
    class?: string
  }

  const {track, muted = true, fit = "cover", class: className = ""}: Props = $props()

  let el = $state<HTMLVideoElement | undefined>()

  $effect(() => {
    const v = el
    const t = track
    if (!v) return
    t.attach(v)
    return () => {
      t.detach(v)
    }
  })
</script>

<video
  bind:this={el}
  class={cx("h-full w-full", fit === "contain" ? "object-contain" : "object-cover", className)}
  playsinline
  {muted}></video>
