adamlamers/zep
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix embed container

Browse Source
This commit is contained in:
Adam Lamers
2026-04-20 21:08:08 -04:00
parent b1cff07cd6
commit 705baceee5
2 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/chat/components/MessageItem.svelte
+6 -2
View File
@@ -480,7 +480,7 @@
src={imageUrl}
alt="Uploaded"
class="message-image"
style="cursor: pointer; max-width: {isThread ? '200px' : '300px'}; max-height: {isThread ? '200px' : '300px'}; border-radius: 4px;"
style="cursor: pointer; max-width: {isThread ? '300px' : '400px'}; max-height: 400px; width: auto; height: auto; border-radius: 4px; object-fit: contain;"
onload={handleImageLoad}
/>
</div>
@@ -782,7 +782,9 @@
border-left: 4px solid var(--brand);
background-color: var(--background-secondary);
border-radius: 4px;
max-width: 520px;
width: fit-content;
max-width: 100%;
min-width: 150px;
overflow: hidden;
}
@@ -813,6 +815,8 @@
.embed-content-body {
padding: 8px 12px 12px 12px;
width: 100%;
box-sizing: border-box;
}
.reaction-badge {
src/chat/components/RichText.svelte
+18 -15
View File
@@ -216,88 +216,81 @@
{:else if embed.type === "youtube"}
<div class="media-embed-container">
<iframe
width="640"
height="360"
src="https://www.youtube.com/embed/{embed.videoId}"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
class="media-iframe"
style="aspect-ratio: 16/9; width: 640px;"
></iframe>
</div>
{:else if embed.type === "youtube-shorts"}
<div class="media-embed-container">
<iframe
width="315"
height="560"
src="https://www.youtube.com/embed/{embed.videoId}"
title="YouTube Shorts player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
class="media-iframe"
style="aspect-ratio: 9/16; width: 315px; max-height: 80vh;"
></iframe>
</div>
{:else if embed.type === "twitch"}
<div class="media-embed-container">
<iframe
width="640"
height="360"
src="https://player.twitch.tv/?{embed.videoId ? `video=${embed.videoId}` : `channel=${embed.channelName}`}&parent={hostname}"
title="Twitch player"
frameborder="0"
allowfullscreen
class="media-iframe"
style="aspect-ratio: 16/9; width: 640px;"
></iframe>
</div>
{:else if embed.type === "kick"}
<div class="media-embed-container">
<iframe
width="640"
height="360"
src="https://player.kick.com/{embed.videoId ? `video/${embed.videoId}` : embed.channelName}"
title="Kick player"
frameborder="0"
allowfullscreen
class="media-iframe"
style="aspect-ratio: 16/9; width: 640px;"
></iframe>
</div>
{:else if embed.type === "tiktok"}
<div class="media-embed-container">
<iframe
width="325"
height="580"
src="https://www.tiktok.com/embed/v2/{embed.videoId}"
title="TikTok video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen"
allowfullscreen
class="media-iframe"
style="aspect-ratio: 9/16; width: 325px; max-height: 80vh;"
></iframe>
</div>
{:else if embed.type === "instagram"}
<div class="media-embed-container" style="background: white;">
<iframe
width="400"
height="480"
src="https://www.instagram.com/reel/{embed.videoId}/embed"
title="Instagram Reel player"
frameborder="0"
allowfullscreen
class="media-iframe"
style="aspect-ratio: 400/480; width: 400px; max-height: 80vh;"
></iframe>
</div>
{:else if embed.type === "facebook"}
<div class="media-embed-container" style="background: white;">
<iframe
width="400"
height="480"
src="https://www.facebook.com/plugins/video.php?href=https://www.facebook.com/reel/{embed.videoId}"
title="Facebook Reel player"
frameborder="0"
allowfullscreen
class="media-iframe"
style="aspect-ratio: 400/480; width: 400px; max-height: 80vh;"
></iframe>
</div>
{:else if embed.type === "link"}
@@ -323,7 +316,9 @@
.message-image {
cursor: pointer;
max-width: 100%;
max-height: 400px;
max-height: 500px;
width: auto;
height: auto;
display: block;
border-radius: 4px;
object-fit: contain;
@@ -340,7 +335,9 @@
border-left: 4px solid var(--brand);
background-color: var(--background-secondary);
border-radius: 4px;
width: fit-content;
max-width: 520px;
min-width: 150px;
overflow: hidden;
}
@@ -371,6 +368,8 @@
.embed-content-body {
padding: 8px 12px 12px 12px;
width: 100%;
box-sizing: border-box;
}
.media-embed-container {
@@ -378,11 +377,15 @@
overflow: hidden;
background-color: #000;
line-height: 0;
width: fit-content;
max-width: 100%;
position: relative;
}
.media-iframe {
max-width: 100%;
border: none;
display: block;
}
.message-image-container {