update

client/app/pages/gallery.vue

@@ -1,21 +1,23 @@
 <template>
   <div class="grid grid-cols-[1fr_1fr] gap-2">
     <GalleryCard
-      v-for="item in gallery"
-      :key="item.client.socketId"
-      :client="item.client"
-      :stream="item.stream"
+      v-for="producer in producers"
+      :key="`producer-${producer.id}`"
+      :client="me!"
+      :producer="producer"
+    />
+
+    <GalleryCard
+      v-for="consumer in consumers"
+      :key="`consumer-${consumer.consumer.id}`"
+      :client="consumer.client"
+      :consumer="consumer.consumer"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { ChadClient } from '#shared/types'
-
-interface GalleryItem {
-  client: ChadClient
-  stream: MediaStream
-}
+import type { ChadClient, Consumer, Producer } from '#shared/types'
 
 definePageMeta({
   name: 'Gallery',
@@ -24,39 +26,29 @@ definePageMeta({
 const { videoProducer, shareProducer } = useMediasoup()
 const { clients, me } = useClients()
 
-const gallery = computed(() => {
-  return clients.value.reduce<GalleryItem[]>(
-    (acc, client) => {
-      const { streaming, videoConsumers, shareConsumers } = useClient(client.socketId)
-
-      if (!streaming.value)
-        return acc
-
-      for (const consumer of [...videoConsumers.value, ...shareConsumers.value]) {
-        acc.push({
-          client,
-          stream: new MediaStream([consumer.raw.track]),
-        })
-      }
-
-      return acc
-    },
-    [videoProducer.value, shareProducer.value].reduce<GalleryItem[]>((acc, producer) => {
-      if (!me.value || !producer || !producer.raw.track)
-        return acc
-
-      acc.push({
-        client: me.value,
-        stream: new MediaStream([producer.raw.track]),
-      })
-
-      return acc
-    }, []),
-  )
+const producers = computed(() => {
+  return [videoProducer.value, shareProducer.value].filter(p => !!p && !!p.raw.track) as Producer[]
 })
 
-watch(gallery, (gallery) => {
-  if (gallery.length > 0)
+const consumers = computed(() => {
+  return clients.value.reduce<{ client: ChadClient, consumer: Consumer }[]>((acc, client) => {
+    const { streaming, videoConsumers: clientVideoConsumers, shareConsumers: clientShareConsumers } = useClient(client.socketId)
+
+    if (!streaming.value)
+      return acc
+
+    for (const consumer of [...clientVideoConsumers.value, ...clientShareConsumers.value]) {
+      acc.push({ client, consumer })
+    }
+
+    return acc
+  }, [])
+})
+
+const hasItems = computed(() => producers.value.length > 0 || consumers.value.length > 0)
+
+watch(hasItems, (hasItems) => {
+  if (hasItems)
     return
 
   navigateTo({ name: 'Index' })