diff --git a/integrations/toucantoco/src/index.tsx b/integrations/toucantoco/src/index.tsx index 08a137635..8649d2a18 100644 --- a/integrations/toucantoco/src/index.tsx +++ b/integrations/toucantoco/src/index.tsx @@ -18,6 +18,8 @@ type ToucanRuntimeContext = RuntimeContext; const embedBlock = createComponent<{ toucanId?: string; url?: string; + height?: number; + width?: number; }>({ componentId: 'embed', @@ -41,7 +43,16 @@ const embedBlock = createComponent<{ async render(element, context) { const { environment } = context; - const { toucanId, url } = element.props; + const { toucanId, url, height, width } = element.props; + + function getAspectRatio(height?: number, width?: number): number { + if (height && width && height > 0 && width > 0) { + return width / height; + } + return 1; + } + + const aspectRatio = getAspectRatio(height, width); if (!toucanId || !url) { return ( @@ -77,7 +88,7 @@ const embedBlock = createComponent<{ source={{ url, }} - aspectRatio={1} + aspectRatio={aspectRatio} /> ); diff --git a/integrations/toucantoco/src/toucan.ts b/integrations/toucantoco/src/toucan.ts index 8b75b85e4..3101abac2 100644 --- a/integrations/toucantoco/src/toucan.ts +++ b/integrations/toucantoco/src/toucan.ts @@ -5,14 +5,19 @@ export function extractToucanInfoFromURL(input: string): | undefined | { toucanId?: string; + height?: number; + width?: number; } { const url = new URL(input); // Ignore non-TT URLs const toucanId = url.searchParams.get('id'); + let height = Number(url.searchParams.get('height')) || 100; + let width = Number(url.searchParams.get('width')) || 100; + if (!toucanId || !url.hostname.endsWith('.toucantoco.com')) { return; } - return { toucanId }; + return { toucanId, height, width }; }