before tidal

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