chore: show call participant mute and camera-off state

src/app/call/stores.ts

@@ -6,13 +6,11 @@ export type VoiceSession = {
   url: string
   h: string
   room: LiveKitRoom
+  muted: boolean
   cameraOn: boolean
   screenShareOn: boolean
 }
 
-/** Mic mute state is separate so toggling it does not re-render video tiles. */
-export const voiceMicMuted = writable(true)
-
 export type Pubkey = string
 
 export type VoiceParticipant = {pubkey?: Pubkey; identity: string}
@@ -43,6 +41,21 @@ export const participantKey = (p: VoiceParticipant) => p.pubkey ?? p.identity
 
 export const speakingParticipants = writable<VoiceParticipant[]>([])
 
+export const participantMediaState = writable<Map<string, {muted: boolean; cameraOn: boolean}>>(
+  new Map(),
+)
+
+export const mediaStateByIdentity = derived(
+  [participantMediaState, currentVoiceSession],
+  ([$media, $session]) =>
+    (identity: string) => {
+      if ($session?.room.localParticipant.identity === identity) {
+        return {muted: $session.muted, cameraOn: $session.cameraOn}
+      }
+      return $media.get(identity) ?? {muted: true, cameraOn: false}
+    },
+)
+
 export const isParticipantSpeaking = derived(
   speakingParticipants,
   $participants => (p: VoiceParticipant) =>

src/app/call/voice.ts

@@ -6,14 +6,16 @@ import {
   DisconnectReason,
   LocalParticipant,
   LocalTrackPublication,
+  Participant,
   Room as LiveKitRoom,
   RoomEvent,
   Track,
+  TrackPublication,
   supportsAudioOutputSelection,
   type AudioCaptureOptions,
 } from "livekit-client"
 import {derived, get} from "svelte/store"
-import {map, not, removeUndefined, uniqBy} from "@welshman/lib"
+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"
@@ -22,9 +24,9 @@ import {AbortError, whenAborted, whenTimeout} from "$lib/util"
 import {
   currentVoiceRoom,
   currentVoiceSession,
-  voiceMicMuted,
   participantFromLiveKitIdentity,
   participantKey,
+  participantMediaState,
   participantPubkeyMap,
   pubkeyFromLiveKitIdentity,
   speakingParticipants,
@@ -90,6 +92,27 @@ const deleteParticipant = (identity: string) => {
     next.delete(identity)
     return next
   })
+  participantMediaState.update(m => {
+    if (!m.has(identity)) return m
+    const next = new Map(m)
+    next.delete(identity)
+    return next
+  })
+}
+
+const syncParticipantMedia = (participant: Participant) => {
+  const state = {muted: !participant.isMicrophoneEnabled, cameraOn: participant.isCameraEnabled}
+  participantMediaState.update(m => {
+    const prev = m.get(participant.identity)
+    if (prev?.muted === state.muted && prev?.cameraOn === state.cameraOn) return m
+    const next = new Map(m)
+    next.set(participant.identity, state)
+    return next
+  })
+}
+
+const onParticipantMediaChanged = (_publication: TrackPublication, participant: Participant) => {
+  syncParticipantMedia(participant)
 }
 
 const fetchLivekitToken = async (
@@ -174,7 +197,6 @@ const setUpMicrophone = async (
 
 const onRoomDisconnected = (reason?: DisconnectReason) => {
   videoPrimaryTileKey.set(undefined)
-  voiceMicMuted.set(true)
   currentVoiceSession.set(undefined)
   resetVideoCallLayout()
   if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
@@ -187,6 +209,7 @@ const onRoomDisconnected = (reason?: DisconnectReason) => {
   }
   speakingParticipants.set([])
   participantPubkeyMap.set(new Map())
+  participantMediaState.set(new Map())
 }
 
 const onTrackSubscribed = (track: Track) => {
@@ -216,8 +239,9 @@ const playJoinSound = () => {
   audio.play().catch(() => {})
 }
 
-const onParticipantConnected = (participant: {identity: string}) => {
+const onParticipantConnected = (participant: Participant) => {
   addParticipant(participant.identity)
+  syncParticipantMedia(participant)
   playJoinSound()
 }
 
@@ -275,6 +299,11 @@ export const joinVoiceRoom = async (
     liveKitRoom.on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
     liveKitRoom.on(RoomEvent.LocalTrackUnpublished, onLocalTrackUnpublished)
     liveKitRoom.on(RoomEvent.ActiveSpeakersChanged, onActiveSpeakersChanged)
+    liveKitRoom.on(RoomEvent.TrackMuted, onParticipantMediaChanged)
+    liveKitRoom.on(RoomEvent.TrackUnmuted, onParticipantMediaChanged)
+    liveKitRoom.on(RoomEvent.TrackPublished, onParticipantMediaChanged)
+    liveKitRoom.on(RoomEvent.TrackUnpublished, onParticipantMediaChanged)
+    liveKitRoom.on(RoomEvent.LocalTrackPublished, onParticipantMediaChanged)
 
     try {
       await Promise.race([
@@ -290,18 +319,21 @@ export const joinVoiceRoom = async (
     }
 
     participantPubkeyMap.set(new Map())
+    participantMediaState.set(new Map())
     addParticipant(liveKitRoom.localParticipant.identity)
+    syncParticipantMedia(liveKitRoom.localParticipant)
     for (const p of liveKitRoom.remoteParticipants.values()) {
       addParticipant(p.identity)
+      syncParticipantMedia(p)
     }
 
     const muted = await setUpMicrophone(startMuted, preferredMicId, liveKitRoom.localParticipant)
 
-    voiceMicMuted.set(muted)
     currentVoiceSession.set({
       url,
       h,
       room: liveKitRoom,
+      muted,
       cameraOn: false,
       screenShareOn: false,
     })
@@ -341,12 +373,12 @@ export const leaveVoiceRoom = async () => {
 
   voiceState.set(VoiceState.Disconnected)
   videoPrimaryTileKey.set(undefined)
-  voiceMicMuted.set(true)
   currentVoiceSession.set(undefined)
   resetVideoCallLayout()
   session.room.disconnect()
   speakingParticipants.set([])
   participantPubkeyMap.set(new Map())
+  participantMediaState.set(new Map())
 }
 
 export const rejoinVoiceRoom = async (): Promise<void> => {
@@ -359,17 +391,18 @@ export const toggleMute = async () => {
   const session = get(currentVoiceSession)
   if (!session) return
 
-  voiceMicMuted.update(not)
-  if (get(voiceMicMuted)) {
+  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) {
-    voiceMicMuted.set(true)
     pushToast({theme: "error", message: "Could not access microphone"})
   }
 }

src/app/components/RoomNameWithImage.svelte

@@ -11,7 +11,11 @@
   const {url, h, ...props}: Props = $props()
 </script>
 
-<div class="flex min-w-0 items-center gap-2 {props.class}">
-  <RoomImage {url} {h} />
-  <RoomName {url} {h} />
+<div class="flex grow items-center justify-between gap-4 {props.class}">
+  <div class="flex items-center gap-2">
+    <RoomImage {url} {h} />
+    <div class="min-w-0 overflow-hidden text-ellipsis">
+      <RoomName {url} {h} />
+    </div>
+  </div>
 </div>

src/app/components/SpaceBar.svelte

@@ -23,20 +23,20 @@
 </script>
 
 <PageBar {...props}>
-  <div class="flex min-w-0 flex-1 items-center gap-1">
-    <Button onclick={back} class="btn btn-ghost btn-square shrink-0 md:hidden">
-      <Icon icon={ArrowLeft} size={6} />
+  <div class="flex">
+    <Button onclick={back} class="place-self-start pr-3 md:hidden">
+      <Icon icon={ArrowLeft} size={7} />
     </Button>
-    <div class="flex min-w-0 flex-1 items-center justify-between gap-2">
-      <div class="flex min-w-0 flex-col gap-0.5">
-        <div class="flex min-w-0 items-center gap-2">
+    <div class="ellipsize whitespace-nowrap flex grow items-center justify-between gap-4">
+      <div class="flex flex-col">
+        <div class="flex gap-2 items-center">
           {@render title?.()}
         </div>
-        <div class="truncate text-xs leading-4 text-primary md:hidden">
+        <div class="text-xs text-primary md:hidden">
           {displayRelayUrl(url)}
         </div>
       </div>
-      <div class="flex shrink-0 items-center gap-1">
+      <div class="flex gap-2 items-start">
         {@render action?.()}
       </div>
     </div>

src/app/components/VideoCallContent.svelte

@@ -8,6 +8,7 @@
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import VideoCallTile from "@app/components/VideoCallTile.svelte"
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
+  import VoiceParticipantMediaBadges from "@app/components/VoiceParticipantMediaBadges.svelte"
   import {get} from "svelte/store"
   import {
     VideoCallLayout,
@@ -18,7 +19,12 @@
     ViewportSize,
     videoPrimaryTileKey,
   } from "@app/call/video"
-  import {currentVoiceSession, currentVoiceRoom, pubkeyFromLiveKitIdentity} from "@app/call/stores"
+  import {
+    currentVoiceSession,
+    currentVoiceRoom,
+    mediaStateByIdentity,
+    pubkeyFromLiveKitIdentity,
+  } from "@app/call/stores"
 
   type Props = {
     layout: VideoCallLayout
@@ -123,6 +129,28 @@
       }
     }
 
+    const tiledIdentities = new Set(videoTiles.map(t => t.identity))
+    if (!tiledIdentities.has(user.identity)) {
+      videoTiles.push({
+        identity: user.identity,
+        isLocal: true,
+        trackSid: "local-avatar",
+        track: undefined,
+        source: Track.Source.Camera,
+      })
+    }
+    for (const rp of room.remoteParticipants.values()) {
+      if (!tiledIdentities.has(rp.identity)) {
+        videoTiles.push({
+          identity: rp.identity,
+          isLocal: false,
+          trackSid: `avatar-${rp.identity}`,
+          track: undefined,
+          source: Track.Source.Camera,
+        })
+      }
+    }
+
     return videoTiles
   })
 
@@ -144,9 +172,6 @@
 
   const useSpotlightLayout = $derived(primaryTile !== undefined)
   const useMultiGrid = $derived(!useSpotlightLayout && videoTiles.length > 2)
-  const multiGridClass = $derived(
-    layout === VideoCallLayout.Split ? "grid-cols-1" : "grid-cols-1 sm:grid-cols-2",
-  )
 
   $effect(() => {
     const k = $videoPrimaryTileKey
@@ -187,6 +212,7 @@
 </script>
 
 {#snippet videoTile(tile: VideoTileData, layout: TileLayout)}
+  {@const media = $mediaStateByIdentity(tile.identity)}
   <div
     class={cx(
       "relative isolate overflow-hidden rounded-box shadow-sm",
@@ -206,6 +232,15 @@
         <ProfileCircle pubkey={pubkeyFromLiveKitIdentity(tile.identity)} {url} size={14} />
       </div>
     {/if}
+    {#if tile.track}
+      <div class="pointer-events-none absolute left-1 top-1 z-10">
+        <VoiceParticipantMediaBadges
+          muted={media.muted}
+          cameraOn={media.cameraOn}
+          showCamera={tile.source === Track.Source.Camera}
+          size={3} />
+      </div>
+    {/if}
     <span
       class="pointer-events-none absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded bg-base-100/80 px-1.5 py-0.5 text-xs">
       {labelFor(tile.identity, tile.source)}{tile.isLocal ? " (you)" : ""}
@@ -241,7 +276,8 @@
         {/if}
       </div>
     {:else if useMultiGrid}
-      <div class={cx("grid min-h-0 flex-1 content-start gap-2 overflow-y-auto", multiGridClass)}>
+      <div
+        class="grid min-h-0 flex-1 grid-cols-1 content-start gap-2 overflow-y-auto sm:grid-cols-2">
         {#each videoTiles as tile (tileKey(tile))}
           {@render videoTile(tile, "default")}
         {/each}
@@ -256,8 +292,10 @@
   {:else}
     <div
       class="flex min-h-[12rem] flex-1 flex-col items-center justify-center gap-2 rounded-box bg-base-200/50 p-4 text-center text-sm opacity-80">
-      <p>No camera or screen share yet.</p>
-      <p class="text-xs">Use the camera or screen share control to share video.</p>
+      <p>No one is sharing video yet.</p>
+      <p class="text-xs">
+        Participants appear here when they turn on their camera or share their screen.
+      </p>
     </div>
   {/if}
 {/snippet}

src/app/components/VoiceParticipantMediaBadges.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import cx from "classnames"
+  import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
+  import VideocameraOff from "@assets/icons/videocamera-off.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+
+  type Props = {
+    muted: boolean
+    cameraOn: boolean
+    showCamera?: boolean
+    size?: number
+    class?: string
+  }
+
+  const {muted, cameraOn, showCamera = true, size = 3, class: className = ""}: Props = $props()
+
+  const badgeClass =
+    "inline-flex size-4 shrink-0 items-center justify-center rounded bg-base-100/80 p-0.5 text-error"
+</script>
+
+{#if muted || (showCamera && !cameraOn)}
+  <div class={cx("flex items-center gap-1", className)}>
+    {#if muted}
+      <span class={badgeClass} aria-label="Muted">
+        <Icon icon={MicrophoneOff} {size} />
+      </span>
+    {/if}
+    {#if showCamera && !cameraOn}
+      <span class={badgeClass} aria-label="Camera off">
+        <Icon icon={VideocameraOff} {size} />
+      </span>
+    {/if}
+  </div>
+{/if}

src/app/components/VoiceRoomItem.svelte

@@ -9,11 +9,13 @@
   import {makeRoomPath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
   import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
+  import VoiceParticipantMediaBadges from "@app/components/VoiceParticipantMediaBadges.svelte"
   import {makeRoomId} from "@app/core/state"
   import {
     VoiceState,
     currentVoiceRoom,
     isParticipantSpeaking,
+    mediaStateByIdentity,
     participantKey,
     voiceState,
     type VoiceParticipant,
@@ -83,9 +85,17 @@
             )}>
             <ProfileCircle pubkey={p.pubkey} size={5} class="h-5 w-5" />
           </div>
-          <span class="ellipsize text-xs opacity-70">
+          <span class="ellipsize min-w-0 flex-1 text-xs opacity-70">
             {p.pubkey ? displayProfileByPubkey(p.pubkey) : "Unknown"}
           </span>
+          {#if isActive}
+            {@const media = $mediaStateByIdentity(p.identity)}
+            <VoiceParticipantMediaBadges
+              muted={media.muted}
+              cameraOn={media.cameraOn}
+              size={3}
+              class="shrink-0" />
+          {/if}
         </div>
       {/each}
     {/if}

src/app/components/VoiceWidget.svelte

@@ -6,7 +6,8 @@
   import cx from "classnames"
   import {displayRelayUrl} from "@welshman/util"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
-  import Videocamera from "@assets/icons/videocamera.svg?dataurl"
+  import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
+  import VideocameraOff from "@assets/icons/videocamera-off.svg?dataurl"
   import VideocameraRecord from "@assets/icons/videocamera-record.svg?dataurl"
   import Monitor from "@assets/icons/monitor.svg?dataurl"
   import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
@@ -37,14 +38,7 @@
     toggleScreenShare,
     videoCallLayout,
   } from "@app/call/video"
-  import {
-    VoiceState,
-    currentVoiceSession,
-    currentVoiceRoom,
-    voiceMicMuted,
-    voiceState,
-    isLocalSpeaking,
-  } from "@app/call/stores"
+  import {VoiceState, currentVoiceSession, currentVoiceRoom, voiceState} from "@app/call/stores"
   import {cancelJoinVoiceRoom, leaveVoiceRoom, toggleMute} from "@app/call/voice"
 
   const {relay, h} = $derived($page.params)
@@ -184,32 +178,30 @@
         </Button>
       {:else if $voiceState === VoiceState.Connected && $currentVoiceSession}
         <Button
-          data-tip={$voiceMicMuted ? "Unmute" : "Mute"}
+          data-tip={$currentVoiceSession.muted ? "Unmute" : "Mute"}
           class={cx(
             mediaToggleClass,
             "overflow-visible",
-            !$voiceMicMuted && $isLocalSpeaking && "text-primary",
-            $voiceMicMuted && "text-error ring-1 ring-error/50 ring-offset-0 ring-offset-base-100",
+            !$currentVoiceSession.muted && "text-primary",
+            $currentVoiceSession.muted &&
+              "text-error ring-1 ring-error/50 ring-offset-0 ring-offset-base-100",
           )}
           onclick={toggleMute}>
-          <span class="relative inline-flex items-center justify-center overflow-visible">
-            <Icon icon={Microphone} size={4} />
-            {#if $voiceMicMuted}
-              <span
-                class="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
-                aria-hidden="true">
-                <span
-                  class="h-[1.3px] w-[150%] max-w-none shrink-0 -rotate-45 rounded-full bg-current"
-                ></span>
-              </span>
-            {/if}
-          </span>
+          <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
         </Button>
         <Button
           data-tip={$currentVoiceSession.cameraOn ? "Turn off camera" : "Turn on camera"}
-          class={cx(mediaToggleClass, $currentVoiceSession.cameraOn && "text-primary")}
+          class={cx(
+            mediaToggleClass,
+            "overflow-visible",
+            $currentVoiceSession.cameraOn && "text-primary",
+            !$currentVoiceSession.cameraOn &&
+              "text-error ring-1 ring-error/50 ring-offset-0 ring-offset-base-100",
+          )}
           onclick={toggleCamera}>
-          <Icon icon={$currentVoiceSession.cameraOn ? VideocameraRecord : Videocamera} size={4} />
+          <Icon
+            icon={$currentVoiceSession.cameraOn ? VideocameraRecord : VideocameraOff}
+            size={4} />
         </Button>
         {#if !Capacitor.isNativePlatform()}
           <Button

src/assets/icons/videocamera-off.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 11.5C2 8.21252 2 6.56878 2.90796 5.46243C3.07418 5.25989 3.25989 5.07418 3.46243 4.90796C4.56878 4 6.21252 4 9.5 4C12.7875 4 14.4312 4 15.5376 4.90796C15.7401 5.07418 15.9258 5.25989 16.092 5.46243C17 6.56878 17 8.21252 17 11.5V12.5C17 15.7875 17 17.4312 16.092 18.5376C15.9258 18.7401 15.7401 18.9258 15.5376 19.092C14.4312 20 12.7875 20 9.5 20C6.21252 20 4.56878 20 3.46243 19.092C3.25989 18.9258 3.07418 18.7401 2.90796 18.5376C2 17.4312 2 15.7875 2 12.5V11.5Z" stroke="#000000" stroke-width="1.5"/>
+<path d="M17 9.50019L17.6584 9.17101C19.6042 8.19807 20.5772 7.7116 21.2886 8.15127C22 8.59094 22 9.67872 22 11.8543V12.1461C22 14.3217 22 15.4094 21.2886 15.8491C20.5772 16.2888 19.6042 15.8023 17.6584 14.8294L17 14.5002V9.50019Z" stroke="#000000" stroke-width="1.5"/>
+<path d="M22 2L2 22" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/lib/components/PageBar.svelte

@@ -9,11 +9,8 @@
   const {children, ...props}: Props = $props()
 </script>
 
-<div
-  data-component="PageBar"
-  class="relative z-nav -mx-sai -mt-sai shrink-0 md:mx-0 md:-mb-4 md:mt-0 md:p-2 {props.class}">
-  <div
-    class="border-base-300 bg-base-100 flex min-h-[calc(4rem+var(--sait))] items-center border-b px-4 pb-2 pt-sai md:h-12 md:min-h-0 md:rounded-xl md:border-0 md:p-4 md:shadow-md">
+<div data-component="PageBar" class="relative z-nav p-2 -mb-4 {props.class}">
+  <div class="rounded-xl bg-base-100 p-4 shadow-md h-20 md:h-12 flex flex-col justify-center">
     {@render children?.()}
   </div>
 </div>

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -24,9 +24,9 @@
   import SpaceBar from "@app/components/SpaceBar.svelte"
   import RoomCompose from "@app/components/RoomCompose.svelte"
   import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
+  import RoomImage from "@app/components/RoomImage.svelte"
   import RoomDetail from "@app/components/RoomDetail.svelte"
   import RoomItem from "@app/components/RoomItem.svelte"
-  import RoomImage from "@app/components/RoomImage.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import SpaceSearch from "@app/components/SpaceSearch.svelte"
   import ThunkToast from "@app/components/ThunkToast.svelte"
@@ -468,7 +468,7 @@
       bind:element
       onscroll={onScroll}
       class={cx(
-        "flex-col-reverse pb-0! pt-2 md:pt-4",
+        "flex-col-reverse pb-0! pt-4",
         showMobileVideoPanel ? "hidden md:flex md:flex-col-reverse" : "flex",
         pageContentHiddenDesktopVideoOnly && "md:hidden",
       )}>

src/routes/spaces/[relay]/chat/+page.svelte

@@ -316,7 +316,7 @@
   {/snippet}
 </SpaceBar>
 
-<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-2 pb-0! md:pt-4">
+<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4 pb-0!">
   {#if loadingForward}
     <p class="py-20 flex justify-center">
       <Spinner loading={loadingForward}>Looking for messages...</Spinner>