50 lines
947 B
Vue
50 lines
947 B
Vue
<template>
|
|
<div
|
|
class="relative rounded overflow-hidden flex items-center justify-center"
|
|
:class="{
|
|
'group cursor-pointer hover:outline outline-primary': !isMe,
|
|
}"
|
|
@click="watch"
|
|
>
|
|
<video :srcObject="stream" muted autoplay />
|
|
|
|
<PrimeTag
|
|
severity="secondary"
|
|
class="absolute bottom-2 text-sm opacity-70"
|
|
:class="{
|
|
'group-hover:opacity-100': !isMe,
|
|
}"
|
|
rounded
|
|
>
|
|
{{ isMe ? 'You' : client.username }}
|
|
</PrimeTag>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ChadClient } from '#shared/types'
|
|
|
|
const props = defineProps<{
|
|
client: ChadClient
|
|
stream: MediaStream
|
|
}>()
|
|
|
|
const { me } = useClients()
|
|
const fullscreenVideo = useFullscreenVideo()
|
|
|
|
const isMe = computed(() => {
|
|
return props.client.socketId === me.value?.socketId
|
|
})
|
|
|
|
function watch() {
|
|
if (isMe.value)
|
|
return
|
|
|
|
fullscreenVideo.show(props.stream)
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|