resize

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']

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

client/app/components/Gallery/Card.vue

@@ -1,19 +1,38 @@
 <template>
-  <div class="cursor-pointer hover:outline outline-primary rounded overflow-hidden flex items-center justify-center">
+  <div
-    <video :srcObject="mediaStream" muted autoplay />
+    class="group cursor-pointer hover:outline outline-primary relative rounded overflow-hidden flex items-center justify-center"
+    @click="watch"
+  >
+    <video :srcObject="stream" muted autoplay />
+
+    <PrimeTag
+      severity="secondary"
+      class="absolute bottom-2 text-sm opacity-70 group-hover:opacity-100"
+      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(() => {
+const { me } = useClients()
-  return new MediaStream([props.consumer.raw.track])
+const fullscreenVideo = useFullscreenVideo()
+
+const isMe = computed(() => {
+  return props.client.socketId === me.value?.socketId
 })
+
+function watch() {
+  fullscreenVideo.show(props.stream)
+}
 </script>
 
 <style>

client/app/composables/use-app.ts

@@ -40,7 +40,10 @@ export const useApp = createGlobalState(() => {
   })
 
   const somebodyStreamingVideo = computed(() => {
-    return mediasoup.videoConsumers.value.length > 0 || mediasoup.shareConsumers.value.length > 0
+    return !!mediasoup.videoProducer.value
+      || !!mediasoup.shareProducer.value
+      || mediasoup.videoConsumers.value.length > 0
+      || mediasoup.shareConsumers.value.length > 0
   })
 
   async function muteInput() {

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
   })

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(
+      // codec: device.value.rtpCapabilities.codecs?.find(
-        c => c.mimeType.toLowerCase() === 'video/AV1',
+      //   c => c.mimeType.toLowerCase() === 'video/AV1',
-      ),
+      // ),
       // codecOptions: {
       //   videoGoogleStartBitrate: 1000,
       // },

client/app/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-[1fr_1.25fr] gap-2 p-2 h-screen grid-rows-[auto_1fr] max-w-full">
+  <div class="grid grid-cols-[360px_1fr] gap-2 p-2 h-screen grid-rows-[auto_1fr] max-w-full">
     <div
       class="flex items-center justify-between gap-2 rounded-xl p-3 bg-surface-950"
     >

client/app/pages/gallery.vue

@@ -1,38 +1,64 @@
 <template>
   <div class="grid grid-cols-[1fr_1fr] gap-2">
-    <template v-for="(group, id) in groupedConsumers" :key="id">
+    <GalleryCard
-      <GalleryCard
+      v-for="item in gallery"
-        v-for="consumer in group"
+      :key="item.client.socketId"
-        :key="consumer.id"
+      :client="item.client"
-        :consumer="consumer"
+      :stream="item.stream"
-        @click="watch(consumer)"
+    />
-      />
-    </template>
   </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 { videoProducer, shareProducer } = useMediasoup()
-const fullscreenVideo = useFullscreenVideo()
+const { clients, me } = useClients()
 
-const groupedConsumers = computed<Partial<Record<string, Consumer[]>>>(() => {
+const gallery = computed(() => {
-  if (fullscreenVideo.visible.value)
+  return clients.value.reduce<GalleryItem[]>(
-    return {}
+    (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) => {
+      for (const consumer of [...videoConsumers.value, ...shareConsumers.value]) {
-    return consumer.appData.socketId!
+        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) {
+watch(gallery, (gallery) => {
-  fullscreenVideo.show(new MediaStream([consumer.raw.track]))
+  if (gallery.length > 0)
-}
+    return
+
+  navigateTo({ name: 'Index' })
+})
 </script>

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.26",
   "identifier": "xyz.koptilnya.chad",
   "build": {
     "frontendDist": "../.output/public",
@@ -12,12 +12,12 @@
   "app": {
     "windows": [
       {
-        "maximizable": false,
+        "maximizable": true,
         "label": "main",
         "title": "Chad",
         "width": 800,
         "height": 600,
-        "resizable": false,
+        "resizable": true,
         "fullscreen": false,
         "center": true,
         "theme": "Dark",