334 lines
11 KiB
Svelte
334 lines
11 KiB
Svelte
<script lang="ts">
|
|
import {spec} from "@welshman/lib"
|
|
import cx from "classnames"
|
|
import {Track} from "livekit-client"
|
|
import {get} from "svelte/store"
|
|
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 VoiceWidget from "@app/components/VoiceWidget.svelte"
|
|
import VoiceParticipantMediaBadges from "@app/components/VoiceParticipantMediaBadges.svelte"
|
|
import {
|
|
VideoCallLayout,
|
|
isDesktopLayout,
|
|
toggleVideoPrimaryTile,
|
|
videoCallLayout,
|
|
videoCallViewportSync,
|
|
ViewportSize,
|
|
videoPrimaryTileKey,
|
|
currentCallSession,
|
|
callTargetRoom,
|
|
mediaStateByIdentity,
|
|
participantMediaState,
|
|
pubkeyFromLiveKitIdentity,
|
|
videoTrackRevision,
|
|
computeUniformGrid,
|
|
type UniformTileGrid,
|
|
} 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 TileLayoutVariant = "spotlight" | "default" | "strip"
|
|
|
|
const {layout, mobile = false, url, h, class: className = ""}: Props = $props()
|
|
|
|
$effect(() => {
|
|
const currentLayout = isDesktopLayout.current ? ViewportSize.Desktop : ViewportSize.Mobile
|
|
const {previousLayout} = videoCallViewportSync
|
|
if (previousLayout === undefined) {
|
|
videoCallViewportSync.previousLayout = currentLayout
|
|
return
|
|
}
|
|
if (previousLayout === currentLayout) return
|
|
const p = get(videoCallLayout)
|
|
if (previousLayout === ViewportSize.Desktop && currentLayout === ViewportSize.Mobile) {
|
|
if (p === VideoCallLayout.Split) videoCallLayout.set(VideoCallLayout.Video)
|
|
} else if (previousLayout === ViewportSize.Mobile && currentLayout === ViewportSize.Desktop) {
|
|
if (p === VideoCallLayout.Chat) videoCallLayout.set(VideoCallLayout.Split)
|
|
}
|
|
videoCallViewportSync.previousLayout = currentLayout
|
|
})
|
|
|
|
const isViewingCurrentCallRoom = $derived(
|
|
$callTargetRoom?.url === url && $callTargetRoom?.h === h,
|
|
)
|
|
|
|
const showVideoContent = $derived(
|
|
isViewingCurrentCallRoom &&
|
|
(mobile
|
|
? layout === VideoCallLayout.Video
|
|
: 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)
|
|
})
|
|
|
|
let gridWidth = $state(0)
|
|
let gridHeight = $state(0)
|
|
|
|
const useSpotlightLayout = $derived(primaryTile !== undefined)
|
|
const useMultiGrid = $derived(!useSpotlightLayout)
|
|
|
|
const tileGrid = $derived<UniformTileGrid | undefined>(
|
|
useMultiGrid ? computeUniformGrid(videoTiles.length, gridWidth, gridHeight) : undefined,
|
|
)
|
|
|
|
$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: TileLayoutVariant)}
|
|
{@const media = $mediaStateByIdentity(tile.liveKitIdentity)}
|
|
<div
|
|
class={cx(
|
|
"relative isolate overflow-hidden rounded-2xl shadow-sm",
|
|
layout === "spotlight" && "min-h-0 flex-1",
|
|
layout === "default" && "min-h-0 h-full w-full",
|
|
layout === "strip" && "aspect-video w-44 shrink-0",
|
|
tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-surface",
|
|
)}>
|
|
{#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">
|
|
{labelFor(tile.liveKitIdentity, tile.source)}{tile.isLocal ? " (you)" : ""}
|
|
</span>
|
|
{#if videoTiles.length > 1}
|
|
{@const pinned = $videoPrimaryTileKey === tileKey(tile)}
|
|
<Button
|
|
data-tip={pinned ? "Exit spotlight" : "Spotlight"}
|
|
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
|
|
bind:clientWidth={gridWidth}
|
|
bind:clientHeight={gridHeight}
|
|
class="min-h-0 flex-1 overflow-y-auto">
|
|
{#if tileGrid}
|
|
<div
|
|
class="mx-auto flex flex-wrap justify-center gap-2"
|
|
style={`max-width: ${tileGrid.cols * tileGrid.tileWidth + (tileGrid.cols - 1) * 8}px`}>
|
|
{#each videoTiles as tile (tileKey(tile))}
|
|
<div
|
|
class="overflow-hidden rounded-2xl shrink-0"
|
|
style={`width: ${tileGrid.tileWidth}px; height: ${tileGrid.tileHeight}px`}>
|
|
{@render videoTile(tile, "default")}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
{:else}
|
|
<div
|
|
class="flex min-h-[12rem] flex-1 flex-col items-center justify-center gap-2 rounded-2xl bg-surface p-4 text-center text-sm opacity-80">
|
|
<p>Waiting for participants…</p>
|
|
</div>
|
|
{/if}
|
|
{/snippet}
|
|
|
|
{#if showVideoContent}
|
|
<div class={panelChrome}>
|
|
{#if mobile}
|
|
<div class="flex min-h-0 flex-1 flex-col gap-2">
|
|
<div class="min-h-0 flex-1 overflow-hidden">
|
|
{@render videoPanelBody()}
|
|
</div>
|
|
<div class="shrink-0 pb-2">
|
|
<VoiceWidget />
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
{@render videoPanelBody()}
|
|
{/if}
|
|
</div>
|
|
{/if}
|