wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-05-12 18:35:45 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

LOVE: correcting the layout (#8599)

Browse Source 
Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
This commit is contained in:
Alexander Platov 2025-04-17 05:14:17 +03:00 committed by GitHub
parent 1c5b80e391
commit fe23a72d6e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/theme/styles/love.scss
View File

@ -64,6 +64,7 @@
& > div { opacity: .35; } & > div { opacity: .35; }
} }
& > * { pointer-events: none; }
} }
&::before { &::before {

37
plugins/love-resources/src/components/ParticipantView.svelte
View File

@ -38,15 +38,16 @@
easing: elasticInOut easing: elasticInOut
}) })
export function appendChild (track: HTMLMediaElement): void { export function appendChild (track: HTMLMediaElement, enabled: boolean = true): void {
const video = parent.querySelector('.video') const video = parent.querySelector('.video')
if (video != null) { if (video != null) {
video.remove() video.remove()
} }
track.classList.add('video') track.classList.add('video')
if (!enabled) track.classList.add('hidden')
parent.appendChild(track) parent.appendChild(track)
activeTrack = true activeTrack = enabled
} }
export function setTrackMuted (value: boolean): void { export function setTrackMuted (value: boolean): void {
@ -66,7 +67,7 @@
$: speach = $currentRoomAudioLevels.get(_id as Ref<Person>) ?? 0 $: speach = $currentRoomAudioLevels.get(_id as Ref<Person>) ?? 0
let tspeach: number = 0 let tspeach: number = 0
$: if ((speach > 0 && speach > tspeach) || (tspeach > 0 && speach <= 0)) { $: if ((speach > 0 && speach > tspeach) || (tspeach > 0 && speach <= 0)) {
void speakers.set(speach > 0.3 ? 0.3 : speach, { duration: 50, easing: elasticInOut }) void speakers.set(speach > 0.5 ? 0.5 : speach, { duration: 50, easing: elasticInOut })
} }
speakers.subscribe((sp) => { speakers.subscribe((sp) => {
tspeach = sp > 0 ? sp : 0 tspeach = sp > 0 ? sp : 0
@ -75,6 +76,10 @@
</script> </script>
<div id={_id} class="parent" style:--border-opacity={level}> <div id={_id} class="parent" style:--border-opacity={level}>
<div bind:this={parent} class="cover" class:active={activeTrack} class:mirror={mirror && activeTrack} />
<div class="ava">
<Avatar size={'full'} {name} person={user} showStatus={false} />
</div>
<div class="label"> <div class="label">
<span class="overflow-label">{formatName(name)}</span> <span class="overflow-label">{formatName(name)}</span>
</div> </div>
@ -82,11 +87,6 @@
{#if connecting}<Loading size={'small'} shrink />{/if} {#if connecting}<Loading size={'small'} shrink />{/if}
{#if muted}<MicDisabled size={'small'} />{/if} {#if muted}<MicDisabled size={'small'} />{/if}
</div> </div>
<div bind:this={parent} class="cover" class:active={activeTrack} class:mirror={mirror && activeTrack}>
<div class="ava">
<Avatar size={'full'} {name} person={user} showStatus={false} />
</div>
</div>
</div> </div>
<style lang="scss"> <style lang="scss">
@ -104,7 +104,7 @@
border-radius: 0.75rem; border-radius: 0.75rem;
height: 100%; height: 100%;
width: 100%; width: 100%;
aspect-ratio: 1280/720; aspect-ratio: 1280 / 720;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -113,20 +113,23 @@
transform: scaleX(-1); transform: scaleX(-1);
} }
.ava { &.active + .ava {
overflow: hidden;
position: absolute;
height: 50%;
aspect-ratio: 1;
border-radius: 50%;
}
&.active > .ava {
display: none; display: none;
} }
&:not(.active) { &:not(.active) {
background-color: black; background-color: black;
} }
} }
.ava {
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
height: 50%;
aspect-ratio: 1;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.parent { .parent {
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;

2
plugins/love-resources/src/components/VideoPopup.svelte
View File

@ -143,7 +143,7 @@
participants = participants participants = participants
participantElements.length = participants.length participantElements.length = participants.length
await tick() await tick()
participantElements[index]?.appendChild(element) participantElements[index]?.appendChild(element, participant.isCameraEnabled)
} }
function attachParticipant (participant: Participant): void { function attachParticipant (participant: Participant): void {