subsonics/web
subsonics/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Version 2.0.2 - Fix et Ajout de design

Browse Source
This commit is contained in:
Raphael 2024-02-22 19:54:50 +01:00
parent bf50cc0881
commit ea01d5f318
14 changed files with 173 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "subsonics-web",
"author": "Raphix",
"version": "2.0.1",
"version": "2.0.2",
"nodemonConfig": {
"ext": "js, html",
"ignore": [

1
src/modules/discord-bot.js
View File

@ -203,6 +203,7 @@ function startErelaManager(dlog, config) {
client.manager.on("playerDestroy",async (player) => {
await list.addCurrentToPrevious()
await list.destroy()
await client.channels.fetch(player.options.voiceChannel).then(channel => {
plog.log("Player supprimé dans : " + channel.name)

21
src/modules/sub-web.js
View File

@ -19,8 +19,7 @@ const markdownit = require("markdown-it")({
typographer: true
})
const Lyrics = require('song-lyrics-api');
const lyrics = new Lyrics();
module.exports.WebServer = class {
@ -479,13 +478,19 @@ function IOConnection(io) {
})
PostRequest("LYRICS", async (data) => {
lyrics.getLyrics(data)
.then((response) => {
PostAnswer("LYRICS", response[0].lyrics)
let url = `https://paxsenixofc.my.id/server/getLyricsMusix.php?q=${data}&type=default`;
fetch(url, {
method: 'GET',
})
.then(response => response.text())
.then(data => {
PostAnswer("LYRICS", data)
})
.catch((error) => {
PostAnswer("LYRICS", null)
})
console.error('Erreur:', error);
});
})
@ -558,7 +563,7 @@ function IOConnection(io) {
})

11
src/web/public/javascript/IO.js
View File

@ -1,19 +1,16 @@
var socketLink = null
fetch('/internal/socketlink', {
method: "GET"
}).then(link => {socketLink = link})
/**
* @type {SocketIOClient.Socket}
*/
const socket = io(socketLink);
socket.on("connect", () => {
console.log("Connecté au serveur par le Socket avec l'ID : " + socket.id)
get("MUSIC_STATE")
});
socket.on("disconnect", () => {
window.location.href = "/"
});
function get(request) {

10
src/web/public/javascript/basics.js
View File

@ -138,7 +138,11 @@ class DroppableMenu {
}
}
class ModalComponent {
/**
* @type {HTMLElement}
*/
Element;
constructor(properties) {
this.title = properties.title
@ -191,7 +195,11 @@ class ModalComponent {
}
hide() {
this.Element.outerHTML = ""
if(this.Element && this.Element.parentElement) {
this.Element.outerHTML = ""
}
}

26
src/web/public/javascript/index.js
View File

@ -41,3 +41,29 @@ AlwaysRequest("ALL_CONNECTED_USER", (data) => {
website_list_number.innerHTML = userToPush.length
})
const modalError = new ModalComponent({
title: "Erreur",
content: `
<div class='disconnected-modal'>
<span class='no-song-icon'><i class="fa-solid fa-exclamation-triangle"></i></span>
<p>Vous avez été déconnecté du serveur Subsonics.</p>
</div>
`,
width: "20%",
closable: false
})
socket.on("connect", () => {
modalError.hide()
console.log("Connecté au serveur par le Socket avec l'ID : " + socket.id)
get("MUSIC_STATE")
});
socket.on("disconnect", () => {
console.log("Déconnecté du serveur par le Socket")
modalError.hide()
modalError.show()
});

70
src/web/public/javascript/oobe.js
View File

@ -8,10 +8,6 @@ const cgu = `
<br>
<p>En utilisant Subsonics, vous bénéficiez du droit d'accès au service et de l'écoute du contenu. Cependant, veuillez noter que Raphix n'est pas tenu de fournir la provenance ni l'autorisation d'exploitation des musiques par les ayants droits. Il vous incombe donc d'obtenir les autorisations nécessaires des ayants droits pour écouter le contenu.</p>
<br>
<p>Les paroles fournies sur ce site sont obtenues auprès de Deezer (c).</p>
<br>
<p>En utilisant Subsonics, vous acceptez de respecter les conditions d'utilisation de Deezer (c) et de ne pas utiliser les paroles à des fins commerciales.</p>
<br>
<p>En utilisant Subsonics, vous acceptez de ne pas utiliser le bot pour diffuser des contenus illégaux, violents, haineux, discriminatoires, ou à caractère sexuel.</p>
<br>
<p>En utilisant Subsonics, vous acceptez de ne pas utiliser le bot pour diffuser des contenus à caractère politique, religieux, ou incitant à la haine.</p>
@ -108,44 +104,44 @@ function oobeStep2() {
<br>
<div class='oobe-line'>
<span class="oobe wh"><i class="fa fa-play icon"></i></span>
<p>Appuyez sur ce bouton mettre en pause ou reprendre la lecture de la musique.</p>
<span class="wh"><i class="fa fa-play"></i></span>
<p>Mettre en pause ou reprendre la lecture de la musique.</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-backward icon"></i></span>
<p>Appuyez sur ce bouton pour revenir au début de la musique actuelle.</p>
<span class="wh"><i class="fa fa-backward"></i></span>
<p>Revenir au début de la musique actuelle.</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-forward icon"></i></span>
<p>Appuyez sur ce bouton pour passer à la musique suivante.</p>
<span class="wh"><i class="fa fa-forward"></i></span>
<p>Passer à la musique suivante.</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-sync-alt icon"></i></span>
<p>Appuyez sur ce bouton pour activer ou désactiver la répétition de la musique actuelle.</p>
<span class="wh"><i class="fa fa-sync-alt"></i></span>
<p>Activer ou désactiver la répétition de la musique actuelle.</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-shuffle icon"></i></span>
<p>Appuyez sur ce bouton pour activer ou désactiver la lecture aléatoire des musiques.</p>
<span class="wh"><i class="fa fa-shuffle"></i></span>
<p>Activer ou désactiver la lecture aléatoire des musiques.</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-microphone-lines icon"></i></span>
<p>Appuyez sur ce bouton pour afficher les paroles - <span class='oobe-ctrl'>Ctrl + Click</span> Recherche n'importe quelles paroles sur Deezer.</p>
<span class="wh"><i class="fa fa-microphone-lines"></i></span>
<p>Afficher les paroles - Ctrl + Click pour rechercher n'importe quelles paroles.</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-phone-slash icon"></i></span>
<p>Appuyez sur ce bouton pour déconnecter le bot de votre salon vocal.</p>
<span class="wh"><i class="fa fa-phone-slash"></i></span>
<p>Déconnecter le bot de votre salon vocal.</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-hand icon"></i></span>
<p>Appuyez sur ce bouton pour déplacer le bot dans votre salon vocal.</p>
<span class="wh"><i class="fa fa-hand"></i></span>
<p>Déplacer le bot dans votre salon vocal.</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-volume-up icon"></i></span>
<p>Utilisez ce curseur pour régler le volume de la musique.</p>
<span class="wh"><i class="fa fa-volume-up"></i></span>
<p>Régler le volume de la musique.</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh">-:--</span>
<p>Utilisez ce curseur pour régler la position de la musique.</p>
<input disabled class='volume-oobe' type="range" value="100" max="100">
<p>Régler la position de la musique.</p>
</div>
@ -223,7 +219,7 @@ function oobeStep3() {
<p class="selected">À suivre</p>
<p class="">Historique</p>
</div>
<p>Utilisez ces boutons pour changer de liste de lecture.</p>
<p>Passe entre la liste de lecture et l'historique.</p>
</div>
<br>
@ -231,16 +227,16 @@ function oobeStep3() {
<div style='width: unset;' class="list-video-div">
<div class="list-video_image"><p class='oobe-list-time-code'>-:--</p></div>
</div>
<p>Vous pouvez déplacer les titres dans l'ordre que vous le souhaitez en glissant et en déposant</p>
<p>Déplacer des titres dans la liste de lecture en glissant et en déposant</p>
</div>
<br>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-trash"></i></span>
<p>Appuyez sur ce bouton pour vider la liste de lecture.</p>
<p>Efface la liste de lecture</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa-solid fa-ellipsis-vertical"></i></span>
<p>Appuyez sur ce bouton pour afficher les options de la musique. - <span class='oobe-ctrl'>Ctrl + Click</span> Permet de supprimer la musique de la liste de lecture.</p>
<p>Affiche les options de la musique. - <span class='oobe-ctrl'>Ctrl + Click</span> Permet de supprimer la musique de la liste de lecture.</p>
</div>
@ -405,23 +401,23 @@ function oobeStep4b() {
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-add"></i></span>
<p>Appuyez sur ce bouton pour ajouter la playlist à la liste de lecture.</p>
<p>Ajouter la playlist à la liste de lecture.</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-play"></i></span>
<p>Appuyez sur ce bouton pour lire directement la playlist.</p>
<p>Lire directement la playlist.</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-paper-plane"></i></span>
<p>Appuyez sur ce bouton pour partager la playlist.</p>
<p>Partager la playlist.</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-trash"></i></span>
<p>Appuyez sur ce bouton pour supprimer la playlist.</p>
<p>Supprimer la playlist.</p>
</div>
<div class='oobe-line'>
<span class="oobe-wh"><i class="fa fa-pen"></i></span>
<p>Appuyez sur ce bouton pour renommer la playlist.</p>
<p>Renommer la playlist.</p>
</div>
<br>
@ -526,19 +522,19 @@ function oobeStep5() {
<i class="fa fa-magnifying-glass"></i>
<input disabled autocomplete="off" type="text" placeholder="Insérez des mots-clés ou un lien">
</div>
<p>Utilisez cette barre de recherche pour trouver des musiques sur Youtube, Soundcloud et Vimeo.</p>
<p>Trouver des musiques sur Youtube, Soundcloud et Vimeo.</p>
</div>
<div class='oobe-line'>
<span class="search-circle"><i class="fa fa-add"></i></span>
<p>Appuyez sur ce bouton pour ajouter la musique à la liste de lecture.</p>
<p>Ajouter la musique à la liste de lecture.</p>
</div>
<div class='oobe-line'>
<span class="search-circle"><i class="fa fa-play"></i></span>
<p>Appuyez sur ce bouton pour lire directement la musique.</p>
<p>Lire directement la musique.</p>
</div>
<div class='oobe-line'>
<span class="search-circle"><i class="fa fa-save"></i></span>
<p>Appuyez sur ce bouton pour sauvegarder la musique dans une playlist.</p>
<p>Sauvegarder la musique dans une playlist.</p>
</div>

33
src/web/public/javascript/player.js
View File

@ -25,6 +25,7 @@ const moveout = getID("moveout")
var durationAct = 0
var durationTotal = 0
// 4 States : PLAYING, PAUSED, CONNECTED, DISCONNECTED, LIVE
var interval = null
@ -325,7 +326,9 @@ lyrics.addEventListener('click', (e) => {
function showLyrics(title) {
title = title.replace(/\(.*?\)/g, "").replace(/\[.*?\]/g, "").trim()
post("LYRICS", title).then((res) => {
if(!res || res.error) {
if(res.startsWith("<br />")) {
const modal = new ModalComponent({"title": "Paroles" , "width": "50%", "closable": true})
modal.setContent(`
<p class="lyrics">Aucune paroles trouvées pour cette musique !</p>
@ -336,28 +339,16 @@ function showLyrics(title) {
const lyricsArray = new Array()
for(var line of res.lyrics.split("\n")) {
// Remove the line if it's start with Paroles de la chanson
if(line.startsWith("Paroles de la chanson")) {
continue
}
if(line == "") {
lyricsArray.push("<br>")
// Split res by line when a new [ appears
res.split("[").forEach((line) => {
if(line.includes("]")) {
const time = line.split("]")[0].trim()
const lyrics = line.split("]")[1].trim()
lyricsArray.push(`<p class="lyrics">${lyrics}</p>`)
}
})
// Bold the line if it's between []
if(line.startsWith("[") && line.endsWith("]")) {
lyricsArray.push("<p class='lyrics'><strong>" + line + "</strong></p>")
} else {
lyricsArray.push("<p class='lyrics'>" + line + "</p>")
}
}
lyricsArray.push("<br><br><a href='https://deezer.com' target='_blank' class='lyrics-info wh'>Distribué par Deezer ©️</a>")
setTileActive(null)

17
src/web/public/javascript/playlist.js
View File

@ -92,6 +92,16 @@ function loadPlaylistList() {
}
}
// Show a message if the playlist is empty
if(playlists.length == 0) {
playlistList.innerHTML = `<div class='no-song'>
<span class="no-song-icon"><i class="fa-solid fa-circle-xmark"></i></span>
<p>Aucune playlist</p>
</div>`
}
for(var playlist of playlists) {
playlist.loadScript()
}
@ -226,7 +236,12 @@ function loadNormalPlaylist(id, properties) {
if(songList.length == 0) {
playlistList.style.display = "flex"
playlistList.innerHTML = "<p class='search-no-song'>Aucun titre dans cette playlist</p>"
playlistList.innerHTML = `<div class='search-no-song'>
<span class="no-song-icon"><i class="fa-solid fa-circle-xmark"></i></span>
<p>Aucun titre dans cette playlist</p>
</div>`
}
for(var song of songList) {

31
src/web/public/javascript/queue.js
View File

@ -44,9 +44,20 @@ function showQueue(queue, type) {
listDiv.innerHTML = ""
if(!queue) {
listDiv.innerHTML = "<p class='no-song'>Subsonics est déconnecté</p>"
listDiv.innerHTML = `
<div class='no-song'>
<span class="no-song-icon"><i class="fa-solid fa-link-slash"></i></span>
<p>Subsonics est déconnecté</p>
</div>`
if(type == "previous") {
listDiv.innerHTML = "<p class='no-song'>Aucune musique n'a été jouée</p>"
listDiv.innerHTML = `
<div class='no-song'>
<span class="no-song-icon"><i class="fa-solid fa-volume-xmark"></i></span>
<p>Aucune musique jouée</p>
</div>
`
}
} else if(queue.length > 0) {
@ -109,9 +120,21 @@ function showQueue(queue, type) {
} else {
if(type == "next") {
listDiv.innerHTML = "<p class='no-song'>Aucune musique n'est en attente</p>"
listDiv.innerHTML = `
<div class='no-song'>
<span class="no-song-icon"><i class="fa-solid fa-volume-xmark"></i></span>
<p>Aucune musique n'est en attente</p>
</div>
`
} else if(type == "previous") {
listDiv.innerHTML = "<p class='no-song'>Aucune musique n'a été jouée</p>"
listDiv.innerHTML = `
<div class='no-song'>
<span class="no-song-icon"><i class="fa-solid fa-volume-xmark"></i></span>
<p>Aucune musique jouée</p>
</div>
`
}
}
}

6
src/web/public/javascript/settings.js
View File

@ -66,12 +66,12 @@ function loadReportView() {
<br>
<h1 style="
align-self: start;
">OOBE</h1>
">Tutoriel</h1>
<h5 style="
text-align: justify;
">L'OOBE est une suite de tutoriels pour vous aider à utiliser l'interface du bot. Si vous avez des difficultés à utiliser le bot, vous pouvez lancer l'OOBE pour vous aider à comprendre comment l'utiliser. Vous pouvez aussi le lancer pour le fun !</h5>
">Le tutoriel est une suite de panneaux pour vous aider à utiliser l'interface du bot. Si vous avez des difficultés à utiliser le bot, vous pouvez lancer l'OOBE pour vous aider à comprendre comment l'utiliser. Vous pouvez aussi le lancer pour le fun !</h5>
<button id='oobe-launch' class="report-send"><i class="fa-solid fa-up-right-from-square"></i> Lancer l'OOBE</button>
<button id='oobe-launch' class="report-send"><i class="fa-solid fa-up-right-from-square"></i> Lancer le tutoriel</button>
</div>
`

2
src/web/public/javascript/view.js
View File

@ -41,7 +41,7 @@ function loadSettings() {
loadView(`
<div class='settings-container'>
<div class="st-selector">
<p id="st-report" class="selected">Rapport & OOBE</p>
<p id="st-report" class="selected">Rapport & Tutoriel</p>
${contentAdmin}
</div>
<div id='st-content' class="st-content">

29
src/web/public/stylesheets/style.css
View File

@ -105,6 +105,13 @@ h1 {
background-color: rgb(42, 42, 42) !important;
}
.disconnected-modal {
display: flex;
gap: 20px;
align-items: center;
}
input[type="text"] {
background-color: #545454;
@ -502,7 +509,7 @@ button:hover {
padding: 40px;
justify-content: center;
align-items: center;
gap: 40px;
gap: 20px;
align-self: stretch;
}
@ -521,7 +528,7 @@ button:hover {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4%;
gap: 20px;
align-self: stretch;
/* height: 78vh; */
}
@ -758,9 +765,15 @@ button:hover {
justify-content: center;
align-items: center;
height: 100%;
margin-top: 42% !important;
margin-top: 20% !important;
color: #A0A0A0;
font-size: 20px;
flex-direction: column;
gap: 10px;
}
.no-song-icon {
font-size: 60px;
}
/* Search */
@ -921,8 +934,10 @@ button:hover {
height: 100%;
width: 100%;
color: #A0A0A0;
margin-top: 20%;
font-size: 20px;
flex-direction: column;
gap: 10px;
}
.search-circle {
@ -1052,6 +1067,11 @@ button:hover {
font-size: 14px;
}
.playlist-add-btn {
width: 100%;
}
.playlist-add:hover {
background-color: #ffffff;
color: #000000;
@ -1116,6 +1136,7 @@ button:hover {
flex-direction: column;
gap: 10px;
position: absolute;
width: 100%;
}
/* Settings */

3
src/web/templates/index.ejs
View File

@ -31,7 +31,7 @@
<div class="playlist">
<div class="wintitle">
<p>Playlists</p>
<button id="playlist-add"><i class="fa fa-plus"></i> Ajouter une playlist</button>
<i class="fa fa-music"></i>
</div>
@ -40,6 +40,7 @@
</div>
</div>
<button class="playlist-add-btn" id="playlist-add"><i class="fa fa-plus"></i> Ajouter une playlist</button>
</div>
<div class="usercard">
<div class="usercard_div">