Drop camera settings from join room dialog

Resolve VoiceWidget conflict: keep camera, screen share, and call settings.
Extend join flow with optional camera on join and device picker.
Add camera to in-call settings; rename UI to Call settings.

Made-with: Cursor

ios/App/App.xcodeproj/project.pbxproj

@@ -392,7 +392,7 @@
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.7.2;
+				MARKETING_VERSION = 1.7.5;
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";

src/app.css

@@ -394,6 +394,35 @@ progress[value]::-webkit-progress-value {
   @apply w-full md:left-[18.5rem] md:w-[calc(100%-18.5rem-var(--sair))];
 }
 
+.cw-video-call-content {
+  @apply w-full md:left-[calc(18.5rem+18rem)] md:w-[calc(100%-18.5rem-18rem-var(--sair))];
+}
+
+/* Voice: desktop split — plain CSS so / in calc is not parsed as Tailwind slash syntax */
+.cw-split-video {
+  width: 100%;
+}
+
+.cw-split-chat {
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .cw-split-video {
+    left: 18.5rem;
+    right: auto;
+    width: calc((100vw - 18.5rem - var(--sair)) / 2);
+    max-width: none;
+  }
+
+  .cw-split-chat {
+    left: calc(18.5rem + (100vw - 18.5rem - var(--sair)) / 2);
+    right: auto;
+    width: calc((100vw - 18.5rem - var(--sair)) / 2);
+    max-width: none;
+  }
+}
+
 .cw-full {
   @apply w-full md:left-[4rem] md:w-[calc(100%-4rem-var(--sair))];
 }
@@ -430,6 +459,19 @@ body.keyboard-open .hide-on-keyboard {
   @apply min-w-0;
 }
 
+.chat__compose-zone.cw-video-call-content {
+  @apply md:left-[calc(18.5rem+18rem)] md:w-[calc(100%-18.5rem-18rem-var(--sair))];
+}
+
+@media (min-width: 768px) {
+  .chat__compose-zone.cw-split-chat {
+    left: calc(18.5rem + (100vw - 18.5rem - var(--sair)) / 2);
+    right: auto;
+    width: calc((100vw - 18.5rem - var(--sair)) / 2);
+    max-width: none;
+  }
+}
+
 .chat__scroll-down {
   @apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
 }

