diff options
| author | ilotterytea <iltsu@alright.party> | 2025-10-26 04:10:21 +0500 |
|---|---|---|
| committer | ilotterytea <iltsu@alright.party> | 2025-10-26 04:10:21 +0500 |
| commit | 70da8f231232dbc3bccdb4976d65ba49050a8634 (patch) | |
| tree | 4c64a2625ae2029c6c04176bb44014575a7db899 /sounds | |
| parent | 6a848158b079af271363392c36921c6e623046a3 (diff) | |
feat: display uploaded sounds
Diffstat (limited to 'sounds')
| -rw-r--r-- | sounds/index.php | 108 |
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 |