Implement provider-specific sizing for embeds (#178)

* Implement provider-specific sizing for embeds * Refactor embed styles to be more readable
kausaltech · Oct 3, 2023 · 271321f · 271321f
1 parent 7141325
commit 271321f
Showing 1 changed file with 40 additions and 11 deletions.
diff --git a/components/common/StreamField.tsx b/components/common/StreamField.tsx
@@ -276,6 +276,11 @@ const STREAM_FIELD_FRAGMENT = gql`
   ${CategoryListBlock.fragments.category}
 `;
 
+enum EmbedProvider {
+  YOUTUBE = 'YouTube',
+  PLOTLY = 'Plotly Chart Studio',
+}
+
 const ResponsiveStyles = styled.div`
   .responsive-object {
     width: 100%;
@@ -289,19 +294,43 @@ const ResponsiveStyles = styled.div`
     height: 100%;
   }
 
-  .responsive-object-small iframe {
-    aspect-ratio: 16 / 9;
-    max-width: 300px;
-  }
-
-  .responsive-object-medium iframe {
-    aspect-ratio: 16 / 9;
-    max-width: 480px;
+  .responsive-object[data-embed-provider='${EmbedProvider.YOUTUBE}'] {
+    &.responsive-object-small {
+      iframe {
+        aspect-ratio: 16 / 9;
+        max-width: 300px;
+      }
+    }
+    &.responsive-object-medium {
+      iframe {
+        aspect-ratio: 16 / 9;
+        max-width: 480px;
+      }
+    }
+    &.responsive-object-large {
+      iframe {
+        aspect-ratio: 16 / 9;
+        max-width: 960px;
+      }
+    }
   }
 
-  .responsive-object-large iframe {
-    aspect-ratio: 16 / 9;
-    max-width: 960px;
+  .responsive-object[data-embed-provider='${EmbedProvider.PLOTLY}'] {
+    &.responsive-object-small {
+      iframe {
+        height: 400px;
+      }
+    }
+    &.responsive-object-medium {
+      iframe {
+        height: 600px;
+      }
+    }
+    &.responsive-object-large {
+      iframe {
+        height: 800px;
+      }
+    }
   }
 `;