162 lines
4.0 KiB
Svelte
162 lines
4.0 KiB
Svelte
<script lang="ts">
|
|
import type { Post } from '$lib/mastodon/response';
|
|
import AvatarComponent from '$lib/components/AvatarComponent.svelte';
|
|
import AccountComponent from '$lib/components/AccountComponent.svelte';
|
|
import { secondsSince, relativeTime } from '$lib/relativeTime';
|
|
import { onMount } from 'svelte';
|
|
|
|
export let post: Post;
|
|
let displayRelativeTime = false;
|
|
const absoluteDate = new Date(post.created_at).toLocaleString();
|
|
let dateCreated = absoluteDate;
|
|
const timePassed = secondsSince(new Date(post.created_at));
|
|
$: if (displayRelativeTime) {
|
|
dateCreated = relativeTime($timePassed) ?? absoluteDate;
|
|
}
|
|
|
|
onMount(() => {
|
|
// Display relative time only after mount:
|
|
// When JS is disabled the server-side rendered absolute date will be shown,
|
|
// otherwise the relative date would be outdated very quickly
|
|
displayRelativeTime = true;
|
|
});
|
|
</script>
|
|
|
|
<div class="wrapper">
|
|
<div class="avatar"><AvatarComponent account={post.account} /></div>
|
|
<div class="account"><AccountComponent account={post.account} /></div>
|
|
<div class="meta">
|
|
<small><a href={post.url} target="_blank" title={absoluteDate}>{dateCreated}</a></small>
|
|
</div>
|
|
<div class="content">{@html post.content}</div>
|
|
<div class="song">
|
|
{#if post.songs}
|
|
{#each post.songs as song (song.pageUrl)}
|
|
<div class="info-wrapper">
|
|
<div class="bgimage" style="background-image: url({song.thumbnailUrl});" />
|
|
<a href={song.pageUrl ?? song.postedUrl} target="_blank">
|
|
<div class="info">
|
|
<img
|
|
src={song.thumbnailUrl}
|
|
class="cover"
|
|
alt="Cover for {song.artistName} - {song.title}"
|
|
/>
|
|
<span class="text">{song.artistName} - {song.title}</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.wrapper {
|
|
display: grid;
|
|
grid-template-columns: 50px 1fr auto auto;
|
|
grid-template-rows: auto 1fr auto;
|
|
grid-template-areas:
|
|
'avatar account account meta'
|
|
'avatar content content song'
|
|
'. content content song';
|
|
grid-column-gap: 6px;
|
|
column-gap: 6px;
|
|
grid-row-gap: 6px;
|
|
row-gap: 6px;
|
|
}
|
|
.avatar {
|
|
grid-area: avatar;
|
|
max-width: 50px;
|
|
max-height: 50px;
|
|
}
|
|
.account {
|
|
grid-area: account;
|
|
}
|
|
.meta {
|
|
grid-area: meta;
|
|
justify-self: end;
|
|
}
|
|
.content {
|
|
grid-area: content;
|
|
word-break: break-word;
|
|
translate: 0 -0.5em;
|
|
}
|
|
.song {
|
|
grid-area: song;
|
|
align-self: center;
|
|
justify-self: center;
|
|
max-width: 200px;
|
|
}
|
|
.cover {
|
|
max-width: 200px;
|
|
display: block;
|
|
border-radius: 3px;
|
|
margin-bottom: 3px;
|
|
}
|
|
.bgimage {
|
|
display: none;
|
|
background-color: var(--color-bg);
|
|
}
|
|
.info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
z-index: 1;
|
|
}
|
|
.info * {
|
|
z-index: inherit;
|
|
}
|
|
@media only screen and (max-width: 650px) {
|
|
.wrapper {
|
|
grid-template-areas:
|
|
'avatar account account meta'
|
|
'content content content content'
|
|
'song song song song';
|
|
grid-row-gap: 3px;
|
|
row-gap: 3px;
|
|
}
|
|
.song {
|
|
width: 100%;
|
|
}
|
|
.song,
|
|
.cover {
|
|
max-width: 100%;
|
|
}
|
|
.cover {
|
|
height: 60px;
|
|
}
|
|
.cover:not(.background) {
|
|
z-index: 1;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
.bgimage {
|
|
display: block;
|
|
width: 100%;
|
|
height: 60px;
|
|
z-index: 0;
|
|
filter: blur(10px);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
.info {
|
|
position: relative;
|
|
top: -60px;
|
|
flex-direction: row;
|
|
}
|
|
.info-wrapper {
|
|
margin-bottom: -50px;
|
|
}
|
|
.text {
|
|
padding: 3px;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border-radius: 3px;
|
|
background-color: var(--color-bg-translucent);
|
|
color: var(--color-text);
|
|
}
|
|
}
|
|
</style>
|