add table for audios & delet visualizer background

assets/css/style.css

@@ -56,7 +56,25 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* سایه برای دادن عمق */
 }
 
-/* افزودن این استایل برای تغییر رنگ و ظاهر خط */
+#visualizer {
-.audio-diary-admin-page canvas {
+    background-color: #f9f9f9; /* پس‌زمینه ملایم */
-    background-color: transparent; /* حذف پس‌زمینه سیاه */
+    border-radius: 8px;
+    border: 1px solid #ccc;
 }
+
+
+.wrap table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.wrap th, .wrap td {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+.wrap th {
+    background-color: #f2f2f2;
+    text-align: left;
+}
+

assets/js/audio-diary.js

@@ -18,17 +18,24 @@ jQuery(document).ready(function($) {
 
                function draw() {
             requestAnimationFrame(draw);
-
             analyser.getByteTimeDomainData(dataArray);
 
-            canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+            canvasCtx.clearRect(0, 0, canvas.width, canvas.height); // حذف پس‌زمینه سیاه
-            canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
 
+            // تنظیمات خط وسط
+            const centerY = canvas.height / 2;
+            canvasCtx.beginPath();
+            canvasCtx.moveTo(0, centerY);
+            canvasCtx.lineTo(canvas.width, centerY);
+            canvasCtx.strokeStyle = 'rgba(0, 0, 0, 0.2)'; // خط وسط نیمه شفاف
+            canvasCtx.lineWidth = 1;
+            canvasCtx.stroke();
+
+            // تنظیمات خط موج صدا
             canvasCtx.lineWidth = 2;
-            canvasCtx.strokeStyle = 'rgb(255, 255, 255)';
+            canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; // خط موج صدا مشکی
 
             canvasCtx.beginPath();
-
             let sliceWidth = canvas.width * 1.0 / bufferLength;
             let x = 0;
 
@@ -99,7 +106,7 @@ jQuery(document).ready(function($) {
                                     $.toast({
                                         text: "Failed to save audio", // Text that is to be shown in the toast
                                         heading: 'Note', // Optional heading to be shown on the toast
-                                        icon: 'Error', // Type of toast icon
+                                        icon: 'error', // Type of toast icon
                                         showHideTransition: 'fade', // fade, slide or plain
                                         allowToastClose: true, // Boolean value true or false
                                         hideAfter: 3000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden

classes/class_admin_page.php

@@ -30,10 +30,34 @@ class Audio_Diary_Admin_Page {
         add_action('admin_menu', array($this, 'add_menu_item'));
         add_action('admin_enqueue_scripts', array($this, 'enqueue_scripts'));
         add_action('wp_ajax_save_audio', array($this, 'save_audio'));
-    
+        add_action('wp_ajax_delete_audio_files', 'delete_audio_files');
         $this->create_audio_folder();
     }
   
+    function delete_audio_files() {
+        check_ajax_referer('audio-diary-nonce', '_ajax_nonce');
+    
+        if (!isset($_POST['files']) || !is_array($_POST['files'])) {
+            wp_send_json_error('Invalid request');
+        }
+    
+        $uploads = wp_upload_dir();
+        $audio_dir = $uploads['basedir'] . '/audio-diary/';
+        $deleted = [];
+    
+        foreach ($_POST['files'] as $file) {
+            $file_path = $audio_dir . basename($file);
+            if (file_exists($file_path) && unlink($file_path)) {
+                $deleted[] = $file;
+            }
+        }
+    
+        if (empty($deleted)) {
+            wp_send_json_error('No files deleted');
+        }
+    
+        wp_send_json_success($deleted);
+    }
     public function add_menu_item() {
         add_menu_page(
             'Audio Diary',         // عنوان صفحه

modules/audio-diary-admin-list-page.php

@@ -1,14 +1,36 @@
 <?php
 $uploads = wp_upload_dir();
 $audio_files = glob($uploads['basedir'] . '/audio-diary/*.wav');
+
+usort($audio_files, function($a, $b) {
+    return filemtime($b) - filemtime($a);
+});
+
 ?>
 <div class="wrap">
     <h1><?php _e('Recorded Audios', 'audio-diary'); ?></h1>
-    <ul>
+    <table>
-        <?php foreach ($audio_files as $file) : ?>
+        <thead>
-        <li>
+            <tr>
-            <audio controls src="<?php echo $uploads['baseurl'] . '/audio-diary/' . basename($file); ?>"></audio>
+                <th><?php _e('Date', 'audio-diary'); ?></th>
-        </li>
+                <th><?php _e('Time', 'audio-diary'); ?></th>
+                <th><?php _e('Audio', 'audio-diary'); ?></th>
+            </tr>
+        </thead>
+        <tbody>
+            <?php foreach ($audio_files as $file) : 
+                $file_date = date("Y-m-d", filemtime($file));
+                $file_time = date("H:i:s", filemtime($file));
+                $file_url = $uploads['baseurl'] . '/audio-diary/' . basename($file);
+            ?>
+            <tr>
+                <td><?php echo $file_date; ?></td>
+                <td><?php echo $file_time; ?></td>
+                <td>
+                    <audio controls src="<?php echo $file_url; ?>"></audio>
+                </td>
+            </tr>
             <?php endforeach; ?>
-    </ul>
+        </tbody>
+    </table>
 </div>