huanld/openscreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Add "Native" aspect ratio option to export at cropped video dimensions

Browse Source 
Adds a "Native" option to the aspect ratio dropdown that uses the cropped
video's actual aspect ratio, so the video fills the entire frame with no
background visible. Selecting Native also sets padding to 0 automatically.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hemkesh
2026-03-04 21:48:47 -06:00
parent 9eb362012b
commit c8ebef026b
3 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/utils/aspectRatioUtils.ts
+20 -5
View File
@@ -1,11 +1,11 @@
export const ASPECT_RATIOS = ['16:9', '9:16', '1:1', '4:3', '4:5', '16:10', '10:16'] as const;
export const ASPECT_RATIOS = ['16:9', '9:16', '1:1', '4:3', '4:5', '16:10', '10:16', 'native'] as const;
export type AspectRatio = typeof ASPECT_RATIOS[number];
/**
* Returns the numeric value of an aspect ratio.
* Uses exhaustive type checking to ensure all AspectRatio cases are handled.
* If TypeScript errors here, a new ratio was added to the type but not handled.
* For 'native', returns a fallback of 16/9 — callers with video/crop info
* should use getNativeAspectRatioValue() instead.
*/
export function getAspectRatioValue(aspectRatio: AspectRatio): number {
switch (aspectRatio) {
@@ -16,14 +16,27 @@ export function getAspectRatioValue(aspectRatio: AspectRatio): number {
case '4:5': return 4 / 5;
case '16:10': return 16 / 10;
case '10:16': return 10 / 16;
case 'native': return 16 / 9;
default: {
// Ensures all cases are handled - TypeScript errors if missing
const _exhaustiveCheck: never = aspectRatio;
return _exhaustiveCheck;
}
}
}
/**
* Returns the aspect ratio value for 'native' mode based on the cropped video dimensions.
*/
export function getNativeAspectRatioValue(
videoWidth: number,
videoHeight: number,
cropRegion?: { x: number; y: number; width: number; height: number },
): number {
const cropW = cropRegion?.width ?? 1;
const cropH = cropRegion?.height ?? 1;
return (videoWidth * cropW) / (videoHeight * cropH);
}
export function getAspectRatioDimensions(
aspectRatio: AspectRatio,
baseWidth: number
@@ -36,10 +49,12 @@ export function getAspectRatioDimensions(
}
export function getAspectRatioLabel(aspectRatio: AspectRatio): string {
if (aspectRatio === 'native') return 'Native';
return aspectRatio;
}
export function formatAspectRatioForCSS(aspectRatio: AspectRatio): string {
export function formatAspectRatioForCSS(aspectRatio: AspectRatio, nativeRatio?: number): string {
if (aspectRatio === 'native') return String(nativeRatio ?? 16 / 9);
return aspectRatio.replace(':', '/');
}