From 9780a1a2f8223095c673f6354a3640d00d8bc3bf Mon Sep 17 00:00:00 2001
From: ammar <ammarasyad@gmail.com>
Date: Mon, 9 Oct 2023 13:16:15 +0700
Subject: [PATCH] Add edit music button
---
.../music/edit/editMusic.view.php | 2 +-
src/web/presentation/music/info/albumInfo.php | 18 +++++++-
.../music/info/albumInfo.view.php | 3 +-
.../presentation/music/info/css/albumInfo.css | 18 ++++++++
.../presentation/music/info/js/albumInfo.js | 20 +++++++--
src/web/util/album-finder.php | 41 +++++++++++++++++++
6 files changed, 94 insertions(+), 8 deletions(-)
diff --git a/src/web/presentation/music/edit/editMusic.view.php b/src/web/presentation/music/edit/editMusic.view.php
index db72787..829fcd6 100644
--- a/src/web/presentation/music/edit/editMusic.view.php
+++ b/src/web/presentation/music/edit/editMusic.view.php
@@ -58,7 +58,7 @@ if (is_numeric($id)) {
<?php require 'presentation/template/navbar.php' ?>
<p id="title">Edit Music</p>
<div class="img-container">
- <img src="<?php if ($exists) echo getAlbumImage(); else echo '/presentation/music/edit/img/defalbum.jpg' ?>" alt="Album">
+ <img src="<?php if ($exists) echo getAlbumImageFromMusic(); else echo '/presentation/music/edit/img/defalbum.jpg' ?>" alt="Album">
</div>
<div class="fields" id="form-d">
<form method="post" id="form">
diff --git a/src/web/presentation/music/info/albumInfo.php b/src/web/presentation/music/info/albumInfo.php
index d1078fb..4781662 100644
--- a/src/web/presentation/music/info/albumInfo.php
+++ b/src/web/presentation/music/info/albumInfo.php
@@ -1,5 +1,9 @@
<?php
+require_once 'auth/authorizer.php';
+
+$is_admin = authorizeAdmin($_COOKIE['token']) != null;
+
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
require 'albumInfo.view.php';
} else if ($_SERVER['REQUEST_METHOD'] == 'POST') {
@@ -38,13 +42,23 @@ function secondsToMinutes($duration): string {
}
function createListItem($class, $id, $title, $duration): void {
- echo '<li class="'.$class.'">';
+ global $is_admin;
+
+ if ($is_admin) {
+ echo '<div class="hidden">';
+ }
+
+ echo '<li class="'.$class.'" id="'.$id.'">';
echo ' <p class="music-title" id="music-title">'.$title.'</p>';
echo ' <div class="music-sub-item">';
- echo ' <p style="display: none" id="music-id">'.$id.'</p>';
echo ' <p class="music-duration">'.secondsToMinutes($duration).'</p>';
echo ' </div>';
echo '</li>';
+
+ if ($is_admin) {
+ echo ' <button class="edit-music" id="'.$id.'-b">Edit</button>';
+ echo '</div>';
+ }
}
function populateList($album_id): void {
diff --git a/src/web/presentation/music/info/albumInfo.view.php b/src/web/presentation/music/info/albumInfo.view.php
index 526929d..c8e58b0 100644
--- a/src/web/presentation/music/info/albumInfo.view.php
+++ b/src/web/presentation/music/info/albumInfo.view.php
@@ -1,5 +1,6 @@
<?php
+global $is_admin;
require_once 'util/album-finder.php';
require_once 'util/account-finder.php';
@@ -49,7 +50,7 @@ if (is_numeric($id)) {
<div class="img-container">
<img src="<?php echo getAlbumImage() ?>" alt="Album">
</div>
- <?php if (authorizeAdmin($_COOKIE['token']) != null) {?>
+ <?php if ($is_admin) {?>
<div id="edit-b">
<button id="edit-button">Edit</button>
</div>
diff --git a/src/web/presentation/music/info/css/albumInfo.css b/src/web/presentation/music/info/css/albumInfo.css
index c6e24ac..9285fd4 100644
--- a/src/web/presentation/music/info/css/albumInfo.css
+++ b/src/web/presentation/music/info/css/albumInfo.css
@@ -107,6 +107,24 @@ body {
margin-right: 8px;
}
+.edit-music {
+ display: flex;
+ justify-content: center;
+ width: 50px;
+ height: 20px;
+ border: none;
+ border-radius: 5px;
+ background-color: #da0f47;
+ color: white;
+ font-size: 12px;
+ font-weight: 500;
+ cursor: pointer;
+}
+
+#hidden {
+ overflow: hidden;
+}
+
#audio-d {
position: fixed;
bottom: 0;
diff --git a/src/web/presentation/music/info/js/albumInfo.js b/src/web/presentation/music/info/js/albumInfo.js
index 9e603a2..af92874 100644
--- a/src/web/presentation/music/info/js/albumInfo.js
+++ b/src/web/presentation/music/info/js/albumInfo.js
@@ -1,12 +1,12 @@
-const list = document.querySelector('#music-list').getElementsByTagName('li');
-// const audioPlayer = document.createElement('audio');
+const listItems = document.querySelector('#music-list').getElementsByTagName('li');
+const editButtons = document.querySelector('#music-list').getElementsByClassName('edit-music');
const audioPlayer = document.querySelector('#audio');
-for (let item of list) {
+for (let item of listItems) {
item.addEventListener('click', (e) => {
e.preventDefault();
- let id = item.querySelector('#music-id').innerHTML;
+ let id = item.id;
let url = '/album';
let xhr = new XMLHttpRequest();
@@ -28,4 +28,16 @@ for (let item of list) {
xhr.send(JSON.stringify(data));
});
+}
+
+if (editButtons && editButtons.length > 0) {
+ for (let item of editButtons) {
+ item.addEventListener('click', (e) => {
+ e.preventDefault();
+
+ let id = item.id.substring(0, item.id.length - 2);
+
+ window.location.href = '/music/edit?id=' + id;
+ });
+ }
}
\ No newline at end of file
diff --git a/src/web/util/album-finder.php b/src/web/util/album-finder.php
index 111134e..cf0827f 100644
--- a/src/web/util/album-finder.php
+++ b/src/web/util/album-finder.php
@@ -5,6 +5,47 @@ function getAlbumName(mixed $album_id) {
return $result[0]['name'];
}
+function getAlbumImageFromMusic(): string {
+ $image = '/presentation/music/edit/img/defalbum.jpg';
+
+ if (!isset($_GET['id'])) {
+ return $image;
+ }
+
+ // get album id from db
+ $album_id = execSelect("SELECT album_id FROM music WHERE music_id = :id", ['id' => $_GET['id']])[0]['album_id'];
+
+ // get album cover filename from db
+ $q_result = execSelect("SELECT owner_account_id, album_cover_filename FROM album WHERE album_id = :id", ['id' => $album_id]);
+ $accountId = $q_result[0]['owner_account_id'];
+
+ if (count($q_result) != 0) {
+ $filename = $q_result[0]['album_cover_filename'];
+
+ // prepare curl request
+ $url = 'object-storage:80/object';
+
+ $data = http_build_query(array(
+ 'owner' => $accountId, // account id,
+ 'fileType' => 'album-cover',
+ 'fileName' => $filename
+ ));
+ $getUrl = $url.'?'.$data;
+
+ $curl = curl_init($getUrl);
+ 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);
+ $image = 'data:'.$contentType.';base64,'.base64_encode($result);
+ }
+ curl_close($curl);
+ }
+
+ return $image;
+}
+
function getAlbumImage(): string {
$image = '/presentation/music/edit/img/defalbum.jpg';
--
GitLab