1 files changed, 108 insertions, 0 deletions
diff --git a/sounds/index.php b/sounds/index.php
new file mode 100644
index 0000000..c2a50b8
--- /dev/null
+++ b/sounds/index.php
@@ -0,0 +1,108 @@
+<?php
+include_once $_SERVER['DOCUMENT_ROOT'] . '/lib/config.php';
+include_once $_SERVER['DOCUMENT_ROOT'] . '/lib/partials.php';
+
+$db = new PDO(DB_URL, DB_USER, DB_PASS);
+
+$stmt = $db->prepare('SELECT * FROM sounds ORDER BY uploaded_at DESC');
+$stmt->execute();
+
+$sounds = $stmt->fetchAll(PDO::FETCH_ASSOC);
+?>
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title><?= INSTANCE_NAME ?></title>
+    <link rel="stylesheet" href="/static/style.css">
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+</head>
+
+<body>
+    <?php html_header() ?>
+    <main>
+        <section class="sound-list">
+            <?php foreach ($sounds as $s): ?>
+                <div class="box sound-item">
+                    <audio controls>
+                        <source src="<?= SOUND_DIRECTORY_PREFIX ?>/<?= $s['id'] ?>.ogg" type="audio/ogg">
+                    </audio>
+                    <a href="/sounds/?id=<?= $s['id'] ?>"><?= $s['code'] ?></a>
+                </div>
+            <?php endforeach; ?>
+            <?php if (empty($sounds)): ?>
+                <p>No sounds</p>
+            <?php endif; ?>
+        </section>
+    </main>
+</body>
+
+<script>
+    const soundFiles = document.querySelectorAll(".sound-item");
+    let currentPlayingFile = null;
+
+    for (const soundFile of soundFiles) {
+        const audioFile = soundFile.querySelector("audio");
+        if (audioFile) {
+            audioFile.style.display = 'none';
+
+            const timestampLabel = document.createElement("p");
+            timestampLabel.classList.add("timestamp");
+            timestampLabel.textContent = "0:00";
+
+            audioFile.addEventListener("timeupdate", () => {
+                const time = audioFile.currentTime;
+                const mins = Math.floor(time / 60);
+                let secs = Math.floor(time % 60);
+                secs = secs < 10 ? ('0' + secs) : secs;
+
+                timestampLabel.textContent = `${mins}:${secs}`;
+            });
+
+            const playButton = document.createElement("button");
+
+            const imgPlayButton = document.createElement("img");
+            imgPlayButton.src = '/static/img/icons/play.png';
+            imgPlayButton.alt = 'Play';
+            const imgPauseButton = document.createElement("img");
+            imgPauseButton.src = '/static/img/icons/pause.png';
+            imgPauseButton.alt = 'Pause';
+            imgPauseButton.style.display = 'none';
+
+            playButton.append(imgPlayButton, imgPauseButton);
+
+            playButton.addEventListener("click", () => {
+                if (currentPlayingFile && currentPlayingFile.file != audioFile) {
+                    currentPlayingFile.play.style.display = 'flex';
+                    currentPlayingFile.pause.style.display = 'none';
+                    currentPlayingFile.file.pause();
+                    currentPlayingFile.file.currentTime = 0;
+                    currentPlayingFile.label.textContent = "0:00";
+                    currentPlayingFile = null;
+                }
+
+                if (audioFile.paused) {
+                    audioFile.play();
+                    imgPauseButton.style.display = 'flex';
+                    imgPlayButton.style.display = 'none';
+                    currentPlayingFile = {
+                        play: imgPlayButton,
+                        pause: imgPauseButton,
+                        label: timestampLabel,
+                        file: audioFile
+                    };
+                } else {
+                    audioFile.pause();
+                    audioFile.currentTime = 0;
+                    imgPauseButton.style.display = 'none';
+                    imgPlayButton.style.display = 'flex';
+                    currentPlayingFile = null;
+                }
+            });
+
+            soundFile.prepend(playButton, timestampLabel);
+        }
+    }
+</script>
+
+</html>
+\ No newline at end of file