Skip to content

Commit 807a11f

Browse files
Sup2point0Sup2point0
committed
sup
1 parent 6b204e2 commit 807a11f

5 files changed

Lines changed: 169 additions & 282 deletions

File tree

‎src/parts/music/block.track.listen.svelte‎

Lines changed: 76 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ A wide block card for displaying info about a track I listen to.
55

66
<script lang="ts">
77
8-
import { AnimationData, register_animation, calc_delay } from "#scripts/anim.svelte.ts";
8+
import { anim } from "#scripts/anim.svelte.ts";
99
import { display_date } from "#scripts/utils";
1010
import type { TrackData } from "#scripts/types/music/listen";
1111
@@ -17,101 +17,102 @@ import { expoInOut } from "svelte/easing";
1717
1818
interface Props {
1919
track: TrackData;
20+
invert?: boolean;
2021
}
2122
22-
let { track }: Props = $props();
23+
let { track, invert = false }: Props = $props();
2324
2425
2526
let open = $state(false);
2627
2728
let self: HTMLElement;
28-
let anim = new AnimationData();
2929
3030
onMount(() => {
31-
if (self) {
32-
register_animation(self, anim);
33-
} else {
34-
setTimeout(() => register_animation(self, anim), 1000);
35-
}
31+
requestAnimationFrame(() => {
32+
if (invert) {
33+
open = !open;
34+
}
35+
});
3636
});
3737
3838
</script>
3939

4040

