Version 0.6.3 - Ajout de l'Handle Playlist & Add on Current track
This commit is contained in:
parent
36539ebe21
commit
59bebe392b
25
README.md
25
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
|
||||
|
||||
|
||||
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -20,4 +20,4 @@ module.exports = {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -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) {
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
const songs = await client.manager.search(data)
|
||||
return songs
|
||||
var splaylist = await checkPlaylist(data)
|
||||
|
||||
|
||||
if(splaylist) {
|
||||
answer.playlist = true
|
||||
answer.results = splaylist
|
||||
|
||||
} else {
|
||||
|
||||
const songs = await client.manager.search(data)
|
||||
answer.playlist = false
|
||||
answer.results = songs
|
||||
}
|
||||
|
||||
return answer
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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
|
||||
|
||||
})
|
||||
|
||||
@ -114,7 +120,8 @@ get("PLAYLIST")
|
||||
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])
|
||||
}
|
||||
@ -147,97 +154,12 @@ socket.on("ANSWER/GET/PLAYLIST", (data) => {
|
||||
|
||||
playlist_selector.addEventListener("click", () => {
|
||||
|
||||
loadPlaylist(key, value)
|
||||
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,13 +303,18 @@ 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
|
||||
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}`;
|
||||
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(maxhours != 0) {
|
||||
|
||||
if (maxmin < 10) {
|
||||
maxmin = `0${maxmin}`;
|
||||
|
||||
|
||||
if(pmaxhours != 0) {
|
||||
|
||||
if (pmaxmin < 10) {
|
||||
pmaxmin = `0${pmaxmin}`;
|
||||
}
|
||||
|
||||
|
||||
|
||||
max = maxhours + ":" + maxmin + ":" + maxsec
|
||||
pmax = pmaxhours + ":" + pmaxmin + ":" + pmaxsec
|
||||
} else {
|
||||
max = maxmin + ":" + maxsec
|
||||
pmax = pmaxmin + ":" + pmaxsec
|
||||
|
||||
}
|
||||
|
||||
Formatduration = max
|
||||
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>')
|
||||
|
||||
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>' + 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("") == "") {
|
||||
@ -429,16 +441,134 @@ searchBtn.addEventListener("click", () => {
|
||||
searchcontent.innerHTML = '<p class="error">Aucun morceau trouvé !</p>'
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
} 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) {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user