новый-старый clientrow

client/app/components/ClientRow.vue

@@ -6,9 +6,11 @@
       'bg-surface-800': expanded,
     }"
   >
-    <div class="p-3 flex items-center gap-3" @click="toggleExpand">
+    <div class="p-3" @click="toggleExpand">
+      <div class="flex items-center gap-3">
         <PrimeAvatar
           size="small"
+          class="shrink-0"
           :class="{
             'outline-1 outline-primary outline-offset-2': speaking,
           }"
@@ -18,11 +20,14 @@
           </template>
         </PrimeAvatar>
 
-      <div class="flex-1 overflow-hidden text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
+        <p class="flex-1 text-sm leading-5 font-medium text-color truncate w-0">
           {{ client.displayName || client.username }}
+        </p>
+
+        <Component :is="expanded ? ChevronUp : ChevronDown" v-if="!isMe" :size="20" class="text-muted-color" />
       </div>
 
-      <div class="flex align-center gap-1">
+      <div v-if="hasBadges" class="flex justify-end align-center gap-1 mt-2">
         <PrimeBadge v-if="!!shareConsumer" v-tooltip.top="'Watch'" severity="success" value="Streaming" size="small" @click.stop="watchStream" />
 
         <PrimeBadge v-if="premuted" severity="danger" value="Muted" size="small" />
@@ -31,8 +36,6 @@
 
         <PrimeBadge v-if="isMe" severity="secondary" value="You" size="small" class="shrink-0" />
       </div>
-
-      <Component :is="expanded ? ChevronUp : ChevronDown" v-if="!isMe" :size="20" class="text-muted-color" />
     </div>
 
     <CollapseTransition v-if="!isMe">
@@ -112,6 +115,14 @@ const inputMuted = computed(() => {
   return premuted.value || audioConsumerPaused.value
 })
 
+const hasBadges = computed(() => {
+  return !!shareConsumer.value
+    || premuted.value
+    || inputMuted.value
+    || props.client.outputMuted
+    || isMe.value
+})
+
 watch(allConsumers, () => {
   audioConsumerPaused.value = audioConsumer.value?.paused ?? false
 })

client/app/composables/use-mediasoup.ts

@@ -335,7 +335,7 @@ export const useMediasoup = createSharedComposable(() => {
     await enableProducer('share', {
       track,
       codec: device.value.rtpCapabilities.codecs?.find(
-        c => c.mimeType.toLowerCase() === 'video/h264',
+        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]">
+  <div class="grid grid-cols-[1fr_1.25fr] 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/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "chad",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "identifier": "xyz.koptilnya.chad",
   "build": {
     "frontendDist": "../.output/public",