Version 0.9.0 - Ajout du Home Menu V2

This commit is contained in:
CICD - Pipeline 2023-09-11 21:58:10 +02:00
parent 41064faf48
commit f4e0017671
10 changed files with 480 additions and 31 deletions

View File

@ -20,25 +20,6 @@
## Changelog
### Subsonics - Web - 0.8.0
- **Adds :** *Alerts, Playlist Share, Edit playlist picture | Tooltip*
#### Details
**Alerts (Done)**
> - Popup Prefab
> - Declencher lors de l'action
**Playlist Share (Done)**
> - Envoyer des playlist avec la liste des utilisateurs
**Tooltip (Done)**
> - Tooltip sur les bouttons
<hr>
### Subsonics - Web - 0.9.0
- **Adds :** *Home Menu V2 | User Experience Improvements*
#### Details
@ -53,6 +34,7 @@
> - Fix of Tooltip which is sometimes bugged
> - Canva of Queue List
> - Support Live
<hr>

View File

@ -154,7 +154,65 @@
"isStream": false,
"uri": "https://www.youtube.com/watch?v=3Ea7_6Qu2xo",
"thumbnail": "https://img.youtube.com/vi/3Ea7_6Qu2xo/default.jpg"
},
{
"track": "QAAAlgIAM2xvZmkgaGlwIGhvcCByYWRpbyDtoL3ts5ogLSBiZWF0cyB0byByZWxheC9zdHVkeSB0bwAJTG9maSBHaXJsf/////////8AC2pmS2ZQZnlKUmRrAQEAK2h0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9amZLZlBmeUpSZGsAB3lvdXR1YmUAAAAAAAAAAA==",
"title": "lofi hip hop radio 📚 - beats to relax/study to",
"identifier": "jfKfPfyJRdk",
"author": "Lofi Girl",
"duration": 9223372036854776000,
"isSeekable": false,
"isStream": true,
"uri": "https://www.youtube.com/watch?v=jfKfPfyJRdk",
"thumbnail": "https://img.youtube.com/vi/jfKfPfyJRdk/default.jpg"
}
],
"Liste de lecture Immu": [
{
"track": "QAAAhAIAIFRoYW5jcmVkIFdhdGVyczogVGhlIE1hbiAtIEZGWElWAApGbHVmZlN0dWZmAAAAAAAENiAAC3dGV1pMLTFJWG5jAAEAK2h0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9d0ZXWkwtMUlYbmMAB3lvdXR1YmUAAAAAAAAAAA==",
"title": "Thancred Waters: The Man - FFXIV",
"identifier": "wFWZL-1IXnc",
"author": "FluffStuff",
"duration": 276000,
"isSeekable": true,
"isStream": false,
"uri": "https://www.youtube.com/watch?v=wFWZL-1IXnc",
"thumbnail": "https://img.youtube.com/vi/wFWZL-1IXnc/default.jpg"
},
{
"track": "QAAAvwIAYkZveGVzIHBlcmZvcm1zICdEb24ndCBTdG9wIE1lIE5vdycgb24gYm9hcmQgdGhlIE9yaWVudCBFeHByZXNzIC0gRG9jdG9yIFdobzogU2VyaWVzIDggKDIwMTQpIC0gQkJDAANCQkMAAAAAAAMVEAALaC1PVFlUMDJXN0UAAQAraHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1oLU9UWVQwMlc3RQAHeW91dHViZQAAAAAAAAAA",
"title": "Foxes performs 'Don't Stop Me Now' on board the Orient Express - Doctor Who: Series 8 (2014) - BBC",
"identifier": "h-OTYT02W7E",
"author": "BBC",
"duration": 202000,
"isSeekable": true,
"isStream": false,
"uri": "https://www.youtube.com/watch?v=h-OTYT02W7E",
"thumbnail": "https://img.youtube.com/vi/h-OTYT02W7E/default.jpg"
},
{
"track": "QAAAjAIAKkRvY3RvciBXaG8gKDEtMTEpIHZpZDogR29uZSBpbiB0aGUgTW9ybmluZwAIc2hheWVyYTkAAAAAAAIqsAALazNWclpETVhIbUUAAQAraHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1rM1ZyWkRNWEhtRQAHeW91dHViZQAAAAAAAAAA",
"title": "Doctor Who (1-11) vid: Gone in the Morning",
"identifier": "k3VrZDMXHmE",
"author": "shayera9",
"duration": 142000,
"isSeekable": true,
"isStream": false,
"uri": "https://www.youtube.com/watch?v=k3VrZDMXHmE",
"thumbnail": "https://img.youtube.com/vi/k3VrZDMXHmE/default.jpg"
},
{
"track": "QAAAhwIAJjMgRG9vcnMgRG93biAtIEtyeXB0b25pdGUgKFNtYWxsVmlsbGUpAAdXRUlMSU5OAAAAAAADikAAC0VPTzRWTjFHM0dZAAEAK2h0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9RU9PNFZOMUczR1kAB3lvdXR1YmUAAAAAAAAAAA==",
"title": "3 Doors Down - Kryptonite (SmallVille)",
"identifier": "EOO4VN1G3GY",
"author": "WEILINN",
"duration": 232000,
"isSeekable": true,
"isStream": false,
"uri": "https://www.youtube.com/watch?v=EOO4VN1G3GY",
"thumbnail": "https://img.youtube.com/vi/EOO4VN1G3GY/default.jpg"
}
]
}
},
"249494159629484033": {}
}

