Version 0.4.0 - Ajout du Loop, Volume et de la déconnexion

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "subsonics-web",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "subsonics-web",
-      "version": "0.2.3",
+      "version": "0.3.0",
       "dependencies": {
         "cookie": "^0.5.0",
         "cookie-parser": "^1.4.6",

package.json

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

src/modules/discord-bot.js

@@ -194,8 +194,8 @@ function startErelaManager(dlog, config) {
 
     const list = new List() 
     
-    client.manager.on("playerCreate", (player) => {
+    client.manager.on("playerCreate", async (player) => {
-        client.channels.fetch(player.options.voiceChannel).then(channel => {
+        await client.channels.fetch(player.options.voiceChannel).then(channel => {
             plog.log("Nouveau Player instancié dans : " + channel.name)
         })
 
@@ -204,10 +204,10 @@ function startErelaManager(dlog, config) {
    
     })
 
-    client.manager.on("playerDestroy", (player) => {
+    client.manager.on("playerDestroy",async (player) => {
 
-        list.destroy()
+        await list.destroy()
-        client.channels.fetch(player.options.voiceChannel).then(channel => {
+        await client.channels.fetch(player.options.voiceChannel).then(channel => {
             plog.log("Player supprimé dans : " + channel.name)
         })
  
@@ -215,21 +215,21 @@ function startErelaManager(dlog, config) {
 
     })
 
-    client.manager.on("trackStart", (song) => {
+    client.manager.on("trackStart",async (player) => {
-        plog.log("Lecture de '" + song.queue.current.title + "' de '" + song.queue.current.author + "'")
+        plog.log("Lecture de '" + player.queue.current.title + "' de '" + player.queue.current.author + "'")
-        list.setCurrent(song)
+        await  list.setCurrent(player)
-
+        await player.seek(0)
         process.emit("MUSIC_UPDATE_STATE")
     })
 
     
-    client.manager.on("queueEnd", () => {
+    client.manager.on("queueEnd", async () => {
         let player = client.manager.players.get("137291455336022018")
         if(player) { 
 
-            list.passCurrent()
+            await list.passCurrent()
             if(list.haveSongs()) {
-                player.play(list.next())
+                await player.play(list.next())
 
             }
          

src/modules/sub-player.js

@@ -174,6 +174,39 @@ module.exports.getState = function(client, interaction) {
 
    
         
+}
+
+module.exports.SPECIAL_MJ = async function (client) {
+
+    if(!client) {
+
+        client = discord.getClient()
+    }
+
+    let player = client.manager.players.get("137291455336022018")
+
+
+    if(!player) { 
+            
+        player = client.manager.create({
+            guild: "137291455336022018",
+            voiceChannel: "664355734288465920",
+            textChannel: "664355637685256203",
+        });
+
+
+        player.connect();
+    }
+
+    
+    const songs = await client.manager.search("Earth MJ")
+    const songs2 = await client.manager.search("They don't care About Us")
+
+    player.play(songs.tracks[0])
+
+    list.add(songs2.tracks[0])
+
+
 }
 
 module.exports.skip = function (client, interaction) {
@@ -243,7 +276,12 @@ module.exports.seek = function (data) {
 
     let player = client.manager.players.get("137291455336022018")
 
-    player.seek(data)
+    if(player) {
+
+        player.seek(data)
+
+    }
+
 
     process.emit("MUSIC_UPDATE_STATE")
 
@@ -251,6 +289,55 @@ module.exports.seek = function (data) {
 
 }
 
+module.exports.setVol = function (data) {
+
+  
+
+    client = discord.getClient()
+    
+
+    let player = client.manager.players.get("137291455336022018")
+
+    if(player) {
+
+        player.setVolume(data)
+
+    }
+
+
+    process.emit("MUSIC_UPDATE_STATE")
+
+
+
+}
+
+module.exports.loop = function (client) {
+
+    
+    if(!client) {
+
+        client = discord.getClient()
+    }
+
+    let player = client.manager.players.get("137291455336022018")
+
+    if(player) {
+
+        if(player.queueRepeat == true) {
+            player.setQueueRepeat(false)
+        } else {
+
+            player.setQueueRepeat(true)
+        }
+
+    }
+
+    process.emit("MUSIC_UPDATE_STATE")
+
+} 
+
+
+
 
 module.exports.previous = function (client, interaction) {
 
@@ -388,6 +475,11 @@ module.exports.leave = function (client, interaction) {
     if(interaction) {
 
         player = client.manager.players.get(interaction.guild.id)
+    } else {
+
+        client = discord.getClient()
+        player = client.manager.players.get("137291455336022018")
+
     }
         
     if(player) {

src/modules/sub-web.js

@@ -217,6 +217,27 @@ function IOConnection(io) {
             io.emit("ANSWER/GET/FORWARD", "OK")
         })
 
+        GetRequest(socket, "LOOP", () => {
+
+            subplayer.loop()
+            io.emit("ANSWER/GET/LOOP", "OK")
+        })
+
+        
+        GetRequest(socket, "DISCONNECT", () => {
+
+            subplayer.leave()
+            io.emit("ANSWER/GET/DISCONNECT", "OK")
+        })
+
+
+        GetRequest(socket, "SPECIAL/MJ", () => {
+
+            subplayer.SPECIAL_MJ()
+            io.emit("ANSWER/GET/SPECIAL/MJ", "OK")
+        })
+
+
         // SEND REQUEST
 
         socket.on("SEND/SEEK", (data) => {
@@ -246,9 +267,32 @@ function IOConnection(io) {
 
         })
 
+        socket.on("SEND/VOLUME", (data) => {
+
+
+            var cookies = socket.handshake.headers.cookie
+
+            if(cookies) {
+
+                cookies = cook.parse(cookies)
+                var token = cookies.token
+                 
+                if(auth.checkUser(token)) {
+
+                    subplayer.setVol(data)
+                
+                } else {
+
+                    io.emit("ANSWER/SEND/VOLUME", {"error":"USER_DONT_EXIST"})
+                }
+            } else {
+                io.emit("ANSWER/SEND/VOLUME", {"error":"TOKEN_NOT_FINDED"})
+
+            }
          
            
 
+        })
       
         
     })
@@ -258,9 +302,6 @@ function IOConnection(io) {
 }
 
 
-
-
-
 function GetRequest (socket, name, func) {
 
   

src/web/public/javascript/IO.js

@@ -8,6 +8,7 @@ const socket = io(socketLink);
 
 socket.on("connect", () => {
     console.log("Connecté au serveur par le Socket avec l'ID : " + socket.id)
+    get("MUSIC_STATE")
 });
 
 function get(request) {

src/web/public/javascript/__index_script.js

@@ -17,14 +17,65 @@ const settings_dialog = document.getElementById("SETTINGS_dialog")
 const settings_close = document.getElementById("SETTINGS_close")
 const settingsBtn = document.getElementById("settingsBtn")
 
+const SPECIAL = document.getElementById("SPECIAL")
+
+const loop = document.getElementById("loop")
+const vol = document.getElementById("vol")
+const shuffle = document.getElementById("shuffle")
+const list = document.getElementById("list")
+
+const volBox = document.getElementById("volumeBox")
+const volTxt = document.getElementById("volumeTxt")
+const volDiv = document.getElementById("volDiv")
+const volRange = document.getElementById("volumeInput")
+
+const disconnect = document.getElementById("disconnect")
 
 const userInfo = get("USER_INFO")
 
-settingsBtn.addEventListener("click", () => {
+volBox.classList.add("invisible")
+
+vol.addEventListener("click", () => {
+
+    if(volBox.classList.contains('invisible')) {
+        volBox.classList.remove("invisible")
+      
+    } else {
+
+        volBox.classList.add("invisible")
+    }
+ 
+})
+
+volRange.addEventListener("click", () => {
+
+    send("VOLUME", volRange.value)
+})
+
+
+
+disconnect.addEventListener("click", () => {
+
+    get("DISCONNECT")
+})
+
+SPECIAL.addEventListener("click", () => {
+    
+    get("SPECIAL/MJ")
+
+})
+
+/*settingsBtn.addEventListener("click", () => {
 
     settings_dialog.showModal()
+})*/
+
+loop.addEventListener("click", () => {
+
+    get("LOOP")
 })
 
+
 settings_close.addEventListener("click",() => {
 
     settings_dialog.close()
@@ -97,6 +148,52 @@ socket.on("/ALWAYS/MUSIC_STATE", (data) => {
     durationProgress = 0
     isPlaying = false
 
+    if(data.isOnline) {
+        loop.classList.remove("disabled")
+        vol.classList.remove("disabled")
+        shuffle.classList.remove("disabled")
+        list.classList.remove("disabled")
+        play.classList.remove("pri_disable")
+        disconnect.classList.remove("invisible")
+        volRange.classList.add("disabled")
+        volRange.disabled = false
+    } else {
+        loop.classList.add("disabled")
+        vol.classList.add("disabled")
+        shuffle.classList.add("disabled")
+        list.classList.add("disabled")
+        play.classList.add("pri_disable")
+        disconnect.classList.add("invisible")
+        volRange.classList.add("disabled")
+        volRange.disabled = true
+        volRange.value = 0
+        volTxt.innerHTML = "0%"
+        volBox.classList.add("invisible")
+    }
+
+    if(data.volume) {
+        volRange.step = 1
+        volRange.max = 200
+        volRange.min = 1
+        volRange.value = Math.trunc(data.volume / 10)
+        volTxt.innerHTML = Math.trunc(data.volume / 10) + "%"
+
+    } else {
+
+        volRange.classList.add("disabled")
+        volRange.disabled = true
+        volRange.value = 0
+        volTxt.innerHTML = "0%"
+    }
+
+    if(data.loop == true) {
+        loop.innerHTML = '<i class="third-join fa fa-retweet"></i>'
+
+    } else {
+
+        loop.innerHTML = '<i class="fa fa-retweet"></i>'
+    }
+
     if(data.current == null) {
 
         musicURL.innerHTML = '<img class="showPicture" src="images/black-image.svg">'

src/web/public/stylesheets/style.css

@@ -258,13 +258,13 @@ p {
 
 .third {
 
-  color: rgb(47, 47, 47);
+  color: rgb(255, 255, 255);
   background-color: transparent;
   border: none;
   border-radius: 100%;
   text-shadow: 1px 1px 10px white;
-  font-size: 0.9vw;
+  font-size: 17px;
-  margin-left: 0.8vw;
+
 
 }
 
@@ -277,7 +277,7 @@ p {
   border-radius: 100%; 
   width: 50px;
   height: 50px;
-  font-size: 1vw;
+  font-size: 17px;
 
 
 }
@@ -294,7 +294,7 @@ p {
   background-color: transparent;
   width: 50px;
   height: 50px;
-  font-size: 1vw;
+  font-size: 17px;
 
 }
 
@@ -317,15 +317,25 @@ p {
   width: 100%;
 }
 
+/*ACTBAR*/
+
 .PLAYER_actionbar {
   text-align: right;
   width: 30vw;
-
+  display: flex;
+  justify-content: end;
+  gap: 0.8vw;
 }
 
 .grised {
 
   filter : invert(50%);
+
+}
+
+.disabled {
+
+  color: rgb(47, 47, 47);
 }
 
 /*SETTINGS*/
@@ -358,6 +368,30 @@ p {
   flex-direction: column; /* Ajout : pour aligner les éléments verticalement à l'intérieur */
 }
 
+
+.third-join {
+
+  color: rgb(53, 255, 35);
+  background-color: transparent;
+  border: none;
+  border-radius: 100%;
+  text-shadow: 1px 1px 10px rgb(53, 255, 35);
+
+
+}
+
+.third-leave {
+
+  color: rgb(255, 35, 35);
+  background-color: transparent;
+  border: none;
+  border-radius: 100%;
+  text-shadow: 1px 1px 10px rgb(255, 27, 27);
+
+  
+
+}
+
 .scontent {
   flex: 1;
   padding: 1vw;
@@ -449,3 +483,44 @@ p {
   background-color: red;
   cursor: pointer;
 }
+
+.invisible {
+
+  display: none;
+
+}
+
+#volumeBox {
+
+  background-color: #2e2e2e;
+  position: absolute;
+  bottom: 50px;
+  width: 3vw;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 40%;
+  text-align: center;
+  border-radius: 12px;
+}
+
+#volumeInput {
+  width: 0.5vw;
+  height: 20vh;
+  appearance: slider-vertical;
+}
+
+#volumeTxt {
+  font-size: 16px;
+  padding-top: 30%;
+  text-align: center;
+}
+
+.volDiv {
+  display: flex;
+  position: relative;
+}
+
+.pri_disable {
+
+    background-color: #515151;
+}

src/web/templates/index.ejs

@@ -16,7 +16,7 @@
             <div id="userInfoglobal">
                 <div class="INDEX_userInfo" id="userInfo"></div>
                 <div class="INDEX_userPopup" id="userPopup">
-                    <div id="settingsBtn" class="INDEX_line"><i class="fa-solid fa-wrench"></i> Paramètres</div>
+                    <!--div id="settingsBtn" class="INDEX_line"><i class="fa-solid fa-wrench"></i> Paramètres</div>-->
                     <a class="INDEX_signout" href="/internal/logout"><i class="fa fa-sign-out " aria-hidden="true"></i> Déconnexion</a>
                 </div>
             </div>
@@ -24,6 +24,7 @@
 
     </div>
        
+    <button id="SPECIAL">LAUNCH MJ MUSIC</button>
                   
         <div class="PLAYER_box">
             <div class="PLAYER_title">
@@ -45,8 +46,14 @@
             </div>
             
             <div class="PLAYER_actionbar">
-                <button id="heart" class="third"><i class="fa fa-heart"></i></button>
+                <button id="disconnect" class="third-leave"><i class="fa fa-sign-out"></i></button>
-                <button id="vol" class="third"><i class="fa fa-volume-up"></i></button>
+                <div id="volDiv" class="volDiv">
+                    <button id="vol" class="third"><i class="fa fa-volume-up"></i></button>
+                    <div id="volumeBox">
+                        <input type="range" id="volumeInput"  >
+                        <p id="volumeTxt">100%</p>
+                    </div>
+                </div>
                 <button id="loop" class="third"><i class="fa fa-retweet"></i></button>
                 <button id="shuffle" class="third"><i class="fa fa-shuffle"></i></button>
                 <button id="list" class="list third"><i class="fa fa-list-ol"><p class="number" id="listNumber"></p></i></button>