Personal Site
Use a random box mask for each top song
There is no `mask-image` property
+24
-1
+24
-1
src/components/home/playing/TopSongs.astro
+24
-1
src/components/home/playing/TopSongs.astro
···
2
2
import { sdk } from "./spotify";
3
3
import { throws } from "/utils";
4
4
5
+
const masks = (await Promise.all([
6
+
import("/assets/small-box-mask-1-0.png"),
7
+
import("/assets/small-box-mask-1-90.png"),
8
+
import("/assets/small-box-mask-1-180.png"),
9
+
import("/assets/small-box-mask-1-270.png"),
10
+
11
+
import("/assets/small-box-mask-2-0.png"),
12
+
import("/assets/small-box-mask-2-90.png"),
13
+
import("/assets/small-box-mask-2-180.png"),
14
+
import("/assets/small-box-mask-2-270.png"),
15
+
16
+
import("/assets/small-box-mask-3-0.png"),
17
+
import("/assets/small-box-mask-3-90.png"),
18
+
import("/assets/small-box-mask-3-180.png"),
19
+
import("/assets/small-box-mask-3-270.png"),
20
+
])).map(x => x.default.src)
21
+
5
22
const topSongs = await sdk.currentUser
6
23
.topItems("tracks", "short_term", 48)
7
24
.then((tracks) => (!tracks ? throws("Top tracks failed") : tracks))
···
15
32
topSongs.items.map(
16
33
(song) =>
17
34
song.album.images[0].url && (
18
-
<li>
35
+
<li style={`--mask: url(${masks[Math.floor(Math.random() * masks.length)] ?? masks[0]})`}>
19
36
<a href={song.external_urls.spotify}>
20
37
<img
21
38
src={song.album.images[0].url}
···
34
51
list-style: none;
35
52
display: grid;
36
53
grid-template-columns: repeat(3, 1fr);
54
+
gap: 10px;
55
+
padding: 10px;
37
56
}
38
57
39
58
img {
40
59
aspect-ratio: 1;
60
+
61
+
mask-image: var(--mask);
62
+
mask-size: 100% 100%;
63
+
mask-repeat: no-repeat;
41
64
}
42
65
</style>