LOVE: updated ParticipantView layout (#8287)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

plugins/love-resources/src/components/ParticipantView.svelte

@@ -24,7 +24,6 @@
   export let muted: boolean
   export let mirror: boolean
   export let connecting: boolean = false
-  export let small: boolean = false
 
   let parent: HTMLDivElement
   let activeTrack: boolean = false
@@ -55,17 +54,13 @@
   $: user = $personByIdStore.get(_id as Ref<Person>)
 </script>
 
-<div id={_id} class="parent" class:small>
+<div id={_id} class="parent">
   <div class="label">
     <span class="overflow-label">{formatName(name)}</span>
-    {#if connecting}
-      <div class="loading">
-        <Loading size={'small'} />
-      </div>
-    {/if}
-  </div>
-  <div class="icon" class:muted>
-    <Icon size="medium" icon={love.icon.MicDisabled} />
+    <div class="icon" class:shown={muted || connecting}>
+      {#if connecting}<Loading size={'small'} shrink />{/if}
+      {#if muted}<Icon size="small" icon={love.icon.MicDisabled} />{/if}
+    </div>
   </div>
   <div bind:this={parent} class="cover" class:active={activeTrack} class:mirror={mirror && activeTrack}>
     <div class="ava">
@@ -123,41 +118,42 @@
     .label {
       position: absolute;
       display: flex;
+      justify-content: space-between;
       align-items: center;
-      gap: 0.375rem;
-      top: 0.5rem;
-      left: 0.5rem;
-      max-width: calc(100% - 1rem);
-      padding: 0.375rem;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      font-weight: 500;
-      font-size: 0.75rem;
-      color: rgba(35, 37, 45, 0.75);
-      background-color: rgba(255, 255, 255, 0.4);
-      border-radius: 0.375rem;
+      gap: 0.5rem;
+      bottom: 0.375rem;
+      left: 0.375rem;
+      right: 0.375rem;
+      max-width: calc(100% - 0.75rem);
       z-index: 1;
-    }
-    &.small .label {
-      font-size: 0.625rem;
-    }
-  }
 
-  .icon {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    right: 0.5rem;
-    bottom: 0.5rem;
-    width: 2rem;
-    height: 2rem;
-    background-color: #36373d;
-    border-radius: 0.5rem;
-    z-index: 1;
+      span,
+      .icon {
+        height: 1.5rem;
+        background-color: rgba(0, 0, 0, 0.7);
+        border-radius: 0.375rem;
+      }
+      span {
+        padding: 0.25rem 0.5rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 0.875rem;
+        line-height: 1rem;
+        color: #ffffff;
+      }
+      .icon {
+        display: none;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        gap: 0.25rem;
+        padding: 0.25rem;
+        min-width: 1.5rem;
 
-    &:not(.muted) {
-      display: none;
+        &.shown {
+          display: flex;
+        }
+      }
     }
   }
 </style>

plugins/love-resources/src/components/Room.svelte

@@ -417,14 +417,7 @@
         class:scroll-m-0={$screenSharing}
       >
         {#each activeParticipants as participant, i (participant._id)}
-          <ParticipantView
-            bind:this={participantElements[i]}
-            {...participant}
-            small={$screenSharing ||
-              (!$screenSharing &&
-                ((columns > 1 && (roomWidth - 16 * (columns - 1)) / columns < 300) ||
-                  (rows > 1 && (roomHeight - 16 * (rows - 1)) / rows < 168)))}
-          />
+          <ParticipantView bind:this={participantElements[i]} {...participant} />
         {/each}
       </div>
     {/if}

plugins/love-resources/src/components/VideoPopup.svelte

@@ -380,7 +380,7 @@
     <div class="videoGrid">
       {#each activeParticipants as participant, i (participant._id)}
         <div class="video">
-          <ParticipantView bind:this={participantElements[i]} {...participant} small />
+          <ParticipantView bind:this={participantElements[i]} {...participant} />
         </div>
       {/each}
     </div>