music from DB

engine/app/controller/UploadController.php

@@ -1,35 +1,96 @@
 <?php
 namespace App\Controller;
+
 session_start();
 use App\Veiw\View;
-// require_once __DIR__ . "/../view/View.php";
+use Shalex\Engine\Db;
 
 class UploadController
 {
     public function actionIndex()
     {
-        // todo: Вынести проверку авторизации в отдельный модуль
-        if (
-            isset($_SESSION['IS_AUTH'])
-            and $_SESSION['IS_AUTH'] == true
-        ) {
+        if (isset($_SESSION['IS_AUTH']) && $_SESSION['IS_AUTH'] == true) {
             $portial = (View::render([], 'upload_tpl.php'));
             echo (View::render(['content' => $portial], 'layout_admin.php'));
         } else {
             header("Location:http://localhost:8000/login");
-        };
+        }
     }
 
     public function actionAddfile()
     {
-        $uploaddir = 'C:\\Lerning\\itmo-php-course\\engine\\uploads\\';
-        $uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
-
-        echo '<pre>';
-        if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
-            echo "Файл не содержит ошибок и успешно загрузился на сервер.\n";
-        } else {
-            echo "Возможная атака на сервер через загрузку файла!\n";
+        try {
+            $link = Db::connection(CONFIG_DB);
+        } catch (\Doctrine\DBAL\Exception $e) {
+            die("Ошибка подключения к базе данных: " . $e->getMessage());
         }
+
+        $uploaddir = 'C:\\Lerning\\lerning-php\\itmo-php-course\\engine\\uploads\\';
+        $fileName = basename($_FILES['userfile']['name']);
+        $uploadfile = $uploaddir . $fileName;
+
+        $fileMimeType = mime_content_type($_FILES['userfile']['tmp_name']);
+        $fileExtension = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
+
+        $allowedMimeTypes = ['audio/mpeg'];
+        $allowedExtensions = ['mp3'];
+
+        $maxFileSize = 11 * 1024 * 1024;
+
+        if (
+            in_array($fileMimeType, $allowedMimeTypes) &&
+            in_array($fileExtension, $allowedExtensions) &&
+            $_FILES['userfile']['size'] <= $maxFileSize
+        ) {
+            // Проверка наличия файла в базе данных
+            try {
+                $sql = "SELECT * FROM files WHERE file_name = :file_name";
+                $stmt = $link->prepare($sql);
+                $stmt->bindValue('file_name', $fileName);
+                $result = $stmt->executeQuery();
+                $existingFile = $result->fetchAssociative();
+
+                if ($existingFile) {
+                    $message = "Файл уже загружен. Ссылка для скачивания: <a href='{$existingFile['download_link']}'>{$existingFile['download_link']}</a>";
+                    $status = 'info';
+                } else {
+                    // Проверка наличия файла в директории
+                    if (file_exists($uploadfile)) {
+                        $message = "Файл с таким именем уже существует на сервере.";
+                        $status = 'info';
+                    } else {
+                        // Перемещение загруженного файла в директорию
+                        if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
+                            // Генерация ссылки для скачивания
+                            $downloadLink = './uploads/' . $fileName;
+
+                            // Сохранение ссылки в базу данных
+                            try {
+                                $link->insert('files', [
+                                    'file_name' => $fileName,
+                                    'download_link' => $downloadLink,
+                                ]);
+                                $message = "Файл успешно загружен. Ссылка для скачивания: <a href='$downloadLink'>$downloadLink</a>";
+                                $status = 'success';
+                            } catch (\Doctrine\DBAL\Exception $e) {
+                                $message = "Ошибка при сохранении в базу данных: " . $e->getMessage();
+                                $status = 'error';
+                            }
+                        } else {
+                            $message = "Ошибка при загрузке файла.";
+                            $status = 'error';
+                        }
+                    }
+                }
+            } catch (\Doctrine\DBAL\Exception $e) {
+                echo "Ошибка при проверке файла в базе данных: " . $e->getMessage();
+                return;
+            }
+        } else {
+            $message = "Ошибка: разрешены только MP3-файлы размером до 10 MB.";
+            $status = 'error';
+        }
+        // $rendMessage = (View::render([], 'message_tpl.php'));
+        // echo (View::render(['message' => $rendMessage], 'layout_admin.php'));
     }
-}
+}

engine/app/model/MusicModel.php

@@ -2,18 +2,18 @@
 
 namespace App\Model;
 
