+
diff --git a/src/app/components/SpaceMenuRoomItem.svelte b/src/app/components/SpaceMenuRoomItem.svelte
index 992f5142..d173498e 100644
--- a/src/app/components/SpaceMenuRoomItem.svelte
+++ b/src/app/components/SpaceMenuRoomItem.svelte
@@ -1,12 +1,13 @@
-
-
- {#if showDifferenceIcon}
-
- {/if}
-
+{#if roomType === RoomType.Voice}
+
+{:else}
+
+
+ {#if showDifferenceIcon}
+
+ {/if}
+
+{/if}
diff --git a/src/app/components/VoiceRoomItem.svelte b/src/app/components/VoiceRoomItem.svelte
new file mode 100644
index 00000000..5676c314
--- /dev/null
+++ b/src/app/components/VoiceRoomItem.svelte
@@ -0,0 +1,91 @@
+
+
+
+
+
+ {#if isJoining}
+
+ {:else}
+
+ {/if}
+
+
+ {#if $participants.length > 0}
+ {#each $participants as p (participantKey(p as VoiceParticipant))}
+
+
+
+ {p.pubkey ? displayProfileByPubkey(p.pubkey) : "Unknown"}
+
+
+ {/each}
+ {/if}
+
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
new file mode 100644
index 00000000..ae3f3eb5
--- /dev/null
+++ b/src/app/components/VoiceWidget.svelte
@@ -0,0 +1,79 @@
+
+
+{#if $currentVoiceRoom}
+
+
+ {#if $voiceState === "joining"}
+ Joining...
+ {:else if $voiceState === "connected"}
+ Voice Connected
+ {:else}
+ Disconnected
+ {/if}
+
+ {roomName} / {spaceName}
+
+
+
+ {#if $voiceState === "joining"}
+
+
+ {:else if $voiceState === "connected" && $currentVoiceSession}
+
+
+ {:else}
+
+ {/if}
+
+
+{/if}
diff --git a/src/app/core/state.ts b/src/app/core/state.ts
index 7e64a12f..04a7751b 100644
--- a/src/app/core/state.ts
+++ b/src/app/core/state.ts
@@ -125,6 +125,7 @@ import type {
RelayProfile,
PublishedList,
PublishedRoomMeta,
+ RoomMeta,
List,
Filter,
} from "@welshman/util"
@@ -146,6 +147,7 @@ import {
displayProfileByPubkey,
getProfile,
} from "@welshman/app"
+import {checkRelayHasLivekit} from "$lib/livekit"
import {readFeed} from "@lib/feeds"
export const fromCsv = (s: string) => (s || "").split(",").filter(identity)
@@ -567,11 +569,19 @@ export const chatSearch = derived(throttled(800, chatsById), $chatsByPubkey => {
// Rooms
+export enum RoomType {
+ Text = "text",
+ Voice = "voice",
+}
+
export type Room = PublishedRoomMeta & {
id: string
url: string
}
+export const getRoomType = (room: RoomMeta): RoomType =>
+ room.livekit ? RoomType.Voice : RoomType.Text
+
export const makeRoomId = (url: string, h: string) => `${url}'${h}`
export const splitRoomId = (id: string) => id.split("'")
@@ -663,6 +673,30 @@ export const displayRoom = (url: string, h: string) => getRoom(makeRoomId(url, h
export const roomComparator = (url: string) => (h: string) => displayRoom(url, h).toLowerCase()
+export const deriveVoiceRooms = (url: string) =>
+ derived(roomsById, $roomsById => {
+ const set = new Set
()
+ for (const room of $roomsById.values()) {
+ if (room.url === url && room.livekit) {
+ set.add(room.h)
+ }
+ }
+ return set
+ })
+
+export const deriveOtherVoiceRooms = (url: string) =>
+ derived([deriveVoiceRooms(url), deriveUserRooms(url)], ([$roomsWithLivekit, $userRooms]) => {
+ const rooms: string[] = []
+
+ for (const h of $roomsWithLivekit) {
+ if (!$userRooms.includes(h)) {
+ rooms.push(h)
+ }
+ }
+
+ return sortBy(roomComparator(url), uniq(rooms))
+ })
+
// User space/room lists
export const groupListsByPubkey = deriveItemsByKey({
@@ -752,17 +786,20 @@ export const deriveUserRooms = (url: string) =>
})
export const deriveOtherRooms = (url: string) =>
- derived([deriveUserRooms(url), roomsByUrl], ([$userRooms, $roomsByUrl]) => {
- const rooms: string[] = []
+ derived(
+ [deriveUserRooms(url), deriveVoiceRooms(url), roomsByUrl],
+ ([$userRooms, voiceRooms, $roomsByUrl]) => {
+ const rooms: string[] = []
- for (const {h} of $roomsByUrl.get(url) || []) {
- if (!$userRooms.includes(h)) {
- rooms.push(h)
+ for (const {h} of $roomsByUrl.get(url) || []) {
+ if (!$userRooms.includes(h) && !voiceRooms.has(h)) {
+ rooms.push(h)
+ }
}
- }
- return sortBy(roomComparator(url), uniq(rooms))
- })
+ return sortBy(roomComparator(url), uniq(rooms))
+ },
+ )
// Space/room memberships
@@ -1165,6 +1202,12 @@ export const deriveSupportedMethods = simpleCache(([url]: [string]) => {
})
})
+export const deriveHasLivekit = simpleCache(([url]: [string]) =>
+ readable(undefined, set => {
+ checkRelayHasLivekit(url).then(has => set(has))
+ }),
+)
+
export const deriveTimeout = (timeout: number) => {
const store = writable(false)
diff --git a/src/app/core/sync.ts b/src/app/core/sync.ts
index 96eab24f..ebe46474 100644
--- a/src/app/core/sync.ts
+++ b/src/app/core/sync.ts
@@ -55,6 +55,7 @@ import {
loadFeedsForPubkey,
} from "@app/core/state"
import {hasBlossomSupport} from "@app/core/commands"
+import {LIVEKIT_PARTICIPANTS} from "@app/voice"
// Utils
@@ -316,6 +317,12 @@ const syncSpace = (url: string, rooms: string[]) => {
})
}
+ pullAndListen({
+ url,
+ signal: controller.signal,
+ filters: [{kinds: [LIVEKIT_PARTICIPANTS]}],
+ })
+
return () => controller.abort()
}
diff --git a/src/app/voice.ts b/src/app/voice.ts
new file mode 100644
index 00000000..40aa962c
--- /dev/null
+++ b/src/app/voice.ts
@@ -0,0 +1,290 @@
+/**
+ * Voice rooms via LiveKit. Note: Voice does not work on localhost in Firefox
+ * (ICE candidate gathering fails). Use Chrome or test from deployed HTTPS.
+ */
+import {DisconnectReason, Room, RoomEvent, Track} from "livekit-client"
+import {derived, get, writable} from "svelte/store"
+import {map, removeUndefined, 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 {deriveLatestEventForUrl} from "@app/core/state"
+import {pushToast} from "@app/util/toast"
+
+export const LIVEKIT_PARTICIPANTS = 39004
+
+export {checkRelayHasLivekit} from "$lib/livekit"
+
+export type VoiceSession = {
+ url: string
+ h: string
+ room: Room
+ muted: boolean
+}
+
+export type Pubkey = string
+
+export type VoiceParticipant = {pubkey?: Pubkey; identity: string}
+
+export type VoiceState = "joining" | "connected" | "disconnected"
+
+export const currentVoiceSession = writable(undefined)
+
+export const voiceState = writable("disconnected")
+
+export const currentVoiceRoom = writable<{url: string; h: string} | undefined>(undefined)
+
+export const participantPubkeyMap = writable>(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
+ })
+}
+
+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([])
+
+export const isParticipantSpeaking = derived(
+ speakingParticipants,
+ $participants => (p: VoiceParticipant) =>
+ $participants.some(sp => participantKey(sp) === participantKey(p)),
+)
+
+const fetchLivekitToken = async (
+ url: string,
+ groupId: string,
+ signal?: AbortSignal,
+): Promise<{server_url: string; participant_token: string}> => {
+ const endpoint = getLivekitEndpoint(url, groupId)
+
+ const $signer = signer.get()
+ if (!$signer) throw new Error("No signer available")
+
+ if (signal?.aborted) throw new DOMException("Aborted", "AbortError")
+
+ const template = await makeHttpAuth(endpoint, "GET")
+ const signedEvent = await $signer.sign(template)
+ const authHeader = makeHttpAuthHeader(signedEvent)
+
+ const response = await fetch(endpoint, {
+ headers: {Authorization: authHeader},
+ signal,
+ })
+
+ if (!response.ok) {
+ const text = await response.text()
+ throw new Error(`Token request failed (${response.status}): ${text}`)
+ }
+
+ return response.json()
+}
+
+export const deriveVoiceParticipants = (url: string, h: 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
+
+ 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 = removeUndefined(
+ map(
+ (tag: string[]) => (tag[1] ? participantFromLiveKitIdentity(tag[1]) : undefined),
+ getTags("participant", latestEvent.tags),
+ ),
+ )
+ return uniqBy((p: VoiceParticipant) => participantKey(p), participants)
+ }
+ },
+ )
+
+const onRoomDisconnected = (reason?: DisconnectReason) => {
+ speakingParticipants.set([])
+ participantPubkeyMap.set(new Map())
+ currentVoiceSession.set(undefined)
+ if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
+ voiceState.set("disconnected")
+ const message =
+ reason === DisconnectReason.JOIN_FAILURE
+ ? "Could not connect to voice room. Please try again."
+ : "Voice connection lost."
+ pushToast({theme: "error", message})
+ }
+}
+
+const onTrackSubscribed = (track: Track) => {
+ if (track.kind === Track.Kind.Audio) {
+ const element = track.attach()
+ element.style.display = "none"
+ document.body.appendChild(element)
+ element.play().catch(() => {})
+ }
+}
+
+const onTrackUnsubscribed = (track: Track) => {
+ track.detach().forEach(el => el.remove())
+}
+
+const onActiveSpeakersChanged = (participants: {identity: string}[]) => {
+ speakingParticipants.set(participants.map(p => participantFromLiveKitIdentity(p.identity)))
+}
+
+const playJoinSound = () => {
+ const audio = new Audio("/join-voice-room.mp3")
+ audio.play().catch(() => {})
+}
+
+const onParticipantConnected = (participant: {identity: string}) => {
+ addParticipant(participant.identity)
+ playJoinSound()
+}
+
+const onParticipantDisconnected = (participant: {identity: string}) => {
+ deleteParticipant(participant.identity)
+}
+
+let joinAbortController: AbortController | undefined
+
+export const cancelJoinVoiceRoom = () => {
+ joinAbortController?.abort()
+}
+
+export const joinVoiceRoom = async (url: string, h: string): Promise => {
+ cancelJoinVoiceRoom()
+
+ const session = get(currentVoiceSession)
+ if (session) await leaveVoiceRoom()
+
+ currentVoiceRoom.set({url, h})
+ voiceState.set("joining")
+
+ const controller = new AbortController()
+ joinAbortController = controller
+ const signal = controller.signal
+ const isActive = () => joinAbortController === controller
+
+ try {
+ const {server_url, participant_token} = await fetchLivekitToken(url, h, signal)
+
+ if (signal.aborted) throw new AbortError()
+
+ const room = new Room({adaptiveStream: true, dynacast: true})
+
+ 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)
+
+ try {
+ await Promise.race([
+ room.connect(server_url, participant_token, {maxRetries: 0}),
+ whenTimeout(5_000, {
+ message: "Connection timed out. Please check your network and try again.",
+ }),
+ whenAborted(signal),
+ ])
+ } catch (e) {
+ room.disconnect()
+ 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)
+ } catch (e) {
+ muted = true
+ pushToast({theme: "error", message: "Could not access microphone"})
+ }
+
+ currentVoiceSession.set({url, h, room, muted})
+ voiceState.set("connected")
+ playJoinSound()
+ } catch (e) {
+ if (isActive()) voiceState.set("disconnected")
+ if (e instanceof AbortError) return
+ throw e
+ } finally {
+ if (isActive()) joinAbortController = undefined
+ }
+}
+
+export const leaveVoiceRoom = async () => {
+ const session = get(currentVoiceSession)
+ if (!session) return
+
+ const audio = new Audio("/leave-voice-room.mp3")
+ audio.play().catch(() => {})
+
+ speakingParticipants.set([])
+ participantPubkeyMap.set(new Map())
+ voiceState.set("disconnected")
+ session.room.disconnect()
+ currentVoiceSession.set(undefined)
+}
+
+export const rejoinVoiceRoom = () => {
+ const target = get(currentVoiceRoom)
+ if (target) joinVoiceRoom(target.url, target.h)
+}
+
+export const toggleMute = async () => {
+ const session = get(currentVoiceSession)
+ if (!session) return
+
+ const muted = !session.muted
+ if (muted) {
+ // Disable and re-enable microphone to trigger permission prompt
+ session.room.localParticipant.setMicrophoneEnabled(false)
+ currentVoiceSession.set({...session, muted})
+ return
+ }
+
+ try {
+ await session.room.localParticipant.setMicrophoneEnabled(true)
+ currentVoiceSession.set({...session, muted})
+ } catch (e) {
+ pushToast({theme: "error", message: "Could not access microphone"})
+ }
+}
diff --git a/src/assets/icons/microphone-off.svg b/src/assets/icons/microphone-off.svg
new file mode 100644
index 00000000..2a90f378
--- /dev/null
+++ b/src/assets/icons/microphone-off.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/lib/components/SecondaryNavItem.svelte b/src/lib/components/SecondaryNavItem.svelte
index a61c7f0d..3dd7a401 100644
--- a/src/lib/components/SecondaryNavItem.svelte
+++ b/src/lib/components/SecondaryNavItem.svelte
@@ -34,7 +34,7 @@
{href}
{...restProps}
data-sveltekit-replacestate={replaceState}
- class="{restProps.class} relative flex items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content"
+ class="{restProps.class} relative flex flex-shrink-0 items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content"
class:text-base-content={active}
class:bg-base-100={active}>
{@render children?.()}
@@ -45,7 +45,7 @@
{:else}