add video to livekit calls

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,20 @@
   {/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",
+  )}
   bind:this={chatCompose}>
   <div class="chat__compose-inner min-w-0 flex-1">
     {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}