This commit is contained in:
parent
42d91a097f
commit
9bbcc843c2
@ -10,8 +10,8 @@
|
||||
|
||||
<style>
|
||||
img {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
|
@ -24,34 +24,139 @@
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="avatar"><AvatarComponent account={post.account} /></div>
|
||||
<div class="post">
|
||||
<div class="meta">
|
||||
<AccountComponent account={post.account} />
|
||||
<small><a href={post.url} target="_blank" title={absoluteDate}>{dateCreated}</a></small>
|
||||
</div>
|
||||
<div class="content">{@html post.content}</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: flex;
|
||||
}
|
||||
.post {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 2;
|
||||
word-break: break-word;
|
||||
}
|
||||
.meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
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 {
|
||||
margin-right: 1em;
|
||||
grid-area: avatar;
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
}
|
||||
.account {
|
||||
grid-area: account;
|
||||
}
|
||||
.meta {
|
||||
grid-area: meta;
|
||||
justify-self: end;
|
||||
}
|
||||
.content {
|
||||
max-width: calc(600px - 1em - 50px);
|
||||
overflow-x: auto;
|
||||
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;
|
||||
width: 60px;
|
||||
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>
|
||||
|
@ -32,8 +32,15 @@ type PostTagRow = {
|
||||
url: string;
|
||||
};
|
||||
|
||||
type SongRow = SongInfo & {
|
||||
type SongRow = {
|
||||
post_url: string;
|
||||
postedUrl: string;
|
||||
overviewUrl?: string;
|
||||
type: 'album' | 'song';
|
||||
youtubeUrl?: string;
|
||||
title?: string;
|
||||
artistName?: string;
|
||||
thumbnailUrl?: string;
|
||||
};
|
||||
|
||||
type Migration = {
|
||||
@ -468,7 +475,16 @@ function getSongData(postIdsParams: String, postIds: string[]): Promise<Map<stri
|
||||
}
|
||||
const songMap: Map<string, SongInfo[]> = tagRows.reduce(
|
||||
(result: Map<string, SongInfo[]>, item) => {
|
||||
result.set(item.post_url, [...(result.get(item.post_url) || []), item]);
|
||||
const info = {
|
||||
pageUrl: item.overviewUrl,
|
||||
youtubeUrl: item.youtubeUrl,
|
||||
type: item.type,
|
||||
title: item.title,
|
||||
artistName: item.artistName,
|
||||
thumbnailUrl: item.thumbnailUrl,
|
||||
postedUrl: item.postedUrl
|
||||
} as SongInfo;
|
||||
result.set(item.post_url, [...(result.get(item.post_url) || []), info]);
|
||||
return result;
|
||||
},
|
||||
new Map()
|
||||
|
@ -176,6 +176,8 @@ export class TimelineReader {
|
||||
return;
|
||||
}
|
||||
log.debug('Found YT URL', youtubeUrl, found_urls, found_urls.length);
|
||||
} else {
|
||||
log.debug('Found URLs and/or tags:', found_urls, found_tags);
|
||||
}
|
||||
|
||||
// TODO: Change URL detection above to use this regex.
|
||||
|
@ -21,6 +21,7 @@ body {
|
||||
--color-link: var(--color-mauve);
|
||||
--color-link-visited: var(--color-lavender);
|
||||
--color-bg: var(--color-grey-light);
|
||||
--color-bg-translucent: hsla(42, 7%, 72%, 0.5);
|
||||
--color-button: var(--color-red-light);
|
||||
--color-button-shadow: var(--color-red-desat-dark);
|
||||
--color-button-hover: var(--color-red);
|
||||
@ -48,6 +49,7 @@ a:visited {
|
||||
--color-link: var(--color-mauve);
|
||||
--color-link-visited: var(--color-lavender);
|
||||
--color-bg: var(--color-blue);
|
||||
--color-bg-translucent: hsla(259, 82%, 26%, 0.5);
|
||||
--color-button: var(--color-red-light);
|
||||
--color-button-shadow: var(--color-red-desat);
|
||||
--color-button-hover: var(--color-red);
|
||||
|
Loading…
Reference in New Issue
Block a user