Version 0.6.3 - Ajout de l'Handle Playlist & Add on Current track

README.md

@@ -19,29 +19,6 @@
 <div style="font-size: 14px;">
 
 ## Changelog
-### Subsonics - Web - 0.6.0
-- **Adds :** *Playlist | Pipeline Deploy V2 | Search Ellipis | Handle Playlist on Web | Add Song Button from current*
-#### Details
-
-**Playlist**
-> - Ajouter / Supprimer des chansons 
-> - Lire toutes la playlist
-
-
-**Pipeline Deploy V2**
-> - Copy /data/ except "betas.json" 
-> - Reinject /data/
-
-**Handle Playlist on Web**
-
-> - Check with ytpfs
-> - Make a preview track
-
-**Add Song Button from current**
-
-> - Take Current & SEND/ADD_SONG_TO_PLAYLIST
-
-<hr>
 
 ### Subsonics - Web - 0.7.0
 - **Adds :** *Settings : Logs, Connexions, Gestion d'accès | Users V2 | Improvements*
@@ -92,7 +69,7 @@
 <hr>
 
 ### Subsonics - Web - 1.0.0
-- **Adds :** *Bugs Fixes & Trailer*
+- **Adds :** *Bugs Fixes & Trailer | Add Playlist from Youtube*
 #### Details
 -- TO DO
 

data/playlist.json

@@ -33,6 +33,50 @@
         "isStream": false,
         "uri": "https://www.youtube.com/watch?v=mmASfETnPjY",
         "thumbnail": "https://img.youtube.com/vi/mmASfETnPjY/default.jpg"
+      },
+      {
+        "track": "QAAAgwIAHU15bGVuZSBGYXJtZXIgLSBQZXV0LUV0cmUgVG9pAAxNdXNpY2Jlc3QxMTEAAAAAAASIKAALOE0zRndOYjZnTFkAAQAraHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj04TTNGd05iNmdMWQAHeW91dHViZQAAAAAAAAAA",
+        "title": "Mylene Farmer - Peut-Etre Toi",
+        "identifier": "8M3FwNb6gLY",
+        "author": "Musicbest111",
+        "duration": 297000,
+        "isSeekable": true,
+        "isStream": false,
+        "uri": "https://www.youtube.com/watch?v=8M3FwNb6gLY",
+        "thumbnail": "https://img.youtube.com/vi/8M3FwNb6gLY/default.jpg"
+      },
+      {
+        "track": "QAAAfgIAG1ZheWEgY29uIGRpb3MgLSBOYWggbmVoIG5haAAJRGFuaWtsZWluAAAAAAACo8gACzdMVW0tRTRHUFU4AAEAK2h0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9N0xVbS1FNEdQVTgAB3lvdXR1YmUAAAAAAAAAAA==",
+        "title": "Vaya con dios - Nah neh nah",
+        "identifier": "7LUm-E4GPU8",
+        "author": "Daniklein",
+        "duration": 173000,
+        "isSeekable": true,
+        "isStream": false,
+        "uri": "https://www.youtube.com/watch?v=7LUm-E4GPU8",
+        "thumbnail": "https://img.youtube.com/vi/7LUm-E4GPU8/default.jpg"
+      },
+      {
+        "track": "QAAAigIAJ0lGU0NMIDQuNS5YIFRyYWlsZXIgWyBDb2RlIEx5b2tvIEdhbWUgXQAJSW1tdWRlbGtpAAAAAAABtYAAC1cyVXI1NkNFQXdvAAEAK2h0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9VzJVcjU2Q0VBd28AB3lvdXR1YmUAAAAAAAAAAA==",
+        "title": "IFSCL 4.5.X Trailer [ Code Lyoko Game ]",
+        "identifier": "W2Ur56CEAwo",
+        "author": "Immudelki",
+        "duration": 112000,
+        "isSeekable": true,
+        "isStream": false,
+        "uri": "https://www.youtube.com/watch?v=W2Ur56CEAwo",
+        "thumbnail": "https://img.youtube.com/vi/W2Ur56CEAwo/default.jpg"
+      },
+      {
+        "track": "QAAAwwIASVRIUklMTEVSICAgMzV0aCBBbm5pdmVyc2FyeSBTV0cgUmVtYXN0ZXJlZCBFeHRlbmRlZCBNaXggICBNSUNIQUVMIEpBQ0tTT04AIEV4cHJlY2lvbiBNdXNpY2FsIEFsdGVybmF0aXZhIEZNAAAAAAAIZHAAC1UtUnlXSzJERlM4AAEAK2h0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9VS1SeVdLMkRGUzgAB3lvdXR1YmUAAAAAAAAAAA==",
+        "title": "THRILLER   35th Anniversary SWG Remastered Extended Mix   MICHAEL JACKSON",
+        "identifier": "U-RyWK2DFS8",
+        "author": "Exprecion Musical Alternativa FM",
+        "duration": 550000,
+        "isSeekable": true,
+        "isStream": false,
+        "uri": "https://www.youtube.com/watch?v=U-RyWK2DFS8",
+        "thumbnail": "https://img.youtube.com/vi/U-RyWK2DFS8/default.jpg"
       }
     ]
   }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "subsonics-web",
   "author": "Raphix",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "nodemonConfig": {
     "ext": "js, html",
     "ignore": [
@@ -28,7 +28,8 @@
   },
   "scripts": {
     "start": "nodemon src/main.js",
-    "dev": "set DEV=true& nodemon src/main.js"
+    "dev": "set DEV=true& nodemon src/main.js",
+    "stop": "ssh raphix@raphix.fr sudo -S -u gitlab-ci pm2 stop 'SubSonics - Bot Discord'"
   },
   "beta_on": false
 }

