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
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