Add optional aspect ratio to url parameters

Author: addisonschultz

integrations/toucantoco/src/index.tsx

@@ -18,6 +18,8 @@ type ToucanRuntimeContext = RuntimeContext<ToucanRuntimeEnvironment>;
 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 (
@@ -62,7 +73,7 @@ const embedBlock = createComponent<{
                                     source={{
                                         url: environment.integration.urls.icon,
                                     }}
-                                    aspectRatio={1}
+                                    aspectRatio={aspectRatio}
                                 />
                             ) : undefined
                         }

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 };
 }