From ea01d5f31862ceeda03c9d1afe2136f313d36028 Mon Sep 17 00:00:00 2001 From: Raphix Date: Thu, 22 Feb 2024 19:54:50 +0100 Subject: [PATCH] Version 2.0.2 - Fix et Ajout de design --- package.json | 2 +- src/modules/discord-bot.js | 1 + src/modules/sub-web.js | 21 +++++--- src/web/public/javascript/IO.js | 11 ++--- src/web/public/javascript/basics.js | 10 +++- src/web/public/javascript/index.js | 26 ++++++++++ src/web/public/javascript/oobe.js | 70 +++++++++++++-------------- src/web/public/javascript/player.js | 33 +++++-------- src/web/public/javascript/playlist.js | 17 ++++++- src/web/public/javascript/queue.js | 31 ++++++++++-- src/web/public/javascript/settings.js | 6 +-- src/web/public/javascript/view.js | 2 +- src/web/public/stylesheets/style.css | 29 +++++++++-- src/web/templates/index.ejs | 3 +- 14 files changed, 173 insertions(+), 89 deletions(-) diff --git a/package.json b/package.json index c5e9e72..873d8fc 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "subsonics-web", "author": "Raphix", - "version": "2.0.1", + "version": "2.0.2", "nodemonConfig": { "ext": "js, html", "ignore": [ diff --git a/src/modules/discord-bot.js b/src/modules/discord-bot.js index 0e46024..ee164b6 100644 --- a/src/modules/discord-bot.js +++ b/src/modules/discord-bot.js @@ -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) diff --git a/src/modules/sub-web.js b/src/modules/sub-web.js index 7b29bc3..fdfaaf2 100644 --- a/src/modules/sub-web.js +++ b/src/modules/sub-web.js @@ -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) { }) - + diff --git a/src/web/public/javascript/IO.js b/src/web/public/javascript/IO.js index 34ed8e0..b2e4bd9 100644 --- a/src/web/public/javascript/IO.js +++ b/src/web/public/javascript/IO.js @@ -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) { diff --git a/src/web/public/javascript/basics.js b/src/web/public/javascript/basics.js index 4593bec..db65b99 100644 --- a/src/web/public/javascript/basics.js +++ b/src/web/public/javascript/basics.js @@ -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 = "" + } + } diff --git a/src/web/public/javascript/index.js b/src/web/public/javascript/index.js index 6aa6200..1131b66 100644 --- a/src/web/public/javascript/index.js +++ b/src/web/public/javascript/index.js @@ -41,3 +41,29 @@ AlwaysRequest("ALL_CONNECTED_USER", (data) => { website_list_number.innerHTML = userToPush.length }) + +const modalError = new ModalComponent({ + title: "Erreur", + content: ` +
+ +

Vous avez été déconnecté du serveur Subsonics.

+
+ `, + 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() + +}); \ No newline at end of file diff --git a/src/web/public/javascript/oobe.js b/src/web/public/javascript/oobe.js index 0125e77..56da9be 100644 --- a/src/web/public/javascript/oobe.js +++ b/src/web/public/javascript/oobe.js @@ -8,10 +8,6 @@ const cgu = `

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.


-

Les paroles fournies sur ce site sont obtenues auprès de Deezer (c).

-
-

En utilisant Subsonics, vous acceptez de respecter les conditions d'utilisation de Deezer (c) et de ne pas utiliser les paroles à des fins commerciales.

-

En utilisant Subsonics, vous acceptez de ne pas utiliser le bot pour diffuser des contenus illégaux, violents, haineux, discriminatoires, ou à caractère sexuel.


En utilisant Subsonics, vous acceptez de ne pas utiliser le bot pour diffuser des contenus à caractère politique, religieux, ou incitant à la haine.

@@ -108,44 +104,44 @@ function oobeStep2() {
- -

Appuyez sur ce bouton mettre en pause ou reprendre la lecture de la musique.

+ +

Mettre en pause ou reprendre la lecture de la musique.

- -

Appuyez sur ce bouton pour revenir au début de la musique actuelle.

+ +

Revenir au début de la musique actuelle.

- -

Appuyez sur ce bouton pour passer à la musique suivante.

+ +

Passer à la musique suivante.

- -

Appuyez sur ce bouton pour activer ou désactiver la répétition de la musique actuelle.

+ +

Activer ou désactiver la répétition de la musique actuelle.

- -

Appuyez sur ce bouton pour activer ou désactiver la lecture aléatoire des musiques.

+ +

Activer ou désactiver la lecture aléatoire des musiques.

- -

Appuyez sur ce bouton pour afficher les paroles - Ctrl + Click Recherche n'importe quelles paroles sur Deezer.

+ +

Afficher les paroles - Ctrl + Click pour rechercher n'importe quelles paroles.

- -

Appuyez sur ce bouton pour déconnecter le bot de votre salon vocal.

+ +

Déconnecter le bot de votre salon vocal.

- -

Appuyez sur ce bouton pour déplacer le bot dans votre salon vocal.

+ +

Déplacer le bot dans votre salon vocal.

- -

Utilisez ce curseur pour régler le volume de la musique.

+ +

Régler le volume de la musique.

- -:-- -

Utilisez ce curseur pour régler la position de la musique.

+ +

Régler la position de la musique.

@@ -223,7 +219,7 @@ function oobeStep3() {

À suivre

Historique

-

Utilisez ces boutons pour changer de liste de lecture.

+

Passe entre la liste de lecture et l'historique.


@@ -231,16 +227,16 @@ function oobeStep3() {

-:--

-

Vous pouvez déplacer les titres dans l'ordre que vous le souhaitez en glissant et en déposant

+

Déplacer des titres dans la liste de lecture en glissant et en déposant


-

Appuyez sur ce bouton pour vider la liste de lecture.

+

Efface la liste de lecture

-

Appuyez sur ce bouton pour afficher les options de la musique. - Ctrl + Click Permet de supprimer la musique de la liste de lecture.

+

Affiche les options de la musique. - Ctrl + Click Permet de supprimer la musique de la liste de lecture.

@@ -405,23 +401,23 @@ function oobeStep4b() {
-

Appuyez sur ce bouton pour ajouter la playlist à la liste de lecture.

+

Ajouter la playlist à la liste de lecture.

-

Appuyez sur ce bouton pour lire directement la playlist.

+

Lire directement la playlist.

-

Appuyez sur ce bouton pour partager la playlist.

+

Partager la playlist.

-

Appuyez sur ce bouton pour supprimer la playlist.

+

Supprimer la playlist.

-

Appuyez sur ce bouton pour renommer la playlist.

+

Renommer la playlist.


@@ -526,19 +522,19 @@ function oobeStep5() { -

Utilisez cette barre de recherche pour trouver des musiques sur Youtube, Soundcloud et Vimeo.

+

Trouver des musiques sur Youtube, Soundcloud et Vimeo.

-

Appuyez sur ce bouton pour ajouter la musique à la liste de lecture.

+

Ajouter la musique à la liste de lecture.

-

Appuyez sur ce bouton pour lire directement la musique.

+

Lire directement la musique.

-

Appuyez sur ce bouton pour sauvegarder la musique dans une playlist.

+

Sauvegarder la musique dans une playlist.

diff --git a/src/web/public/javascript/player.js b/src/web/public/javascript/player.js index 3f5a286..a042aab 100644 --- a/src/web/public/javascript/player.js +++ b/src/web/public/javascript/player.js @@ -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("
")) { const modal = new ModalComponent({"title": "Paroles" , "width": "50%", "closable": true}) modal.setContent(`

