blisstown/campfire
blisstown/campfire
2
0
Fork 0
Code Issues 20 Pull requests Projects 1 Releases Activity

add media to notifications

Browse source
This commit is contained in:
ari melody 2024-07-08 10:43:08 +01:00
parent 5e92246eeb
commit ae8a3fbd63
Signed by: ari
GPG key ID: CF99829C92678188
1 changed files with 51 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/lib/ui/Notification.svelte
View file

@ -108,6 +108,26 @@
{:else}
{@html data.status.html}
{/if}
{#if data.status.media && data.status.media.length > 0}
<div class="notif-media-container" data-count={data.status.media.length}>
{#each data.status.media as media}
<div class="notif-media {media.type}" on:click|stopPropagation on:mouseup|stopPropagation>
{#if ["image", "gifv", "gif"].includes(media.type)}
<a href={media.url} target="_blank">
<img src={media.url} alt={media.description} title={media.description} height="200" loading="lazy" decoding="async">
</a>
{:else if media.type === "video"}
<video controls height="200">
<source src={media.url} alt={media.description} title={media.description} type={media.url.endsWith('.mp4') ? 'video/mp4' : 'video/webm'}>
<p>{media.description} &ensp; <a href={media.url}>[link]</a></p>
<!-- <media src={media.url} alt={media.description} loading="lazy" decoding="async"> -->
</video>
{/if}
</div>
{/each}
</div>
{/if}
</div>
{#if data.type === "mention"}
{#if data.status.reactions}
@ -270,4 +290,35 @@
outline-color: var(--warn-bg);
transition: outline .05s, box-shadow .05s;
}
.notif-media-container {
margin: 16px 0 4px 0;
display: flex;
flex-direction: row;
gap: 8px;
font-size: 14px;
line-height: 1.45em;
}
.notif-media {
display: inline-block;
border-radius: 12px;
background-color: #000;
overflow: hidden;
}
.notif-media a {
width: 5em;
height: 5em;
display: block;
cursor: zoom-in;
}
.notif-media img,
.notif-media video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
</style>