From 7162fa0ec4ac73f9237067f2307a9a987f15f3b1 Mon Sep 17 00:00:00 2001
From: Henry-Hiles <henry@henryhiles.com>
Date: Sun, 4 Jan 2026 14:25:18 -0500
Subject: [PATCH] before tidal

---
 README.md             |  2 +-
 deno.lock             |  5 +++++
 package.json          |  1 +
 src/pages/index.astro |  2 ++
 src/styles/index.css  | 11 ++++++++---
 5 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 002b3ec..0915330 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-# Musedel
+# Musedle
diff --git a/deno.lock b/deno.lock
index 2d130ab..25523f7 100644
--- a/deno.lock
+++ b/deno.lock
@@ -1,6 +1,7 @@
 {
   "version": "5",
   "specifiers": {
+    "npm:@tidal-music/player@~0.11.2": "0.11.2",
     "npm:astro@^5.16.6": "5.16.6_vite@6.4.1__picomatch@4.0.3_zod@3.25.76"
   },
   "npm": {
@@ -547,6 +548,9 @@
         "tslib"
       ]
     },
+    "@tidal-music/player@0.11.2": {
+      "integrity": "sha512-rNVxLmMHcT7vYd6KugcHMxAcOEcDonxY4XlFd15o/3vgBYr60nOLMlba3vmDfkddq813Lt9geYX7Osm6ll3lXQ=="
+    },
     "@types/debug@4.1.12": {
       "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
       "dependencies": [
@@ -2262,6 +2266,7 @@
   "workspace": {
     "packageJson": {
       "dependencies": [
+        "npm:@tidal-music/player@~0.11.2",
         "npm:astro@^5.16.6"
       ]
     }
diff --git a/package.json b/package.json
index 1e09fc1..77040c9 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
         "astro": "astro"
     },
     "dependencies": {
+        "@tidal-music/player": "^0.11.2",
         "astro": "^5.16.6"
     }
 }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 87c65a2..dfe8383 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -38,6 +38,8 @@ import "../styles/index.css"
 </Layout>
 
 <script>
+    import * as Player from "@tidal-music/player"
+
     // TODO: Use css anim for progress
     class ExtendableTimeout {
         private timerId: ReturnType<typeof setTimeout>
diff --git a/src/styles/index.css b/src/styles/index.css
index a47e6ea..10761de 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,22 +1,24 @@
 #bar {
+    width: min(40rem, 100%);
+
     & #bars {
         display: grid;
         grid-template-columns: 1fr 2fr 4fr 8fr;
         gap: 0.3rem;
+
         & * {
             background-color: rgba(255, 255, 255, 20%);
             height: 1rem;
             border-radius: 1rem;
             grid-row: 1;
         }
+
         & #available {
             grid-column-start: 1;
             width: 100%;
         }
     }
 
-    width: min(40rem, 100%);
-
     & #available {
         background-color: white;
         width: 0;
@@ -24,13 +26,16 @@
 }
 
 .frame-container {
+    position: relative;
+
     @supports (-moz-appearance: none) {
         display: none;
     }
+
     & span {
         pointer-events: none;
     }
-    position: relative;
+
     & iframe {
         position: absolute;
         width: 100%;