update

client/app/components/Gallery/Card.vue

@@ -16,11 +16,12 @@
 </template>
 
 <script setup lang="ts">
-import type { ChadClient } from '#shared/types'
+import type { ChadClient, Consumer, Producer } from '#shared/types'
 
 const props = defineProps<{
   client: ChadClient
-  stream: MediaStream
+  consumer?: Consumer
+  producer?: Producer
 }>()
 
 const { me } = useClients()
@@ -30,8 +31,21 @@ const isMe = computed(() => {
   return props.client.socketId === me.value?.socketId
 })
 
+const track = computed(() => {
+  return props.consumer?.raw.track ?? props.producer?.raw.track
+})
+
+const stream = computed<MediaStream | undefined>((previousStream) => {
+  if (previousStream?.getTracks()[0] === track.value) {
+    return previousStream
+  }
+
+  return track.value ? new MediaStream([track.value]) : undefined
+})
+
 function watch() {
-  fullscreenVideo.show(props.stream)
+  if (stream.value)
+    fullscreenVideo.show(stream.value)
 }
 </script>