From 38e2b176bc7faaae361c8ad232cf41d4cf0f5694 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 19 Jan 2024 20:31:05 +0800
Subject: [PATCH] Make embeds larger

---
 src/components/embed-modal.css |  4 ++++
 src/components/embed-modal.jsx | 12 ++++++++++--
 src/components/modals.jsx      |  2 ++
 src/components/status.jsx      |  2 ++
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/embed-modal.css b/src/components/embed-modal.css
index 878bad57..44f79ee8 100644
--- a/src/components/embed-modal.css
+++ b/src/components/embed-modal.css
@@ -22,6 +22,10 @@
     iframe {
       pointer-events: auto;
       max-width: 100%;
+      max-height: 100%;
+      width: max(var(--width), 480px);
+      height: auto;
+      aspect-ratio: var(--aspect-ratio);
     }
   }
 }
diff --git a/src/components/embed-modal.jsx b/src/components/embed-modal.jsx
index 2fe764f8..f38e1556 100644
--- a/src/components/embed-modal.jsx
+++ b/src/components/embed-modal.jsx
@@ -2,7 +2,7 @@ import './embed-modal.css';
 
 import Icon from './icon';
 
-function EmbedModal({ html, url, onClose = () => {} }) {
+function EmbedModal({ html, url, width, height, onClose = () => {} }) {
   return (
     <div class="embed-modal-container">
       <div class="top-controls">
@@ -20,7 +20,15 @@ function EmbedModal({ html, url, onClose = () => {} }) {
           </a>
         )}
       </div>
-      <div class="embed-content" dangerouslySetInnerHTML={{ __html: html }} />
+      <div
+        class="embed-content"
+        dangerouslySetInnerHTML={{ __html: html }}
+        style={{
+          '--width': width + 'px',
+          '--height': height + 'px',
+          '--aspect-ratio': `${width}/${height}`,
+        }}
+      />
     </div>
   );
 }
diff --git a/src/components/modals.jsx b/src/components/modals.jsx
index 7b277490..75de5abb 100644
--- a/src/components/modals.jsx
+++ b/src/components/modals.jsx
@@ -210,6 +210,8 @@ export default function Modals() {
           <EmbedModal
             html={snapStates.showEmbedModal.html}
             url={snapStates.showEmbedModal.url}
+            width={snapStates.showEmbedModal.width}
+            height={snapStates.showEmbedModal.height}
             onClose={() => {
               states.showEmbedModal = false;
             }}
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 158bfa5f..2549d0bd 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -2103,6 +2103,8 @@ function Card({ card, selfReferential, instance }) {
         states.showEmbedModal = {
           html,
           url: url || embedUrl,
+          width,
+          height,
         };
       }
     },