mirror of
https://github.com/hcengineering/platform.git
synced 2026-09-29 13:05:08 +02:00
LOVE: updated ParticipantView (#8811)
This commit is contained in:
Alexander Platov
@@ -37,6 +37,8 @@
|
||||
--tag-accent-SunshineBackground: #FFBD2E;
|
||||
|
||||
--border-color-global-error-border-color: #fb6863;
|
||||
|
||||
--border-talk-indication-primary: #4683EA;
|
||||
}
|
||||
|
||||
/* Dark Theme */
|
||||
@@ -89,6 +91,8 @@
|
||||
|
||||
--icon-disabled-IconColor: #394358;
|
||||
|
||||
--border-talk-indication-secondary: #25262A;
|
||||
|
||||
/** Buttons **/
|
||||
--button-subtle-LabelColor: #fff;
|
||||
--button-subtle-IconColor: #fff;
|
||||
@@ -182,6 +186,8 @@
|
||||
|
||||
--icon-disabled-IconColor: #B3BCCC;
|
||||
|
||||
--border-talk-indication-secondary: #F1F1F1;
|
||||
|
||||
/** Buttons **/
|
||||
--button-subtle-LabelColor: #000;
|
||||
--button-subtle-IconColor: #000;
|
||||
|
||||
@@ -20,8 +20,6 @@
|
||||
|
||||
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
|
||||
@@ -32,12 +30,6 @@
|
||||
let parent: HTMLDivElement
|
||||
let activeTrack: boolean = false
|
||||
|
||||
let level: number = 0
|
||||
const speakers = tweened(0, {
|
||||
duration: 5,
|
||||
easing: elasticInOut
|
||||
})
|
||||
|
||||
export function appendChild (track: HTMLMediaElement, enabled: boolean = true): void {
|
||||
const video = parent.querySelector('.video')
|
||||
if (video != null) {
|
||||
@@ -65,27 +57,17 @@
|
||||
$: 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.5 ? 0.5 : speach, { duration: 50, easing: elasticInOut })
|
||||
}
|
||||
speakers.subscribe((sp) => {
|
||||
tspeach = sp > 0 ? sp : 0
|
||||
level = tspeach
|
||||
})
|
||||
</script>
|
||||
|
||||
<div id={_id} class="parent" style:--border-opacity={level}>
|
||||
<div id={_id} class="parent" class:speach={speach > 0}>
|
||||
<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">
|
||||
<span class="overflow-label">{formatName(name)}</span>
|
||||
</div>
|
||||
<div class="icon" class:shown={muted || connecting}>
|
||||
<div class="label" class:withIcon={muted || connecting}>
|
||||
{#if connecting}<Loading size={'small'} shrink />{/if}
|
||||
{#if muted}<MicDisabled size={'small'} />{/if}
|
||||
{#if muted}<MicDisabled fill={'var(--bg-negative-default)'} size={'small'} />{/if}
|
||||
<span class="overflow-label">{formatName(name)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -139,59 +121,43 @@
|
||||
background-color: black;
|
||||
border-radius: 0.75rem;
|
||||
|
||||
.label,
|
||||
.icon {
|
||||
.label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
height: 1.5rem;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.label {
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 0.25rem;
|
||||
left: 0.25rem;
|
||||
max-width: 12rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
border-radius: 0.75rem 0 0.5rem 0;
|
||||
}
|
||||
.icon {
|
||||
display: none;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
flex-shrink: 0;
|
||||
gap: 0.25rem;
|
||||
border-radius: 0.5rem 0 0.75rem 0;
|
||||
color: var(--white-color);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 0.5rem;
|
||||
backdrop-filter: blur(3px);
|
||||
|
||||
&.shown {
|
||||
display: flex;
|
||||
&.withIcon {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
&.speach::before,
|
||||
&.speach::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: var(--theme-caption-color);
|
||||
opacity: var(--border-opacity, 0);
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
border-radius: 0.75rem;
|
||||
z-index: 1;
|
||||
}
|
||||
&::after {
|
||||
inset: -0.125rem;
|
||||
width: calc(100% + 0.25rem);
|
||||
height: calc(100% + 0.25rem);
|
||||
border-radius: calc(0.75rem + 0.125rem);
|
||||
&.speach::before {
|
||||
border: 3px solid var(--border-talk-indication-secondary);
|
||||
}
|
||||
&::before {
|
||||
inset: -0.25rem;
|
||||
width: calc(100% + 0.5rem);
|
||||
height: calc(100% + 0.5rem);
|
||||
border-radius: calc(0.75rem + 0.25rem);
|
||||
&.speach::after {
|
||||
border: 2px solid var(--border-talk-indication-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,29 +16,14 @@
|
||||
import type { IconSize } from '@hcengineering/ui'
|
||||
|
||||
export let size: IconSize = 'small'
|
||||
const fill: string = 'currentColor'
|
||||
export let fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M8.1,0.9c-0.7,0-1.3,0.2-1.8,0.7C5.8,2,5.5,2.8,5.5,3.3l1,1V3.5c0-0.4,0.2-0.8,0.4-1.1S7.6,2,8,2c0.4,0,0.8,0.2,1.1,0.4c0.2,0.3,0.4,0.7,0.4,1.1v4h1v-4c0-0.7-0.2-1.3-0.7-1.8C9.4,1.2,8.7,0.9,8.1,0.9z"
|
||||
d="M10 1.04169C8.27407 1.04169 6.875 2.44081 6.875 4.16669V4.58335C6.875 4.92853 7.15482 5.20835 7.5 5.20835C7.84518 5.20835 8.125 4.92853 8.125 4.58335V4.16669C8.125 3.13115 8.96443 2.29169 10 2.29169C11.0356 2.29169 11.875 3.13115 11.875 4.16669V8.75002C11.875 9.0952 12.1548 9.37502 12.5 9.37502C12.8452 9.37502 13.125 9.0952 13.125 8.75002V4.16669C13.125 2.44081 11.7259 1.04169 10 1.04169Z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.5,7.1v1.5c0,0.3,0,0.5-0.1,0.8l0.8,0.8c0.2-0.5,0.3-1,0.3-1.6V7.1H11.5z"
|
||||
d="M6.88227 7.76617L2.05806 2.94196C1.81398 2.69788 1.81398 2.30216 2.05806 2.05808C2.30214 1.814 2.69786 1.814 2.94194 2.05808L13.708 12.8242C14.6357 11.8837 15.2083 10.5921 15.2083 9.16669V8.33335C15.2083 7.98818 15.4882 7.70835 15.8333 7.70835C16.1785 7.70835 16.4583 7.98818 16.4583 8.33335V9.16669C16.4583 10.9373 15.7458 12.5414 14.5919 13.7081L17.9419 17.0581C18.186 17.3022 18.186 17.6979 17.9419 17.942C17.6979 18.186 17.3021 18.186 17.0581 17.942L13.6271 14.511C12.7553 15.1039 11.7309 15.489 10.625 15.5952V17.7084H12.5C12.8452 17.7084 13.125 17.9882 13.125 18.3334C13.125 18.6785 12.8452 18.9584 12.5 18.9584H7.5C7.15482 18.9584 6.875 18.6785 6.875 18.3334C6.875 17.9882 7.15482 17.7084 7.5 17.7084H9.375V15.5952C6.10142 15.2808 3.54167 12.5227 3.54167 9.16669V8.33335C3.54167 7.98818 3.82149 7.70835 4.16667 7.70835C4.51184 7.70835 4.79167 7.98818 4.79167 8.33335V9.16669C4.79167 12.0432 7.12352 14.375 10 14.375C10.9983 14.375 11.9309 14.0942 12.7233 13.6072L11.4005 12.2844C8.96607 12.1511 7.01555 10.2006 6.88227 7.76617Z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M8.5,12.9c0.6-0.1,1.2-0.3,1.8-0.6l-0.7-0.7c-0.3,0.1-0.6,0.2-1,0.3c-0.7,0.1-1.4,0-2-0.2c-0.6-0.3-1.2-0.7-1.5-1.3C4.7,9.9,4.5,9.2,4.5,8.6V7.1h-1v1.5c0,1.1,0.4,2.2,1.1,3s1.8,1.3,2.9,1.5v1h-2v1h5v-1h-2V12.9z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M7,10.8c0.4,0.2,0.9,0.3,1.4,0.2c0.1,0,0.3-0.1,0.4-0.1L7.9,9.9c-0.2,0-0.4-0.1-0.5-0.1C7.1,9.8,6.9,9.6,6.7,9.4C6.6,9.2,6.5,8.9,6.5,8.7l-1-1v0.9c0,0.5,0.1,1,0.4,1.4C6.2,10.2,6.5,10.6,7,10.8z"
|
||||
/>
|
||||
<path fill="#DC5148" d="M15,14.4l-0.7,0.7L1,1.8L1.7,1L15,14.4z" />
|
||||
</svg>
|
||||
|
||||
Reference in New Issue
Block a user