Aucune paroles trouvées pour cette musique !

@@ -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("
") + // 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(`

${lyrics}

`) } + }) - // Bold the line if it's between [] - - if(line.startsWith("[") && line.endsWith("]")) { - lyricsArray.push("

" + line + "

") - } else { - lyricsArray.push("

" + line + "

") - } - - - } - - - lyricsArray.push("

Distribué par Deezer ©️") setTileActive(null) diff --git a/src/web/public/javascript/playlist.js b/src/web/public/javascript/playlist.js index 5a93671..7bb555b 100644 --- a/src/web/public/javascript/playlist.js +++ b/src/web/public/javascript/playlist.js @@ -92,6 +92,16 @@ function loadPlaylistList() { } } + // Show a message if the playlist is empty + + if(playlists.length == 0) { + playlistList.innerHTML = `
+ +

Aucune playlist

+
` + } + + 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 = "

Aucun titre dans cette playlist

" + playlistList.innerHTML = `
+ + +

Aucun titre dans cette playlist

+ +
` } for(var song of songList) { diff --git a/src/web/public/javascript/queue.js b/src/web/public/javascript/queue.js index 7ce595c..938740b 100644 --- a/src/web/public/javascript/queue.js +++ b/src/web/public/javascript/queue.js @@ -44,9 +44,20 @@ function showQueue(queue, type) { listDiv.innerHTML = "" if(!queue) { - listDiv.innerHTML = "

Subsonics est déconnecté

" + listDiv.innerHTML = ` + +
+ +

Subsonics est déconnecté

+
` if(type == "previous") { - listDiv.innerHTML = "

Aucune musique n'a été jouée

" + listDiv.innerHTML = ` +
+ +

Aucune musique jouée

+
+ + ` } } else if(queue.length > 0) { @@ -109,9 +120,21 @@ function showQueue(queue, type) { } else { if(type == "next") { - listDiv.innerHTML = "

Aucune musique n'est en attente

" + listDiv.innerHTML = ` +
+ +

Aucune musique n'est en attente

+
+ + ` } else if(type == "previous") { - listDiv.innerHTML = "

Aucune musique n'a été jouée

" + listDiv.innerHTML = ` +
+ +

Aucune musique jouée

+
+ + ` } } } diff --git a/src/web/public/javascript/settings.js b/src/web/public/javascript/settings.js index 79a9994..0eaa047 100644 --- a/src/web/public/javascript/settings.js +++ b/src/web/public/javascript/settings.js @@ -66,12 +66,12 @@ function loadReportView() {

OOBE

+ ">Tutoriel
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 !
+ ">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 ! - + ` diff --git a/src/web/public/javascript/view.js b/src/web/public/javascript/view.js index 329c52d..4b65405 100644 --- a/src/web/public/javascript/view.js +++ b/src/web/public/javascript/view.js @@ -41,7 +41,7 @@ function loadSettings() { loadView(`
-

Rapport & OOBE

+

Rapport & Tutoriel

${contentAdmin}
diff --git a/src/web/public/stylesheets/style.css b/src/web/public/stylesheets/style.css index 624bc1f..db1721e 100644 --- a/src/web/public/stylesheets/style.css +++ b/src/web/public/stylesheets/style.css @@ -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 */ diff --git a/src/web/templates/index.ejs b/src/web/templates/index.ejs index 2331df7..3363651 100644 --- a/src/web/templates/index.ejs +++ b/src/web/templates/index.ejs @@ -31,7 +31,7 @@

Playlists

- +
@@ -40,6 +40,7 @@
+