13
data/radios.json Normal file
View File

@ -0,0 +1,13 @@
[
{
"track": "QAAAlgIAM2xvZmkgaGlwIGhvcCByYWRpbyDtoL3ts5ogLSBiZWF0cyB0byByZWxheC9zdHVkeSB0bwAJTG9maSBHaXJsf/////////8AC2pmS2ZQZnlKUmRrAQEAK2h0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9amZLZlBmeUpSZGsAB3lvdXR1YmUAAAAAAAAAAA==",
"title": "lofi hip hop radio 📚 - beats to relax/study to",
"identifier": "jfKfPfyJRdk",
"author": "Lofi Girl",
"duration": 9223372036854776000,
"isSeekable": false,
"isStream": true,
"uri": "https://www.youtube.com/watch?v=jfKfPfyJRdk",
"thumbnail": "https://img.youtube.com/vi/jfKfPfyJRdk/default.jpg"
}
]

View File

@ -18,6 +18,7 @@ const __glob = {
NODES: root + path.sep + "data" + path.sep + "nodes.json",
README: root + path.sep + "README.md",
PLAYLIST: root + path.sep + "data" + path.sep + "playlist.json",
RADIO: root + path.sep + "data" + path.sep + "radios.json",
LOGS: root + path.sep + "src" + path.sep + "modules" + path.sep + "logs"
};

View File

