feature/23-voice-room/poc (#93)

Add voice rooms

Co-authored-by: Matt Lorentz <mplorentz@noreply.coracle.social>
Co-committed-by: Matt Lorentz <mplorentz@noreply.coracle.social>

src/app/components/ProfileCircle.svelte

@@ -6,7 +6,7 @@
   import ImageIcon from "@lib/components/ImageIcon.svelte"
 
   type Props = {
-    pubkey: string
+    pubkey?: string
     class?: string
     size?: number
     url?: string

src/app/components/RoomDetail.svelte

@@ -16,7 +16,7 @@
   import Lock from "@assets/icons/lock.svg?dataurl"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
   import Bookmark from "@assets/icons/bookmark.svg?dataurl"
-  import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -255,7 +255,7 @@
       <strong class="text-lg">Room Settings</strong>
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-2">
-          <Icon icon={VolumeLoud} />
+          <Icon icon={Bell} />
           <span>Notifications</span>
         </div>
         <input

src/app/components/RoomForm.svelte

@@ -5,6 +5,7 @@
   import {waitForThunkError, createRoom, editRoom, joinRoom} from "@welshman/app"
   import StickerSmileSquare from "@assets/icons/sticker-smile-square.svg?dataurl"
   import Hashtag from "@assets/icons/hashtag.svg?dataurl"
+  import Volume from "@assets/icons/volume.svg?dataurl"
   import UploadMinimalistic from "@assets/icons/upload-minimalistic.svg?dataurl"
   import {preventDefault} from "@lib/html"
   import FieldInline from "@lib/components/FieldInline.svelte"
@@ -15,6 +16,7 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import {pushToast} from "@app/util/toast"
   import {uploadFile} from "@app/core/commands"
+  import {deriveHasLivekit, getRoomType, RoomType} from "@app/core/state"
 
   type Props = {
     url: string
@@ -27,12 +29,25 @@
   const {url, header, footer, onsubmit, initialValues = makeRoomMeta()}: Props = $props()
 
   const values = $state(initialValues)
+  const relayHasLivekit = deriveHasLivekit(url)
 
   const submit = async () => {
     const room = $state.snapshot(values)
 
+    if (roomType === RoomType.Voice && !$relayHasLivekit) {
+      return pushToast({
+        theme: "error",
+        message: "This relay does not support voice rooms.",
+      })
+    }
+
+    room.livekit = roomType === RoomType.Voice
+
     if (imageFile) {
-      const {error, result} = await uploadFile(imageFile, {maxWidth: 256, maxHeight: 256})
+      const {error, result} = await uploadFile(imageFile, {
+        maxWidth: 256,
+        maxHeight: 256,
+      })
 
       if (error) {
         return pushToast({theme: "error", message: error})
@@ -76,6 +91,7 @@
   let loading = $state(false)
   let imageFile = $state<File | undefined>()
   let imagePreview = $state(initialValues.picture)
+  let roomType = $state(getRoomType(initialValues))
 
   const handleImageUpload = async (event: Event) => {
     const file = (event.target as HTMLInputElement).files?.[0]
@@ -145,7 +161,7 @@
           {#if imagePreview}
             <ImageIcon src={imagePreview} alt="" class="rounded-lg" />
           {:else}
-            <Icon icon={Hashtag} />
+            <Icon icon={roomType === RoomType.Voice ? Volume : Hashtag} />
           {/if}
           <input bind:value={values.name} class="grow" type="text" />
         </label>
@@ -161,6 +177,22 @@
         </label>
       {/snippet}
     </FieldInline>
+    {#if $relayHasLivekit}
+      <FieldInline>
+        {#snippet label()}
+          <p>Room type</p>
+        {/snippet}
+        {#snippet input()}
+          <select
+            class="select select-bordered w-full"
+            bind:value={roomType}
+            aria-label="Room type">
+            <option value={RoomType.Text}>Text</option>
+            <option value={RoomType.Voice}>Voice</option>
+          </select>
+        {/snippet}
+      </FieldInline>
+    {/if}
     <strong class="md:hidden">Permissions</strong>
     <div class="flex items-center gap-2">
       <input type="checkbox" class="checkbox" bind:checked={values.isRestricted} />

src/app/components/RoomImage.svelte

@@ -1,22 +1,41 @@
 <script lang="ts">
   import Hashtag from "@assets/icons/hashtag.svg?dataurl"
+  import Volume from "@assets/icons/volume.svg?dataurl"
+  import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ImageIcon from "@lib/components/ImageIcon.svelte"
   import {deriveRoom} from "@app/core/state"
+  import {currentVoiceSession} from "@app/voice"
 
   interface Props {
     h: string
     url: string
     size?: number
+    fallbackIcon?: string
   }
 
-  const {url, h, size = 5}: Props = $props()
+  const {url, h, size = 5, fallbackIcon = Hashtag}: Props = $props()
 
   const room = deriveRoom(url, h)
+  const isVoiceRoom = $derived($room.livekit)
+  const isVoiceRoomActive = $derived(
+    $currentVoiceSession?.url === url && $currentVoiceSession?.h === h,
+  )
 </script>
 
-{#if $room.picture}
+{#if isVoiceRoom}
+  <div class="flex shrink-0 items-center gap-1.5">
+    <Icon
+      size={size + 1}
+      icon={isVoiceRoomActive ? VolumeLoud : Volume}
+      class={isVoiceRoomActive ? "text-primary -translate-x-0.5" : ""} />
+    {#if $room.picture}
+      <span class="text-base">/</span>
+      <ImageIcon src={$room.picture} {size} alt="" class="rounded-lg" />
+    {/if}
+  </div>
+{:else if $room.picture}
   <ImageIcon src={$room.picture} {size} alt="" class="rounded-lg" />
 {:else}
-  <Icon icon={Hashtag} {size} />
+  <Icon icon={fallbackIcon} {size} />
 {/if}

src/app/components/RoomName.svelte

@@ -12,6 +12,6 @@
   const room = deriveRoom(url, h)
 </script>
 
-<span class="ellipsize {props.class}">
+<span class="ellipsize min-w-0 {props.class}">
   {$room?.name || h}
 </span>

src/app/components/SpaceMenu.svelte

@@ -20,8 +20,8 @@
   import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import ChatRound from "@assets/icons/chat-round.svg?dataurl"
-  import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
-  import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
+  import BellOff from "@assets/icons/bell-off.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -38,6 +38,7 @@
   import SpaceReports from "@app/components/SpaceReports.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
   import SpaceMenuRoomItem from "@app/components/SpaceMenuRoomItem.svelte"
+  import VoiceWidget from "@app/components/VoiceWidget.svelte"
   import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
   import {
     ENABLE_ZAPS,
@@ -45,6 +46,7 @@
     deriveSpaceMembers,
     deriveUserRooms,
     deriveOtherRooms,
+    deriveOtherVoiceRooms,
     userSpaceUrls,
     hasNip29,
     deriveUserCanCreateRoom,
@@ -68,6 +70,7 @@
   const calendarPath = makeSpacePath(url, "calendar")
   const userRooms = deriveUserRooms(url)
   const otherRooms = deriveOtherRooms(url)
+  const otherVoiceRooms = deriveOtherVoiceRooms(url)
   const members = deriveSpaceMembers(url)
   const userIsAdmin = deriveUserIsSpaceAdmin(url)
   const reports = deriveEventsForUrl(url, [{kinds: [REPORT]}])
@@ -133,9 +136,9 @@
   })
 </script>
 
-<div bind:this={element} class="flex h-full flex-col justify-between">
-  <SecondaryNavSection class="pb-0">
-    <div>
+<div bind:this={element} class="flex min-h-0 flex-1 flex-col">
+  <SecondaryNavSection class="min-h-0 flex-1 flex flex-col overflow-hidden pb-0">
+    <div class="flex-shrink-0">
       <Button
         class="flex w-full flex-col rounded-xl p-3 transition-all hover:bg-base-100"
         onclick={openMenu}>
@@ -143,7 +146,7 @@
           <strong class="ellipsize flex items-center gap-1">
             <RelayName {url} />
             {#if $notificationSettings.push && !$shouldNotify}
-              <Icon icon={VolumeCross} size={3} class="opacity-50" />
+              <Icon icon={BellOff} size={3} class="opacity-50" />
             {/if}
           </strong>
           <Icon icon={AltArrowDown} />
@@ -192,12 +195,12 @@
             <li>
               {#if $notificationSettings.push}
                 <Button onclick={toggleSpaceNotifications}>
-                  <Icon icon={$shouldNotify ? VolumeLoud : VolumeCross} />
+                  <Icon icon={$shouldNotify ? Bell : BellOff} />
                   {$shouldNotify ? "Turn off" : "Turn on"} notifications
                 </Button>
               {:else}
                 <Link href="/settings/alerts">
-                  <Icon icon={VolumeLoud} />
+                  <Icon icon={Bell} />
                   Enable notifications
                 </Link>
               {/if}
@@ -219,8 +222,7 @@
         </Popover>
       {/if}
     </div>
-    <div
-      class="flex max-h-[calc(100vh-150px)] min-h-0 flex-col gap-1 overflow-auto overflow-x-hidden">
+    <div class="flex min-h-0 flex-1 flex-col gap-1 overflow-auto overflow-x-hidden">
       {#if hasNip29($relay)}
         <SecondaryNavItem {replaceState} href={makeSpacePath(url, "recent")}>
           <Icon icon={History} /> Recent Activity
@@ -252,14 +254,14 @@
       {/if}
       {#if hasNip29($relay)}
         {#if $userRooms.length > 0}
-          <div class="h-2"></div>
+          <div class="h-2 flex-shrink-0"></div>
           <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
         {/if}
-        {#each $userRooms as h, i (h)}
+        {#each $userRooms as h (h)}
           <SpaceMenuRoomItem notify {replaceState} {url} {h} />
         {/each}
         {#if $otherRooms.length > 0}
-          <div class="h-2"></div>
+          <div class="h-2 flex-shrink-0"></div>
           <SecondaryNavHeader>
             {#if $userRooms.length > 0}
               Other Rooms
@@ -274,9 +276,16 @@
             <input bind:value={term} onblur={clearTerm} class="grow" />
           </label>
         {/if}
-        {#each $roomSearch.searchValues(term) as h, i (h)}
+        {#each $roomSearch.searchValues(term) as h (h)}
           <SpaceMenuRoomItem {replaceState} {url} {h} />
         {/each}
+        {#if $otherVoiceRooms.length > 0}
+          <div class="h-2 flex-shrink-0"></div>
+          <SecondaryNavHeader>Voice Rooms</SecondaryNavHeader>
+          {#each $otherVoiceRooms as h (h)}
+            <SpaceMenuRoomItem {replaceState} {url} {h} />
+          {/each}
+        {/if}
         {#if $canCreateRoom}
           <SecondaryNavItem {replaceState} onclick={addRoom}>
             <Icon icon={AddCircle} />
@@ -284,9 +293,12 @@
           </SecondaryNavItem>
         {/if}
       {/if}
+      <div class="h-5 flex-shrink-0"></div>
     </div>
   </SecondaryNavSection>
-  <div class="flex flex-col gap-2 pb-2 p-4 pt-0">
+  <div
+    class="flex flex-shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-[calc(var(--saib)+3rem)] sm:pb-2 z-nav">
+    <VoiceWidget />
     <Button class="btn btn-neutral btn-sm h-10" onclick={showDetail}>
       <SocketStatusIndicator {url} />
     </Button>

src/app/components/SpaceMenuRoomItem.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-  import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
-  import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
+  import BellOff from "@assets/icons/bell-off.svg?dataurl"
   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 {deriveShouldNotify} from "@app/core/state"
 
   interface Props {
     url: any
@@ -17,18 +18,24 @@
 
   const {url, h, notify = false, replaceState = false}: Props = $props()
 
+  const room = deriveRoom(url, h)
+  const roomType = $derived(getRoomType($room))
   const path = makeRoomPath(url, h)
   const shouldNotifyForSpace = deriveShouldNotify(url)
   const shouldNotifyForRoom = deriveShouldNotify(url, h)
   const showDifferenceIcon = $derived($shouldNotifyForRoom !== $shouldNotifyForSpace)
 </script>
 
-<SecondaryNavItem
-  href={path}
-  {replaceState}
-  notification={notify ? $notifications.has(path) : false}>
-  <RoomNameWithImage {url} {h} />
-  {#if showDifferenceIcon}
-    <Icon icon={$shouldNotifyForRoom ? VolumeLoud : VolumeCross} size={4} class="opacity-50" />
-  {/if}
-</SecondaryNavItem>
+{#if roomType === RoomType.Voice}
+  <VoiceRoomItem {url} {h} {replaceState} />
+{: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

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import cx from "classnames"
+  import {loadProfile, displayProfileByPubkey} from "@welshman/app"
+  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 {makeRoomPath} from "@app/util/routes"
+  import {
+    deriveVoiceParticipants,
+    joinVoiceRoom,
+    cancelJoinVoiceRoom,
+    currentVoiceRoom,
+    voiceState,
+    isParticipantSpeaking,
+    participantKey,
+    type VoiceParticipant,
+  } from "@app/voice"
+
+  interface Props {
+    url: string
+    h: string
+    replaceState?: boolean
+  }
+
+  const {url, h, replaceState = false}: Props = $props()
+
+  const participants = deriveVoiceParticipants(url, h)
+  const isActive = $derived(
+    $voiceState === "connected" && $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h,
+  )
+  const isJoining = $derived(
+    $voiceState === "joining" && $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h,
+  )
+
+  const handleClick = async () => {
+    if (isActive) return
+
+    if (isJoining) {
+      cancelJoinVoiceRoom()
+      return
+    }
+
+    try {
+      await joinVoiceRoom(url, h)
+    } catch (e) {
+      console.error("Failed to join voice room", e)
+      pushToast({theme: "error", message: "Failed to join voice room"})
+    }
+  }
+
+  $effect(() => {
+    for (const p of $participants) {
+      if (p.pubkey) loadProfile(p.pubkey)
+    }
+  })
+</script>
+
+<SecondaryNavItem
+  href={makeRoomPath(url, h)}
+  {replaceState}
+  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 isJoining}
+        <span class="loading loading-spinner loading-sm"></span>
+      {:else}
+        <RoomImage {url} {h} size={4} />
+      {/if}
+      <RoomName {url} {h} />
+    </div>
+    {#if $participants.length > 0}
+      {#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 && $isParticipantSpeaking(p) && "ring-2 ring-success",
+            )}>
+            <ProfileCircle pubkey={p.pubkey} size={5} class="h-5 w-5" />
+          </div>
+          <span class="ellipsize text-xs opacity-70">
+            {p.pubkey ? displayProfileByPubkey(p.pubkey) : "Unknown"}
+          </span>
+        </div>
+      {/each}
+    {/if}
+  </div>
+</SecondaryNavItem>

src/app/components/VoiceWidget.svelte

@@ -0,0 +1,79 @@
+<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}