показывать себя в превью

client/app/components/Gallery/Card.vue

@@ -1,19 +1,47 @@
 <template>
-  <div class="cursor-pointer hover:outline outline-primary rounded overflow-hidden flex items-center justify-center">
-    <video :srcObject="mediaStream" muted autoplay />
+  <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 { Consumer } from '#shared/types'
+import type { ChadClient } from '#shared/types'
 
 const props = defineProps<{
-  consumer: Consumer
+  client: ChadClient
+  stream: MediaStream
 }>()
 
-const mediaStream = computed(() => {
-  return new MediaStream([props.consumer.raw.track])
+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>