src/app/components/VideoCallContent.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+  import cx from "classnames"
+  import {Track} from "livekit-client"
+  import {displayProfileByPubkey, loadProfile} from "@welshman/app"
+  import Pin from "@assets/icons/pin.svg?dataurl"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import VideoCallVideo from "@app/components/VideoCallVideo.svelte"
+  import {
+    currentVoiceSession,
+    currentVoiceRoom,
+    videoCallContentActive,
+    videoCallLayoutRevision,
+    videoPrimaryTileKey,
+    toggleVideoPrimaryTile,
+    pubkeyFromLiveKitIdentity,
+  } from "@app/voice"
+
+  type Variant = "mobile" | "desktop-split" | "desktop-full"
+
+  type Props = {
+    variant: Variant
+    url: string
+    h: string
+    visible?: boolean
+    class?: string
+  }
+
+  type Tile = {
+    identity: string
+    isLocal: boolean
+    trackSid: string
+    attachable: Track | undefined
+    source: Track.Source.Camera | Track.Source.ScreenShare
+  }
+
+  type TileLayout = "spotlight" | "default" | "strip"
+
+  const {variant, url, h, visible = true, class: className = ""}: Props = $props()
+
+  const roomMatches = $derived($currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h)
+
+  const allowEmptyPanel = $derived(variant === "desktop-split" || variant === "desktop-full")
+
+  const showPanel = $derived(
+    visible &&
+      roomMatches &&
+      (variant === "mobile" ? $videoCallContentActive : $videoCallContentActive || allowEmptyPanel),
+  )
+
+  const tiles = $derived.by(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- re-run when remote video subscribes
+    $videoCallLayoutRevision
+    const session = $currentVoiceSession
+    if (!session || $currentVoiceRoom?.url !== url || $currentVoiceRoom?.h !== h) {
+      return []
+    }
+
+    const room = session.room
+    const out: Tile[] = []
+    const lp = room.localParticipant
+
+    if (session.cameraOn) {
+      const localPub = lp.getTrackPublication(Track.Source.Camera)
+      out.push({
+        identity: lp.identity,
+        isLocal: true,
+        trackSid: localPub?.trackSid ?? "local-camera",
+        attachable: localPub?.track,
+        source: Track.Source.Camera,
+      })
+    }
+
+    if (session.screenShareOn) {
+      const localPub = lp.getTrackPublication(Track.Source.ScreenShare)
+      out.push({
+        identity: lp.identity,
+        isLocal: true,
+        trackSid: localPub?.trackSid ?? "local-screen",
+        attachable: localPub?.track,
+        source: Track.Source.ScreenShare,
+      })
+    }
+
+    for (const rp of room.remoteParticipants.values()) {
+      const camPub = rp.getTrackPublication(Track.Source.Camera)
+      if (camPub?.isSubscribed && camPub.track) {
+        out.push({
+          identity: rp.identity,
+          isLocal: false,
+          trackSid: camPub.trackSid,
+          attachable: camPub.track,
+          source: Track.Source.Camera,
+        })
+      }
+      const screenPub = rp.getTrackPublication(Track.Source.ScreenShare)
+      if (screenPub?.isSubscribed && screenPub.track) {
+        out.push({
+          identity: rp.identity,
+          isLocal: false,
+          trackSid: screenPub.trackSid,
+          attachable: screenPub.track,
+          source: Track.Source.ScreenShare,
+        })
+      }
+    }
+
+    return out
+  })
+
+  /** Identity + source only — LiveKit can change trackSid after publish, which broke spotlight + stale-key effect. */
+  const tileKey = (t: Tile) => `${t.identity}\x1f${t.source}`
+
+  const primaryTile = $derived.by(() => {
+    const k = $videoPrimaryTileKey
+    if (k === undefined) return undefined
+    return tiles.find(t => tileKey(t) === k)
+  })
+
+  const secondaryTiles = $derived.by(() => {
+    const p = primaryTile
+    if (p === undefined) return tiles
+    const pk = tileKey(p)
+    return tiles.filter(t => tileKey(t) !== pk)
+  })
+
+  const useSpotlightLayout = $derived(primaryTile !== undefined)
+  const useMultiGrid = $derived(!useSpotlightLayout && tiles.length > 2)
+
+  $effect(() => {
+    const k = $videoPrimaryTileKey
+    if (k === undefined) return
+    if (!tiles.some(t => tileKey(t) === k)) {
+      videoPrimaryTileKey.set(undefined)
+    }
+  })
+
+  $effect(() => {
+    for (const t of tiles) {
+      const pk = pubkeyFromLiveKitIdentity(t.identity)
+      if (pk) loadProfile(pk)
+    }
+  })
+
+  const labelFor = (identity: string, source: Tile["source"]) => {
+    const pk = pubkeyFromLiveKitIdentity(identity)
+    const name = pk ? displayProfileByPubkey(pk) : "Unknown"
+    return source === Track.Source.ScreenShare ? `${name} · screen` : name
+  }
+
+  const showTileGrid = $derived(tiles.length > 0)
+
+  const spotlightHandlerFor = (key: string) => () => {
+    toggleVideoPrimaryTile(key)
+  }
+
+  const panelChrome = $derived(
+    cx(
+      variant === "mobile" &&
+        "cb ct cw z-compose bg-base-300/95 fixed inset-x-0 flex min-h-0 flex-col gap-2 overflow-hidden p-2 md:hidden",
+      variant === "desktop-split" &&
+        "cb ct cw-split-video z-compose bg-base-300/95 fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
+      variant === "desktop-full" &&
+        "cb ct cw z-compose bg-base-300/95 fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
+      className,
+    ),
+  )
+</script>
+
+{#snippet videoTile(tile: Tile, layout: TileLayout)}
+  <div
+    class={cx(
+      "relative isolate overflow-hidden rounded-box shadow-sm",
+      layout === "spotlight" && "min-h-0 flex-1",
+      layout === "default" && "aspect-video w-full min-h-0",
+      layout === "strip" && "aspect-video w-44 shrink-0",
+      tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-base-100",
+      $videoPrimaryTileKey === tileKey(tile) &&
+        "ring-2 ring-primary ring-offset-2 ring-offset-base-300",
+    )}>
+    {#if tile.attachable}
+      <VideoCallVideo
+        track={tile.attachable}
+        muted={tile.isLocal}
+        fit={tile.source === Track.Source.ScreenShare ? "contain" : "cover"}
+        class="pointer-events-none absolute inset-0" />
+    {:else}
+      <div class="absolute inset-0 flex items-center justify-center">
+        <ProfileCircle pubkey={pubkeyFromLiveKitIdentity(tile.identity)} {url} size={14} />
+      </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)" : ""}
+    </span>
+    {#if tiles.length > 1}
+      <Button
+        data-tip={$videoPrimaryTileKey === tileKey(tile) ? "Exit spotlight" : "Spotlight"}
+        class="absolute right-1 top-1 z-20 btn btn-xs btn-circle btn-ghost bg-base-100/70"
+        onclick={spotlightHandlerFor(tileKey(tile))}>
+        <Icon icon={Pin} size={3} />
+      </Button>
+    {/if}
+  </div>
+{/snippet}
+
+{#if showPanel && (showTileGrid || allowEmptyPanel)}
+  <div class={panelChrome}>
+    {#if showTileGrid}
+      {#if useSpotlightLayout && primaryTile}
+        <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden">
+          {@render videoTile(primaryTile, "spotlight")}
+          {#if secondaryTiles.length > 0}
+            <div
+              class="flex max-h-40 shrink-0 flex-row gap-2 overflow-x-auto overflow-y-hidden py-0.5">
+              {#each secondaryTiles as tile (tileKey(tile))}
+                {@render videoTile(tile, "strip")}
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {:else if useMultiGrid}
+        <div
+          class="grid min-h-0 flex-1 grid-cols-1 content-start gap-2 overflow-y-auto sm:grid-cols-2">
+          {#each tiles as tile (tileKey(tile))}
+            {@render videoTile(tile, "default")}
+          {/each}
+        </div>
+      {:else}
+        <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
+          {#each tiles as tile (tileKey(tile))}
+            {@render videoTile(tile, "default")}
+          {/each}
+        </div>
+      {/if}
+    {:else}
+      <div
+        class="flex min-h-[12rem] flex-1 flex-col items-center justify-center gap-2 rounded-box bg-base-100/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 in the voice widget to share video.
+        </p>
+      </div>
+    {/if}
+  </div>
+{/if}

src/app/components/VideoCallVideo.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type {Track} from "livekit-client"
+  import cx from "classnames"
+
+  type Props = {
+    track: Track
+    muted?: boolean
+    fit?: "cover" | "contain"
+    class?: string
+  }
+
+  const {track, muted = true, fit = "cover", class: className = ""}: Props = $props()
+
+  let el = $state<HTMLVideoElement | undefined>()
+
+  $effect(() => {
+    const v = el
+    const t = track
+    if (!v) return
+    t.attach(v)
+    return () => {
+      t.detach(v)
+    }
+  })
+</script>
+
+<video
+  bind:this={el}
+  class={cx("h-full w-full", fit === "contain" ? "object-contain" : "object-cover", className)}
+  playsinline
+  {muted}></video>

src/app/components/VoiceCallAudioSettingsDialog.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+  import Button from "@lib/components/Button.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import {
+    currentVoiceSession,
+    DeviceKind,
+    supportsAudioOutputSelection,
+    switchVoiceActiveDevice,
+    type VoiceSession,
+  } from "@app/voice"
+  import {popModal} from "@app/util/modal"
+
+  const selectValueForActiveDevice = (session: VoiceSession, kind: DeviceKind): string => {
+    const livekitDeviceId = session.room.getActiveDevice(kind)
+    if (livekitDeviceId === undefined || livekitDeviceId === "" || livekitDeviceId === "default") {
+      return ""
+    }
+    return livekitDeviceId
+  }
+
+  let audioInputs = $state<MediaDeviceInfo[]>([])
+  let audioOutputs = $state<MediaDeviceInfo[]>([])
+  let videoInputs = $state<MediaDeviceInfo[]>([])
+  let selectedInput = $state("")
+  let selectedOutput = $state("")
+  let selectedVideo = $state("")
+
+  const loadDevices = async () => {
+    if (!navigator.mediaDevices?.enumerateDevices) return
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices()
+      audioInputs = devices.filter(d => d.kind === "audioinput")
+      audioOutputs = devices.filter(d => d.kind === "audiooutput")
+      videoInputs = devices.filter(d => d.kind === "videoinput")
+    } catch {
+      audioInputs = []
+      audioOutputs = []
+      videoInputs = []
+    }
+  }
+
+  $effect(() => {
+    void loadDevices()
+    const md = navigator.mediaDevices
+    if (!md?.addEventListener) return
+    const onDeviceChange = () => {
+      void loadDevices()
+    }
+    md.addEventListener("devicechange", onDeviceChange)
+    return () => {
+      md.removeEventListener("devicechange", onDeviceChange)
+    }
+  })
+
+  $effect(() => {
+    const session = $currentVoiceSession
+    if (!session) {
+      popModal()
+      return
+    }
+    selectedInput = selectValueForActiveDevice(session, DeviceKind.AudioInput)
+    selectedOutput = selectValueForActiveDevice(session, DeviceKind.AudioOutput)
+    selectedVideo = selectValueForActiveDevice(session, DeviceKind.VideoInput)
+  })
+
+  const onInputChange = () => {
+    void switchVoiceActiveDevice(DeviceKind.AudioInput, selectedInput)
+  }
+
+  const onOutputChange = () => {
+    void switchVoiceActiveDevice(DeviceKind.AudioOutput, selectedOutput)
+  }
+
+  const onVideoChange = () => {
+    void switchVoiceActiveDevice(DeviceKind.VideoInput, selectedVideo)
+  }
+
+  const onDone = () => {
+    popModal()
+  }
+
+  const canPickOutput = supportsAudioOutputSelection()
+</script>
+
+<Modal>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Call settings</ModalTitle>
+    </ModalHeader>
+    <p class="text-sm opacity-80">Microphone, speaker, and camera for this call.</p>
+    <div class="flex flex-col gap-4 pt-2">
+      <FieldInline>
+        {#snippet label()}
+          <p>Microphone</p>
+        {/snippet}
+        {#snippet input()}
+          <select
+            class="select select-bordered w-full"
+            bind:value={selectedInput}
+            onchange={onInputChange}
+            aria-label="Microphone">
+            <option value="">Default microphone</option>
+            {#each audioInputs as d (d.deviceId)}
+              <option value={d.deviceId}>
+                {d.label || `Microphone ${d.deviceId.slice(0, 8)}…`}
+              </option>
+            {/each}
+          </select>
+        {/snippet}
+      </FieldInline>
+      {#if canPickOutput}
+        <FieldInline>
+          {#snippet label()}
+            <p>Speaker</p>
+          {/snippet}
+          {#snippet input()}
+            <select
+              class="select select-bordered w-full"
+              bind:value={selectedOutput}
+              onchange={onOutputChange}
+              aria-label="Speaker">
+              <option value="">Default speaker</option>
+              {#each audioOutputs as d (d.deviceId)}
+                <option value={d.deviceId}>
+                  {d.label || `Speaker ${d.deviceId.slice(0, 8)}…`}
+                </option>
+              {/each}
+            </select>
+          {/snippet}
+        </FieldInline>
+      {/if}
+      <FieldInline>
+        {#snippet label()}
+          <p>Camera</p>
+        {/snippet}
+        {#snippet input()}
+          <select
+            class="select select-bordered w-full"
+            bind:value={selectedVideo}
+            onchange={onVideoChange}
+            aria-label="Camera">
+            <option value="">Default camera</option>
+            {#each videoInputs as d (d.deviceId)}
+              <option value={d.deviceId}>
+                {d.label || `Camera ${d.deviceId.slice(0, 8)}…`}
+              </option>
+            {/each}
+          </select>
+        {/snippet}
+      </FieldInline>
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-primary" onclick={onDone}>Done</Button>
+  </ModalFooter>
+</Modal>

src/app/components/VoiceRoomJoinDialog.svelte

@@ -77,7 +77,7 @@
           type="checkbox"
           class="checkbox"
           bind:checked={startWithoutMic} />
-        <label for="voice-start-without-mic" class="text-sm cursor-pointer">
+        <label for="voice-start-without-mic" class="cursor-pointer text-sm">
           Join without microphone (you can unmute later)
         </label>
       </div>

src/app/components/VoiceWidget.svelte

@@ -6,11 +6,16 @@
   import {displayRelayUrl} from "@welshman/util"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
   import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
+  import Videocamera from "@assets/icons/videocamera.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"
   import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import Settings from "@assets/icons/settings.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import VoiceCallAudioSettingsDialog from "@app/components/VoiceCallAudioSettingsDialog.svelte"
   import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
   import {
     decodeRelay,
@@ -29,6 +34,8 @@
     voiceState,
     leaveVoiceRoom,
     toggleMute,
+    toggleCamera,
+    toggleScreenShare,
     cancelJoinVoiceRoom,
   } from "@app/voice"
 
@@ -63,6 +70,10 @@
     await goto(makeRoomPath(targetRoom.url, targetRoom.h))
     pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h})
   }
+
+  const openAudioSettings = () => {
+    pushModal(VoiceCallAudioSettingsDialog)
+  }
 </script>
 
 {#if targetRoom}
@@ -100,6 +111,28 @@
           onclick={toggleMute}>
           <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
         </Button>
+        <Button
+          data-tip={$currentVoiceSession.cameraOn ? "Turn off camera" : "Turn on camera"}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.cameraOn
+            ? 'btn-ghost'
+            : 'btn-error'}"
+          onclick={toggleCamera}>
+          <Icon icon={$currentVoiceSession.cameraOn ? VideocameraRecord : Videocamera} size={4} />
+        </Button>
+        <Button
+          data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.screenShareOn
+            ? 'btn-ghost'
+            : 'btn-error'}"
+          onclick={toggleScreenShare}>
+          <Icon icon={Monitor} size={4} />
+        </Button>
+        <Button
+          data-tip="Call settings"
+          class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
+          onclick={openAudioSettings}>
+          <Icon icon={Settings} size={4} />
+        </Button>
         <Button
           data-tip="Leave room"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-error"

src/app/voice.ts

@@ -4,11 +4,13 @@
  */
 import {
   DisconnectReason,
+  LocalParticipant,
+  LocalTrackPublication,
   Room as LiveKitRoom,
   RoomEvent,
   Track,
+  supportsAudioOutputSelection,
   type AudioCaptureOptions,
-  type LocalParticipant,
 } from "livekit-client"
 import {derived, get, writable} from "svelte/store"
 import {map, removeUndefined, uniqBy} from "@welshman/lib"
@@ -24,11 +26,15 @@ export const LIVEKIT_PARTICIPANTS = 39004
 
 export {checkRelayHasLivekit} from "$lib/livekit"
 
+export {supportsAudioOutputSelection}
+
 export type VoiceSession = {
   url: string
   h: string
   room: LiveKitRoom
   muted: boolean
+  cameraOn: boolean
+  screenShareOn: boolean
 }
 
 export type Pubkey = string
@@ -43,12 +49,58 @@ export enum VoiceState {
 
 export const currentVoiceSession = writable<VoiceSession | undefined>(undefined)
 
+const LIVEKIT_DEFAULT_DEVICE_ID = "default"
+
+export enum DeviceKind {
+  AudioInput = "audioinput",
+  AudioOutput = "audiooutput",
+  VideoInput = "videoinput",
+}
+
+export const switchVoiceActiveDevice = async (
+  kind: DeviceKind,
+  targetDeviceId: string,
+): Promise<void> => {
+  const session = get(currentVoiceSession)
+  if (!session) return
+  const id = targetDeviceId === "" ? LIVEKIT_DEFAULT_DEVICE_ID : targetDeviceId
+  try {
+    await session.room.switchActiveDevice(kind, id)
+  } catch {
+    let label: string
+    switch (kind) {
+      case DeviceKind.AudioInput:
+        label = "microphone"
+        break
+      case DeviceKind.AudioOutput:
+        label = "speaker"
+        break
+      case DeviceKind.VideoInput:
+        label = "camera"
+        break
+    }
+    pushToast({theme: "error", message: `Error changing ${label}`})
+  }
+}
+
 export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
 
 export const currentVoiceRoom = writable<Room | undefined>(undefined)
 
 export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
 
+/** Bumps when remote video is subscribed/unsubscribed so layout/video UI can react. */
+export const videoCallLayoutRevision = writable(0)
+
+/** Spotlight tile id — must match VideoCallContent `tileKey` (identity + source, not trackSid). */
+export const videoPrimaryTileKey = writable<string | undefined>(undefined)
+
+export const toggleVideoPrimaryTile = (key: string) => {
+  videoPrimaryTileKey.update(k => (k === key ? undefined : key))
+}
+
+const bumpVideoCallLayoutRevision = () => videoCallLayoutRevision.update(n => n + 1)
+
 const addParticipant = (identity: string) => {
   participantPubkeyMap.update(m => {
     const next = new Map(m)
@@ -164,6 +216,8 @@ const setUpMicrophone = async (
 }
 
 const onRoomDisconnected = (reason?: DisconnectReason) => {
+  videoCallLayoutRevision.set(0)
+  videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
   if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
     voiceState.set(VoiceState.Disconnected)
@@ -183,11 +237,16 @@ const onTrackSubscribed = (track: Track) => {
     element.style.display = "none"
     document.body.appendChild(element)
     element.play().catch(() => {})
+  } else if (track.kind === Track.Kind.Video) {
+    bumpVideoCallLayoutRevision()
   }
 }
 
 const onTrackUnsubscribed = (track: Track) => {
   track.detach().forEach(el => el.remove())
+  if (track.kind === Track.Kind.Video) {
+    bumpVideoCallLayoutRevision()
+  }
 }
 
 const onActiveSpeakersChanged = (participants: {identity: string}[]) => {
@@ -208,6 +267,18 @@ const onParticipantDisconnected = (participant: {identity: string}) => {
   deleteParticipant(participant.identity)
 }
 
+const onLocalTrackUnpublished = (
+  publication: LocalTrackPublication,
+  participant: LocalParticipant,
+) => {
+  if (publication.source !== Track.Source.ScreenShare) return
+  const session = get(currentVoiceSession)
+  if (!session || participant.identity !== session.room.localParticipant.identity) return
+  if (!session.screenShareOn) return
+  currentVoiceSession.set({...session, screenShareOn: false})
+  bumpVideoCallLayoutRevision()
+}
+
 let joinAbortController: AbortController | undefined
 
 export const cancelJoinVoiceRoom = () => {
@@ -245,6 +316,7 @@ export const joinVoiceRoom = async (
     liveKitRoom.on(RoomEvent.ParticipantDisconnected, onParticipantDisconnected)
     liveKitRoom.on(RoomEvent.TrackSubscribed, onTrackSubscribed)
     liveKitRoom.on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
+    liveKitRoom.on(RoomEvent.LocalTrackUnpublished, onLocalTrackUnpublished)
     liveKitRoom.on(RoomEvent.ActiveSpeakersChanged, onActiveSpeakersChanged)
 
     try {
@@ -268,7 +340,14 @@ export const joinVoiceRoom = async (
 
     const muted = await setUpMicrophone(startMuted, preferredMicId, liveKitRoom.localParticipant)
 
-    currentVoiceSession.set({url, h, room: liveKitRoom, muted})
+    currentVoiceSession.set({
+      url,
+      h,
+      room: liveKitRoom,
+      muted,
+      cameraOn: false,
+      screenShareOn: false,
+    })
     voiceState.set(VoiceState.Connected)
     playJoinSound()
   } catch (e) {
@@ -287,7 +366,25 @@ export const leaveVoiceRoom = async () => {
   const audio = new Audio("/leave-voice-room.mp3")
   audio.play().catch(() => {})
 
+  if (session.cameraOn) {
+    try {
+      await session.room.localParticipant.setCameraEnabled(false)
+    } catch {
+      /* pass */
+    }
+  }
+
+  if (session.screenShareOn) {
+    try {
+      await session.room.localParticipant.setScreenShareEnabled(false)
+    } catch {
+      /* pass */
+    }
+  }
+
   voiceState.set(VoiceState.Disconnected)
+  videoCallLayoutRevision.set(0)
+  videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
   session.room.disconnect()
   speakingParticipants.set([])
@@ -319,3 +416,96 @@ export const toggleMute = async () => {
     pushToast({theme: "error", message: "Could not access microphone"})
   }
 }
+
+const VISUAL_SOURCES = [Track.Source.Camera, Track.Source.ScreenShare] as const
+
+const roomHasSubscribedRemoteVisual = (room: LiveKitRoom): boolean => {
+  for (const p of room.remoteParticipants.values()) {
+    for (const source of VISUAL_SOURCES) {
+      const pub = p.getTrackPublication(source)
+      if (pub?.isSubscribed && pub.track) return true
+    }
+  }
+  return false
+}
+
+/** True when local camera/screen share is on or any subscribed remote camera/screen track. */
+export const videoCallContentActive = derived(
+  [currentVoiceSession, voiceState, videoCallLayoutRevision],
+  ([$session, $state, _rev]) => {
+    if ($state !== VoiceState.Connected || !$session) return false
+    if ($session.cameraOn || $session.screenShareOn) return true
+    return roomHasSubscribedRemoteVisual($session.room)
+  },
+)
+
+const countLiveVisualFeeds = (session: VoiceSession): number => {
+  const room = session.room
+  let n = 0
+  const lp = room.localParticipant
+  if (session.cameraOn) {
+    const pub = lp.getTrackPublication(Track.Source.Camera)
+    if (pub?.track) n += 1
+  }
+  if (session.screenShareOn) {
+    const pub = lp.getTrackPublication(Track.Source.ScreenShare)
+    if (pub?.track) n += 1
+  }
+  for (const rp of room.remoteParticipants.values()) {
+    for (const source of VISUAL_SOURCES) {
+      const pub = rp.getTrackPublication(source)
+      if (pub?.isSubscribed && pub.track) n += 1
+    }
+  }
+  return n
+}
+
+export const videoTileCount = derived(
+  [currentVoiceSession, voiceState, videoCallLayoutRevision],
+  ([$session, $state, _rev]) => {
+    if ($state !== VoiceState.Connected || !$session) return 0
+    return countLiveVisualFeeds($session)
+  },
+)
+
+export const toggleCamera = async () => {
+  const session = get(currentVoiceSession)
+  if (!session) return
+
+  const cameraOn = !session.cameraOn
+  if (!cameraOn) {
+    session.room.localParticipant.setCameraEnabled(false)
+    currentVoiceSession.set({...session, cameraOn})
+    bumpVideoCallLayoutRevision()
+    return
+  }
+
+  try {
+    await session.room.localParticipant.setCameraEnabled(true)
+    currentVoiceSession.set({...session, cameraOn})
+    bumpVideoCallLayoutRevision()
+  } catch (e) {
+    pushToast({theme: "error", message: "Could not access camera"})
+  }
+}
+
+export const toggleScreenShare = async () => {
+  const session = get(currentVoiceSession)
+  if (!session) return
+
+  const screenShareOn = !session.screenShareOn
+  if (!screenShareOn) {
+    session.room.localParticipant.setScreenShareEnabled(false)
+    currentVoiceSession.set({...session, screenShareOn})
+    bumpVideoCallLayoutRevision()
+    return
+  }
+
+  try {
+    await session.room.localParticipant.setScreenShareEnabled(true)
+    currentVoiceSession.set({...session, screenShareOn})
+    bumpVideoCallLayoutRevision()
+  } catch (e) {
+    pushToast({theme: "error", message: "Could not start screen sharing"})
+  }
+}

src/lib/components/PageContent.svelte

@@ -5,14 +5,19 @@
   interface Props {
     element?: Element
     children?: Snippet
+    /** Desktop voice: chat occupies the right half in split view. */
+    contentFrame?: "default" | "split-right"
     [key: string]: any
   }
 
-  let {children, element = $bindable(), ...props}: Props = $props()
+  let {children, element = $bindable(), contentFrame = "default", ...props}: Props = $props()
 
-  const className = cx(
-    props.class,
-    "scroll-container cw cb ct fixed z-feature overflow-y-auto overflow-x-hidden",
+  const className = $derived(
+    cx(
+      props.class,
+      "scroll-container cb ct fixed z-feature overflow-y-auto overflow-x-hidden",
+      contentFrame === "split-right" ? "cw-split-chat" : "cw",
+    ),
   )
 </script>
 

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

@@ -1,7 +1,14 @@
-<script>
+<script lang="ts">
+  import type {Snippet} from "svelte"
   import {page} from "$app/stores"
+
+  type Props = {
+    children?: Snippet
+  }
+
+  const {children}: Props = $props()
 </script>
 
 {#key $page.url.searchParams.get("at")}
-  <slot />
+  {@render children?.()}
 {/key}

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

@@ -19,6 +19,7 @@
   import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
   import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
   import Login2 from "@assets/icons/login-3.svg?dataurl"
+  import cx from "classnames"
   import {slide, fade, fly} from "@lib/transition"
   import Button from "@lib/components/Button.svelte"
   import Divider from "@lib/components/Divider.svelte"
@@ -50,7 +51,8 @@
     userSettingsValues,
   } from "@app/core/state"
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
-  import {VoiceState, voiceState} from "@app/voice"
+  import VideoCallContent from "@app/components/VideoCallContent.svelte"
+  import {VoiceState, currentVoiceRoom, videoTileCount, voiceState} from "@app/voice"
   import {makeFeed} from "@app/core/requests"
   import {popKey} from "@lib/implicit"
   import {checked} from "@app/util/notifications"
@@ -63,6 +65,53 @@
   const url = decodeRelay(relay)
   const room = deriveRoom(url, h)
   const isVoiceRoom = $derived(getRoomType($room) === RoomType.Voice)
+
+  const voiceConnectedHere = $derived(
+    isVoiceRoom &&
+      $voiceState === VoiceState.Connected &&
+      $currentVoiceRoom?.url === url &&
+      $currentVoiceRoom?.h === h,
+  )
+
+  let mobileRoomPanel = $state<"chat" | "video">("chat")
+  let voiceDesktopPanel = $state<"chat" | "video" | "split">("split")
+
+  const showMobileVideoPanel = $derived(
+    isVoiceRoom && $voiceState === VoiceState.Connected && mobileRoomPanel === "video",
+  )
+
+  const pageContentFrame = $derived<"default" | "split-right">(
+    voiceConnectedHere && voiceDesktopPanel === "split" ? "split-right" : "default",
+  )
+
+  const pageContentHiddenDesktopVideoOnly = $derived(
+    voiceConnectedHere && voiceDesktopPanel === "video",
+  )
+
+  let prevVideoTileCount = $state(0)
+
+  $effect(() => {
+    if ($voiceState !== VoiceState.Connected) {
+      mobileRoomPanel = "chat"
+      voiceDesktopPanel = "chat"
+      prevVideoTileCount = 0
+      return
+    }
+
+    const here = isVoiceRoom && $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h
+    const n = $videoTileCount
+
+    if (!here) {
+      prevVideoTileCount = 0
+      return
+    }
+
+    if (prevVideoTileCount === 0 && n >= 1) {
+      voiceDesktopPanel = "video"
+      mobileRoomPanel = "video"
+    }
+    prevVideoTileCount = n
+  })
   const shouldProtect = canEnforceNip70(url)
   const membershipStatus = deriveUserRoomMembershipStatus(url, h)
   const at = $derived(parseInt($page.url.searchParams.get("at")!))
@@ -369,6 +418,40 @@
     <RoomName {url} {h} />
   {/snippet}
   {#snippet action()}
+    {#if voiceConnectedHere}
+      <div class="flex gap-1 md:hidden">
+        <Button
+          class={cx("btn btn-sm", mobileRoomPanel === "chat" && "btn-primary")}
+          onclick={() => (mobileRoomPanel = "chat")}>
+          Chat
+        </Button>
+        <Button
+          class={cx("btn btn-sm", mobileRoomPanel === "video" && "btn-primary")}
+          onclick={() => (mobileRoomPanel = "video")}>
+          Video
+        </Button>
+      </div>
+      <div class="hidden flex-wrap gap-1 md:flex">
+        <Button
+          data-tip="Messages only"
+          class={cx("btn btn-sm", voiceDesktopPanel === "chat" && "btn-primary")}
+          onclick={() => (voiceDesktopPanel = "chat")}>
+          Chat
+        </Button>
+        <Button
+          data-tip="Video only"
+          class={cx("btn btn-sm", voiceDesktopPanel === "video" && "btn-primary")}
+          onclick={() => (voiceDesktopPanel = "video")}>
+          Video
+        </Button>
+        <Button
+          data-tip="Video and chat side by side"
+          class={cx("btn btn-sm", voiceDesktopPanel === "split" && "btn-primary")}
+          onclick={() => (voiceDesktopPanel = "split")}>
+          Video + Chat
+        </Button>
+      </div>
+    {/if}
     <SpaceSearch {url} {h} />
     <Button class="btn btn-neutral btn-sm btn-square" onclick={showRoomDetail}>
       <Icon size={4} icon={InfoCircle} />
@@ -376,7 +459,16 @@
   {/snippet}
 </SpaceBar>
 
-<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4">
+<PageContent
+  bind:element
+  onscroll={onScroll}
+  contentFrame={pageContentFrame}
+  class={cx(
+    showMobileVideoPanel
+      ? "hidden flex-col-reverse pt-4 md:flex md:flex-col-reverse"
+      : "flex flex-col-reverse pt-4",
+    pageContentHiddenDesktopVideoOnly && "md:hidden",
+  )}>
   <div bind:this={dynamicPadding}></div>
   {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
     <div class="py-20">
@@ -446,8 +538,22 @@
   {/if}
 </PageContent>
 
+{#if voiceConnectedHere}
+  <VideoCallContent variant="desktop-split" {url} {h} visible={voiceDesktopPanel === "split"} />
+  <VideoCallContent variant="desktop-full" {url} {h} visible={voiceDesktopPanel === "video"} />
+{/if}
+
+{#if isVoiceRoom && $voiceState === VoiceState.Connected}
+  <VideoCallContent variant="mobile" {url} {h} visible={mobileRoomPanel === "video"} />
+{/if}
+
 <div
-  class="chat__compose-zone flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0"
+  class={cx(
+    "chat__compose-zone flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0",
+    voiceConnectedHere && voiceDesktopPanel === "split" && "cw-split-chat",
+    pageContentHiddenDesktopVideoOnly && "md:hidden",
+    showMobileVideoPanel && "max-md:hidden",
+  )}
   bind:this={chatCompose}>
   <div class="chat__compose-inner min-w-0 flex-1">
     {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}