myxelium/RandomMemerBot
1
0
Fork 0
mirror of https://github.com/Myxelium/RandomMemerBot.git synced 2026-04-13 18:40:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Removed ugly styling library for html

Browse Source
This commit is contained in:
Myx
2023-10-14 21:08:08 +02:00
parent c51bc4bb32
commit ba11822fe5
6 changed files with 77 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
bot.ts
View File

@@ -92,6 +92,13 @@ async function joinRandomChannel(retries = 12) {
await entersState(connection, VoiceConnectionStatus.Ready, 30e3); await entersState(connection, VoiceConnectionStatus.Ready, 30e3);
const soundFiles = fileSystem.readdirSync(soundsDir).filter(file => file.endsWith('.mp3')); const soundFiles = fileSystem.readdirSync(soundsDir).filter(file => file.endsWith('.mp3'));
const soundFile = soundsDir + soundFiles[Math.floor(Math.random() * soundFiles.length)]; const soundFile = soundsDir + soundFiles[Math.floor(Math.random() * soundFiles.length)];
if(!soundFile) {
console.log(LoggerColors.Red, 'No sound files found');
scheduleNextJoin();
return;
}
const resource = createAudioResource(soundFile); const resource = createAudioResource(soundFile);
const player = createAudioPlayer(); const player = createAudioPlayer();

36
client/web/client.js
View File

@@ -1,3 +1,11 @@
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelector('#myFile').addEventListener('change', function(e) {
var fileName = e.target.files[0].name;
var nextSibling = e.target.nextElementSibling
nextSibling.innerText = fileName
})
});
function loadNextPlaybackTime() { function loadNextPlaybackTime() {
fetch('/nextplaybacktime') fetch('/nextplaybacktime')
.then(response => response.text()) .then(response => response.text())
@@ -24,20 +32,35 @@ function loadFiles() {
data.forEach(file => { data.forEach(file => {
// Create a new list item // Create a new list item
const li = document.createElement('li'); const li = document.createElement('li');
li.className = 'grid-x'; li.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center'
// Create a div for the file name and add it to the list item // Create a div for the file name and add it to the list item
const fileNameDiv = document.createElement('div'); const fileNameDiv = document.createElement('div');
fileNameDiv.className = 'cell auto';
fileNameDiv.textContent = file; fileNameDiv.textContent = file;
li.appendChild(fileNameDiv); li.appendChild(fileNameDiv);
// Create a div for the trash icon and add it to the list item // Create a div for the icons and add it to the list item
const trashIconDiv = document.createElement('div'); const iconDiv = document.createElement('div');
trashIconDiv.className = 'cell shrink'; li.appendChild(iconDiv);
// Create a div for the play icon and add it to the icon div
const playIconDiv = document.createElement('span');
playIconDiv.style.cursor = 'pointer';
playIconDiv.textContent = '▶️';
iconDiv.appendChild(playIconDiv);
// Attach a click event listener to the play icon div
playIconDiv.addEventListener('click', () => {
// Create a new audio object and play the file
let audio = new Audio('/sounds/' + file);
audio.play();
});
// Create a div for the trash icon and add it to the icon div
const trashIconDiv = document.createElement('span');
trashIconDiv.style.cursor = 'pointer'; trashIconDiv.style.cursor = 'pointer';
trashIconDiv.textContent = '🗑️'; trashIconDiv.textContent = '🗑️';
li.appendChild(trashIconDiv); iconDiv.appendChild(trashIconDiv);
// Attach a click event listener to the trash icon div // Attach a click event listener to the trash icon div
trashIconDiv.addEventListener('click', () => { trashIconDiv.addEventListener('click', () => {
@@ -60,6 +83,7 @@ function loadFiles() {
.catch(error => console.error('Error:', error)); .catch(error => console.error('Error:', error));
} }
// Call loadFiles when the script is loaded // Call loadFiles when the script is loaded
loadFiles(); loadFiles();
loadNextPlaybackTime(); loadNextPlaybackTime();

80
client/web/index.html
View File

@@ -1,49 +1,43 @@
<html> <!DOCTYPE html>
<head> <html lang="en">
<!-- <head>
ugly interface just messing around with new style frameworks every new project or so <meta charset="UTF-8">
--> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8"> <title>RandomMemer upload sounds</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<title>RandomMemer upload sounds</title> </head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css" crossorigin="anonymous"> <body class="bg-dark text-white">
</head> <div class="container py-5">
<div class="row justify-content-center">
<body style="background-color: #333;"> <div class="col-md-6">
<div class="grid-container"> <img src="logo.svg" alt="Logo" class="img-fluid mx-auto d-block mb-5">
<img src="logo.svg" alt="Logo" style="display: block; margin-left: auto; margin-right: auto; width: 50%;"> <form id="uploadForm" enctype="multipart/form-data" class="mb-4 dropzone dz-clickable">
<div class="grid-x grid-padding-x align-center" style="height: 100vh;"> <h3>Upload a sound</h3>
<div class="cell small-12 medium-6 large-4" style="height: 100%"> <div class="form-group">
<div style="position: fixed;"> <div class="input-group">
<form id="uploadForm" enctype="multipart/form-data" > <div class="custom-file">
<div class="callout"> <input type="file" id="myFile" class="custom-file-input">
<h3>Upload Sound</h3> <label class="custom-file-label" for="myFile">Choose file</label>
<div class="input-group">
<span class="input-group-label">File:</span>
<input class="input-group-field" type="file" id="myFile">
</div>
<button class="button expanded" type="submit">Upload</button>
</div> </div>
</form> </div>
</div>
<button type="submit" class="btn btn-primary btn-block">Upload</button>
</form>
<div class="callout"> <div id="nextPlaybackTime" class="mb-4">
<h3>Info</h3> Endpoint not loading!?
<div id="nextPlaybackTime"></div>
</div>
</div>
</div> </div>
<div class="cell small-12 medium-6 large-4"> <div>
<div class="callout"> <h3>Uploaded Files</h3>
<h3>Uploaded Files</h3> <ul id="fileList" class="list-group"></ul>
<div style="min-height:209px;max-height:100vh;overflow: auto;">
<ul id="fileList" class="vertical menu"></ul>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<script src="client.js"></script>
</body> <!-- Include Dropzone JS -->
</html> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.js"></script>
<script src="client.js"></script>
</body>
</html>

3
client/webserver.ts
View File

@@ -32,6 +32,9 @@ app.post('/upload', upload.single('myFile'), async (req, res) => {
res.send('File uploaded successfully.'); res.send('File uploaded successfully.');
}); });
// create a enpoint to return a file from the sounds folder (use the file name) with as little code as possible
app.use('/sounds', express.static(path.join(__dirname, '../sounds')));
app.get('/sounds', (_req, res) => { app.get('/sounds', (_req, res) => {
const fs = require('fs'); const fs = require('fs');
const directoryPath = path.join(__dirname, '../sounds'); const directoryPath = path.join(__dirname, '../sounds');

BIN
sounds/1697309103654-Rev Up Those Fryers!.mp3 Normal file
View File

Binary file not shown.

BIN
sounds/badsalt.mp3
View File

Binary file not shown.