Add play functionality to play button in music info

b9fec7cc · ammar · c17ea0a1 · b9fec7cc · b9fec7cc · b9fec7cc
Commit b9fec7cc authored 1 year ago by ammar
--- a/src/web/presentation/music/info/css/musicInfo.css
+++ b/src/web/presentation/music/info/css/musicInfo.css
@@ -98,4 +98,15 @@ body {

 #play-b:active {
    background-color: #b00c3f;
+}
+
+#audio-d {
+    position: fixed;
+    bottom: 0;
+    margin-top: 16px;
+    width: calc(100% - 250px);
+}
+
+#audio {
+    width: 100%
 }
\ No newline at end of file
--- a/src/web/presentation/music/info/js/musicInfo.js
+++ b/src/web/presentation/music/info/js/musicInfo.js
+const playButton = document.querySelector("#play-b")
+const audioPlayer = document.querySelector("#audio")
+
+playButton && playButton.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const query = new URLSearchParams(window.location.search)
+    const id = query.get("id")
+    const xhr = new XMLHttpRequest()
+    const url = "/music/" // idk why accessing music from anywhere keeps adding a trailing backslash
+    const data = {
+        id: id
+    }
+
+    xhr.open('POST', url, true)
+    xhr.setRequestHeader("Content-Type", "application/json")
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            console.log(xhr)
+            const audio = JSON.parse(xhr.responseText)
+            audioPlayer.src = audio.data
+            audioPlayer.hidden = false
+            audioPlayer.play()
+        }
+    }
+
+    xhr.send(JSON.stringify(data))
+})
\ No newline at end of file
--- a/src/web/presentation/music/info/musicInfo.php
+++ b/src/web/presentation/music/info/musicInfo.php
@@ -2,4 +2,26 @@

 if ($_SERVER['REQUEST_METHOD'] == 'GET') {
    require 'musicInfo.view.php';
+} else if ($_SERVER['REQUEST_METHOD'] == 'POST') {
+    $data = json_decode(file_get_contents('php://input'), true);
+    $query = execSelect("SELECT owner_account_id, music_filename FROM music WHERE music_id = :id", ['id' => $data['id']]);
+    $accountId = $query[0]['owner_account_id'];
+    $fileName = $query[0]['music_filename'];
+
+    $params = http_build_query(array(
+        'owner' => $accountId, // account id,
+        'fileType' => 'music',
+        'fileName' => $fileName
+    ));
+
+    $curl = curl_init('object-storage:80/object?'.$params);
+    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
+    $result = curl_exec($curl);
+
+    if (!curl_errno($curl) && curl_getinfo($curl, CURLINFO_HTTP_CODE) == 200) {
+        $contentType = curl_getinfo($curl, CURLINFO_CONTENT_TYPE);
+        $data = 'data:'.$contentType.';base64,'.base64_encode($result);
+        echo json_encode(['data' => $data]);
+    }
+    curl_close($curl);
 }
\ No newline at end of file
--- a/src/web/presentation/music/info/musicInfo.view.php
+++ b/src/web/presentation/music/info/musicInfo.view.php
@@ -37,6 +37,7 @@ if (is_numeric($id)) {
 <head>
    <meta charset="UTF-8">
    <title><?php echo $artist . ' - ' . $title ?></title>
+    <script src="/presentation/music/info/js/musicInfo.js" defer></script>
    <link rel="stylesheet" href="/presentation/music/info/css/musicInfo.css">
    <link rel="stylesheet" type="text/css" href="/presentation/template/css/sidebar.css">
    <link rel="stylesheet" type="text/css" href="/presentation/template/css/navbar.css">
@@ -70,6 +71,11 @@ if (is_numeric($id)) {
                <button id="play-b">Play</button>
            </div>
        </div>
+        <div id="audio-d">
+            <audio id="audio" controls hidden="hidden">
+                <source src="" type="audio/mp3">
+            </audio>
+        </div>
    </div>
 </div>
 </body>