add button for chromium

src/pages/index.astro

@@ -3,13 +3,7 @@ import Layout from "../layouts/Layout.astro"
 import "../styles/index.css"
 ---
 
-<Layout
-    ><iframe
-        id="music"
-        width="100%"
-        height="300"
-        src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/soundcloud%253Atracks%253A2196321083"
-    ></iframe>
+<Layout>
     <button id="play">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
             <path
@@ -19,7 +13,10 @@ import "../styles/index.css"
     </button>
     <section id="bar">
         <div id="bars">
-            <div></div><div></div><div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+
             <div id="available"><div id="played"></div></div>
         </div>
     </section>
@@ -30,10 +27,18 @@ import "../styles/index.css"
             ></path></svg
         >
     </button>
+    <div class="fake-button-container frame-container"
+        ><div class="fake-button">
+            <span>Click here if audio won't play, then try playing again.</span>
+            <iframe
+                src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/soundcloud%253Atracks%253A2196321083"
+            ></iframe>
+        </div></div
+    >
 </Layout>
 
 <script>
-    // Use css anim for progress
+    // TODO: Use css anim for progress
     class ExtendableTimeout {
         private timerId: ReturnType<typeof setTimeout>
         private timeStart: number
@@ -59,7 +64,7 @@ import "../styles/index.css"
         }
     }
 
-    const iframe = document.querySelector("#music")
+    const iframe = document.querySelector("iframe")
     const play = document.querySelector("#play")
     const skip = document.querySelector("#skip")
     const available = document.querySelector("#available") as HTMLDivElement
@@ -90,10 +95,15 @@ import "../styles/index.css"
         }
     }
 
-    iframe?.addEventListener("load", () => {
-        setTimeout(() => {
+    window.addEventListener("message", (event) => {
+        let data = JSON.parse(event.data)
+
+        if (data.method === "ready") {
+            message("setVolume", { value: 0 })
             message("play")
-        }, 300)
+            message("pause")
+            message("setVolume", { value: 30 })
+        }
     })
 
     play?.addEventListener("click", playVideo)

src/styles/index.css

@@ -1,13 +1,3 @@
-#music {
-    position: absolute;
-    visibility: hidden;
-    bottom: 0;
-}
-
-#play {
-    position: relative;
-}
-
 #bar {
     & #bars {
         display: grid;
@@ -32,3 +22,22 @@
         width: 0;
     }
 }
+
+.frame-container {
+    & span {
+        pointer-events: none;
+    }
+    position: relative;
+    & iframe {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border: none;
+        z-index: -2;
+        pointer-events: all;
+
+        clip-path: inset(90% 0 0 90%);
+        transform-origin: bottom right;
+        transform: scale(10);
+    }
+}

src/styles/layout.css

@@ -8,6 +8,7 @@ body {
 :root {
     background: linear-gradient(black, rgb(18, 2, 38));
     --brand-purple: #6e06ff;
+    font-family: sans-serif;
 }
 
 img {
@@ -38,10 +39,12 @@ main {
     align-items: center;
 }
 
-button {
+button,
+.fake-button {
     --border-radius: 2rem;
     position: relative;
     background: white;
+    color: black;
     border: none;
     border-radius: var(--border-radius);
 
@@ -57,14 +60,19 @@ button {
         background: rgb(211, 211, 211);
     }
 
+    &.fake-button {
+        pointer-events: none;
+    }
+
     & svg {
         width: 2.2rem;
     }
 }
 
-button::before {
+:is(button, .fake-button)::before {
     --border-size: 5px;
     content: "";
+    z-index: -1;
     border-radius: var(--border-radius);
     width: 100%;
     height: 100%;
@@ -77,5 +85,11 @@ button::before {
     top: calc(var(--border-size) * -1);
     left: calc(var(--border-size) * -1);
     position: absolute;
-    z-index: -1;
+}
+
+.fake-button-container {
+    cursor: pointer;
+    &:hover {
+        filter: brightness(80%);
+    }
 }