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

PR-C1: adaptive video grid sizing (foundation) #2

Closed
hudson wants to merge 18 commits from flotilla-sph-adaptive-grid into dev
pull from: flotilla-sph-adaptive-grid
merge into: matt:dev
Conversation 1 Commits 18 Files changed 2 +14 -12
1 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 1b1e0169ff - Show all commits

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

@ -229,7 +229,7 @@
class={cx(
"relative isolate overflow-hidden rounded-2xl shadow-sm",
layout === "spotlight" && "min-h-0 flex-1",
layout === "default" && "min-h-0 w-full",
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",
)}>
@ -288,21 +288,23 @@
</div>
{/if}
</div>
{:else if useMultiGrid && tileLayout}
{:else if useMultiGrid}
<div
bind:clientWidth={gridWidth}
bind:clientHeight={gridHeight}
class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
{#each tileLayout.rows as row, i}
{@const start = tileLayout.rows.slice(0, i).reduce((a, r) => a + r.count, 0)}
<div class="flex min-h-0 flex-row gap-2 justify-center">
{#each videoTiles.slice(start, start + row.count) as tile (tileKey(tile))}
<div class="min-w-0 flex-1" style="aspect-ratio: {row.aspectRatio}">
{@render videoTile(tile, "default")}
</div>
{/each}
</div>
{/each}
{#if tileLayout}
{#each tileLayout.rows as row, i}
{@const start = tileLayout.rows.slice(0, i).reduce((a, r) => a + r.count, 0)}
<div class="flex min-h-0 flex-row gap-2 justify-center">
{#each videoTiles.slice(start, start + row.count) as tile (tileKey(tile))}
<div class="min-w-0 flex-1" style="aspect-ratio: {row.aspectRatio}">
{@render videoTile(tile, "default")}
</div>
{/each}
</div>
{/each}
{/if}
</div>
{/if}
{:else}