Version 0.8.0 - Ajout des Alert

README.md

@@ -20,31 +20,11 @@
 
 ## Changelog
 
-### Subsonics - Web - 0.7.0
-- **Adds :** *Settings : Logs, Connexions, Gestion d'accès | Users V2 | Improvements*
-#### Details
-
-**Settings**
-> - Logs : Afficher les logs
-> - Connexions : Afficher l'état des nodes et modifier les nodes
-> - Gestion d'accès : Bannir les personnes / Leur ajouter des perms *
-
-**Users V2** 
-> - Ajout des permissions 
-> - Autoriser uniquement le CLP a controler BOT
-
-**Improvements**
-
-> - Change Volume with moving | 
-> - Find a default URL when thumbnail is null
-
-<hr>
-
 ### Subsonics - Web - 0.8.0
 - **Adds :** *Alerts, Playlist Share, Edit playlist picture | Tooltip*
 #### Details
 
-**Alerts**
+**Alerts (Done)**
 > - Popup Prefab
 > - Declencher lors de l'action
 
@@ -79,7 +59,7 @@
 <hr>
 
 ### Subsonics - Web - 1.0.0
-- **Adds :** *Bugs Fixes & Trailer | Add Playlist from Youtube*
+- **Adds :** *Bugs Fixes & Trailer*
 #### Details
 -- TO DO
 

data/nodes.json

@@ -4,35 +4,5 @@
     "password": "horizxon.studio",
     "port": 80,
     "secure": false
-  },
-  {
-    "host": "ssl.horizxon.studio",
-    "password": "horizxon.studio",
-    "port": 443,
-    "secure": true
-  },
-  {
-    "host": "suki.nathan.to",
-    "password": "adowbongmanacc",
-    "port": 443,
-    "secure": true
-  },
-  {
-    "host": "lavalink.lexnet.cc",
-    "password": "lexn3tl@val!nk",
-    "port": 443,
-    "secure": true
-  },
-  {
-    "host": "eu-lavalink.lexnet.cc",
-    "port": 443,
-    "password": "lexn3tl@val!nk",
-    "retryAmount": 1
-  },
-  {
-    "host": "narco.buses.rocks",
-    "port": 2269,
-    "password": "glasshost1984",
-    "retryAmount": 1
   }
 ]

package.json

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

src/modules/sub-web.js

