before tidal

README.md

@@ -1 +1 @@
-# Musedel
+# Musedle

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"
       ]
     }

package.json

@@ -9,6 +9,7 @@
         "astro": "astro"
     },
     "dependencies": {
+        "@tidal-music/player": "^0.11.2",
         "astro": "^5.16.6"
     }
 }

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>

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%;