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

client/app/pages/gallery.vue

@@ -1,38 +1,65 @@
 <template>
   <div class="grid grid-cols-[1fr_1fr] gap-2">
-    <template v-for="(group, id) in groupedConsumers" :key="id">
-      <GalleryCard
-        v-for="consumer in group"
-        :key="consumer.id"
-        :consumer="consumer"
-        @click="watch(consumer)"
-      />
-    </template>
+    <GalleryCard
+      v-for="item in gallery"
+      :key="item.client.socketId"
+      :client="item.client"
+      :stream="item.stream"
+      @click="watch(item.stream)"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { Consumer } from '#shared/types'
+import type { ChadClient } from '#shared/types'
+
+interface GalleryItem {
+  client: ChadClient
+  stream: MediaStream
+}
 
 definePageMeta({
   name: 'Gallery',
 })
 
-const { videoConsumers, shareConsumers } = useMediasoup()
-const fullscreenVideo = useFullscreenVideo()
+const { videoProducer, shareProducer } = useMediasoup()
+const { clients, me } = useClients()
 
-const groupedConsumers = computed<Partial<Record<string, Consumer[]>>>(() => {
-  if (fullscreenVideo.visible.value)
-    return {}
+const gallery = computed(() => {
+  return clients.value.reduce<GalleryItem[]>(
+    (acc, client) => {
+      const { streaming, videoConsumers, shareConsumers } = useClient(client.socketId)
 
-  const consumers = [...videoConsumers.value, ...shareConsumers.value]
+      if (!streaming.value)
+        return acc
 
-  return Object.groupBy(consumers, (consumer) => {
-    return consumer.appData.socketId!
-  })
+      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
+    }, []),
+  )
 })
 
-function watch(consumer: Consumer) {
-  fullscreenVideo.show(new MediaStream([consumer.raw.track]))
-}
+watch(gallery, (gallery) => {
+  if (gallery.length > 0)
+    return
+
+  navigateTo({ name: 'Index' })
+})
 </script>