@@ -320,15 +320,32 @@ function IOConnection(io) {
             subplayer.leave()
             io.emit("ANSWER/GET/DISCONNECT", "OK")
 
+            var cookies = socket.handshake.headers.cookie
+            cookies = cook.parse(cookies)
+            var token = cookies.token
+
+            const user = auth.getUser(token)
+            
+            io.sockets.emit("NOTIFICATION", {"image_src": "https://cdn.discordapp.com/avatars/" + user.user.id + "/" + user.user.avatar, "text": user.user.global_name + " (" + user.user.username + ") a déconnecté le Bot"})
+
         })
 
         GetRequest(io, socket, "RESTART", () => {
 
+           
+
+            var cookies = socket.handshake.headers.cookie
+            cookies = cook.parse(cookies)
+            var token = cookies.token
+
+            const user = auth.getUser(token)
+            
+            io.sockets.emit("NOTIFICATION", {"image_src": "https://cdn.discordapp.com/avatars/" + user.user.id + "/" + user.user.avatar, "text": user.user.global_name + " (" + user.user.username + ") a redémarré le Bot"})
+
+
             const pm2 = require('pm2');
 
             pm2.restart('SubSonics - Bot Discord')
-            
-
         })
 
         GetRequest(io, socket, "NODES", () => {
@@ -531,6 +548,7 @@ function IOConnection(io) {
                  
                 if(auth.checkUser(token)) {
 
+
                     subplayer.seek(data)
                 
                 } else {
@@ -573,7 +591,7 @@ function IOConnection(io) {
 
         })
 
-        socket.on("SEND/DELETE_QUEUE", (data) => {
+        socket.on("SEND/DELETE_QUEUE", (data, title) => {
 
 
             var cookies = socket.handshake.headers.cookie
@@ -588,6 +606,10 @@ function IOConnection(io) {
                     var sublist = new List()
                     sublist.removeByIndex(data)
 
+                     
+                    const user = auth.getUser(token)
+                    io.sockets.emit("NOTIFICATION", {"image_src": "https://cdn.discordapp.com/avatars/" + user.user.id + "/" + user.user.avatar, "text": user.user.global_name + " (" + user.user.username + ") a supprimé un titre dans la liste de lecture : <strong>" + title + "</strong>" })
+                
                 } else {
 
                     io.emit("ANSWER/SEND/DELETE_QUEUE", {"error":"USER_DONT_EXIST"})
@@ -644,6 +666,9 @@ function IOConnection(io) {
                     data.username = auth.getUser(token)
                     subplayer.report(null, null, data)
 
+                    const user = auth.getUser(token)
+                    io.emit("NOTIFICATION", {"image_src": "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.vecteezy.com%2Fvector-art%2F19521981-green-check-mark-vector-icon-with-circle-checkmark-illustration&psig=AOvVaw1-8kuUXImHNwIoVvySyiSK&ust=1694119774978000&source=images&cd=vfe&opi=89978449&ved=0CBAQjRxqFwoTCLjb2YzuloEDFQAAAAAdAAAAABAE", "text": "Votre rapport de bug a été correctement envoyé !" })
+                
                 } else {
 
                     io.emit("ANSWER/SEND/REPORT", {"error":"USER_DONT_EXIST"})
@@ -708,7 +733,7 @@ function IOConnection(io) {
 
                     subplayer.addSong(data, null, userId)
                     
-
+                    io.sockets.emit("NOTIFICATION", {"image_src": "https://cdn.discordapp.com/avatars/" + user.user.id + "/" + user.user.avatar, "text": user.user.global_name + " (" + user.user.username + ") a ajouté un nouveau titre : <strong>" + data.title + "</strong>" })
                     io.emit("ANSWER/SEND/ADD_SONG/OK")
                 
                 } else {
@@ -744,7 +769,7 @@ function IOConnection(io) {
 
                     subplayer.addSong(data, null, userId, true)
                     
-
+                    io.sockets.emit("NOTIFICATION", {"image_src": "https://cdn.discordapp.com/avatars/" + user.user.id + "/" + user.user.avatar, "text": user.user.global_name + " (" + user.user.username + ") a fait jouer maintenant un nouveau titre : <strong>" + data.title + "</strong>" })
                     io.emit("ANSWER/SEND/ADD_SONG_NOW/OK")
                 
                 } else {
@@ -780,9 +805,10 @@ function IOConnection(io) {
 
                     subplayer.addSong(data, null, userId, false, true)
                     
-
+                    io.sockets.emit("NOTIFICATION", {"image_src": "https://cdn.discordapp.com/avatars/" + user.user.id + "/" + user.user.avatar, "text": user.user.global_name + " (" + user.user.username + ") a ajouté un nouveau titre : <strong>" + data.title + "</strong>" })
                     io.emit("ANSWER/SEND/FP_ADD_SONG/OK")
                     
+                
                 } else {
 
                     io.emit("ANSWER/SEND/FP_ADD_SONG", {"error":"USER_DONT_EXIST"})
@@ -813,7 +839,7 @@ function IOConnection(io) {
 
                     subplayer.addSong(data, null, userId, true, true)
                     
-
+                    io.sockets.emit("NOTIFICATION", {"image_src": "https://cdn.discordapp.com/avatars/" + user.user.id + "/" + user.user.avatar, "text": user.user.global_name + " (" + user.user.username + ") a fait jouer maintenant un nouveau titre : <strong>" + data.title + "</strong>" })
                     io.emit("ANSWER/SEND/FP_ADD_SONG_NOW/OK")
                 
                 } else {
@@ -848,7 +874,7 @@ function IOConnection(io) {
 
                     subplayer.addSongsFromPlaylist(data, null, userId, true)
                     
-
+                    io.sockets.emit("NOTIFICATION", {"image_src": "https://cdn.discordapp.com/avatars/" + user.user.id + "/" + user.user.avatar, "text": user.user.global_name + " (" + user.user.username + ") a ajouté une playlist à la liste de lecture !" })
                     io.emit("ANSWER/SEND/FP_PLAY_PLAYLIST/OK")
                 
                 } else {

src/web/public/javascript/__index_script.js

@@ -51,6 +51,7 @@ const restartBtn = document.getElementById("restartBtn")
 const WelcomeContent = mainView.firstElementChild.outerHTML
 const playlistContent = document.getElementById("playlist-content")
 
+
 var wasOnPlaylist = false
 
 var playlistSelected = null
@@ -353,7 +354,7 @@ searchBtn.addEventListener("click", () => {
                     }
 
                     PFormatduration = pmax
-                    contentToPush.push(' <div class="search_song"> <img class="search_thumbnail" src="' + thumbnail + '"><div class="search_titleSong"> <p class="search_title">' + title.title + '</p></div> <p>' + title.author + '</p><p>' + PFormatduration + '</p> <div class="search_buttons"><button id="' + data.indexOf(title) +  '_ladd" class="search_add"><i class="fa fa-plus"></i></button> <div class="searchMoreDiv"><button id="' + data.indexOf(title) + '_lmore" class="search_lmore"><i class="fa-solid fa-ellipsis"></i></button></div><div class="searchPopup" id="' + data.indexOf(title) + '_popup"><div id="' + data.indexOf(title) + '_playNow" class="INDEX_line"><i class="fa-solid fa-play"></i> Lire maintenant</div><div id="' + data.indexOf(title) +'_addPlaylist" class="INDEX_line"><i class="fa-regular fa-square-plus"></i> Ajouter à une playlist</div></div></div><dialog id="' +  data.indexOf(title) + 'playlistManager" class="report_dialog"><div class="rlineclose"><p class="rtitle"><i class="fa fa-square-plus"></i> Ajouter à une playlist</p><button id="' +  data.indexOf(title) + 'playlistManager_close" class="report_close"><i class="fa-solid fa-xmark"></i></button></div><div class="apContent"><img id="' +  data.indexOf(title) + 'playlist_add_img" class="ppTile" src="/images/playlist-tile.svg"><p style="padding: 1%;" id="' +  data.indexOf(title) + 'playlist_add_music"></p><p>Selectionner la playlist</p><select style=" color: white; background-color: transparent; border: solid 2px #2c3df4;padding: 1%; border-radius: 12px;" id="' +  data.indexOf(title) + 'playlistSelection"></select><button id="' +  data.indexOf(title) + 'playlistAddSong" class="rsend"><i class="fa fa-plus"></i> Ajouter</button></div></dialog></div>')
+                    contentToPush.push(' <div class="search_song"> <img class="search_thumbnail" src="' + thumbnail + '"><div class="search_titleSong"> <p class="search_title">' + title.title + '</p></div> <p>' + title.author + '</p><p>' + PFormatduration + '</p> <div class="search_buttons"><button id="' + data.indexOf(title) +  '_ladd" class="search_add"><i class="fa fa-plus"></i></button> <div class="searchMoreDiv"><button id="' + data.indexOf(title) + '_lmore" class="search_lmore"><i class="fa-solid fa-ellipsis"></i></button></div><div class="searchPopup" id="' + data.indexOf(title) + '_popup"><div id="' + data.indexOf(title) + '_playNow" class="INDEX_line"><i class="fa-solid fa-play"></i> Lire maintenant</div><div id="' + data.indexOf(title) +'_addPlaylist" class="INDEX_line"><i class="fa-regular fa-square-plus"></i> Ajouter à une playlist</div><div id="' + data.indexOf(title) +'_copy" class="INDEX_line"><i class="fa-regular fa-copy"></i> Copier le lien</div></div></div><dialog id="' +  data.indexOf(title) + 'playlistManager" class="report_dialog"><div class="rlineclose"><p class="rtitle"><i class="fa fa-square-plus"></i> Ajouter à une playlist</p><button id="' +  data.indexOf(title) + 'playlistManager_close" class="report_close"><i class="fa-solid fa-xmark"></i></button></div><div class="apContent"><img id="' +  data.indexOf(title) + 'playlist_add_img" class="ppTile" src="/images/playlist-tile.svg"><p style="padding: 1%;" id="' +  data.indexOf(title) + 'playlist_add_music"></p><p>Selectionner la playlist</p><select style=" color: white; background-color: transparent; border: solid 2px #2c3df4;padding: 1%; border-radius: 12px;" id="' +  data.indexOf(title) + 'playlistSelection"></select><button id="' +  data.indexOf(title) + 'playlistAddSong" class="rsend"><i class="fa fa-plus"></i> Ajouter</button></div></dialog></div>')
                 }
         
                 if(contentToPush.join("") == "") {
@@ -371,6 +372,7 @@ searchBtn.addEventListener("click", () => {
                     const test_lmore = document.getElementById(data.indexOf(title) + "_lmore")
                     const testPopup = document.getElementById(data.indexOf(title) + "_popup") 
                     const playNow = document.getElementById(data.indexOf(title) + "_playNow")
+                    const copy = document.getElementById(data.indexOf(title) + "_copy")
                     const addPlaylist = document.getElementById(data.indexOf(title) + "_addPlaylist")  
 
                     const PlaylistManager = document.getElementById(data.indexOf(title) + "playlistManager")
@@ -394,6 +396,11 @@ searchBtn.addEventListener("click", () => {
                         send("ADD_SONG", data[add_to.id.replace("_ladd", "")])
                     })
 
+                    copy.addEventListener("click", () => {
+                        navigator.clipboard.writeText(data[add_to.id.replace("_ladd", "")].uri)
+                        testPopup.style.display = "none"
+                    })
+
                     addPlaylist.addEventListener("click", () => {
 
                         PlaylistManager.showModal()
@@ -542,6 +549,46 @@ function fp_play_playlist(key) {
 }
 
 
+var timeoutId = null
+
+socket.on("NOTIFICATION", (data) => {
+
+    if(timeoutId) {
+
+        clearTimeout(timeoutId)
+    }
+
+    const alertDiv = document.getElementById("alert")
+    const alert_image = document.getElementById("alert_image")
+    const alert_text = document.getElementById("alert_text")
+
+    alert_image.src = data.image_src
+    alert_text.innerHTML = data.text
+
+
+
+    alertDiv.classList.add("alert_div_on")
+
+    timeoutId = setTimeout(() => {
+
+        alertDiv.classList.remove("alert_div_on")
+    }, 4000)
+
+    alertDiv.addEventListener("click", () => {
+
+        
+        if(timeoutId) {
+
+            clearTimeout(timeoutId)
+        }
+
+        
+        alertDiv.classList.remove("alert_div_on")
+
+    })
+})
+
+
 const cPlaylistManager = document.getElementById("current_playlistManager")
 const cplaylistManager_close = document.getElementById("current_playlistManager_close")
 const cplaylistSelection = document.getElementById("current_playlistSelection")
@@ -916,7 +963,7 @@ socket.on("/ALWAYS/MUSIC_STATE", (data) => {
             
             titleBtn.addEventListener("click", () => {
 
-               send("DELETE_QUEUE", titleBtn.id.replace("_ldelete", ""))
+               socket.emit("SEND/DELETE_QUEUE", titleBtn.id.replace("_ldelete", ""), data.queue[moveBtn.id.replace("_lmove", "")].title )
             })
 
             moveBtn.addEventListener("click", () => {

src/web/public/javascript/__settings_script.js

@@ -306,7 +306,9 @@ socket.on("ALWAYS/NODES",(data) => {
 
         var dataToPush = new Array()
 
-        dataToPush.push(`<div style='width: 100%; text-align: right;'>
+        dataToPush.push(`<div style='width: 100%; display: flex; justify-content: space-between; align-items: center;'>
+        <div><p><strong>Note : </strong> Les serveurs ci-dessous permettent le bon fonctionnement du Bot.</p>
+             <p>Si aucun des serveurs ne fonctionne, ajoutez-en en prenant ce lien pour la liste des serveurs : <a style='color: white' target='_blank' href="https://lavalink.darrennathanael.com/SSL/lavalink-with-ssl/"><strong>Lavalink SSL</strong></a></div>
         <button id='an_add' class='primary'><i class='fa fa-plus'></i></button></div><hr>`)
 
         dataToPush.push(`

src/web/public/stylesheets/style.css

@@ -1130,3 +1130,39 @@ p {
   height: 10%;
   padding: 2%;
 }
+
+
+.alert_div {
+
+  width: 20%;
+  position: absolute;
+  top: -10%;
+  right: 41%;
+  transition: all 2s;
+  z-index: 2;
+  color: white;
+  display: flex;
+  align-items: center;
+  background-color: #2d2d2d;
+}
+
+.alert_image {
+
+  width: 4vw;
+  height: 4vw;
+  margin-right: 3% !important;
+
+}
+
+.alert_text {
+
+    width: 100%;
+    margin-right: 1% !important;
+    font-size: 12px;
+
+}
+
+.alert_div_on {
+  transition: all 2s;
+  top: 4% !important;
+}

src/web/templates/index.ejs

@@ -8,6 +8,10 @@
 </head>
 <body>
     <div class="INDEX_Content">
+            <div style='cursor: pointer;' class="alert_div" id="alert">
+                <img class="alert_image" id="alert_image" src="/images/playlist-tile.svg">
+                <p class="alert_text" id="alert_text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. </p>
+            </div>
         <div class="INDEX_title">
             <div class=" LOGIN_title">
                 <img class="LOGIN_logopng" src="/images/logo.png">