32 lines
726 B
Svelte
32 lines
726 B
Svelte
|
<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 videoElement = $state<HTMLVideoElement | undefined>()
|
||
|
|
|
||
|
|
$effect(() => {
|
||
|
|
const element = videoElement
|
||
|
|
const activeTrack = track
|
||
|
|
if (!element) return
|
||
|
|
activeTrack.attach(element)
|
||
|
|
return () => {
|
||
|
|
activeTrack.detach(element)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<video
|
||
|
|
bind:this={videoElement}
|
||
|
|
class={cx("h-full w-full", fit === "contain" ? "object-contain" : "object-cover", className)}
|
||
|
|
playsinline
|
||
|
|
{muted}></video>
|