mplorentz
87 lines
2.6 KiB
Svelte
87 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import cx from "classnames"
|
|
import {loadProfile, displayProfileByPubkey} from "@welshman/app"
|
|
import Volume from "@assets/icons/volume.svg?dataurl"
|
|
import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
|
|
import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
|
|
import ProfileCircle from "@app/components/ProfileCircle.svelte"
|
|
import RoomImage from "@app/components/RoomImage.svelte"
|
|
import RoomName from "@app/components/RoomName.svelte"
|
|
import {pushToast} from "@app/util/toast"
|
|
import {
|
|
deriveVoiceParticipants,
|
|
joinVoiceRoom,
|
|
leaveVoiceRoom,
|
|
currentVoiceSession,
|
|
speakingPubkeys,
|
|
} from "@app/voice"
|
|
|
|
interface Props {
|
|
url: string
|
|
h: string
|
|
}
|
|
|
|
const {url, h}: Props = $props()
|
|
|
|
const participants = deriveVoiceParticipants(url, h)
|
|
const isActive = $derived($currentVoiceSession?.url === url && $currentVoiceSession?.h === h)
|
|
let joinAbortController = $state<AbortController | undefined>(undefined)
|
|
|
|
const handleClick = async () => {
|
|
if (isActive) {
|
|
await leaveVoiceRoom()
|
|
return
|
|
}
|
|
if (joinAbortController) {
|
|
joinAbortController.abort()
|
|
return
|
|
}
|
|
joinAbortController = new AbortController()
|
|
try {
|
|
await joinVoiceRoom(url, h, joinAbortController.signal)
|
|
} catch (e) {
|
|
console.error("Failed to join voice room", e)
|
|
pushToast({theme: "error", message: "Failed to join voice room"})
|
|
} finally {
|
|
joinAbortController = undefined
|
|
}
|
|
}
|
|
|
|
$effect(() => {
|
|
for (const pk of $participants) {
|
|
loadProfile(pk)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<SecondaryNavItem
|
|
onclick={handleClick}
|
|
class={cx("!items-start", isActive && "!bg-base-100 !text-base-content")}>
|
|
<div class="flex w-full min-w-0 flex-col gap-2">
|
|
<div class="flex gap-2 items-center">
|
|
{#if joinAbortController}
|
|
<span class="loading loading-spinner loading-sm"></span>
|
|
{:else}
|
|
<RoomImage {url} {h} size={4} fallbackIcon={isActive ? VolumeLoud : Volume} />
|
|
{/if}
|
|
<RoomName {url} {h} />
|
|
</div>
|
|
{#if $participants.length > 0}
|
|
{#each $participants as pk (pk)}
|
|
<div class="flex items-center gap-2 ml-6">
|
|
<div
|
|
class={cx(
|
|
"inline-flex shrink-0 items-center justify-center rounded-full transition-shadow",
|
|
isActive && $speakingPubkeys.has(pk) && "ring-2 ring-success",
|
|
)}>
|
|
<ProfileCircle pubkey={pk} size={5} class="h-5 w-5" />
|
|
</div>
|
|
<span class="ellipsize text-xs opacity-70">
|
|
{displayProfileByPubkey(pk)}
|
|
</span>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</SecondaryNavItem>
|