mplorentz
80 lines
2.9 KiB
Svelte
80 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import {fly} from "svelte/transition"
|
|
import {displayRelayUrl} from "@welshman/util"
|
|
import Microphone from "@assets/icons/microphone.svg?dataurl"
|
|
import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
|
|
import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
|
|
import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
|
|
import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
import Button from "@lib/components/Button.svelte"
|
|
import {displayRoom} from "@app/core/state"
|
|
import {
|
|
currentVoiceSession,
|
|
currentVoiceRoom,
|
|
voiceState,
|
|
leaveVoiceRoom,
|
|
toggleMute,
|
|
rejoinVoiceRoom,
|
|
cancelJoinVoiceRoom,
|
|
} from "@app/voice"
|
|
|
|
const roomName = $derived(
|
|
$currentVoiceRoom ? displayRoom($currentVoiceRoom.url, $currentVoiceRoom.h) : "",
|
|
)
|
|
const spaceName = $derived($currentVoiceRoom ? displayRelayUrl($currentVoiceRoom.url) : "")
|
|
</script>
|
|
|
|
{#if $currentVoiceRoom}
|
|
<div
|
|
in:fly={{y: 60, duration: 350}}
|
|
out:fly={{y: 60, duration: 250}}
|
|
class="flex flex-col gap-2 rounded-box bg-base-100 p-3">
|
|
<div class="flex flex-col gap-0.5">
|
|
{#if $voiceState === "joining"}
|
|
<span class="text-sm font-semibold text-warning">Joining...</span>
|
|
{:else if $voiceState === "connected"}
|
|
<span class="text-sm font-semibold text-success">Voice Connected</span>
|
|
{:else}
|
|
<span class="text-sm font-semibold text-neutral-content">Disconnected</span>
|
|
{/if}
|
|
<span class="ellipsize text-xs opacity-70">
|
|
{roomName} / {spaceName}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
{#if $voiceState === "joining"}
|
|
<span class="loading loading-spinner loading-sm"></span>
|
|
<Button
|
|
data-tip="Cancel"
|
|
class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
|
|
onclick={cancelJoinVoiceRoom}>
|
|
<Icon icon={CloseCircle} size={4} />
|
|
</Button>
|
|
{:else if $voiceState === "connected" && $currentVoiceSession}
|
|
<Button
|
|
data-tip={$currentVoiceSession.muted ? "Unmute" : "Mute"}
|
|
class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.muted
|
|
? 'btn-error'
|
|
: 'btn-ghost'}"
|
|
onclick={toggleMute}>
|
|
<Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
|
|
</Button>
|
|
<Button
|
|
data-tip="Leave room"
|
|
class="center tooltip tooltip-top btn btn-sm btn-square btn-error"
|
|
onclick={leaveVoiceRoom}>
|
|
<Icon icon={PhoneRounded} size={4} />
|
|
</Button>
|
|
{:else}
|
|
<Button
|
|
data-tip="Join Voice"
|
|
class="center tooltip tooltip-top btn btn-sm btn-square btn-success"
|
|
onclick={rejoinVoiceRoom}>
|
|
<Icon icon={PhoneCallingRounded} size={4} />
|
|
</Button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|