Personal Site
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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>