forked from coracle/flotilla
35 lines
1008 B
Svelte
35 lines
1008 B
Svelte
<script lang="ts">
|
|
import cx from "classnames"
|
|
import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
|
|
import VideocameraOff from "@assets/icons/videocamera-off.svg?dataurl"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
|
|
type Props = {
|
|
muted: boolean
|
|
cameraOn: boolean
|
|
showCamera?: boolean
|
|
size?: number
|
|
class?: string
|
|
}
|
|
|
|
const {muted, cameraOn, showCamera = true, size = 3, class: className = ""}: Props = $props()
|
|
|
|
const badgeClass =
|
|
"inline-flex size-4 shrink-0 items-center justify-center rounded bg-base-100/80 p-0.5 text-error"
|
|
</script>
|
|
|
|
{#if muted || (showCamera && !cameraOn)}
|
|
<div class={cx("flex items-center gap-1", className)}>
|
|
{#if muted}
|
|
<span class={badgeClass} aria-label="Muted">
|
|
<Icon icon={MicrophoneOff} {size} />
|
|
</span>
|
|
{/if}
|
|
{#if showCamera && !cameraOn}
|
|
<span class={badgeClass} aria-label="Camera off">
|
|
<Icon icon={VideocameraOff} {size} />
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
{/if}
|