matt/flotilla
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

PR-C0: card-style no-video tiles with border and backdrop label

Browse source 
- Add border (border-line) to no-video tile outer div for card contrast
  against bg-surface panel (video-on tiles unchanged)
- Use bg-backdrop/80 for name label on no-video tiles for legibility
  (video-on tiles keep bg-surface/80)

Part of flotilla-j4k / coracle/flotilla#343
This commit is contained in:
Agent 2026-08-13 12:53:12 -04:00
parent 91a8995a98
commit 928456649e
1 changed files with 4 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app/components/VideoCallContent.svelte
View file

@ -222,6 +222,7 @@
<div <div
class={cx( class={cx(
"relative isolate overflow-hidden rounded-2xl shadow-sm", "relative isolate overflow-hidden rounded-2xl shadow-sm",
!tile.track && "border border-line border-solid",
layout === "spotlight" && "min-h-0 flex-1", layout === "spotlight" && "min-h-0 flex-1",
layout === "default" && "aspect-video w-full min-h-0", layout === "default" && "aspect-video w-full min-h-0",
layout === "strip" && "aspect-video w-44 shrink-0", layout === "strip" && "aspect-video w-44 shrink-0",
@ -248,7 +249,9 @@
</div> </div>
{/if} {/if}
<span <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"> class="pointer-events-none absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded px-1.5 py-0.5 text-xs {tile.track
? 'bg-surface/80'
: 'bg-backdrop/80'}">
{labelFor(tile.liveKitIdentity, tile.source)}{tile.isLocal ? " (you)" : ""} {labelFor(tile.liveKitIdentity, tile.source)}{tile.isLocal ? " (you)" : ""}
</span> </span>
{#if videoTiles.length > 1} {#if videoTiles.length > 1}