diff --git a/plugins/love-resources/src/components/ParticipantView.svelte b/plugins/love-resources/src/components/ParticipantView.svelte index 417a254daa..e7f69a4a50 100644 --- a/plugins/love-resources/src/components/ParticipantView.svelte +++ b/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) + + $: speach = $currentRoomAudioLevels.get(_id as Ref) ?? 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 + }) -
+
{formatName(name)}
@@ -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); + } } diff --git a/plugins/love-resources/src/components/VideoPopup.svelte b/plugins/love-resources/src/components/VideoPopup.svelte index b2d9bc479e..ba36c73643 100644 --- a/plugins/love-resources/src/components/VideoPopup.svelte +++ b/plugins/love-resources/src/components/VideoPopup.svelte @@ -373,7 +373,7 @@ (false) export const isMicAllowed = writable(false) export const isCamAllowed = writable(false) +export const currentRoomAudioLevels = writable, 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, 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 { 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 })