@ -168,6 +168,13 @@ module.exports.getUsersList = function () {
}
module.exports.getSimpleUser = function (token) {
var user = users.get(token)
return ({"username": user.user.username, "global_name":user.user.global_name, "avatar": user.user.avatar, "id": user.user.id})
}
module.exports.getUser = function (token) {
return users.get(token)

64
src/modules/sub-radio.js Normal file
View File

@ -0,0 +1,64 @@
const { __glob } = require("../modules/global-variables");
const { LogType } = require("./sub-log");
var { List } = require("./sub-list")
const discord = require("./discord-bot")
const subplayer = require("./sub-player")
const fs = require("fs");
const { type } = require("os");
var radios = []
const plog = new LogType("Radio-Manager")
check()
module.exports.get = function () {
check()
return radios
}
module.exports.add = function (data) {
var radios_data = JSON.parse(fs.readFileSync(__glob.RADIO))
radios_data.push(data)
fs.writeFileSync(__glob.RADIO, JSON.stringify(radios_data, null, 2))
return radios
}
module.exports.remove = function(data) {
var radios_data = JSON.parse(fs.readFileSync(__glob.RADIO))
var radIndex = -1
for(var radio of radios_data) {
if(data.uri == radio.uri) {
radIndex = radios_data.indexOf(radio)
}
}
radios_data.splice(radIndex, 1)
fs.writeFileSync(__glob.RADIO, JSON.stringify(radios_data, null, 2))
}
function check() {
if(fs.existsSync(__glob.RADIO)) {
radios = JSON.parse(fs.readFileSync(__glob.RADIO))
} else {
fs.writeFileSync(__glob.RADIO, JSON.stringify(radios, null, 2))
}
}

View File

@ -6,6 +6,7 @@ const auth = require("./sub-auth");
const cook = require("cookie")
const wlog = new LogType("Web")
const subplayer = require('./sub-player');
const subradio = require("./sub-radio.js")
const { List } = require("./sub-list")
const subplaylist = require("./sub-playlist")
const nodesfinder = require("./nodes-finder")
@ -141,6 +142,9 @@ function IOConnection(io) {
const alog = log.getInstance("Authentification")
const usersOnline = new Array()
process.on("UPDATE_NODES", () => {
if(io) {
@ -152,6 +156,16 @@ function IOConnection(io) {
})
process.on("UPDATE_RADIO", () => {
if(io) {
const radioList = subradio.get()
io.sockets.emit("ALWAYS/ALL_RADIO", radioList)
}
})
process.on("MUSIC_UPDATE_STATE", () => {
@ -163,15 +177,38 @@ function IOConnection(io) {
})
io.on("connection", (socket) => {
var ucookies = socket.handshake.headers.cookie
ucookies = cook.parse(ucookies)
if(ucookies.token) {
var utoken = ucookies.token
const online_users_data = auth.getSimpleUser(utoken)
usersOnline.push(online_users_data)
}
io.sockets.emit("ALWAYS/ALL_CONNECTED_USER", usersOnline)
wlog.log("[SOCKET] - Nouvelle session : " + socket.id)
socket.on("disconnect", () => {
wlog.log("[SOCKET] - Fin de session : " + socket.id)
if(ucookies.token) {
var utoken = ucookies.token
const online_users_data = auth.getSimpleUser(utoken)
usersOnline.splice(usersOnline.indexOf(online_users_data), 1)
}
io.sockets.emit("ALWAYS/ALL_CONNECTED_USER", usersOnline)
})
// SPECIAL
socket.on("GET/DISCORD_LOGIN_LINK", () => {
@ -394,6 +431,20 @@ function IOConnection(io) {
})
GetRequest(io, socket, "ALL_CONNECTED_USER", () => {
io.sockets.emit("ALWAYS/ALL_CONNECTED_USER", usersOnline)
})
GetRequest(io, socket, "ALL_RADIO", () => {
const radioList = subradio.get()
io.sockets.emit("ALWAYS/ALL_RADIO", radioList)
})
@ -421,7 +472,61 @@ function IOConnection(io) {
}
} else {
io.emit("ANSWER/SEND/USERS/ADD", {"error":"TOKEN_NOT_FINDED"})
io.emit("ANSWER/SEND/NODES/ADD", {"error":"TOKEN_NOT_FINDED"})
}
})
socket.on("SEND/RADIO/ADD", async (data) => {
var cookies = socket.handshake.headers.cookie
if(cookies) {
cookies = cook.parse(cookies)
var token = cookies.token
const user = auth.getUser(token)
if(user.admin == true) {
const music_data = await (await subplayer.search(data)).results.tracks[0]
var radioContains = null
for(var title of subradio.get()) {
if(title.uri == music_data.uri) {
radioContains = true
}
}
if(!radioContains) {
subradio.add(music_data)
console.log("[Radio] - ADD : " + data)
} else {
subradio.remove(music_data)
console.log("[Radio] - REMOVE : " + data)
}
socket.emit("ANSWER/SEND/RADIO/ADD", "OK")
process.emit("UPDATE_RADIO")
}
} else {
io.emit("ANSWER/SEND/RADIO/ADD", {"error":"TOKEN_NOT_FINDED"})
}
@ -716,7 +821,7 @@ function IOConnection(io) {
const results = await subplayer.search(data)
io.emit("ANSWER/SEND/SEARCH", results)

View File

@ -59,8 +59,16 @@ var playlistValue = null
var deleteJustBefore = null
var currentSong = null
var isAdmin = false
var playlistAvailable = null
restartBtn.addEventListener("click", () => {
get("RESTART")
@ -95,6 +103,7 @@ document.onmousemove = function(e)
showToolTip("admin", "Donner les permissions Administrateur", e)
showToolTip("takeCurrent", "Ajouter le titre à une playlist", e)
showToolTip("volbtn", "Volume", e)
showToolTip("radio_add", "Ajouter par l'URL", e)
};
function showToolTip(id, text, e) {
@ -118,11 +127,138 @@ function showToolTip(id, text, e) {
homeBtn.addEventListener("click", () => {
mainView.innerHTML = WelcomeContent
wasOnPlaylist = false
loadHome()
})
function loadHome() {
mainView.innerHTML = WelcomeContent
wasOnPlaylist = false
get("ALL_CONNECTED_USER")
get("ALL_RADIO")
}
socket.on("ALWAYS/ALL_CONNECTED_USER", (resp) => {
const website_list = document.getElementById("website_list")
const userToPush = new Array()
userToPush.push("<p style='font-family: Gunship, sans-serif;'><i class='fa fa-users'></i> Personnes en ligne</p>")
for(var user of resp ) {
userToPush.push(`<div id='${resp.indexOf(user)}' style='padding-bottom: 1%; padding-top: 1%;' class="set_user_info"><img style='margin-right: 3%;' src="https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}"><div style="display: flex; flex-direction: column; justify-content: center;"><p class="INDEX_gbname">${user.global_name}</p><p class="INDEX_usrname">${user.username}</p></div></div>`)
}
website_list.innerHTML = userToPush.join("")
})
socket.on("ALWAYS/ALL_RADIO", (resp) => {
const radio_list = document.getElementById("radio_list")
const radioToPush = new Array()
radioToPush.push("<p style='font-family: Gunship, sans-serif;'><i class='fa fa-radio'></i> Radio</p>")
radioToPush.push(`
<dialog class="report_dialog" id="radio_dialog">
<div class="rlineclose">
<p class="rtitle"><i class="fa fa-radio"></i> Ajout d'une radio</p>
<button id="radio_close" class="report_close"><i class="fa-solid fa-xmark"></i></button>
</div>
<p id='radio_info' style='text-align: center; color: red;'></p>
<div class="rcontent">
<p class="runder">URL</p>
<input type='text' id="radio_host">
<button id="radio_send" class="rsend"><i class="fa-solid fa-plus"></i> Ajouter</button>
</div>
</dialog>
`)
for(var title of resp ) {
var thumbnail = title.thumbnail
if(!thumbnail) {
thumbnail = "/images/black-image.svg"
}
radioToPush.push(`<div class="search_song"> <img style='width: 60px;height: 45px; margin-right: 10px;' src="${thumbnail}"><div class="search_titleSong"> <p class="search_title">${title.title}</p></div> <p>${title.author}</p><button id='${resp.indexOf(title)}_radio_pplay' class='primary'><i class='fa fa-play'></i></button></div>`)
}
if(isAdmin) {
radioToPush.push(`
<div id="radio_add" class="playlist_div"><i style='margin-right: 10px;' class='fa fa-plus'></i> Ajouter une radio</div>`)
}
radio_list.innerHTML = radioToPush.join("")
const radio_dialog = document.getElementById("radio_dialog")
const radio_close = document.getElementById("radio_close")
const radio_send = document.getElementById("radio_send")
const radio_add = document.getElementById("radio_add")
const radio_info = document.getElementById("radio_info")
const radio_host = document.getElementById("radio_host")
radio_add.addEventListener("click", () => {
radio_info.innerHTML = ""
radio_host.value = ""
radio_dialog.showModal()
})
radio_close.addEventListener("click", () => {
radio_info.innerHTML = ""
radio_dialog.close()
})
radio_send.addEventListener("click", () => {
if(radio_host.value != '') {
send("RADIO/ADD", radio_host.value)
radio_dialog.close()
} else {
radio_info.innerHTML = "Remplissez une URL !"
}
})
for(var title of resp ) {
var playBtn = document.getElementById(resp.indexOf(title) +'_radio_pplay')
playBtn.addEventListener("click", () => {
send("ADD_SONG_NOW", resp[playBtn.id.replace("_radio_pplay", "")])
})
}
})
loadHome()
function delPlayList(key) {
send("DELETE_PLAYLIST", key)
@ -326,15 +462,23 @@ function loadPlaylist(key, value) {
var thumbnail = title.thumbnail
if(!thumbnail) {
if(!thumbnail) {
thumbnail = "/images/black-image.svg"
}
thumbnail = "/images/black-image.svg"
}
if(title.duration == 9223372036854776000) {
PFormatduration = "<i style='color: red;' class='fa-solid fa-circle'></i> LIVE"
}
playlist_songs.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="' + 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="INDEX_userPopup invisible" id="playlist_popup"></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 onclick="sendPlayList(\''+ key +'\')" id="sendplaylist" class="list_upSong"><i class="fas fa-paper-plane"></i></button></button><button onclick="delPlayList(\''+ key +'\')" id="playlistdelete" class="list_delete"><i class="fas fa-trash"></i></button></div></div><hr>' + playlist_songs.join(""))
@ -440,7 +584,14 @@ searchBtn.addEventListener("click", () => {
thumbnail = "/images/black-image.svg"
}
PFormatduration = pmax
if(title.duration == 9223372036854776000) {
PFormatduration = "<i style='color: red;' class='fa-solid fa-circle'></i> LIVE"
}
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) +'_goPlaylist" 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>')
}
@ -581,6 +732,12 @@ searchBtn.addEventListener("click", () => {
}
PFormatduration = pmax
if(title.milis_length == 9223372036854776000) {
PFormatduration = "<i style='color: red;' class='fa-solid fa-circle'></i> LIVE"
}
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>')
@ -833,6 +990,7 @@ userInfo.then(user => {
if(user.admin == true) {
settingsBtn.style.display = "flex"
isAdmin = true
}
userInfoDiv.innerHTML = "<div class='INDEX_userInfo_name'><p class='INDEX_gbname'>" + user.user.global_name + "</p><p class='INDEX_usrname'>" + user.user.username + "</p></div><div class='INDEX_picture'><img src='https://cdn.discordapp.com/avatars/" + user.user.id + "/" + user.user.avatar + "'>" + betastar + "</div>"
@ -1018,6 +1176,23 @@ socket.on("/ALWAYS/MUSIC_STATE", (data) => {
}
if(data.durationAll == 9223372036854776000) {
isPlaying = false
durationAll = 0
durationProgress = 0
durationBar.disabled = true
durationBar.classList.add("grised")
durationBar.style.display = "none"
durationBar.value = 0
durationTextAct.innerHTML = ""
durationTextTotal.innerHTML = "<i style='color: red;' class='fa-solid fa-circle'></i> LIVE"
} else {
durationBar.style.display = "unset"
}
if(data.queue != null) {
@ -1158,3 +1333,4 @@ function setTime() {
}

View File

@ -1182,3 +1182,38 @@ p {
text-align: center;
opacity: 0.8;
}
.home_view {
display: flex;
width: 100%;
height: 100%;
}
.home_other {
display: flex;
flex-direction: column;
width: 30%;
margin-left: 0.5%;
padding: 1%;
}
.home_changelog {
width: 70%;
overflow-y: auto;
padding: 1%;
}
.home_radio {
height: 50%;
}
.home_online {
height: 50%;
}

View File

@ -62,10 +62,18 @@
</dialog>
</div>
<div style="color: white" id="mainView" class="INDEX_search">
<div style="color: white">
<%- welcome %>
<div class="home_view">
<div class="home_changelog">
<%- welcome %>
</div>
<div class="home_other">
<div id="website_list" class="home_online">
</div>
<div id="radio_list" class="home_radio">
<p style='font-family: Gunship, sans-serif;'>Radio</p>
</div>
</div>
</div>
</div>