From 1354ca3f7eec8aa7f11dc71adf81e884c2cea73d Mon Sep 17 00:00:00 2001
From: opti1337 <nikita.kruglickiy@gmail.com>
Date: Tue, 3 Feb 2026 16:47:33 +0600
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=BE=D0=BA=D0=B0=D0=B7=D1=8B=D0=B2?=
 =?UTF-8?q?=D0=B0=D1=82=D1=8C=20=D1=81=D0=B5=D0=B1=D1=8F=20=D0=B2=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B5=D0=B2=D1=8C=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/app/components.d.ts              |  1 +
 client/app/components/ClientRow.vue     |  2 +-
 client/app/components/Gallery/Card.vue  | 40 +++++++++++---
 client/app/composables/use-client.ts    |  8 +--
 client/app/composables/use-mediasoup.ts |  9 ++--
 client/app/pages/gallery.vue            | 69 +++++++++++++++++--------
 client/src-tauri/tauri.conf.json        |  2 +-
 7 files changed, 95 insertions(+), 36 deletions(-)

diff --git a/client/app/components.d.ts b/client/app/components.d.ts
index 88eb6f6..7300bc5 100644
--- a/client/app/components.d.ts
+++ b/client/app/components.d.ts
@@ -22,6 +22,7 @@ declare module 'vue' {
     PrimeSelect: typeof import('primevue/select')['default']
     PrimeSelectButton: typeof import('primevue/selectbutton')['default']
     PrimeSlider: typeof import('primevue/slider')['default']
+    PrimeTag: typeof import('primevue/tag')['default']
     PrimeToast: typeof import('primevue/toast')['default']
     PrimeToggleSwitch: typeof import('primevue/toggleswitch')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/client/app/components/ClientRow.vue b/client/app/components/ClientRow.vue
index 13debd1..5588d75 100644
--- a/client/app/components/ClientRow.vue
+++ b/client/app/components/ClientRow.vue
@@ -111,7 +111,7 @@ const inputMuted = computed(() => {
 })
 
 const hasBadges = computed(() => {
-  return shareConsumers.value.length > 0
+  return streaming.value
     || premuted.value
     || inputMuted.value
     || props.client.outputMuted
diff --git a/client/app/components/Gallery/Card.vue b/client/app/components/Gallery/Card.vue
index 871a491..a9e6a4a 100644
--- a/client/app/components/Gallery/Card.vue
+++ b/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>
diff --git a/client/app/composables/use-client.ts b/client/app/composables/use-client.ts
index 1e5c90d..fa4cc1f 100644
--- a/client/app/composables/use-client.ts
+++ b/client/app/composables/use-client.ts
@@ -14,10 +14,6 @@ export function useClient(socketId: MaybeRef<ChadClient['socketId']>) {
     return Object.values(mediasoup.consumers.value).filter(consumer => consumer.appData.socketId === client.value.socketId)
   })
 
-  const producers = computed(() => {
-    return mediasoup.producers.value.values().filter(producer => producer.appData.socketId === client.value.socketId).toArray()
-  })
-
   const audioConsumers = computed(() => {
     return mediasoup.audioConsumers.value.filter(consumer => consumer.appData.socketId === client.value.socketId)
   })
@@ -30,6 +26,10 @@ export function useClient(socketId: MaybeRef<ChadClient['socketId']>) {
     return mediasoup.shareConsumers.value.filter(consumer => consumer.appData.socketId === client.value.socketId)
   })
 
+  const producers = computed(() => {
+    return Object.values(mediasoup.producers.value).filter(producer => producer.appData.socketId === client.value.socketId)
+  })
+
   const streaming = computed(() => {
     return videoConsumers.value.length > 0 || shareConsumers.value.length > 0
   })
diff --git a/client/app/composables/use-mediasoup.ts b/client/app/composables/use-mediasoup.ts
index 4754def..31e3802 100644
--- a/client/app/composables/use-mediasoup.ts
+++ b/client/app/composables/use-mediasoup.ts
@@ -384,6 +384,9 @@ export const useMediasoup = createSharedComposable(() => {
     const stream = await navigator.mediaDevices.getUserMedia({
       video: {
         deviceId: { exact: preferences.videoDeviceId.value },
+        width: { ideal: 1920 },
+        height: { ideal: 1080 },
+        frameRate: { ideal: 60 },
       },
     })
 
@@ -395,9 +398,9 @@ export const useMediasoup = createSharedComposable(() => {
     await createProducer({
       track,
       streamId: 'mic-video',
-      codec: device.value.rtpCapabilities.codecs?.find(
-        c => c.mimeType.toLowerCase() === 'video/AV1',
-      ),
+      // codec: device.value.rtpCapabilities.codecs?.find(
+      //   c => c.mimeType.toLowerCase() === 'video/AV1',
+      // ),
       // codecOptions: {
       //   videoGoogleStartBitrate: 1000,
       // },
diff --git a/client/app/pages/gallery.vue b/client/app/pages/gallery.vue
index 5250baa..1a08184 100644
--- a/client/app/pages/gallery.vue
+++ b/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>
diff --git a/client/src-tauri/tauri.conf.json b/client/src-tauri/tauri.conf.json
index 4d9725f..d5916a9 100644
--- a/client/src-tauri/tauri.conf.json
+++ b/client/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "chad",
-  "version": "0.2.23",
+  "version": "0.2.24",
   "identifier": "xyz.koptilnya.chad",
   "build": {
     "frontendDist": "../.output/public",