-use Shalex\Engine\DataBase;
+// use Shalex\Engine\DataBase;
 use Shalex\Engine\Db;
 
 class MusicModel
 {
     static function getData()
     {
-        $link = Db::connection(CONFIG_DB);
-        $query = "SELECT * FROM track WHERE device_id = 3";
-        $result = $link->executeQuery($query);
-        $composer = $result->fetchAssociative();
-        var_dump($composer['composer_name']);
+        // $link = Db::connection(CONFIG_DB);
+        // $query = "SELECT * FROM track WHERE device_id = 4";
+        // $result = $link->executeQuery($query);
+        // $composer = $result->fetchAssociative();
+        // var_dump($composer['composer_name']);
         $box = [];
         if ($handle = opendir('./uploads')) {
             while (false !== ($entry = readdir($handle))) {

engine/app/template/index_tpl.php

@@ -12,22 +12,28 @@
 
 
 
-  <nav class="bg-white border-gray-200 dark:bg-gray-900">
-    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+  <nav class="bg-white border-gray-200 dark:bg-gray-900 ">
+    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-5">
       <a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
         <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
         <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
       </a>
-      <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
+      <!-- <button data-collapse-toggle="navbar-default" type="button"
+        class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        aria-controls="navbar-default" aria-expanded="false">
         <span class="sr-only">Open main menu</span>
         <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
-        </svg>
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M1 1h15M1 7h15M1 13h15" />
+        </svg> -->
       </button>
       <div class="hidden w-full md:block md:w-auto" id="navbar-default">
-        <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+        <ul
+          class="font-medium flex flex-col p-5 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
           <li>
-            <a href="./login" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Login</a>
+            <a href="./login"
+              class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500"
+              aria-current="page">Login</a>
           </li>
 
         </ul>
@@ -35,75 +41,137 @@
     </div>
   </nav>
   <div class="flex border-b">
-    <button id="tab1" class="px-4 py-2 border-b-2 border-blue-500 text-blue-500 font-medium active" onclick="showTab('tab1')">Classic</button>
-    <button id="tab2" class="px-4 py-2 border-b-2 border-transparent text-gray-500 font-medium hover:text-gray-700 hover:border-gray-300" onclick="showTab('tab2')">Jazz</button>
-    <button id="tab3" class="px-4 py-2 border-b-2 border-transparent text-gray-500 font-medium hover:text-gray-700 hover:border-gray-300" onclick="showTab('tab3')">Rock</button>
+    <button id="tab1" class="px-4 py-2 border-b-2 border-blue-500 text-blue-500 font-medium active"
+      data-target="content1" onclick="showTab('tab1')">All Styles</button>
+    <button id="tab2"
+      class="px-4 py-2 border-b-2 border-transparent text-gray-500 font-medium hover:text-gray-700 hover:border-gray-300"
+      data-target="content2" onclick="showTab('tab2')">Classic</button>
+    <button id="tab3"
+      class="px-4 py-2 border-b-2 border-transparent text-gray-500 font-medium hover:text-gray-700 hover:border-gray-300"
+      data-target="content3" onclick="showTab('tab3')">Jazz</button>
+    <button id="tab4"
+      class="px-4 py-2 border-b-2 border-transparent text-gray-500 font-medium hover:text-gray-700 hover:border-gray-300"
+      data-target="content4" onclick="showTab('tab4')">Rock</button>
   </div>
 
-  <div id="content1" class="p-4">
+  <div id="content1" class="p-4 mt-4">
     <div id="feed"><?php echo $portial ?></div>
     <button type="button" id="paginator" data-id="1">Далее...</button>
-    <div id="content2" class="p-4 hidden">
-      Содержимое вкладки 2
-    </div>
-    <div id="content3" class="p-4 hidden">
-      Содержимое вкладки 3
-    </div>
+  </div>
+  <div id="content2" class="p-4 mt-4 hidden">
+    Содержимое вкладки 2
+  </div>
+  <div id="content3" class="p-4 mt-4 hidden">
+    Содержимое вкладки 3
+  </div>
+  <div id="content4" class="p-4 mt-4 hidden">
+    Содержимое вкладки 4
+  </div>
 
-    <script>
-      function showTab(tabId) {
-        const tabs = document.querySelectorAll('.flex button');
-        const contents = document.querySelectorAll('.p-4');
 
-        tabs.forEach(tab => {
-          tab.classList.remove('active');
-          tab.classList.remove('border-blue-500');
-          tab.classList.remove('text-blue-500');
-          tab.classList.add('border-transparent');
-          tab.classList.add('text-gray-500');
-        });
+  <script>
+    function showTab(tabId) {
+      const tabs = document.querySelectorAll('.flex button');
+      const contents = document.querySelectorAll('.p-4');
 
-        contents.forEach(content => {
-          content.classList.add('hidden');
-        });
+      tabs.forEach(tab => {
+        tab.classList.remove('active', 'border-blue-500', 'text-blue-500');
+        tab.classList.add('border-transparent', 'text-gray-500');
+      });
 
-        document.getElementById(tabId).classList.add('active');
-        document.getElementById(tabId).classList.add('border-blue-500');
-        document.getElementById(tabId).classList.add('text-blue-500');
-        document.getElementById(tabId).classList.remove('border-transparent');
-        document.getElementById(tabId).classList.remove('text-gray-500');
-        document.getElementById(`content${tabId.slice(-1)}`).classList.remove('hidden');
-      }
+      contents.forEach(content => {
+        content.classList.add('hidden');
+      });
 
-      async function getFetch(url) {
+      const selectedTab = document.getElementById(tabId);
+      const contentId = selectedTab.getAttribute('data-target');
+      const content = document.getElementById(contentId);
+
+      selectedTab.classList.add('active', 'border-blue-500', 'text-blue-500');
+      selectedTab.classList.remove('border-transparent', 'text-gray-500');
+      content.classList.remove('hidden');
+
+    }
+
+    async function getFetch(url) {
+      try {
         const response = await fetch(url, {
           method: 'get'
-        })
+        });
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
         return await response.text();
-
+      } catch (error) {
+        console.error('Fetch error:', error);
+        return null;
       }
-      async function getPage(event) {
-        event.stopPropagation()
-        event.preventDefault()
-        let num_page = parseInt(event.target.getAttribute('data-id'))
-        console.log(num_page)
-        let limit = 5
-        url = 'portial?offset=' + limit * num_page + '&limit=' + limit
-        // console.log(url)
-        let data = await getFetch(url)
-        if (!data) event.target.remove()
-        //  event.target.remove()
-        feed = document.getElementById('feed')
-        feed.innerHTML = feed.innerHTML + data
-        event.target.setAttribute('data-id', parseInt(num_page) + 1)
+    }
+    async function getPage(event) {
+      event.stopPropagation();
+      event.preventDefault();
+      let num_page = parseInt(event.target.getAttribute('data-id'));
+      let limit = 5;
+      let url = 'portial?offset=' + (limit * num_page) + '&limit=' + limit;
+      let data = await getFetch(url);
 
+      if (!data || data.trim() === "") {
+        event.target.remove(); // Убираем кнопку, если данных больше нет
+      } else {
+        let feed = document.getElementById('feed');
+        feed.innerHTML += data; // Добавляем новые данные к существующим
+        event.target.setAttribute('data-id', num_page + 1); // Увеличиваем номер страницы
+      }
+    }
+
+    const parent = document.getElementById('paginator');
+    parent.addEventListener('click', getPage);
+
+    // Получаем все аудиоэлементы
+    const audioElements = document.querySelectorAll('audio');
+
+    // Останавливаем все треки, кроме текущего
+    function stopAllAudiosExcept(currentAudio) {
+      audioElements.forEach(audio => {
+        if (audio !== currentAudio && !audio.paused) {
+          audio.pause(); // Останавливаем воспроизведение
+          audio.currentTime = 0; // Сбрасываем время трека на начало
+        }
+      });
+    }
+
+    // Добавляем обработчик события play для каждого аудиоэлемента
+    audioElements.forEach(audio => {
+      audio.addEventListener('play', () => {
+        stopAllAudiosExcept(audio); // Останавливаем все другие треки
+      });
+    });
+
+    // Функция для последовательного воспроизведения
+    function playNextAudio(index) {
+      if (index >= audioElements.length) {
+        return; // Если треки закончились, ничего не делаем
       }
 
-      const parent = document.getElementById('paginator')
-      parent.addEventListener('click', getPage)
-    </script>
+      const currentAudio = audioElements[index];
+      const nextAudio = audioElements[index + 1];
 
+      // Воспроизводим текущий трек
+      currentAudio.play();
 
+      // Когда текущий трек заканчивается, запускаем следующий
+      currentAudio.addEventListener('ended', () => {
+        if (nextAudio) {
+          nextAudio.play();
+          playNextAudio(index + 1); // Рекурсивно запускаем следующий трек
+        }
+      });
+    }
+
+    // Запускаем воспроизведение с первого трека
+    playNextAudio(0);
+
+  </script>
 </body>
 
 </html>

engine/app/template/layout_admin.php

@@ -11,63 +11,96 @@
 
 <body>
 
-    <button data-drawer-target="default-sidebar" data-drawer-toggle="default-sidebar" aria-controls="default-sidebar" type="button" class="inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+    <button data-drawer-target="default-sidebar" data-drawer-toggle="default-sidebar" aria-controls="default-sidebar"
+        type="button"
+        class="inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
         <span class="sr-only">Open sidebar</span>
-        <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-            <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
+        <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" fill-rule="evenodd"
+                d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z">
+            </path>
         </svg>
     </button>
 
-    <aside id="default-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar">
+    <aside id="default-sidebar"
+        class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0"
+        aria-label="Sidebar">
         <div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
             <ul class="space-y-2 font-medium">
                 <li>
-                    <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
-                        <svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 21">
-                            <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
-                            <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+                    <a href="#"
+                        class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                        <svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                            viewBox="0 0 22 21">
+                            <path
+                                d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+                            <path
+                                d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
                         </svg>
                         <span class="ms-3">Dashboard</span>
                     </a>
                 </li>
                 <li>
-                    <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
-                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
-                            <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z" />
+                    <a href="#"
+                        class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                            viewBox="0 0 18 18">
+                            <path
+                                d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z" />
                         </svg>
                         <span class="flex-1 ms-3 whitespace-nowrap">Kanban</span>
-                        <span class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+                        <span
+                            class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
                     </a>
                 </li>
                 <li>
-                    <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
-                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z" />
+                    <a href="#"
+                        class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                            viewBox="0 0 20 20">
+                            <path
+                                d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z" />
                         </svg>
                         <span class="flex-1 ms-3 whitespace-nowrap">Inbox</span>
-                        <span class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
+                        <span
+                            class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
                     </a>
                 </li>
                 <li>
-                    <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
-                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
-                            <path d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z" />
+                    <a href="#"
+                        class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                            viewBox="0 0 20 18">
+                            <path
+                                d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z" />
                         </svg>
                         <span class="flex-1 ms-3 whitespace-nowrap">Users</span>
                     </a>
                 </li>
                 <li>
-                    <a href="./upload" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
-                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
-                            <path d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z" />
+                    <a href="./upload"
+                        class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                            viewBox="0 0 18 20">
+                            <path
+                                d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z" />
                         </svg>
                         <span class="flex-1 ms-3 whitespace-nowrap">Загрузка</span>
                     </a>
                 </li>
                 <li>
-                    <a href="./logout" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
-                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 16">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
+                    <a href="./logout"
+                        class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 16">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
                         </svg>
                         <span class="flex-1 ms-3 whitespace-nowrap">Log Out</span>
                     </a>
@@ -82,22 +115,28 @@
             <div class="grid grid-cols-3 gap-4 mb-4">
                 <div class="flex items-center justify-center h-24 rounded bg-gray-50 dark:bg-gray-800">
                     <p class="text-2xl text-gray-400 dark:text-gray-500">
-                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
+                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 18 18">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 1v16M1 9h16" />
                         </svg>
                     </p>
                 </div>
                 <div class="flex items-center justify-center h-24 rounded bg-gray-50 dark:bg-gray-800">
                     <p class="text-2xl text-gray-400 dark:text-gray-500">
-                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
+                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 18 18">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 1v16M1 9h16" />
                         </svg>
                     </p>
                 </div>
                 <div class="flex items-center justify-center h-24 rounded bg-gray-50 dark:bg-gray-800">
                     <p class="text-2xl text-gray-400 dark:text-gray-500">
-                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
+                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 18 18">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 1v16M1 9h16" />
                         </svg>
                     </p>
                 </div>
@@ -109,72 +148,91 @@
                     <?php else: ?>
                         <?php echo "Нужен контент" ?>
                     <?php endif; ?>
+                    
 
                 </p>
             </div>
             <div class="grid grid-cols-2 gap-4 mb-4">
                 <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
                     <p class="text-2xl text-gray-400 dark:text-gray-500">
-                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
+                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 18 18">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 1v16M1 9h16" />
                         </svg>
                     </p>
                 </div>
                 <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
                     <p class="text-2xl text-gray-400 dark:text-gray-500">
-                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
+                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 18 18">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 1v16M1 9h16" />
                         </svg>
                     </p>
                 </div>
                 <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
                     <p class="text-2xl text-gray-400 dark:text-gray-500">
-                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
+                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 18 18">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 1v16M1 9h16" />
                         </svg>
                     </p>
                 </div>
                 <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
                     <p class="text-2xl text-gray-400 dark:text-gray-500">
-                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
+                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 18 18">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 1v16M1 9h16" />
                         </svg>
                     </p>
                 </div>
             </div>
             <div class="flex items-center justify-center h-48 mb-4 rounded bg-gray-50 dark:bg-gray-800">
                 <p class="text-2xl text-gray-400 dark:text-gray-500">
-                    <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
+                    <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                        viewBox="0 0 18 18">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M9 1v16M1 9h16" />
                     </svg>
                 </p>
             </div>
             <div class="grid grid-cols-2 gap-4">
                 <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
                     <p class="text-2xl text-gray-400 dark:text-gray-500">
-                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
+                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 18 18">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 1v16M1 9h16" />
                         </svg>
                     </p>
                 </div>
                 <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
                     <p class="text-2xl text-gray-400 dark:text-gray-500">
-                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
+                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 18 18">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 1v16M1 9h16" />
                         </svg>
                     </p>
                 </div>
                 <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
                     <p class="text-2xl text-gray-400 dark:text-gray-500">
-                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
+                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 18 18">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 1v16M1 9h16" />
                         </svg>
                     </p>
                 </div>
                 <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
                     <p class="text-2xl text-gray-400 dark:text-gray-500">
-                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
+                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 18 18">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 1v16M1 9h16" />
                         </svg>
                     </p>
                 </div>

engine/app/template/portial_music.php

@@ -1,15 +1,43 @@
 <?php
-    $audioFiles = $box; // Переименовали переменную для ясности
-    foreach ($audioFiles as $file):
-        if (file_exists($file)) : ?>
-            <div class="audio-player">
-                <audio controls="controls">
-                    <source src="<?php echo htmlspecialchars($file); ?>" type="audio/mpeg">
-                    Ваш браузер не поддерживает HTML5 audio.
-                </audio>
-            </div>
-        <?php else: ?>
-            <p>Файл "<?php echo htmlspecialchars($file); ?>" не найден.</p>
+use Shalex\Engine\Db;
+
+// Подключение к базе данных
+try {
+    $link = Db::connection(CONFIG_DB);
+} catch (\Doctrine\DBAL\Exception $e) {
+    die("Ошибка подключения к базе данных: " . $e->getMessage());
+}
+
+// Получаем параметры пагинации
+$offset = isset($_GET['offset']) ? (int)$_GET['offset'] : 0;
+$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 5;
+
+// Запрос данных из таблицы files с пагинацией
+try {
+    $sql = "SELECT download_link FROM files LIMIT :limit OFFSET :offset";
+    $stmt = $link->prepare($sql);
+    $stmt->bindValue('limit', $limit, \Doctrine\DBAL\ParameterType::INTEGER);
+    $stmt->bindValue('offset', $offset, \Doctrine\DBAL\ParameterType::INTEGER);
+    $result = $stmt->executeQuery();
+    $audioFiles = $result->fetchAllAssociative();
+} catch (\Doctrine\DBAL\Exception $e) {
+    die("Ошибка при запросе к базе данных: " . $e->getMessage());
+}
+
+// Преобразуем массив в простой список путей
+$audioFiles = array_column($audioFiles, 'download_link');
+
+// Рендеринг треков
+foreach ($audioFiles as $index => $file):
+    if (file_exists($file)) : ?>
+        <div class="audio-player">
+            <audio id="audio-<?php echo $index; ?>" controls="controls">
+                <source src="<?php echo htmlspecialchars($file); ?>" type="audio/mpeg">
+                Ваш браузер не поддерживает HTML5 audio.
+            </audio>
+        </div>
+    <?php else: ?>
+        <p>Файл "<?php echo htmlspecialchars($file); ?>" не найден.</p>
     <?php endif;
-    endforeach;
-    ?>
+endforeach;
+?>

engine/app/template/upload_tpl.php

@@ -1,3 +1,5 @@
+
+
 <form enctype="multipart/form-data" action="file_upload" method="POST">
     <input type="hidden" name="MAX_FILE_SIZE" value="30000000" />
 
@@ -5,6 +7,7 @@
     
     <input class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit" value="Отправить файл" />
 </form>
+</div>
 
 <!-- <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload file</label>
 <input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" aria-describedby="file_input_help" id="file_input" type="file" value="Отправить файл">