mplorentz
40 lines
1.6 KiB
Svelte
40 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import {displayRelayUrl} from "@welshman/util"
|
|
import Microphone from "@assets/icons/microphone.svg?dataurl"
|
|
import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
|
|
import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
import Button from "@lib/components/Button.svelte"
|
|
import {displayRoom} from "@app/core/state"
|
|
import {currentVoiceSession, leaveVoiceRoom, toggleMute} from "@app/voice"
|
|
|
|
const roomName = $derived(
|
|
$currentVoiceSession ? displayRoom($currentVoiceSession.url, $currentVoiceSession.h) : "",
|
|
)
|
|
const spaceName = $derived($currentVoiceSession ? displayRelayUrl($currentVoiceSession.url) : "")
|
|
|
|
const handleDisconnect = () => leaveVoiceRoom()
|
|
const handleToggleMute = () => toggleMute()
|
|
</script>
|
|
|
|
{#if $currentVoiceSession}
|
|
<div class="flex flex-col gap-2 rounded-box bg-base-100 p-3">
|
|
<div class="flex flex-col gap-0.5">
|
|
<span class="text-sm font-semibold text-success">Voice Connected</span>
|
|
<span class="ellipsize text-xs opacity-70">
|
|
{roomName} / {spaceName}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<Button
|
|
class="btn btn-sm btn-square {$currentVoiceSession.muted ? 'btn-error' : 'btn-ghost'}"
|
|
onclick={handleToggleMute}>
|
|
<Icon icon={$currentVoiceSession.muted ? VolumeCross : Microphone} size={4} />
|
|
</Button>
|
|
<Button class="btn btn-sm btn-square btn-error" onclick={handleDisconnect}>
|
|
<Icon icon={PhoneRounded} size={4} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{/if}
|