Version 0.8.1 - Ajout des tooltips et du playlistshare

This commit is contained in:
CICD - Pipeline 2023-09-07 21:49:04 +02:00
parent 994ba72caf
commit 08b704821e
14 changed files with 235 additions and 90 deletions

View File

@ -28,7 +28,7 @@
> - Popup Prefab
> - Declencher lors de l'action
**Playlist Share**
**Playlist Share (Done)**
> - Envoyer des playlist avec la liste des utilisateurs

View File

@ -143,6 +143,17 @@
"isStream": false,
"uri": "https://www.youtube.com/watch?v=ChireNiqxTo",
"thumbnail": "https://img.youtube.com/vi/ChireNiqxTo/default.jpg"
},
{
"track": "QAAAkQIALE1JQ0hBRUwgSkFDS1NPTiAtIEJBRCBbQUpBWMK0UyBFWFRFTkRFRCBNSVhdAAtBamF4U3RyaWtlcgAAAAAACDGoAAszRWE3XzZRdTJ4bwABACtodHRwczovL3d3dy55b3V0dWJlLmNvbS93YXRjaD92PTNFYTdfNlF1MnhvAAd5b3V0dWJlAAAAAAAAAAA=",
"title": "MICHAEL JACKSON - BAD [AJAX´S EXTENDED MIX]",
"identifier": "3Ea7_6Qu2xo",
"author": "AjaxStriker",
"duration": 537000,
"isSeekable": true,
"isStream": false,
"uri": "https://www.youtube.com/watch?v=3Ea7_6Qu2xo",
"thumbnail": "https://img.youtube.com/vi/3Ea7_6Qu2xo/default.jpg"
}
]
}

View File

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

View File

@ -153,6 +153,22 @@ module.exports.getUsers = function () {
}
module.exports.getUsersList = function () {
var userList = new Array()
const userDB = JSON.parse(fs.readFileSync(__glob.USERS))
for(var user of userDB) {
userList.push({"username": user.user.username, "global_name":user.user.global_name, "avatar": user.user.avatar, "id": user.user.id})
}
return userList
}
module.exports.getUser = function (token) {
return users.get(token)
}

View File

