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

Closed
hudson wants to merge 18 commits from flotilla-sph-adaptive-grid into dev
Showing only changes of commit d552b6f245 - Show all commits

View file

@ -50,12 +50,22 @@ export type UniformTileGrid = {
aspect: number aspect: number
} }
/**
/** Numeric lexicographic comparison for scoring arrays. */
const compareKeys = (a: number[], b: number[]): number => {
for (let i = 0; i < a.length; i++) {
if (a[i] !== b[i]) return a[i] - b[i]
}
return 0
}
/** /**
* Pick the column count that best fills the viewport. Prioritises: * Pick the column count that best fills the viewport. Prioritises:
* 1. No vertical overflow (avoids unnecessary scroll) * 1. No vertical overflow (avoids unnecessary scroll)
* 2. Minimal leftover whitespace (h-pad + v-pad) * 2. No horizontal overflow (avoids sideways clip/scroll)
* 3. Aspect ratio closest to 16:9 * 3. Minimal leftover whitespace (h-pad + v-pad)
* 4. Larger tiles * 4. Aspect ratio closest to 16:9
* 5. Larger tiles
*/ */
export const computeUniformGrid = ( export const computeUniformGrid = (
tileCount: number, tileCount: number,
@ -83,9 +93,9 @@ export const computeUniformGrid = (
tileW = widthLimit tileW = widthLimit
tileH = widthLimit / TILE_ASPECT_MAX tileH = widthLimit / TILE_ASPECT_MAX
} else if (fillAspect < TILE_ASPECT_MIN) { } else if (fillAspect < TILE_ASPECT_MIN) {
// Too tall: cap at 3:4, tiles narrower than full width -> h-pad // Too tall: cap at 3:4, tiles shorter than row -> v-pad (letterbox)
tileH = rowH tileW = widthLimit
tileW = rowH * TILE_ASPECT_MIN tileH = widthLimit / TILE_ASPECT_MIN
} else { } else {
// In range: fills both dims exactly // In range: fills both dims exactly
tileW = widthLimit tileW = widthLimit
@ -95,15 +105,17 @@ export const computeUniformGrid = (
const bboxW = cols * tileW + (cols - 1) * TILE_GAP const bboxW = cols * tileW + (cols - 1) * TILE_GAP
Outdated
Review

prefer full words in these vars too: boundingBoxWidth, verticalOverflow, etc.

prefer full words in these vars too: boundingBoxWidth, verticalOverflow, etc.
const bboxH = rows * tileH + (rows - 1) * TILE_GAP const bboxH = rows * tileH + (rows - 1) * TILE_GAP
const vOverflow = Math.max(0, bboxH - ch) const vOverflow = Math.max(0, bboxH - ch)
const hOverflow = Math.max(0, bboxW - cw)
const waste = Math.max(0, cw - bboxW) + Math.max(0, ch - bboxH) const waste = Math.max(0, cw - bboxW) + Math.max(0, ch - bboxH)
const key = [ const key = [
Math.round(vOverflow), Math.round(vOverflow),
Math.round(hOverflow),
Math.round(waste), Math.round(waste),
Number(Math.abs(aspect - TILE_ASPECT_MAX).toFixed(3)), Number(Math.abs(aspect - TILE_ASPECT_MAX).toFixed(3)),
-Math.round(tileW * tileH), -Math.round(tileW * tileH),
] ]
if (!bestKey || key < bestKey) { if (!bestKey || compareKeys(key, bestKey) < 0) {
Outdated
Review

I don't like that we are calling these "keys". Can we come up with a more semantically meaningful name?

I don't like that we are calling these "keys". Can we come up with a more semantically meaningful name?
bestKey = key bestKey = key
best = {cols, rows, tileWidth: tileW, tileHeight: tileH, aspect} best = {cols, rows, tileWidth: tileW, tileHeight: tileH, aspect}
} }