Make embeds larger

This commit is contained in:
Lim Chee Aun 2024-01-19 20:31:05 +08:00
parent 6b4c1c8505
commit 38e2b176bc
4 changed files with 18 additions and 2 deletions

View file

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

View file

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

View file

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

View file

@ -2103,6 +2103,8 @@ function Card({ card, selfReferential, instance }) {
states.showEmbedModal = {
html,
url: url || embedUrl,
width,
height,
};
}
},