@ -4,7 +4,8 @@ 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 fs = require("fs");
const { type } = require("os");
var playlists = {}
const plog = new LogType("Playlist-Manager")
@ -41,6 +42,23 @@ module.exports.addPlaylist = function (id, name) {
}
module.exports.copyPlaylist = function (id, from, dest) {
this.getUser(dest)
check()
let playlistDest = playlists[dest][from]
if(!playlistDest) {
plog.log("Ajout de la playlist à l'utilisateur \"" + id + "\" dans la base de donnée Playlist !")
playlists[dest][from] = playlists[id][from]
fs.writeFileSync(__glob.PLAYLIST, JSON.stringify(playlists, null, 2))
} else {
plog.log("L'utilisateur \"" + dest + "\" à déjà une playlist avec le nom "+ from + " dans la base de donnée Playlist !")
}
}
module.exports.removePlaylist = function (id, name) {
check()
if(playlists[id][name]) {

View File

@ -274,6 +274,26 @@ function IOConnection(io) {
})
GetRequest(io, socket, "USER_LIST", () => {
var cookies = socket.handshake.headers.cookie
cookies = cook.parse(cookies)
var token = cookies.token
const user = auth.getUser(token)
if(user.admin == true) {
const users_data = auth.getUsersList()
socket.emit("ANSWER/GET/USER_LIST", users_data)
}
})
@ -667,7 +687,7 @@ function IOConnection(io) {
subplayer.report(null, null, data)
const user = auth.getUser(token)
io.emit("NOTIFICATION", {"image_src": "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.vecteezy.com%2Fvector-art%2F19521981-green-check-mark-vector-icon-with-circle-checkmark-illustration&psig=AOvVaw1-8kuUXImHNwIoVvySyiSK&ust=1694119774978000&source=images&cd=vfe&opi=89978449&ved=0CBAQjRxqFwoTCLjb2YzuloEDFQAAAAAdAAAAABAE", "text": "Votre rapport de bug a été correctement envoyé !" })
socket.emit("NOTIFICATION", {"image_src": "https://static.vecteezy.com/system/resources/previews/019/521/981/non_2x/green-check-mark-icon-with-circle-checkmark-illustration-free-vector.jpg", "text": "Votre rapport de bug a été correctement envoyé !" })
} else {
@ -998,6 +1018,44 @@ function IOConnection(io) {
})
socket.on("SEND/SEND_PLAYLIST", async (key, dest) => {
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
subplaylist.copyPlaylist(userId, key, dest)
io.sockets.emit("DO_UPDATE_PLAYLIST")
socket.emit("NOTIFICATION", {"image_src": "https://static.vecteezy.com/system/resources/previews/019/521/981/non_2x/green-check-mark-icon-with-circle-checkmark-illustration-free-vector.jpg", "text": "La playlist a été correctement envoyé ! (Si le destinataire a déjà une playlist avec le même nom, l'opération est annulé" })
io.emit("ANSWER/SEND/SEND_PLAYLIST/OK")
} else {
io.emit("ANSWER/SEND/SEND_PLAYLIST", {"error":"USER_DONT_EXIST"})
}
} else {
io.emit("ANSWER/SEND/SEND_PLAYLIST", {"error":"TOKEN_NOT_FINDED"})
}
})
socket.on("SEND/ADD_SONG_TO_PLAYLIST", async (data, song) => {

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 204 KiB

After

Width:  |  Height:  |  Size: 257 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 149 KiB

View File

@ -19,9 +19,9 @@ const settingsBtn = document.getElementById("settings_btn")
const loop = document.getElementById("loop")
const vol = document.getElementById("vol")
const vol = document.getElementById("volbtn")
const shuffle = document.getElementById("shuffle")
const list = document.getElementById("list")
const list = document.getElementById("list_btn")
const takeCurrent = document.getElementById("takeCurrent")
const volBox = document.getElementById("volumeBox")
@ -72,12 +72,49 @@ homeBtn.style.color = "white"
var xMousePos = 0;
var yMousePos = 0;
const tooltip = document.getElementById("tooltip")
document.onmousemove = function(e)
{
xMousePos = e.clientX + window.pageXOffset;
yMousePos = e.clientY + window.pageYOffset;
xMousePos = e.clientX + window.scrollX;
yMousePos = e.clientY + window.scrollY;
tooltip.style.visibility = 'hidden'
tooltip.style.display = 'none'
showToolTip("pplay", "Jouer maintenant", e)
showToolTip("delete", "Supprimer", e)
showToolTip("add", "Ajouter à la liste de lecture", e)
showToolTip("loop", "Répéter le titre", e)
showToolTip("shuffle", "Mélanger la liste de lecture", e)
showToolTip("list_btn", "Liste de lecture", e)
showToolTip("disconnect", "Déconnecter le bot", e)
showToolTip("sendplaylist", "Envoyer la playlist", e)
showToolTip("playlistdelete", "Effacer la playlist", e)
showToolTip("reload", "Relancer le serveur", e)
showToolTip("admin", "Donner les permissions Administrateur", e)
showToolTip("takeCurrent", "Ajouter le titre à une playlist", e)
showToolTip("volbtn", "Volume", e)
};
function showToolTip(id, text, e) {
if(e.target) {
if(e.target.id.includes(id) || e.target.parentNode.parentNode.id.includes(id)) {
tooltip.style.visibility = 'visible'
tooltip.style.display = 'unset'
tooltip.style.top = ( yMousePos - ( tooltip.offsetHeight + 20)) + "px"
tooltip.style.width = "150px"
tooltip.style.left =(xMousePos - 75 )+ "px"
tooltip.innerHTML = text
}
}
}
homeBtn.addEventListener("click", () => {
@ -103,6 +140,54 @@ function playPlayList(key) {
}
function sendPlayList(key) {
const playlist_popup = document.getElementById("playlist_popup")
if(playlist_popup) {
get("USER_LIST").then(resp => {
const userToPush = new Array()
for(var user of resp) {
userToPush.push(`<div id='${resp.indexOf(user)}' style='padding: 1%;' class="INDEX_line set_user_info"><img 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>`)
}
playlist_popup.innerHTML = userToPush.join("")
playlist_popup.style.width = '170px'
playlist_popup.style.top = (yMousePos - 30) + "px"
playlist_popup.style.left = (xMousePos - 165) + "px"
playlist_popup.classList.remove("invisible")
playlist_popup.addEventListener("mouseleave", () => {
playlist_popup.classList.add("invisible")
})
for(var user of resp) {
const userElement = document.getElementById(resp.indexOf(user))
userElement.addEventListener("click", () => {
playlist_popup.classList.add("invisible")
send("SEND_PLAYLIST", key, resp[userElement.id].id)
})
}
//send("SEND_PLAYLIST", key, user.id)
})
}
}
socket.on("DO_UPDATE_PLAYLIST", () => {
@ -116,7 +201,7 @@ socket.on("ANSWER/GET/PLAYLIST", (data) => {
var selectionData = new Array()
contentToPush.push('<div id="addPlaylist" class="playlist_div"><i class="fa-solid fa-plus playlist_tile"></i> Créer une playlist</div>')
contentToPush.push('<div id="createPlaylist" class="playlist_div"><i class="fa-solid fa-plus playlist_tile"></i> Créer une playlist</div>')
for (const [key, value] of Object.entries(data)) {
@ -170,8 +255,9 @@ socket.on("ANSWER/GET/PLAYLIST", (data) => {
});
const addPlaylist = document.getElementById("addPlaylist")
const addPlaylist_dialog = document.getElementById("addPlaylist_dialog")
const addPlaylist = document.getElementById("createPlaylist")
const addPlaylist_dialog = document.getElementById("createPlaylist_dialog")
const addPlaylist_close = document.getElementById("createPlaylist_close")
const apText = document.getElementById("apText")
const apCreate = document.getElementById("apCreate")
@ -249,7 +335,8 @@ function loadPlaylist(key, value) {
}
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(""))
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(""))
if(playlistToPush.join("") == "") {
@ -332,7 +419,7 @@ searchBtn.addEventListener("click", () => {
pmaxsec = `0${pmaxsec}`;
}
if(pmaxhours != 0) {
if (pmaxmin < 10) {
@ -354,7 +441,7 @@ searchBtn.addEventListener("click", () => {
}
PFormatduration = pmax
contentToPush.push(' <div class="search_song"> <img class="search_thumbnail" src="' + thumbnail + '"><div class="search_titleSong"> <p class="search_title">' + title.title + '</p></div> <p>' + title.author + '</p><p>' + PFormatduration + '</p> <div class="search_buttons"><button id="' + data.indexOf(title) + '_ladd" class="search_add"><i class="fa fa-plus"></i></button> <div class="searchMoreDiv"><button id="' + data.indexOf(title) + '_lmore" class="search_lmore"><i class="fa-solid fa-ellipsis"></i></button></div><div class="searchPopup" id="' + data.indexOf(title) + '_popup"><div id="' + data.indexOf(title) + '_playNow" class="INDEX_line"><i class="fa-solid fa-play"></i> Lire maintenant</div><div id="' + data.indexOf(title) +'_addPlaylist" class="INDEX_line"><i class="fa-regular fa-square-plus"></i> Ajouter à une playlist</div><div 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>')
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>')
}
if(contentToPush.join("") == "") {
@ -373,7 +460,7 @@ searchBtn.addEventListener("click", () => {
const testPopup = document.getElementById(data.indexOf(title) + "_popup")
const playNow = document.getElementById(data.indexOf(title) + "_playNow")
const copy = document.getElementById(data.indexOf(title) + "_copy")
const addPlaylist = document.getElementById(data.indexOf(title) + "_addPlaylist")
const addPlaylist = document.getElementById(data.indexOf(title) + "_goPlaylist")
const PlaylistManager = document.getElementById(data.indexOf(title) + "playlistManager")
const playlistManager_close = document.getElementById(data.indexOf(title) + "playlistManager_close")
@ -589,6 +676,8 @@ socket.on("NOTIFICATION", (data) => {
})
const cPlaylistManager = document.getElementById("current_playlistManager")
const cplaylistManager_close = document.getElementById("current_playlistManager_close")
const cplaylistSelection = document.getElementById("current_playlistSelection")

View File

@ -236,70 +236,6 @@ socket.on("ALWAYS/USERS",(data) => {
socket.on("ALWAYS/NODES",(data) => {
/*settings_content.innerHTML = `
<div style='width: 100%; text-align: right;'>
<button class='primary'><i class='fa fa-plus'></i></button>
</div>
<hr>
<div class='connexion_div'>
<div class='connexion_info'>
<div class='connexion_logo'>
<i class='fa fa-wifi'></i>
</div>
<p class='connexion_title'>lava2.horizxon.studio</p>
<p class='connexion_logo_on'>Connecté</p>
</div>
<div>
<button class='list_upSong'><i class="fa-solid fa-rotate-right"></i></button>
<button class='list_delete'><i class='fa fa-trash'></i></button>
</div>
</div>
<div class='connexion_div'>
<div class='connexion_info'>
<div class='connexion_logo'>
<i class='fa fa-wifi'></i>
</div>
<p class='connexion_title'>lava2.horizxon.studio</p>
<p class='connexion_logo_on'>Connecté</p>
</div>
<div>
<button class='list_upSong'><i class="fa-solid fa-rotate-right"></i></button>
<button class='list_delete'><i class='fa fa-trash'></i></button>
</div>
</div>
<div class='connexion_div'>
<div class='connexion_info'>
<div class='connexion_logo'>
<i class='fa fa-wifi'></i>
</div>
<p class='connexion_title'>lava2.horizxon.studio</p>
<p class='connexion_logo_off'>Déconnecté</p>
</div>
<div>
<button class='list_upSong'><i class="fa-solid fa-rotate-right"></i></button>
<button class='list_delete'><i class='fa fa-trash'></i></button>
</div>
</div>
<div class='connexion_div'>
<div class='connexion_info'>
<div class='connexion_logo'>
<i class='fa fa-wifi'></i>
</div>
<p class='connexion_title'>lava2.horizxon.studio</p>
<p class='connexion_logo_off'>Déconnecté</p>
</div>
<div>
<button class='list_upSong'><i class="fa-solid fa-rotate-right"></i></button>
<button class='list_delete'><i class='fa fa-trash'></i></button>
</div>
</div>
`*/
const settings_content = document.getElementById("settings_content")
if(settings_content && wasOnNodes) {

View File

@ -16,7 +16,9 @@ body {
background-color: black;
color: white;
font-family: 'Roboto', sans-serif;
background: linear-gradient(225deg, #342348 0%, #1C1A31 100%);;
background: linear-gradient(225deg, #342348 0%, #1C1A31 100%);
overflow-x: hidden;
}
@ -360,8 +362,7 @@ p {
.report_dialog {
width: 40vw;
height: 25vw;
width: 50%;
padding: 0;
background: linear-gradient(90deg, #515151 0%, #2e2e2e 100%);
border: none;
@ -980,8 +981,8 @@ p {
display: flex;
justify-content: end;
align-items: center;
gap: 10%;
width: 10%;
gap: 5%;
width: 20%;
}
@ -1134,6 +1135,7 @@ p {
.alert_div {
visibility: hidden;
width: 20%;
position: absolute;
top: -10%;
@ -1165,4 +1167,18 @@ p {
.alert_div_on {
transition: all 2s;
top: 4% !important;
}
visibility: visible;
}
.tooltip-text {
visibility: hidden;
position: absolute;
z-index: 50;
width: 100px;
color: white;
background-color: #2e2e2e;
padding: 7px;
border-radius: 12px;
text-align: center;
opacity: 0.5;
}

View File

@ -7,6 +7,7 @@
<title>Subsonics - Web</title>
</head>
<body>
<span id="tooltip" class="tooltip-text">Tooltip Text</span>
<div class="INDEX_Content">
<div style='cursor: pointer;' class="alert_div" id="alert">
<img class="alert_image" id="alert_image" src="/images/playlist-tile.svg">
@ -47,10 +48,10 @@
</div>
<dialog id="addPlaylist_dialog" class="report_dialog">
<dialog id="createPlaylist_dialog" class="report_dialog">
<div class="rlineclose">
<p class="rtitle"><i class="fa fa-plus"></i> Créer une playlist</p>
<button id="addPlaylist_close" class="report_close"><i class="fa-solid fa-xmark"></i></button>
<button id="createPlaylist_close" class="report_close"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="apContent">
<img class="apTile" src="/images/playlist-tile.svg">
@ -96,11 +97,11 @@
<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> Créer à 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>
<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">
<button id="vol" class="third"><i class="fa fa-volume-up"></i></button>
<button id="volbtn" class="third"><i class="fa fa-volume-up"></i></button>
<div id="volumeBox">
<input type="range" id="volumeInput" >
<p id="volumeTxt">100%</p>
@ -108,7 +109,7 @@
</div>
<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>
<button id="list_btn" class="list third"><i class="fa fa-list-ol"></i><p class="number" id="listNumber"></p></button>
<div id="listBox">
</div>