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