flotilla/src/app/components/VideoCallContent.svelte

<script lang="ts">
  import {spec} from "@welshman/lib"
  import cx from "classnames"
  import {Track} from "livekit-client"
  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 VideoCallTile from "@app/components/VideoCallTile.svelte"
  import CallControlBar from "@app/components/CallControlBar.svelte"
  import VoiceParticipantMediaBadges from "@app/components/VoiceParticipantMediaBadges.svelte"
  import {
    VideoCallLayout,
    toggleVideoPrimaryTile,
    videoPrimaryTileKey,
    currentCallSession,
    callTargetRoom,
    mediaStateByIdentity,
    participantMediaState,
    pubkeyFromLiveKitIdentity,
    videoTrackRevision,
  } from "@app/call"
  import {profiles} from "@app/core"

  type Props = {
    layout: VideoCallLayout
    mobile?: boolean
    url: string
    h: string
    class?: string
  }

  type VideoTileData = {
    liveKitIdentity: string
    isLocal: boolean
    trackSid: string
    track: Track | undefined
    source: Track.Source.Camera | Track.Source.ScreenShare
  }

  type TileLayout = "spotlight" | "default" | "strip"

  const {layout, mobile = false, url, h, class: className = ""}: Props = $props()

  const isViewingCurrentCallRoom = $derived(
    $callTargetRoom?.url === url && $callTargetRoom?.h === h,
  )

  const showVideoContent = $derived(
    isViewingCurrentCallRoom &&
      (layout === VideoCallLayout.Split || layout === VideoCallLayout.Video),
  )

  const videoTiles = $derived.by(() => {
    const session = $currentCallSession
    // LiveKit mutates remoteParticipants/tracks in place; these stores are what
    // actually change on join/leave and track subscribe/unsubscribe.
    void $participantMediaState
    void $videoTrackRevision
    if (!session || $callTargetRoom?.url !== url || $callTargetRoom?.h !== h) {
      return []
    }

    const livekit = session.livekit
    const videoTiles: VideoTileData[] = []
    const user = livekit.localParticipant

    if (session.cameraOn) {
      const localPub = user.getTrackPublication(Track.Source.Camera)
      videoTiles.push({
        liveKitIdentity: user.identity,
        isLocal: true,
        trackSid: localPub?.trackSid ?? "local-camera",
        track: localPub?.track,
        source: Track.Source.Camera,
      })
    }

    if (session.screenShareOn) {
      const localPub = user.getTrackPublication(Track.Source.ScreenShare)
      videoTiles.push({
        liveKitIdentity: user.identity,
        isLocal: true,
        trackSid: localPub?.trackSid ?? "local-screen",
        track: localPub?.track,
        source: Track.Source.ScreenShare,
      })
    }

    for (const rp of livekit.remoteParticipants.values()) {
      const camPub = rp.getTrackPublication(Track.Source.Camera)
      // Camera off mutes the publication rather than unsubscribing; still render avatar.
      if (camPub?.isSubscribed && camPub.track && !camPub.isMuted) {
        videoTiles.push({
          liveKitIdentity: rp.identity,
          isLocal: false,
          trackSid: camPub.trackSid,
          track: camPub.track,
          source: Track.Source.Camera,
        })
      }
      const screenPub = rp.getTrackPublication(Track.Source.ScreenShare)
      if (screenPub?.isSubscribed && screenPub.track && !screenPub.isMuted) {
        videoTiles.push({
          liveKitIdentity: rp.identity,
          isLocal: false,
          trackSid: screenPub.trackSid,
          track: screenPub.track,
          source: Track.Source.ScreenShare,
        })
      }
      if (!videoTiles.some(spec({liveKitIdentity: rp.identity}))) {
        videoTiles.push({
          liveKitIdentity: rp.identity,
          isLocal: false,
          trackSid: `avatar-${rp.identity}`,
          track: undefined,
          source: Track.Source.Camera,
        })
      }
    }

    if (!videoTiles.some(spec({liveKitIdentity: user.identity}))) {
      videoTiles.push({
        liveKitIdentity: user.identity,
        isLocal: true,
        trackSid: "local-avatar",
        track: undefined,
        source: Track.Source.Camera,
      })
    }

    return videoTiles
  })

  /** LiveKit identity + source only — LiveKit can change trackSid after publish, which broke spotlight + stale-key effect. */
  const tileKey = (t: VideoTileData) => `${t.liveKitIdentity}\x1f${t.source}`

  const primaryTile = $derived.by(() => {
    const k = $videoPrimaryTileKey
    if (k === undefined) return undefined
    return videoTiles.find(t => tileKey(t) === k)
  })

  const secondaryTiles = $derived.by(() => {
    const p = primaryTile
    if (p === undefined) return videoTiles
    const pk = tileKey(p)
    return videoTiles.filter(t => tileKey(t) !== pk)
  })

  const useSpotlightLayout = $derived(primaryTile !== undefined)
  // 2 tiles stacked full-width felt like they were "overlapping" each other rather
  // than tiling — put 2+ side by side in a grid, same as everyone else's call UI.
  // Chat (Split) floats over the video as an overlay card rather than shrinking
  // this panel's width, so the tile grid doesn't need to collapse for it either.
  const useMultiGrid = $derived(!useSpotlightLayout && videoTiles.length > 1)
  const multiGridClass = "grid-cols-1 sm:grid-cols-2"

  $effect(() => {
    const k = $videoPrimaryTileKey
    if (k === undefined) return
    if (!videoTiles.some(t => tileKey(t) === k)) {
      videoPrimaryTileKey.set(undefined)
    }
  })

  $effect(() => {
    for (const t of videoTiles) {
      const pk = pubkeyFromLiveKitIdentity(t.liveKitIdentity)
      if (pk) $profiles.load(pk)
    }
  })

  const labelFor = (liveKitIdentity: string, source: VideoTileData["source"]) => {
    const pk = pubkeyFromLiveKitIdentity(liveKitIdentity)
    const name = pk ? $profiles.display(pk).get() : "Unknown"
    return source === Track.Source.ScreenShare ? `${name} · screen` : name
  }

  const showTileGrid = $derived(videoTiles.length > 0)

  const spotlightHandlerFor = (key: string) => () => {
    toggleVideoPrimaryTile(key)
  }

  const panelChrome = $derived(
    cx(
      mobile &&
        "flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden bg-surface px-2 pt-4 md:hidden pb-[calc(3.5rem+var(--saib))]",
      !mobile &&
        "flex min-h-0 w-full min-w-0 flex-1 flex-col gap-2 overflow-hidden bg-surface px-2 pb-2 pt-4",
      className,
    ),
  )
