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

client/app/components/ClientRow.vue

@@ -6,23 +6,28 @@
       'bg-surface-800': expanded,
     }"
   >
-    <div class="p-3 flex items-center gap-3" @click="toggleExpand">
-      <PrimeAvatar
-        size="small"
-        :class="{
-          'outline-1 outline-primary outline-offset-2': speaking,
-        }"
-      >
-        <template #icon>
-          <User :size="20" />
-        </template>
-      </PrimeAvatar>
+    <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,
+          }"
+        >
+          <template #icon>
+            <User :size="20" />
+          </template>
+        </PrimeAvatar>
 
-      <div class="flex-1 overflow-hidden text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
-        {{ client.displayName || client.username }}
+        <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"
     >