src/modules/sub-list.js

@@ -178,7 +178,26 @@ module.exports.List = class {
 
     }
 
-    async playlistAdd(playlist, interaction, userId) {
+    async fpPlaylistAdd(playlist, client) {
+
+        let player = client.manager.players.get("137291455336022018")
+
+            for(var song of playlist.videos) {
+        
+                const song_finded = await client.manager.search(song.url)
+                next.push(song_finded.tracks[0])
+
+            }
+
+            if(!player.playing) {
+
+               player.play(next[0])
+               this.remove(next[0])
+            
+            }
+    }
+
+    async playlistAdd(playlist, interaction, userId, ) {
 
         if(interaction) {
 

src/modules/sub-player.js

@@ -232,7 +232,7 @@ module.exports.SPECIAL_MJ = async function (client, userId) {
 
 }
 
-module.exports.addSong = async function (data, client, userId, quick) {
+module.exports.addSong = async function (data, client, userId, quick, playlist) {
 
     if(!client) {
 
@@ -262,7 +262,15 @@ module.exports.addSong = async function (data, client, userId, quick) {
     }
 
 
-    const songs = await client.manager.search(data.uri)
+    var songs = null
+
+    if(playlist) {
+       songs = await client.manager.search(data)
+
+    } else {
+
+        songs = await client.manager.search(data.uri)
+    }
 
     if(quick) {
         
@@ -283,6 +291,50 @@ module.exports.addSong = async function (data, client, userId, quick) {
 
    
 
+    process.emit("MUSIC_UPDATE_STATE")
+
+}
+
+module.exports.addSongsFromPlaylist = async function (data, client, userId, quick, playlist) {
+
+    if(!client) {
+
+        client = discord.getClient()
+    }
+
+    let player = client.manager.players.get("137291455336022018")
+
+    var memberVoices = discord.getMemberVoices()
+    var channelId = memberVoices.get(userId)
+
+    if(!channelId) {
+        
+        channelId = "664355808250953739"
+    }
+
+    if(!player) { 
+            
+        player = client.manager.create({
+            guild: "137291455336022018",
+            voiceChannel: channelId,
+            textChannel: "664355637685256203",
+        });
+
+
+        player.connect();
+    }
+
+    var playlist = await checkPlaylist(data)
+
+
+    if(playlist) {
+
+        list.fpPlaylistAdd(playlist, client)
+
+    } 
+
+   
+
     process.emit("MUSIC_UPDATE_STATE")
 
 }
@@ -444,6 +496,10 @@ const slog = new LogType("Search")
 
 module.exports.search = async function (data, client) {
 
+    var answer = {
+        "results":null,
+        "playlist":false
+    }
 
     if(!client) {
 
@@ -452,8 +508,23 @@ module.exports.search = async function (data, client) {
 
     slog.log("Recherche avec les mots clés : " + data)
 
+    var splaylist = await checkPlaylist(data)
+
+
+    if(splaylist) {
+        answer.playlist = true
+        answer.results = splaylist
+
+    } else {
+
         const songs = await client.manager.search(data)
-    return songs
+        answer.playlist = false
+        answer.results = songs
+    }
+
+    return answer
+
+    
 
    
 }

src/modules/sub-web.js

@@ -527,6 +527,112 @@ function IOConnection(io) {
          
            
 
+        })
+
+        socket.on("SEND/FP_ADD_SONG", async (data) => {
+
+
+            var cookies = socket.handshake.headers.cookie
+
+            if(cookies) {
+
+                cookies = cook.parse(cookies)
+                var token = cookies.token
+                 
+                if(auth.checkUser(token)) {
+
+    
+
+                    var user = auth.getUser(token)
+                    var userId = user.user.id
+
+
+                    subplayer.addSong(data, null, userId, false, true)
+                    
+
+                    io.emit("ANSWER/SEND/FP_ADD_SONG/OK")
+                
+                } else {
+
+                    io.emit("ANSWER/SEND/FP_ADD_SONG", {"error":"USER_DONT_EXIST"})
+                }
+            } else {
+                io.emit("ANSWER/SEND/FP_ADD_SONG", {"error":"TOKEN_NOT_FINDED"})
+
+            }
+         
+           
+
+        })
+        socket.on("SEND/FP_ADD_SONG_NOW", async (data) => {
+
+
+            var cookies = socket.handshake.headers.cookie
+
+            if(cookies) {
+
+                cookies = cook.parse(cookies)
+                var token = cookies.token
+                 
+                if(auth.checkUser(token)) {
+
+    
+
+                    var user = auth.getUser(token)
+                    var userId = user.user.id
+
+
+                    subplayer.addSong(data, null, userId, true, true)
+                    
+
+                    io.emit("ANSWER/SEND/FP_ADD_SONG_NOW/OK")
+                
+                } else {
+
+                    io.emit("ANSWER/SEND/FP_ADD_SONG_NOW", {"error":"USER_DONT_EXIST"})
+                }
+            } else {
+                io.emit("ANSWER/SEND/FP_ADD_SONG_NOW", {"error":"TOKEN_NOT_FINDED"})
+
+            }
+         
+           
+
+        })
+        socket.on("SEND/FP_PLAY_PLAYLIST", async (data) => {
+
+
+            var cookies = socket.handshake.headers.cookie
+
+            if(cookies) {
+
+                cookies = cook.parse(cookies)
+                var token = cookies.token
+                 
+                if(auth.checkUser(token)) {
+
+    
+
+                    var user = auth.getUser(token)
+                    var userId = user.user.id
+
+
+                    subplayer.addSongsFromPlaylist(data, null, userId, true)
+                    
+
+                    io.emit("ANSWER/SEND/FP_PLAY_PLAYLIST/OK")
+                
+                } else {
+
+                    io.emit("ANSWER/SEND/FP_PLAY_PLAYLIST", {"error":"USER_DONT_EXIST"})
+                }
+            } else {
+                io.emit("ANSWER/SEND/FP_PLAY_PLAYLIST", {"error":"TOKEN_NOT_FINDED"})
+
+            }
+         
+           
+
         })
 
         socket.on("SEND/CREATE_PLAYLIST", async (data) => {

src/web/public/javascript/__index_script.js

@@ -23,6 +23,7 @@ const loop = document.getElementById("loop")
 const vol = document.getElementById("vol")
 const shuffle = document.getElementById("shuffle")
 const list = document.getElementById("list")
+const takeCurrent =  document.getElementById("takeCurrent")
 
 const volBox = document.getElementById("volumeBox")
 const volTxt = document.getElementById("volumeTxt")
@@ -51,8 +52,12 @@ const restartBtn = document.getElementById("restartBtn")
 const WelcomeContent = mainView.firstElementChild.outerHTML
 const playlistContent = document.getElementById("playlist-content")
 
+var wasOnPlaylist = false
+
 var playlistSelected = null
+var playlistValue = null
 var deleteJustBefore = null
+var currentSong = null
 
 var playlistAvailable = null
 
@@ -77,6 +82,7 @@ document.onmousemove = function(e)
 homeBtn.addEventListener("click", () => {
 
     mainView.innerHTML = WelcomeContent
+    wasOnPlaylist = false
 
 })
 
@@ -115,6 +121,7 @@ socket.on("ANSWER/GET/PLAYLIST", (data) => {
     var contentToPush = new Array()
     var selectionData = new Array()
 
+
     for (const [key, value] of Object.entries(data)) {
 
         contentToPush.push('<div id="' + key + '_playlist" class="playlist_div checker"><img class="playlist_tile" src="/images/playlist-tile.svg"><p>' + key + '</p></div>')
@@ -136,7 +143,7 @@ socket.on("ANSWER/GET/PLAYLIST", (data) => {
         playlistAvailable = selectionData
     }
 
-    if(playlistSelected && deleteJustBefore) {
+    if(playlistSelected && deleteJustBefore || playlistSelected && wasOnPlaylist) {
         deleteJustBefore = null
         loadPlaylist(playlistSelected, data[playlistSelected])   
     }
@@ -148,96 +155,11 @@ socket.on("ANSWER/GET/PLAYLIST", (data) => {
         playlist_selector.addEventListener("click", () => {
             
             loadPlaylist(key, value) 
+            wasOnPlaylist = true           
 
         })
     }
 
-    function loadPlaylist(key, value) {
-
-        var playlistToPush = new Array()
-        var playlist_songs = new Array()
-
-        playlistSelected = key
-
-        for(var title of value) {
-
-            var Formatduration = null
-                durationAll = title.duration
-
-                const maxhours = Math.floor(durationAll / 3600000);
-
-                var maxmin = Math.trunc(durationAll / 60000) - (Math.floor(durationAll / 60000 / 60) * 60);
-                var maxsec = Math.floor(durationAll / 1000) - (Math.floor(durationAll / 1000 / 60) * 60);
-
-              
-                if (maxsec < 10) {
-                    maxsec = `0${maxsec}`;
-                }
-
-
-                if(maxhours != 0) {
-
-                    if (maxmin < 10) {
-                        maxmin = `0${maxmin}`;
-                    }
-    
-                    
-                    max =  maxhours + ":" + maxmin + ":" + maxsec
-                } else {
-                    max =  maxmin + ":" + maxsec
-                
-                }
-
-                Formatduration = max
-
-            playlist_songs.push('<div class="search_song"> <img class="search_thumbnail" src="' + title.thumbnail + '"><div class="search_titleSong"> <p class="search_title">' + title.title + '</p></div> <p>' + title.author + '</p><p>' + Formatduration + '</p> <div class="search_buttons"><button id="' + value.indexOf(title) +  '_padd" class="search_add"><i class="fa fa-plus"></i></button><button id="' + value.indexOf(title) +  '_pplay" class="search_lmore"><i class="fa fa-play"></i></button><button id="' + value.indexOf(title) +  '_pdelete" style="font-size: 20px;" class="list_delete"><i class="fa fa-trash"></i></button></div></div>')
-
-        }
-
-        playlistToPush.push('<div class="apPres"><div class="apTitle"><img class="apTile" src="/images/playlist-tile.svg"><p class="apName">' + key + '</p></div><div class="apButtons"><button onclick="playPlayList(\''+ key +'\')" id="'+ key +'_playlistplay" class="primary"><i class="fas fa-play"></i></button><button onclick="delPlayList(\''+ key +'\')" "id="'+ key +'_playlistdelete" class="list_delete"><i class="fas fa-trash"></i></button></div></div><hr>' + playlist_songs.join(""))
-        
-        if(playlistToPush.join("") == "") {
-    
-            mainView.innerHTML = '<p class="error">Aucun morceau trouvé !</p>'
-        
-        } else {
-    
-            mainView.innerHTML = playlistToPush.join("")
-
-            
-        }
-
-        for(var title of value) {
-
-            const add_to = document.getElementById(value.indexOf(title) + "_padd")
-            const playNow = document.getElementById(value.indexOf(title) + "_pplay")
-            const deleteBtn = document.getElementById(value.indexOf(title) + "_pdelete")
-
-            add_to.addEventListener("click", () => {
-    
-                send("ADD_SONG", value[add_to.id.replace("_padd", "")])
-            })
-
-            playNow.addEventListener("click", () => {
-
-                send("ADD_SONG_NOW", value[add_to.id.replace("_padd", "")])
-
-            })
-
-            deleteBtn.addEventListener("click", () => {
-
-                deleteJustBefore = true
-                send("DELETE_SONG_TO_PLAYLIST", key, value[add_to.id.replace("_padd", "")])
-                
-            })
-
-        
-        }
-
-    }
-
-    
-
     const buttons = document.querySelectorAll(".checker");
 
     buttons.forEach(button => {
@@ -288,6 +210,91 @@ socket.on("ANSWER/GET/PLAYLIST", (data) => {
     console.log(data)
 })
 
+function loadPlaylist(key, value) {
+
+    var playlistToPush = new Array()
+    var playlist_songs = new Array()
+
+    playlistSelected = key
+    playlistValue = value
+
+    for(var title of value) {
+
+            var PFormatduration = null
+            pdurationAll = title.duration
+
+            const pmaxhours = Math.floor(pdurationAll / 3600000);
+
+            var pmaxmin = Math.trunc(pdurationAll / 60000) - (Math.floor(pdurationAll / 60000 / 60) * 60);
+            var pmaxsec = Math.floor(pdurationAll / 1000) - (Math.floor(pdurationAll / 1000 / 60) * 60);
+
+          
+            if (pmaxsec < 10) {
+                pmaxsec = `0${pmaxsec}`;
+            }
+
+
+            if(pmaxhours != 0) {
+
+                if (pmaxmin < 10) {
+                    pmaxmin = `0${pmaxmin}`;
+                }
+
+                
+                pmax = pmaxhours + ":" + pmaxmin + ":" + pmaxsec
+            } else {
+                pmax =  pmaxmin + ":" + pmaxsec
+            
+            }
+
+            PFormatduration = pmax
+
+        playlist_songs.push('<div class="search_song"> <img class="search_thumbnail" src="' + title.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="' + value.indexOf(title) +  '_padd" class="search_add"><i class="fa fa-plus"></i></button><button id="' + value.indexOf(title) +  '_pplay" class="search_lmore"><i class="fa fa-play"></i></button><button id="' + value.indexOf(title) +  '_pdelete" style="font-size: 20px;" class="list_delete"><i class="fa fa-trash"></i></button></div></div>')
+
+    }
+
+    playlistToPush.push('<div class="apPres"><div class="apTitle"><img class="apTile" src="/images/playlist-tile.svg"><p class="apName">' + key + '</p></div><div class="apButtons"><button onclick="playPlayList(\''+ key +'\')" id="'+ key +'_playlistplay" class="primary"><i class="fas fa-play"></i></button><button onclick="delPlayList(\''+ key +'\')" "id="'+ key +'_playlistdelete" class="list_delete"><i class="fas fa-trash"></i></button></div></div><hr>' + playlist_songs.join(""))
+    
+    if(playlistToPush.join("") == "") {
+
+        mainView.innerHTML = '<p class="error">Aucun morceau trouvé !</p>'
+    
+    } else {
+
+        mainView.innerHTML = playlistToPush.join("")
+
+        
+    }
+
+    for(var title of value) {
+
+        const add_to = document.getElementById(value.indexOf(title) + "_padd")
+        const playNow = document.getElementById(value.indexOf(title) + "_pplay")
+        const deleteBtn = document.getElementById(value.indexOf(title) + "_pdelete")
+
+        add_to.addEventListener("click", () => {
+
+            send("ADD_SONG", value[add_to.id.replace("_padd", "")])
+        })
+
+        playNow.addEventListener("click", () => {
+
+            send("ADD_SONG_NOW", value[add_to.id.replace("_padd", "")])
+
+        })
+
+        deleteBtn.addEventListener("click", () => {
+
+            deleteJustBefore = true
+            send("DELETE_SONG_TO_PLAYLIST", key, value[add_to.id.replace("_padd", "")])
+            
+        })
+
+    
+    }
+
+}
+
 
 
 searchBtn.addEventListener("click", () => {
@@ -296,12 +303,17 @@ searchBtn.addEventListener("click", () => {
     const searchBar = document.getElementById("searchBar")
     const searchcontent = document.getElementById("search_content")
 
- 
+    wasOnPlaylist = false
 
     searchBar.addEventListener("change", () => {
 
     
-        send("SEARCH", searchBar.value).then(results => {
+        send("SEARCH", searchBar.value).then(answerOfResult => {
+            
+            var results = answerOfResult.results
+            var playlistReconnised = answerOfResult.playlist
+
+            if(!playlistReconnised) {
 
             if(results.tracks != null) {
                 const data = results.tracks
@@ -311,35 +323,35 @@ searchBtn.addEventListener("click", () => {
         
                 for(var title of data) {
                     
-                    var Formatduration = null
+                    var PFormatduration = null
-                    durationAll = title.duration
+                    pdurationAll = title.duration
 
-                    const maxhours = Math.floor(durationAll / 3600000);
+                    const pmaxhours = Math.floor(pdurationAll / 3600000);
 
-                    var maxmin = Math.trunc(durationAll / 60000) - (Math.floor(durationAll / 60000 / 60) * 60);
+                    var pmaxmin = Math.trunc(pdurationAll / 60000) - (Math.floor(pdurationAll / 60000 / 60) * 60);
-                    var maxsec = Math.floor(durationAll / 1000) - (Math.floor(durationAll / 1000 / 60) * 60);
+                    var pmaxsec = Math.floor(pdurationAll / 1000) - (Math.floor(pdurationAll / 1000 / 60) * 60);
 
                 
-                    if (maxsec < 10) {
+                    if (pmaxsec < 10) {
-                        maxsec = `0${maxsec}`;
+                        pmaxsec = `0${pmaxsec}`;
                     }
 
 
-                    if(maxhours != 0) {
+                    if(pmaxhours != 0) {
 
-                        if (maxmin < 10) {
+                        if (pmaxmin < 10) {
-                            maxmin = `0${maxmin}`;
+                            pmaxmin = `0${pmaxmin}`;
                         }
 
                         
-                        max =  maxhours + ":" + maxmin + ":" + maxsec
+                        pmax = pmaxhours + ":" + pmaxmin + ":" + pmaxsec
                     } else {
-                        max =  maxmin + ":" + maxsec
+                        pmax =  pmaxmin + ":" + pmaxsec
                     
                     }
 
-                    Formatduration = max
+                    PFormatduration = pmax
-                    contentToPush.push(' <div class="search_song"> <img class="search_thumbnail" src="' + title.thumbnail + '"><div class="search_titleSong"> <p class="search_title">' + title.title + '</p></div> <p>' + title.author + '</p><p>' + Formatduration + '</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-solid fa-list-ul"></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-list-ol"></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="' + title.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-solid fa-list-ul"></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-list-ol"></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("") == "") {
@@ -430,15 +442,133 @@ searchBtn.addEventListener("click", () => {
         
             }
 
+            } else {
+
+                //https://www.youtube.com/playlist?list=PLA8VHLKYzqTvCcIKhsjGS41nG1zBpRZPy
+       
+                
+                var playlistToPush = new Array()
+                var playlist_songs = new Array()
+        
+            
+                for(var title of results.videos) {
+            
+                        var PFormatduration = null
+                        pdurationAll = title.milis_length
+            
+                        const pmaxhours = Math.floor(pdurationAll / 3600000);
+            
+                        var pmaxmin = Math.trunc(pdurationAll / 60000) - (Math.floor(pdurationAll / 60000 / 60) * 60);
+                        var pmaxsec = Math.floor(pdurationAll / 1000) - (Math.floor(pdurationAll / 1000 / 60) * 60);
+            
+                      
+                        if (pmaxsec < 10) {
+                            pmaxsec = `0${pmaxsec}`;
+                        }
+            
+            
+                        if(pmaxhours != 0) {
+            
+                            if (pmaxmin < 10) {
+                                pmaxmin = `0${pmaxmin}`;
+                            }
+            
+                            
+                            pmax = pmaxhours + ":" + pmaxmin + ":" + pmaxsec
+                        } else {
+                            pmax =  pmaxmin + ":" + pmaxsec
+                        
+                        }
+            
+                        PFormatduration = pmax
+            
+                    playlist_songs.push('<div class="search_song"> <img class="search_thumbnail" src="' + title.thumbnail_url + '"><div class="search_titleSong"> <p class="search_title">' + title.title + '</p></div> <p>' + title.author.name + '</p><p>' + PFormatduration + '</p> <div class="search_buttons"><button id="' + results.videos.indexOf(title) +  '_padd" class="search_add"><i class="fa fa-plus"></i></button><button id="' + results.videos.indexOf(title) +  '_pplay" class="search_lmore"><i class="fa fa-play"></i></button></div></div>')
+            
+                }
+            
+                playlistToPush.push('<div class="apPres"><div class="apTitle"><img style="width: 20%" class="" src="' +results.thumbnail_url + '"><div style=""><p style="margin-left: 2% !important;">' + results.author.name + " - (" + results.videos.length + " titres)" +  '</p><p class="apName">' + results.title + '</p></div></div><div class="apButtons"><button  onclick="fp_play_playlist(\'' + results.url + '\')" id="'+ results.id +'_playlistplay" class="primary"><i class="fas fa-play"></i></button></div></div><hr>' + playlist_songs.join(""))
+                
+                if(playlistToPush.join("") == "") {
+            
+                    searchcontent.innerHTML = '<p class="error">Aucun morceau trouvé !</p>'
+                
+                } else {
+            
+                    searchcontent.innerHTML = playlistToPush.join("")
+            
+                    
+                }
+
+                
+                
+                
+                for(var title of results.videos) {
+            
+                    const add_to = document.getElementById(results.videos.indexOf(title) + "_padd")
+                    const playNow = document.getElementById(results.videos.indexOf(title) + "_pplay")
+                    
+            
+                    add_to.addEventListener("click", () => {
+            
+                        send("FP_ADD_SONG", results.videos[add_to.id.replace("_padd", "")].url)
+                    })
+            
+                    playNow.addEventListener("click", () => {
+            
+                        send("FP_ADD_SONG_NOW", results.videos[add_to.id.replace("_padd", "")].url)
+            
                     })
             
                     
             
+                
+                }
+            }
+    
+        }) 
+    
     })
 })
 
+function fp_play_playlist(key) {
+    
+    send("FP_PLAY_PLAYLIST", key)
+}
 
 
+const cPlaylistManager = document.getElementById("current_playlistManager")
+const cplaylistManager_close = document.getElementById("current_playlistManager_close")
+const cplaylistSelection = document.getElementById("current_playlistSelection")
+const cplaylist_add_music = document.getElementById("current_playlist_add_music")
+const cplaylist_add_img = document.getElementById("current_playlist_add_img")
+const cplaylistAddSong = document.getElementById("current_playlistAddSong")
+
+takeCurrent.addEventListener("click", () => {
+
+    if(currentSong != null) {
+        cPlaylistManager.showModal()
+        cplaylist_add_music.innerHTML = currentSong.title
+        cplaylist_add_img.src = currentSong.thumbnail
+        cplaylistSelection.innerHTML = playlistAvailable
+
+    }
+
+})
+
+cplaylistManager_close.addEventListener("click", () => {
+
+    cPlaylistManager.close()
+})
+
+cplaylistAddSong.addEventListener("click", () => {
+
+                        
+    cPlaylistManager.close()
+    socket.emit("SEND/ADD_SONG_TO_PLAYLIST", cplaylistSelection.value , currentSong )
+    
+   
+
+})
 
 
 
@@ -607,16 +737,17 @@ socket.on("/ALWAYS/MUSIC_STATE", (data) => {
     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")
@@ -627,6 +758,7 @@ socket.on("/ALWAYS/MUSIC_STATE", (data) => {
         volRange.value = 0
         volTxt.innerHTML = "0%"
         volBox.classList.add("invisible")
+      
     }
 
     if(data.volume) {
@@ -668,10 +800,15 @@ socket.on("/ALWAYS/MUSIC_STATE", (data) => {
 
         musicURL.innerHTML = '<img class="showPicture" src="images/black-image.svg">'
         musicTitle.innerHTML = "<p>Aucun titre joué</p>"
+        loop.classList.add("invisible")
+        takeCurrent.classList.add("invisible")
     } else {
 
         musicURL.innerHTML = '<img class="showPicture" src="' + data.current.thumbnail + '">'
         musicTitle.innerHTML = "<p>" + data.current.title + "</p>"
+        currentSong = data.current
+        takeCurrent.classList.remove("invisible")
+        loop.classList.remove("invisible")
     }
 
     if(data.durationAll) {

src/web/public/stylesheets/style.css

@@ -999,7 +999,7 @@ p {
 .apTitle {
 
   display: flex;
-  width: 60%;
+  width: 100%;
   align-items: end;
 }
 
@@ -1015,6 +1015,7 @@ p {
   font-family: "Gunship", sans-serif;
   font-size: 35px;
   margin-left: 2% !important;
+  width: 100%
 }
 
 .apButtons {

src/web/templates/index.ejs

@@ -73,13 +73,16 @@
             <div class="PLAYER_title">
                 <span id="music_img"><img class="showPicture" src="/images/black-image.svg"></span>
                 <span id="music_title" class="title"><p>Aucun titre joué</p></span>
+                
             </div>
       
             <div class="PLAYER_middle">
                 <div class="playbar">
+                    <button id="loop" class="secondary"><i class="fa-solid fa-repeat"></i></button>
                     <button id="backward" class="secondary"><i class="fas fa-step-backward"></i></button>
                     <button id="play" class="primary"><i class="fas fa-play"></i></button>
                     <button id="forward" class="secondary"><i class="fas fa-step-forward"></i></button>
+                    <button id="takeCurrent" class="secondary"><i class="fa-regular fa-square-plus"></i></button>
                 </div>
                 <div class="PLAYER_durationbar">
                     <p id="durationTextAct" class="durationText">0:00</p>
@@ -87,7 +90,7 @@
                     <p id="durationTextTotal" class="durationText">0:00</p>
                 </div>
             </div>
-            
+            <dialog id="current_playlistManager" class="report_dialog"><div class="rlineclose"><p class="rtitle"><i class="fa fa-list-ol"></i> Ajouter à une playlist</p><button id="current_playlistManager_close" class="report_close"><i class="fa-solid fa-xmark"></i></button></div><div class="apContent"><img id="current_playlist_add_img" class="ppTile" src="/images/playlist-tile.svg"><p style="padding: 1%;" id="current_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="current_playlistSelection"></select><button id="current_playlistAddSong" class="rsend"><i class="fa fa-plus"></i> Ajouter</button></div></dialog>
             <div class="PLAYER_actionbar">
                 <button id="disconnect" class="third-leave"><i class="fa fa-sign-out"></i></button>
                 <div id="volDiv" class="volDiv">
@@ -97,7 +100,6 @@
                         <p id="volumeTxt">100%</p>
                     </div>
                 </div>
-                <button id="loop" class="third"><i class="fa-solid fa-repeat"></i></button>
                 <button id="shuffle" class="third"><i class="fa fa-shuffle"></i></button>
                 <div id="listDiv" class="volDiv">
                     <button id="list" class="list third"><i class="fa fa-list-ol"></i><p class="number" id="listNumber"></p></button>