mirror of
https://github.com/Myxelium/RandomMemerBot.git
synced 2026-04-13 10:30:36 +00:00
Larger refactoring and added avoidlist
This commit is contained in:
Myx
BIN
client/web/assets/favicon.ico
Normal file
BIN
client/web/assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
@@ -106,6 +106,7 @@ function loadFiles() {
|
||||
// Call loadFiles when the script is loaded
|
||||
loadFiles();
|
||||
loadNextPlaybackTime();
|
||||
updateAvoidList();
|
||||
|
||||
document.getElementById('uploadForm').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
@@ -185,3 +186,79 @@ document.getElementById('uploadForm').addEventListener('submit', function(event)
|
||||
alert('Please select a file or paste a YouTube link.');
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('avoidForm').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const user = document.getElementById('avoidUser').value;
|
||||
|
||||
fetch('/avoidlist', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ user }),
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then((data) => {
|
||||
updateAvoidList();
|
||||
document.getElementById('avoidUser').value = '';
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('removeUser').addEventListener('click', function() {
|
||||
const user = document.getElementById('avoidUser').value;
|
||||
|
||||
fetch(`/avoidlist/${user}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
.then(_ => {
|
||||
updateAvoidList();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
});
|
||||
|
||||
function updateAvoidList() {
|
||||
fetch('/avoidlist')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const avoidListElement = document.getElementById('avoidList');
|
||||
|
||||
// Clear the avoid list.
|
||||
avoidListElement.innerHTML = '';
|
||||
|
||||
// Add each user in the avoid list to the UI.
|
||||
data.avoidUsers.forEach(user => {
|
||||
const listItem = document.createElement('li');
|
||||
listItem.textContent = user;
|
||||
listItem.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center';
|
||||
|
||||
// Add a button to remove the user from the avoid list.
|
||||
const removeButton = document.createElement('button');
|
||||
removeButton.textContent = 'Remove';
|
||||
removeButton.className = 'btn btn-success';
|
||||
removeButton.addEventListener('click', function() {
|
||||
fetch(`/avoidlist/${user}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
.then(_ => {
|
||||
updateAvoidList();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
});
|
||||
|
||||
listItem.appendChild(removeButton);
|
||||
avoidListElement.appendChild(listItem);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
@@ -1,46 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>RandomMemer upload sounds</title>
|
||||
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-dark text-white">
|
||||
<div class="container py-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<img src="logo.svg" alt="Logo" class="img-fluid mx-auto d-block mb-5">
|
||||
<form id="uploadForm" enctype="multipart/form-data" class="mb-4 dropzone dz-clickable">
|
||||
<h3>Upload a sound</h3>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="custom-file">
|
||||
<input type="file" id="myFile" class="custom-file-input">
|
||||
<label class="custom-file-label" for="myFile">Choose file</label>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>RandomMemer upload sounds</title>
|
||||
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="icon" href="assets/favicon.ico" type="image/x-icon"/>
|
||||
</head>
|
||||
<body class="bg-dark text-white">
|
||||
<div class="container py-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<img src="assets/logo.svg" alt="Logo" class="img-fluid mx-auto d-block mb-5">
|
||||
<form id="uploadForm" enctype="multipart/form-data" class="mb-4 dropzone dz-clickable">
|
||||
<h3>Upload a sound</h3>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="custom-file">
|
||||
<input type="file" id="myFile" class="custom-file-input">
|
||||
<label class="custom-file-label" for="myFile">Choose file</label>
|
||||
</div>
|
||||
<input type="text" id="youtubeLink" class="form-control" placeholder="Paste YouTube link here">
|
||||
</div>
|
||||
<input type="text" id="youtubeLink" class="form-control" placeholder="Paste YouTube link here">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-block">Upload</button>
|
||||
</form>
|
||||
|
||||
<button id="joinButton" class="btn btn-info btn-block">Trigger a join</button>
|
||||
|
||||
<div id="nextPlaybackTime" class="mb-4">
|
||||
Endpoint not loading!?
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-block">Upload</button>
|
||||
</form>
|
||||
|
||||
<button id="joinButton" class="btn btn-info btn-block">Join</button>
|
||||
<div>
|
||||
<h3>Avoid list</h3>
|
||||
<p>A list of users the bot should never be around</p>
|
||||
<form id="avoidForm" class="mb-4">
|
||||
<div class="form-group">
|
||||
<input type="text" id="avoidUser" class="form-control" placeholder="Enter user to avoid">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-info btn-block">Add</button>
|
||||
</form>
|
||||
<ul id="avoidList" class="list-group"></ul>
|
||||
</div>
|
||||
|
||||
<div id="nextPlaybackTime" class="mb-4">
|
||||
Endpoint not loading!?
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
|
||||
<div>
|
||||
<h3>Uploaded Files</h3>
|
||||
<ul id="fileList" class="list-group"></ul>
|
||||
<div>
|
||||
<h3>Uploaded Files</h3>
|
||||
<ul id="fileList" class="list-group"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include Dropzone JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.js"></script>
|
||||
<script src="client.js"></script>
|
||||
</body>
|
||||
<!-- Include Dropzone JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.js"></script>
|
||||
<script src="scripts/avoid-list.js" type="module"></script>
|
||||
<script src="scripts/avoid-form.js" type="module"></script>
|
||||
<script src="scripts/upload.js" type="module"></script>
|
||||
<script src="scripts/file-list.js" type="module"></script>
|
||||
<script src="scripts/index.js" type="module"></script>
|
||||
<script src="scripts/join.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
48
client/web/scripts/avoid-form.js
Normal file
48
client/web/scripts/avoid-form.js
Normal file
@@ -0,0 +1,48 @@
|
||||
import { updateAvoidList } from './avoid-list.js';
|
||||
|
||||
const avoidForm = document.getElementById('avoidForm');
|
||||
if (avoidForm) {
|
||||
avoidForm.addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const user = document.getElementById('avoidUser').value;
|
||||
|
||||
if(!user)
|
||||
return;
|
||||
|
||||
fetch('/avoidlist', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
user
|
||||
}),
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then((data) => {
|
||||
updateAvoidList();
|
||||
document.getElementById('avoidUser').value = '';
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
});
|
||||
|
||||
const removeUser = document.getElementById('removeUser');
|
||||
if(removeUser){
|
||||
document.getElementById('removeUser').addEventListener('click', function () {
|
||||
const user = document.getElementById('avoidUser').value;
|
||||
|
||||
fetch(`/avoidlist/${user}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
.then(_ => {
|
||||
updateAvoidList();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
})
|
||||
}
|
||||
};
|
||||
39
client/web/scripts/avoid-list.js
Normal file
39
client/web/scripts/avoid-list.js
Normal file
@@ -0,0 +1,39 @@
|
||||
export function updateAvoidList() {
|
||||
fetch('/avoidlist')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const avoidListElement = document.getElementById('avoidList');
|
||||
|
||||
// Clear the avoid list.
|
||||
avoidListElement.innerHTML = '';
|
||||
|
||||
// Add each user in the avoid list to the UI.
|
||||
data.avoidUsers.forEach(user => {
|
||||
const listItem = document.createElement('li');
|
||||
listItem.textContent = user;
|
||||
listItem.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center';
|
||||
|
||||
// Add a button to remove the user from the avoid list.
|
||||
const removeButton = document.createElement('button');
|
||||
removeButton.textContent = 'Remove';
|
||||
removeButton.className = 'btn btn-success';
|
||||
removeButton.addEventListener('click', function () {
|
||||
fetch(`/avoidlist/${user}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
.then(_ => {
|
||||
updateAvoidList();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
});
|
||||
|
||||
listItem.appendChild(removeButton);
|
||||
avoidListElement.appendChild(listItem);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
67
client/web/scripts/file-list.js
Normal file
67
client/web/scripts/file-list.js
Normal file
@@ -0,0 +1,67 @@
|
||||
export function loadFiles() {
|
||||
// Fetch the JSON data from the /sounds endpoint
|
||||
fetch('/sounds')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Get the fileList element
|
||||
const fileList = document.getElementById('fileList');
|
||||
|
||||
// Clear the current list
|
||||
fileList.innerHTML = '';
|
||||
|
||||
// Add each file to the list
|
||||
data.forEach(file => {
|
||||
// Create a new list item
|
||||
const li = document.createElement('li');
|
||||
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
|
||||
const fileNameDiv = document.createElement('div');
|
||||
fileNameDiv.textContent = file;
|
||||
li.appendChild(fileNameDiv);
|
||||
|
||||
// Create a div for the icons and add it to the list item
|
||||
const iconDiv = document.createElement('div');
|
||||
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.textContent = '🗑️';
|
||||
iconDiv.appendChild(trashIconDiv);
|
||||
|
||||
// Attach a click event listener to the trash icon div
|
||||
trashIconDiv.addEventListener('click', () => {
|
||||
// Send a DELETE request to the server to remove the file
|
||||
fetch('/sounds/' + file, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(message => {
|
||||
console.log(message);
|
||||
|
||||
// Remove the list item from the fileList element
|
||||
fileList.removeChild(li);
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
});
|
||||
|
||||
// Add the list item to the fileList element
|
||||
fileList.appendChild(li);
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
}
|
||||
8
client/web/scripts/index.js
Normal file
8
client/web/scripts/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import { loadFiles } from './file-list.js';
|
||||
import { updateAvoidList } from './avoid-list.js';
|
||||
import { loadNextPlaybackTime } from './upload.js';
|
||||
|
||||
// Call loadFiles when the script is loaded
|
||||
loadFiles();
|
||||
loadNextPlaybackTime();
|
||||
updateAvoidList();
|
||||
18
client/web/scripts/join.js
Normal file
18
client/web/scripts/join.js
Normal file
@@ -0,0 +1,18 @@
|
||||
document.getElementById('joinButton').addEventListener('click', function() {
|
||||
this.disabled = true;
|
||||
|
||||
fetch('/join')
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
setTimeout(() => {
|
||||
this.disabled = false;
|
||||
}, 40000);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
setTimeout(() => {
|
||||
this.disabled = false;
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
100
client/web/scripts/upload.js
Normal file
100
client/web/scripts/upload.js
Normal file
@@ -0,0 +1,100 @@
|
||||
import { loadFiles } from "./file-list.js";
|
||||
|
||||
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
|
||||
})
|
||||
});
|
||||
|
||||
export function loadNextPlaybackTime() {
|
||||
fetch('/nextplaybacktime')
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
const nextPlaybackTime = document.getElementById('nextPlaybackTime');
|
||||
nextPlaybackTime.textContent = `Playing next time: ${data}`;
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
}
|
||||
|
||||
document.getElementById('uploadForm').addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var fileInput = document.getElementById('myFile');
|
||||
var file = fileInput.files[0];
|
||||
var youtubeLink = document.getElementById('youtubeLink').value;
|
||||
|
||||
if (file) {
|
||||
var objectURL = URL.createObjectURL(file);
|
||||
var audio = new Audio(objectURL);
|
||||
|
||||
audio.addEventListener('loadedmetadata', function () {
|
||||
var duration = audio.duration;
|
||||
console.log(duration);
|
||||
|
||||
if (duration > 10) {
|
||||
alert('File is longer than 10 seconds.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.size > 1024 * 1024) {
|
||||
alert('File is larger than 1MB.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.name.split('.').pop().toLowerCase() !== 'mp3') {
|
||||
alert('Only .mp3 files are allowed.');
|
||||
return;
|
||||
}
|
||||
|
||||
var formData = new FormData();
|
||||
formData.append('myFile', file);
|
||||
|
||||
fetch('/upload', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
alert('An error occurred while uploading the file.');
|
||||
}).finally(() => {
|
||||
fileInput.value = '';
|
||||
loadFiles();
|
||||
alert('File uploaded successfully.');
|
||||
});
|
||||
});
|
||||
} else if (youtubeLink) {
|
||||
console.log(youtubeLink);
|
||||
fetch('/upload-youtube', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
url: youtubeLink
|
||||
}),
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
// if response is not ok, alert
|
||||
if (data !== 'ok') {
|
||||
alert(data);
|
||||
return;
|
||||
}
|
||||
alert('File uploaded successfully.');
|
||||
loadFiles();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
alert('An error occurred while uploading the file.');
|
||||
});
|
||||
} else {
|
||||
alert('Please select a file or paste a YouTube link.');
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user