Add voice activity ui (#8460)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
Co-authored-by: Alexander Platov <alexander.platov@hardcoreeng.com>

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

@@ -17,8 +17,11 @@
   import { Avatar, personByIdStore } from '@hcengineering/contact-resources'
   import { Ref } from '@hcengineering/core'
   import { Loading } from '@hcengineering/ui'
-  import love from '../plugin'
+
+  import { currentRoomAudioLevels } from '../utils'
   import MicDisabled from './icons/MicDisabled.svelte'
+  import { tweened } from 'svelte/motion'
+  import { elasticInOut } from 'svelte/easing'
 
   export let _id: string
   export let name: string
@@ -29,6 +32,12 @@
   let parent: HTMLDivElement
   let activeTrack: boolean = false
 
+  let level: number = 0
+  const speakers = tweened(0, {
+    duration: 5,
+    easing: elasticInOut
+  })
+
   export function appendChild (track: HTMLMediaElement): void {
     const video = parent.querySelector('.video')
     if (video != null) {
@@ -53,9 +62,19 @@
   }
 
   $: user = $personByIdStore.get(_id as Ref<Person>)
+
+  $: speach = $currentRoomAudioLevels.get(_id as Ref<Person>) ?? 0
+  let tspeach: number = 0
+  $: if ((speach > 0 && speach > tspeach) || (tspeach > 0 && speach <= 0)) {
+    void speakers.set(speach > 0.3 ? 0.3 : speach, { duration: 50, easing: elasticInOut })
+  }
+  speakers.subscribe((sp) => {
+    tspeach = sp > 0 ? sp : 0
+    level = tspeach
+  })
 </script>
 
-<div id={_id} class="parent">
+<div id={_id} class="parent" style:--border-opacity={level}>
   <div class="label">
     <span class="overflow-label">{formatName(name)}</span>
   </div>
@@ -109,12 +128,13 @@
     }
   }
   .parent {
-    overflow: hidden;
     position: relative;
     flex-shrink: 0;
     height: max-content;
     min-height: 0;
     max-height: 100%;
+    background-color: black;
+    border-radius: 0.75rem;
 
     .label,
     .icon {
@@ -127,7 +147,6 @@
       color: rgba(0, 0, 0, 0.75);
       background-color: rgba(255, 255, 255, 0.5);
       backdrop-filter: blur(3px);
-      z-index: 1;
     }
     .label {
       overflow: hidden;
@@ -151,5 +170,25 @@
         display: flex;
       }
     }
+    &::after,
+    &::before {
+      position: absolute;
+      content: '';
+      background-color: var(--theme-caption-color);
+      opacity: var(--border-opacity, 0);
+      z-index: -1;
+    }
+    &::after {
+      inset: -0.125rem;
+      width: calc(100% + 0.25rem);
+      height: calc(100% + 0.25rem);
+      border-radius: calc(0.75rem + 0.125rem);
+    }
+    &::before {
+      inset: -0.25rem;
+      width: calc(100% + 0.5rem);
+      height: calc(100% + 0.5rem);
+      border-radius: calc(0.75rem + 0.25rem);
+    }
   }
 </style>

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

@@ -373,7 +373,7 @@
   <Scroller
     bind:divScroll
     noStretch
-    padding={'0 .5rem'}
+    padding={'.25rem .5rem 0'}
     containerName={'videoPopupСontainer'}
     onResize={dispatchFit}
     stickedScrollBars

plugins/love-resources/src/utils.ts

@@ -84,7 +84,8 @@ import {
   RoomEvent,
   type ScreenShareCaptureOptions,
   Track,
-  type VideoCaptureOptions
+  type VideoCaptureOptions,
+  type Participant
 } from 'livekit-client'
 import { get, writable } from 'svelte/store'
 
@@ -188,6 +189,8 @@ export const isShareWithSound = writable<boolean>(false)
 export const isMicAllowed = writable<boolean>(false)
 export const isCamAllowed = writable<boolean>(false)
 
+export const currentRoomAudioLevels = writable<Map<Ref<Person>, number>>(new Map())
+
 function handleTrackSubscribed (
   track: RemoteTrack,
   publication: RemoteTrackPublication,
@@ -398,8 +401,13 @@ lk.on(RoomEvent.RoomMetadataChanged, (metadata) => {
   }
 })
 
+lk.on(RoomEvent.ActiveSpeakersChanged, (speakers: Participant[]) => {
+  currentRoomAudioLevels.set(new Map(speakers.map((it) => [it.identity as Ref<Person>, it.audioLevel])))
+})
+
 lk.on(RoomEvent.Connected, () => {
   isConnected.set(true)
+  currentRoomAudioLevels.set(new Map())
   sendMessage({ type: 'connect', value: true })
   isCurrentInstanceConnected.set(true)
   isRecording.set(lk.isRecording)
@@ -494,6 +502,7 @@ export async function disconnect (): Promise<void> {
   isMicEnabled.set(false)
   isCameraEnabled.set(false)
   isSharingEnabled.set(false)
+  currentRoomAudioLevels.set(new Map())
   sendMessage({ type: 'mic', value: false })
   sendMessage({ type: 'cam', value: false })
   sendMessage({ type: 'share', value: false })