added track numbers to media player

AGENTS.md

@@ -1 +0,0 @@
-go fuck yourself

src/lib/media/player.svelte

@@ -7,9 +7,17 @@
     let {
         tracks,
         cover, // album cover (optional, currently unused)
+
+        // we're doing this manually instead of letting the computer calculate optimal colours because... it's easier this way. might as well spend the 2 seconds setting two booleans rather than 2 hours trying to make this work halfway decently, lol
+        customColor,
+        useDarkText,
+        useDarkHoverText,
     }: {
         tracks: Track[];
         cover?: string;
+        customColor: string;
+        useDarkText?: boolean;
+        useDarkHoverText?: boolean;
     } = $props();
 
     let selectedTrackId: number = $state(0);
@@ -44,7 +52,11 @@
     }
 </script>
 
-<div class="media-player">
+<div class="media-player" style="
+    --color-player: {customColor};
+    --color-player-text: var({useDarkText ? "--color-text-dark" : "--color-text"});
+    --color-player-text-hover: var({useDarkHoverText ? "--color-text-dark" : "--color-text"});
+">
     <div class="now-playing">
         <audio
             src={tracks[selectedTrackId].link}
@@ -121,7 +133,10 @@
                     <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                     <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z" />
                 </svg>
-                <p class="track-title">{t.title}</p>
+                <div class="track-text-container">
+                    <span class="track-title-index">{index + 1}.</span>
+                    <p class="track-title">{t.title}</p>
+                </div>
             </button>
 
             <a class="track-icon track-download-icon" href={t.link} aria-label="download">
