Version 0.8.1 - Ajout des tooltips et du playlistshare
This commit is contained in:
parent
994ba72caf
commit
08b704821e
@ -28,7 +28,7 @@
|
||||
> - Popup Prefab
|
||||
> - Declencher lors de l'action
|
||||
|
||||
**Playlist Share**
|
||||
**Playlist Share (Done)**
|
||||
|
||||
> - Envoyer des playlist avec la liste des utilisateurs
|
||||
|
||||
|
||||
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "subsonics-web",
|
||||
"author": "Raphix",
|
||||
"version": "0.8.0",
|
||||
"version": "0.8.1",
|
||||
"nodemonConfig": {
|
||||
"ext": "js, html",
|
||||
"ignore": [
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -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]) {
|
||||
|
||||
@ -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) => {
|
||||
|
||||
|
||||
BIN
src/web/public/images/logo-test.ico
Normal file
BIN
src/web/public/images/logo-test.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
BIN
src/web/public/images/logo-test.png
Normal file
BIN
src/web/public/images/logo-test.png
Normal file
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 |
@ -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")
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user