4141
<button class="block-track-listen"
4242
class:shrink={track.name.length > 20}
43-
class:intersected={anim.intersected}
4443
class:open
4544
id={track.shard}
4645
bind:this={self}
4746
onclick={() => { open = !open; }}
48-
style:--delay={calc_delay(anim, 0.2)}
47+
{@attach anim}
4948
>
5049
<div class="content">
51-
<div class="img-container">
52-
<img alt={track.name} title={track.name}
53-
width="200px" height="200px"
54-
src="/covers/music/listen/{track.cover}"
55-
/>
50+
51+
<div class="img-container">
52+
<img alt={track.name} title={track.name}
53+
width="200px" height="200px"
54+
src="/covers/music/listen/{track.cover}"
55+
/>
56+
</div>
57+
58+
<div class="info">
59+
<div class="upper">
60+
<div class="title">
61+
<h3> {track.name} </h3>
62+
63+
{#if track.date}
64+
<p class="date">
65+
{display_date(track.date)}
66+
</p>
67+
{/if}
5668
</div>
5769

58-
<div class="info">
59-
<div class="upper">
60-
<div class="title">
61-
<h3> {track.name} </h3>
62-
63-
{#if track.date}
64-
<p class="date">
65-
{display_date(track.date)}
66-
</p>
67-
{/if}
68-
</div>
69-
70-
<div class="artists">
71-
{#each track.artists as shard}
72-
<!-- TODO display artist name properly -->
73-
<a href="/sup/music/listen/artists#{shard}">
74-
{shard}
75-
</a>
76-
77-
<span class="separator"> × </span>
78-
{/each}
79-
</div>
80-
</div>
81-
82-
<div class="sep"></div>
83-
84-
{#if open && track.desc}
85-
<div class="lower" transition:slide={{ duration: 800, easing: expoInOut }}>
86-
{#if Array.isArray(track.desc)}
87-
{#each track.desc as block}
88-
<p> {@html block} </p>
89-
{/each}
90-
{:else}
91-
<p> {@html track.desc} </p>
92-
{/if}
93-
</div>
70+
<div class="artists">
71+
{#each track.artists as shard}
72+
<!-- TODO display artist name properly -->
73+
<a href="/sup/music/listen/artists#{shard}">
74+
{shard}
75+
</a>
9476

77+
<span class="separator"> × </span>
78+
{/each}
79+
</div>
80+
</div>
81+
82+
<div class="sep"></div>
83+
84+
{#if open && track.desc}
85+
<div class="lower" transition:slide={{ duration: 800, easing: expoInOut }}>
86+
{#if Array.isArray(track.desc)}
87+
{#each track.desc as block}
88+
<p> {@html block} </p>
89+
{/each}
9590
{:else}
96-
<div class="lower" transition:slide={{ duration: 800, easing: expoInOut }}>
97-
{#if track.discovered}
98-
<p class="discovered">
99-
{@html track.discovered}
100-
</p>
101-
{/if}
102-
103-
<ul class="genres">
104-
{#each track.genres ?? [] as genre}
105-
<li class="genre"> {genre} </li>
106-
{/each}
107-
108-
{#each track.vibes ?? [] as vibe}
109-
<li class="vibe"> {vibe} </li>
110-
{/each}
111-
</ul>
112-
</div>
91+
<p> {@html track.desc} </p>
11392
{/if}
11493
</div>
94+
95+
{:else}
96+
<div class="lower" transition:slide={{ duration: 800, easing: expoInOut }}>
97+
{#if track.discovered}
98+
<p class="discovered">
99+
{@html track.discovered}
100+
</p>
101+
{/if}
102+
103+
<ul class="genres">
104+
{#each track.genres ?? [] as genre}
105+
<li class="genre"> {genre} </li>
106+
{/each}
107+
108+
{#each track.vibes ?? [] as vibe}
109+
<li class="vibe"> {vibe} </li>
110+
{/each}
111+
</ul>
112+
</div>
113+
{/if}
114+
</div>
115+
115116
</div>
116117
</button>
117118

@@ -143,6 +144,10 @@ onMount(() => {
143144
100% { filter: brightness(100%); }
144145
}
145146
}
147+
148+
&:hover .lower p {
149+
color: $col-text;
150+
}
146151
}
147152
148153
.content {
@@ -156,7 +161,8 @@ onMount(() => {
156161
opacity: 0;
157162
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) var(--delay, 0s); // ease-out-exp
158163
159-
.block-track-listen.intersected & {
164+
/* NOTE: Need `:global` to avoid CSS being purged!! */
165+
:global(.block-track-listen.intersected) & {
160166
transform: none;
161167
opacity: 1;
162168
}
@@ -237,6 +243,7 @@ img {
237243
font-weight: 300;
238244
color: $col-text-deut;
239245
text-align: left;
246+
transition: #{trans()};
240247
}
241248
242249
p.discovered {

‎src/routes/(sup)/sup/music/listen/chronicle/+page.svelte‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<script>
1+
<script lang="ts">
22
3-
import { display_date } from "#scripts/utils";
3+
import { pick_random, display_date } from "#scripts/utils";
44
55
import Main from "#parts/core/main.svelte";
66
import Block from "#parts/ui/block.svelte"
@@ -9,6 +9,24 @@ import TrackBlock from "#parts/music/block.track.listen.svelte";
99
1010
import { chronicle_data } from "./chronicle";
1111
12+
import { onMount } from "svelte";
13+
14+
15+
let invert: boolean;
16+
let displayed_route = $state("");
17+
18+
onMount(() => {
19+
invert = Math.random() > 0.5;
20+
displayed_route = pick_random(routes);
21+
});
22+
23+
24+
const routes = [
25+
`While I’ve split these into discrete “eras”, in reality there was definitely overlap between them – not everything was perfectly linear, many eras evolved in parallel! Also, the dates don’t mean I don’t listen to these tracks anymore, they just indicate when I first came across them!`,
26+
27+
`It goes without saying that if a track’s in here, I already love it to bits. So I’ll try refrain from reiterating “I LOVE THIS TRACK SO MUCH”, altho sometimes it really does just need emphasising. And while I could probably say whether I like one track more than another if held at gunpoint, music is music, and I love it all, there’s no competition or rankings.`,
28+
];
29+
1230
</script>
1331

1432

@@ -26,9 +44,13 @@ import { chronicle_data } from "./chronicle";
2644

2745
<Main>
2846
<Block>
29-
This is a brief selection of my favourite tracks over the years! They’re not exactly “favourites” per se, but more just tracks that I really notably liked, and are a landmark along my evolution of music tastes.
30-
<div style:height="0.69rem"></div>
31-
While I’ve split these into discrete “eras”, in reality there was definitely overlap between them – not everything was perfectly linear, many eras evolved in parallel! Also, the dates don’t mean I don’t listen to these tracks anymore, they just indicate when I came across them!
47+
{#if displayed_route}
48+
<p> This is a brief selection of my favourite tracks over the years! They’re not exactly “favourites” per se, but more just tracks that I really notably liked, and are a landmark along my evolution of music tastes. </p>
49+
50+
<p> {@html displayed_route} </p>
51+
52+
<p> You can find these tracks in a <a target="_blank" href="https://youtube.com/playlist?list=PLYWIouv-DSkA_6f6V_ZChkIKn7_Foqxnd">YouTube playlist of mine</a> ;) </p>
53+
{/if}
3254
</Block>
3355

3456
<div class="chronicle">
@@ -45,7 +67,7 @@ import { chronicle_data } from "./chronicle";
4567

4668
<div class="content">
4769
{#each tracks as track}
48-
<TrackBlock {track} />
70+
<TrackBlock {track} {invert} />
4971
{/each}
5072
</div>
5173
</section>

0 commit comments

Comments
 (0)