</script>

{#snippet videoTile(tile: VideoTileData, layout: TileLayout)}
  {@const media = $mediaStateByIdentity(tile.liveKitIdentity)}
  {@const label = labelFor(tile.liveKitIdentity, tile.source)}
  <div
    class={cx(
      // bg-surface-more (rather than bg-surface, same as the panel behind it) so a
      // camera-off tile reads as its own card instead of blending into the panel.
      "relative isolate overflow-hidden rounded-2xl border border-line 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-surface-more",
    )}>
    {#if tile.track}
      <VideoCallTile
        track={tile.track}
        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.liveKitIdentity)} {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-surface/80 px-1.5 py-0.5 text-xs">
      {label}{tile.isLocal ? " (you)" : ""}
    </span>
    {#if videoTiles.length > 1}
      {@const pinned = $videoPrimaryTileKey === tileKey(tile)}
      <Button
        data-tip={pinned ? "Exit spotlight" : "Spotlight"}
        aria-label={pinned ? `Exit spotlight for ${label}` : `Spotlight ${label}`}
        aria-pressed={pinned}
        class={cx(
          `button button-${pinned ? "primary" : "ghost"} button-xs button-square`,
          "absolute right-1 top-1 z-20",
          !pinned && "bg-surface",
        )}
        onclick={spotlightHandlerFor(tileKey(tile))}>
        <Icon icon={Pin} size={3} />
      </Button>
    {/if}
  </div>
{/snippet}

{#snippet videoPanelBody()}
  {#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={cx("grid min-h-0 flex-1 content-start gap-2 overflow-y-auto", multiGridClass)}>
        {#each videoTiles 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 videoTiles 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-2xl border border-line bg-surface-more p-4 text-center text-sm opacity-80">
      <p>Waiting for participants…</p>
    </div>
  {/if}
{/snippet}

{#if showVideoContent}
  <div class={panelChrome}>
    {@render videoPanelBody()}
  </div>
  <!-- fixed (viewport-relative), not absolute within panelChrome — panelChrome's
       flex-computed height isn't guaranteed to reach the real viewport bottom, so
       an absolute child positioned against its box can end up overlapping the
       fixed bottom nav bar. Matches the same bottom-nav-clearing offset the old
       chat FAB used.

       RoomChat mounts both a desktop and a mobile VideoCallContent instance at
       once while connected (each gated by its own `class` prop, e.g. "md:hidden"
       vs "hidden ... md:flex"), so this fixed bar needs the same mobile/desktop
       split — otherwise both instances render their own copy at the identical
       screen position simultaneously. -->
  <div
    class={cx(
      "left-content pointer-events-none fixed right-sai z-popover justify-center bottom-[calc(4.5rem+var(--saib))] md:bottom-4",
      mobile ? "flex md:hidden" : "hidden md:flex",
    )}>
    <CallControlBar {url} {h} />
  </div>
{/if}