@@ -137,7 +152,7 @@
     .icon {
         width: 20px;
         height: 20px;
-        color: var(--color-text);
+        color: var(--color-player-text);
         transition: color var(--duration-animation) var(--anim-curve);
     }
     .icon:hover {
@@ -146,15 +161,18 @@
     }
 
     .media-player {
+        --color-player-bg: color-mix(in srgb, var(--color-player) 40%, transparent);
+
         width: 100%;
         border-radius: var(--border-radius);
-        background-color: var(--color-background-highlight-alt);
+        background-color: var(--color-player-bg);
         padding: 16px 0 16px;
         overflow: hidden;
     }
 
     .media-player p, .media-player a {
         margin: 0;
+        color: var(--color-player-text);
     }
 
     .now-playing {
@@ -171,7 +189,7 @@
     }
     /* not sure why the svg target is required only for the latter here but it won't work without it */
     .now-playing-button:hover, .track-download-icon:hover svg {
-        color: var(--color-highlight-alt);
+        color: var(--color-player);
     }
 
     .now-playing-hint, .now-playing-duration {
@@ -200,7 +218,7 @@
 	.slider {
 		flex: 1;
 		height: 6px;
-		background: var(--color-background-highlight-alt);
+        background: var(--color-player-bg);
 		border-radius: 6px;
 		overflow: hidden;
         cursor: pointer;
@@ -210,7 +228,7 @@
 	.progress-bar {
 		width: calc(100 * var(--progress));
 		height: 100%;
-		background: var(--color-highlight-alt);
+		background: var(--color-player);
         transition: width var(--duration-animation) var(--anim-curve);
 	}
 
@@ -220,6 +238,18 @@
         align-items: center;
     }
 
+    .track-text-container {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .track-title-index {
+        font-size: 0.8rem;
+        margin: 0 1px 0 5px;
+        align-self: flex-end !important;
+        line-height: 0.8rem;
+    }
+
     .track-title {
         margin: 0 4px !important;
         line-height: 1.0rem;
@@ -239,12 +269,18 @@
         transition: background-color var(--duration-animation) var(--anim-curve);
     }
     .track-play:hover {
-        background-color: var(--color-background-highlight-hover-alt);
+        background-color: var(--color-player);
+    }
+    .track-title-index, .track-title, .track-icon {
+        transition: color var(--duration-animation) var(--anim-curve);
+    }
+    .track-play:hover .track-title-index, .track-play:hover .track-title, .track-play:hover .track-icon {
+        color: var(--color-player-text-hover);
     }
 
     .track-icon {
         width: 24px;
-        color: var(--color-text);
+        color: var(--color-player-text);
     }
 
     .track-download-icon {

src/routes/projects/music/anewbeginning.md

@@ -6,8 +6,6 @@
 
 This EP, to me, represents the start of a deviation in tone, production quality, and musical style from my previous works. While it was only a start, I am quite proud of the works I produced.
 
-The EP is available for download on [my copyparty instance](https://files.natconf.dev/public/my_tracks/A%20New%20Beginning/).
-
 <Player
     tracks={[
         {
@@ -28,4 +26,6 @@ The EP is available for download on [my copyparty instance](https://files.natcon
         },
     ]}
     cover=""
+    customColor="#A26D5F"
+    useDarkHoverText="false"
     />

src/routes/projects/music/dreamworld.md

@@ -1,9 +1,47 @@
+<script lang="ts">
+    import Player from "$lib/media/player.svelte";
+</script>
+
 **Dreamworld** is my first album. I always wanted to write a cohesive piece of media, and **Dreamworld** was my first stab at this task. Originally, I had planned to write an album in the month of July 2020, but that fell flat entirely, instead starting out with the production of *Monophobia* – a track name inspired by deadmau5' track of the same title – and working on the album until September of the year thereafter.
 
 I had started the track *Dreamworld* back in 2019, only adapting it to the project as I thought it would fit thematically. Coincidentally, *Flawed Romance* shares the same chord progression, which genuinely only happened because I accidentally wrote the same progression twice.
 
 The cover for **Dreamworld** is an edited picture of the Wallanlagen in Bremen, featuring a tree that fell and broke a year later. As such, this scene does not exist in quite the same way it did back then anymore.
 
-I own a vinyl record of this album, produced as a one-off by [beevinyl](https://beevinyl.com/).
+I own a vinyl record of this album, produced as a one-off by [beevinyl](https://beevinyl.com/). It features the [A New Beginning EP](../anewbeginning) as bonus tracks.
 
-The album is available for download on [my copyparty instance](https://files.natconf.dev/public/my_tracks/Dreamworld/).
+<Player
+    tracks={[
+        {
+            title: "Monophobia",
+            link: "https://files.natconf.dev/public/my_tracks/Dreamworld/01%20F%C3%A6ls%20-%20Monophobia.flac",
+        },
+        {
+            title: "Snow in March",
+            link: "https://files.natconf.dev/public/my_tracks/Dreamworld/02%20F%C3%A6ls%20-%20Snow%20in%20March.flac",
+        },
+        {
+            title: "Flawed Romance",
+            link: "https://files.natconf.dev/public/my_tracks/Dreamworld/03%20F%C3%A6ls%20-%20Flawed%20Romance.flac",
+        },
+        {
+            title: "Identity Crisis",
+            link: "https://files.natconf.dev/public/my_tracks/Dreamworld/04%20F%C3%A6ls%20-%20Identity%20Crisis.flac",
+        },
+        {
+            title: "Dreamworld",
+            link: "https://files.natconf.dev/public/my_tracks/Dreamworld/05%20F%C3%A6ls%20-%20Dreamworld.flac",
+        },
+        {
+            title: "I.M.W.W.H. (I Miss What We Had)",
+            link: "https://files.natconf.dev/public/my_tracks/Dreamworld/06%20F%C3%A6ls%20-%20I.M.W.W.H..flac",
+        },
+        {
+            title: "In Another Time",
+            link: "https://files.natconf.dev/public/my_tracks/Dreamworld/07%20F%C3%A6ls%20-%20In%20Another%20Time.flac",
+        },
+    ]}
+    cover=""
+    customColor="#B796A7"
+    useDarkHoverText="true"
+    />