coracle/flotilla
1
6
Fork 24
Code Issues 38 Pull Requests 3 Actions Packages Projects 5 Releases Wiki Activity

Switch to 39004 for room presence

Browse Source
This commit is contained in:
mplorentz
2026-03-12 18:27:01 -04:00
committed by hodlbod
parent 87d509df06
commit 1e42fd9b2d
5 changed files with 124 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/ProfileCircle.svelte
+8 -4
View File
@@ -1,12 +1,14 @@
<script lang="ts">
import type {Readable} from "svelte/store"
import {readable} from "svelte/store"
import cx from "classnames"
import {removeUndefined} from "@welshman/lib"
import {ifLet, removeUndefined} from "@welshman/lib"
import {deriveProfile} from "@welshman/app"
import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
import ImageIcon from "@lib/components/ImageIcon.svelte"
type Props = {
pubkey: string
pubkey?: string
class?: string
size?: number
url?: string
@@ -14,11 +16,13 @@
const {pubkey, url, size = 7, ...props}: Props = $props()
const profile = deriveProfile(pubkey, removeUndefined([url]))
const readableProfile = ifLet(pubkey, pk => deriveProfile(pk, removeUndefined([url])))
const emptyProfile = readable(undefined)
const profile: Readable<{picture?: string} | undefined> = readableProfile ?? emptyProfile
</script>
<ImageIcon
{size}
alt=""
class={cx(props.class, "rounded-full")}
src={$profile?.picture || UserRounded} />
src={$profile?.picture ?? UserRounded} />
src/app/components/SpaceMenuRoomItem.svelte
+14 -17
View File
@@ -4,10 +4,10 @@
import Icon from "@lib/components/Icon.svelte"
import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
import VoiceRoomItem from "@app/components/VoiceRoomItem.svelte"
import {deriveRoom, deriveShouldNotify, getRoomType, RoomType} from "@app/core/state"
import {notifications} from "@app/util/notifications"
import {makeRoomPath} from "@app/util/routes"
import {joinVoiceRoom, currentVoiceSession} from "@app/voice"
interface Props {
url: any
@@ -24,21 +24,18 @@
const shouldNotifyForSpace = deriveShouldNotify(url)
const shouldNotifyForRoom = deriveShouldNotify(url, h)
const showDifferenceIcon = $derived($shouldNotifyForRoom !== $shouldNotifyForSpace)
const handleClick = () => {
if (roomType !== RoomType.Voice) return
if ($currentVoiceSession?.url === url && $currentVoiceSession?.h === h) return
void joinVoiceRoom(url, h)
}
</script>
<SecondaryNavItem
href={path}
{replaceState}
onclick={handleClick}
notification={notify ? $notifications.has(path) : false}>
<RoomNameWithImage {url} {h} />
{#if showDifferenceIcon}
<Icon icon={$shouldNotifyForRoom ? Bell : BellOff} size={4} class="opacity-50" />
{/if}
</SecondaryNavItem>
{#if roomType === RoomType.Voice}
<VoiceRoomItem {url} {h} />
{:else}
<SecondaryNavItem
href={path}
{replaceState}
notification={notify ? $notifications.has(path) : false}>
<RoomNameWithImage {url} {h} />
{#if showDifferenceIcon}
<Icon icon={$shouldNotifyForRoom ? Bell : BellOff} size={4} class="opacity-50" />
{/if}
</SecondaryNavItem>
{/if}
src/app/components/VoiceRoomItem.svelte
+9 -7
View File
@@ -11,7 +11,9 @@
joinVoiceRoom,
leaveVoiceRoom,
currentVoiceSession,
speakingPubkeys,
isParticipantSpeaking,
participantKey,
type VoiceParticipant,
} from "@app/voice"
interface Props {
@@ -46,8 +48,8 @@
}
$effect(() => {
for (const pk of $participants) {
loadProfile(pk)
for (const p of $participants) {
if (p.pubkey) loadProfile(p.pubkey)
}
})
</script>
@@ -65,17 +67,17 @@
<RoomName {url} {h} />
</div>
{#if $participants.length > 0}
{#each $participants as pk (pk)}
{#each $participants as p (participantKey(p as VoiceParticipant))}
<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",
isActive && $isParticipantSpeaking(p) && "ring-2 ring-success",
)}>
<ProfileCircle pubkey={pk} size={5} class="h-5 w-5" />
<ProfileCircle pubkey={p.pubkey} size={5} class="h-5 w-5" />
</div>
<span class="ellipsize text-xs opacity-70">
{displayProfileByPubkey(pk)}
{p.pubkey ? displayProfileByPubkey(p.pubkey) : "Unknown"}
</span>
</div>
{/each}
src/app/core/sync.ts
+2 -2
View File
@@ -55,7 +55,7 @@ import {
loadFeedsForPubkey,
} from "@app/core/state"
import {hasBlossomSupport} from "@app/core/commands"
import {ROOM_PRESENCE} from "@app/voice"
import {LIVEKIT_PARTICIPANTS} from "@app/voice"
// Utils
@@ -320,7 +320,7 @@ const syncSpace = (url: string, rooms: string[]) => {
pullAndListen({
url,
signal: controller.signal,
filters: [{kinds: [ROOM_PRESENCE]}],
filters: [{kinds: [LIVEKIT_PARTICIPANTS]}],
})
return () => controller.abort()
src/app/voice.ts
+91 -59
View File
@@ -4,21 +4,19 @@
*/
import {DisconnectReason, Room, RoomEvent, Track} from "livekit-client"
import {derived, get, writable} from "svelte/store"
import {now} from "@welshman/lib"
import {makeEvent, makeHttpAuth, makeHttpAuthHeader, getTagValue} from "@welshman/util"
import {signer, publishThunk} from "@welshman/app"
import {uniqBy} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util"
import {makeHttpAuth, makeHttpAuthHeader, getTags} from "@welshman/util"
import {signer} from "@welshman/app"
import {getLivekitEndpoint} from "$lib/livekit"
import {AbortError, whenAborted, whenTimeout} from "$lib/util"
import {deriveEventsForUrl} from "@app/core/state"
import {deriveLatestEventForUrl} from "@app/core/state"
import {pushToast} from "@app/util/toast"
export const ROOM_PRESENCE = 10312
export const LIVEKIT_PARTICIPANTS = 39004
export {checkRelayHasLivekit} from "$lib/livekit"
const PRESENCE_INTERVAL_MS = 60_000
const PRESENCE_EXPIRY_S = 300
export type VoiceSession = {
url: string
h: string
@@ -26,9 +24,49 @@ export type VoiceSession = {
muted: boolean
}
export type Pubkey = string
export type VoiceParticipant = {pubkey?: Pubkey; identity: string}
export const currentVoiceSession = writable<VoiceSession | undefined>(undefined)
export const speakingPubkeys = writable(new Set<string>())
export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
const addParticipant = (identity: string) => {
participantPubkeyMap.update(m => {
const next = new Map(m)
next.set(identity, pubkeyFromLiveKitIdentity(identity) ?? "")
return next
})
}
const deleteParticipant = (identity: string) => {
participantPubkeyMap.update(m => {
const next = new Map(m)
next.delete(identity)
return next
})
}
const currentVoiceRoom = derived(currentVoiceSession, s => (s ? {url: s.url, h: s.h} : undefined))
export const pubkeyFromLiveKitIdentity = (identity: string): string | undefined =>
/^[a-f0-9]{64}$/.test(identity.slice(0, 64)) ? identity.slice(0, 64) : undefined
export const participantFromLiveKitIdentity = (identity: string): VoiceParticipant => {
const pk = pubkeyFromLiveKitIdentity(identity)
return pk ? {pubkey: pk, identity} : {identity}
}
export const participantKey = (p: VoiceParticipant) => p.pubkey ?? p.identity
export const speakingParticipants = writable<VoiceParticipant[]>([])
export const isParticipantSpeaking = derived(
speakingParticipants,
$participants => (p: VoiceParticipant) =>
$participants.some(sp => participantKey(sp) === participantKey(p)),
)
const fetchLivekitToken = async (
url: string,
@@ -60,54 +98,39 @@ const fetchLivekitToken = async (
}
export const deriveVoiceParticipants = (url: string, h: string) =>
derived(deriveEventsForUrl(url, [{kinds: [ROOM_PRESENCE]}]), $events => {
const cutoff = now() - PRESENCE_EXPIRY_S
const pubkeys: string[] = []
// We use the livekit identity list while in a call, and fall back to the list in kind 39004.
derived(
[
participantPubkeyMap,
currentVoiceRoom,
deriveLatestEventForUrl(url, [{kinds: [LIVEKIT_PARTICIPANTS], "#d": [h]}]),
],
([$participantPubkeyMap, $currentVoiceRoom, $publishedParticipantList]) => {
const inCall =
$participantPubkeyMap.size > 0 &&
$currentVoiceRoom?.url === url &&
$currentVoiceRoom?.h === h
for (const event of $events) {
if (event.created_at < cutoff) continue
if (getTagValue("h", event.tags) === h) {
pubkeys.push(event.pubkey)
if (inCall) {
const participants = [...$participantPubkeyMap.keys()].map(participantFromLiveKitIdentity)
return uniqBy((p: VoiceParticipant) => participantKey(p), participants)
} else {
const latestEvent = $publishedParticipantList as TrustedEvent | undefined
if (!latestEvent) return []
const participants = getTags("participant", latestEvent.tags).map((tag: string[]) => {
const pubkey = tag[1]
const identity = tag[2] ?? pubkey
return pubkey ? {pubkey, identity} : {identity}
})
return uniqBy((p: VoiceParticipant) => participantKey(p), participants)
}
}
return pubkeys
})
const publishPresence = (url: string, h: string) => {
const event = makeEvent(ROOM_PRESENCE, {
tags: [["h", h]],
})
return publishThunk({event, relays: [url]})
}
const deletePresence = (url: string) => {
const event = makeEvent(ROOM_PRESENCE, {tags: []})
return publishThunk({event, relays: [url]})
}
let presenceInterval: ReturnType<typeof setInterval> | undefined
const startPresenceHeartbeat = (url: string, h: string) => {
stopPresenceHeartbeat()
publishPresence(url, h)
presenceInterval = setInterval(() => publishPresence(url, h), PRESENCE_INTERVAL_MS)
}
const stopPresenceHeartbeat = () => {
if (presenceInterval) {
clearInterval(presenceInterval)
presenceInterval = undefined
}
}
},
)
const onRoomDisconnected = (reason?: DisconnectReason) => {
speakingPubkeys.set(new Set())
speakingParticipants.set([])
participantPubkeyMap.set(new Map())
currentVoiceSession.set(undefined)
stopPresenceHeartbeat()
if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
const message =
reason === DisconnectReason.JOIN_FAILURE
@@ -131,7 +154,7 @@ const onTrackUnsubscribed = (track: Track) => {
}
const onActiveSpeakersChanged = (participants: {identity: string}[]) => {
speakingPubkeys.set(new Set(participants.map(p => p.identity)))
speakingParticipants.set(participants.map(p => participantFromLiveKitIdentity(p.identity)))
}
const playJoinSound = () => {
@@ -139,10 +162,15 @@ const playJoinSound = () => {
audio.play().catch(() => {})
}
const onParticipantConnected = () => {
const onParticipantConnected = (participant: {identity: string}) => {
addParticipant(participant.identity)
playJoinSound()
}
const onParticipantDisconnected = (participant: {identity: string}) => {
deleteParticipant(participant.identity)
}
export const joinVoiceRoom = async (
url: string,
h: string,
@@ -160,6 +188,7 @@ export const joinVoiceRoom = async (
room.on(RoomEvent.Disconnected, onRoomDisconnected)
room.on(RoomEvent.ParticipantConnected, onParticipantConnected)
room.on(RoomEvent.ParticipantDisconnected, onParticipantDisconnected)
room.on(RoomEvent.TrackSubscribed, onTrackSubscribed)
room.on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
room.on(RoomEvent.ActiveSpeakersChanged, onActiveSpeakersChanged)
@@ -178,6 +207,12 @@ export const joinVoiceRoom = async (
throw e
}
participantPubkeyMap.set(new Map())
addParticipant(room.localParticipant.identity)
for (const p of room.remoteParticipants.values()) {
addParticipant(p.identity)
}
let muted = false
try {
await room.localParticipant.setMicrophoneEnabled(true)
@@ -188,8 +223,6 @@ export const joinVoiceRoom = async (
currentVoiceSession.set({url, h, room, muted})
startPresenceHeartbeat(url, h)
playJoinSound()
}
@@ -200,10 +233,9 @@ export const leaveVoiceRoom = async () => {
const audio = new Audio("/leave-voice-room.mp3")
audio.play().catch(() => {})
speakingPubkeys.set(new Set())
stopPresenceHeartbeat()
speakingParticipants.set([])
participantPubkeyMap.set(new Map())
session.room.disconnect()
deletePresence(session.url)
currentVoiceSession.set(undefined)
}