1.1.0 Official Version
This commit is contained in:
Raphix
@@ -20,6 +20,37 @@
|
||||
|
||||
}
|
||||
|
||||
.exitNotShow {
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
.number {
|
||||
|
||||
|
||||
font-size: 11px;
|
||||
color: black;
|
||||
box-shadow: 1px 1px 5px white;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
position: absolute; /* Position the badge within the relatively positioned button */
|
||||
top: 0;
|
||||
right: -2px;
|
||||
|
||||
}
|
||||
|
||||
.list {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.controller-box {
|
||||
|
||||
display: flex;
|
||||
@@ -60,7 +91,87 @@
|
||||
color: red;
|
||||
border: none;
|
||||
transition: all 0.2s ease 0s;
|
||||
width: 13%;
|
||||
|
||||
}
|
||||
|
||||
.act {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.settings {
|
||||
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
border: none;
|
||||
transition: all 0.2s ease 0s;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin-right: 5px;
|
||||
|
||||
}
|
||||
|
||||
.settings:hover {
|
||||
border-radius: 100%;
|
||||
background-color: rgb(46, 196, 255);
|
||||
border-color: transparent;
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
.settings:active {
|
||||
|
||||
background-color: transparent;
|
||||
color: rgb(46, 196, 255);
|
||||
border: none;
|
||||
transition: all 0.2s ease 0s;
|
||||
|
||||
}
|
||||
|
||||
.restart {
|
||||
|
||||
font-family: 'Open Sans', sans-serif !important;
|
||||
background-color: transparent;
|
||||
border: solid;
|
||||
border-radius: 15px;
|
||||
padding: 2%;
|
||||
border-color: rgb(46, 196, 255);
|
||||
color: white;
|
||||
transition: all 0.2s ease 0s;
|
||||
}
|
||||
|
||||
.restart:hover {
|
||||
|
||||
color: black;
|
||||
background-color: rgb(46, 196, 255);
|
||||
box-shadow: 2px 2px 5px rgb(46, 196, 255);
|
||||
}
|
||||
|
||||
.restart:active {
|
||||
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stLine {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stPct {
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.stLine p {
|
||||
|
||||
width: 100px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.online-light {
|
||||
@@ -77,6 +188,12 @@
|
||||
|
||||
}
|
||||
|
||||
.numtext {
|
||||
display: inline-block;
|
||||
padding-top: 2px !important;
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
|
||||
width: 30px;
|
||||
@@ -90,6 +207,11 @@
|
||||
|
||||
}
|
||||
|
||||
.grised {
|
||||
|
||||
filter : invert(50%);
|
||||
}
|
||||
|
||||
|
||||
.playbar {
|
||||
|
||||
@@ -110,9 +232,68 @@
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.sbar {
|
||||
width: 100%;
|
||||
padding: 1%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.durationText {
|
||||
|
||||
margin: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
height: 26px;
|
||||
-webkit-appearance: none;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
box-shadow: 1px 1px 2px #000000;
|
||||
background: #B8B8B8;
|
||||
border-radius: 50px;
|
||||
border: 0px solid #000000;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
box-shadow: 1px 1px 1px #000000;
|
||||
border: 1px solid #000000;
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
border-radius: 50px;
|
||||
background: #FFFFFF;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -3px;
|
||||
}
|
||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: #B8B8B8;
|
||||
}
|
||||
|
||||
input[type=range]:focus::-webkit-sl {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.secondary {
|
||||
|
||||
background-color: #171A21;
|
||||
@@ -211,7 +392,7 @@
|
||||
|
||||
color: rgb(31, 30, 30);
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-size: 10px;
|
||||
|
||||
}
|
||||
|
||||
@@ -311,4 +492,9 @@
|
||||
.finder:hover {
|
||||
|
||||
box-shadow: 1px 1px 5px white;
|
||||
}
|
||||
|
||||
.cp {
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
@@ -18,8 +18,6 @@
|
||||
</header>
|
||||
<div class="content">
|
||||
|
||||
|
||||
|
||||
<div class="box">
|
||||
|
||||
<span id="music_img"><img class="thumbnail" src="../common/Mediamodifier-Design.svg"></span>
|
||||
@@ -35,8 +33,13 @@
|
||||
</div>
|
||||
<div class="bbar">
|
||||
<button id="search" class="third"><i class="fa fa-search"></i></button>
|
||||
<button id="loop" class="third"><i class="fa fa-retweet"></i></button>
|
||||
<span id="exitSpan" class="exit"></span>
|
||||
<button id="list" class="third"><i class="fa fa-list-ol"></i></button>
|
||||
<button id="list" class="list third"><i class="fa fa-list-ol"><p class="number" id="listNumber"></p></i></button>
|
||||
</div>
|
||||
<div class="sbar">
|
||||
<input id="duration" type="range" value="0" max="100">
|
||||
<p id="durationText" class="durationText">0:00/0:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
@@ -44,7 +47,11 @@
|
||||
<span id="logo"><img class="logo" src="../../src/logo.png"></span>
|
||||
<span id="username"></span>
|
||||
</div>
|
||||
<button id="signout" class="signout"><i class="fas fa-sign-out"></i></button>
|
||||
<div class="act">
|
||||
<button id="settings" class="settings"><i class="fas fa-gear"></i></button>
|
||||
<button id="signout" class="signout"><i class="fas fa-sign-out"></i></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<dialog id="listDialog" class="menu">
|
||||
@@ -70,10 +77,27 @@
|
||||
<div id="searchContent">
|
||||
|
||||
</div>
|
||||
</dialog>
|
||||
<dialog id="stDialog" class="menu">
|
||||
<div class="menuheader">
|
||||
<p class="listHeader"><i style="margin-right: 3px" class="fa fa-gear"></i> Paramètres</p>
|
||||
<button class="buttonClose" id="stClose"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<div class="stLine">
|
||||
<p>Volume :</p>
|
||||
<input type="range" id="volCursor">
|
||||
<p class="stPct" id="volPct">0%</p>
|
||||
</div>
|
||||
<div class="stLine">
|
||||
<p>Actions :</p>
|
||||
<button id="restart" class="restart"><i class="fas fa-power-off"></i> Redémarrer</button>
|
||||
</div>
|
||||
|
||||
|
||||
</dialog>
|
||||
<div class="infoVersion">
|
||||
<p >Submanager - Version <span id="version"></span></p>
|
||||
<p >Fait avec 💖 par Raphix</p>
|
||||
<p class="cp">Submanager - Version <span id="version"></span></p>
|
||||
<p style="margin: 0;">Fait avec 💖 par Raphix</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -17,6 +17,7 @@ const listDialog = document.getElementById("listDialog")
|
||||
const listClose = document.getElementById("listClose")
|
||||
const listClear = document.getElementById("listClear")
|
||||
const listcontent = document.getElementById("listContent")
|
||||
const listNumber = document.getElementById("listNumber")
|
||||
|
||||
const search = document.getElementById("search")
|
||||
const searchBar = document.getElementById("searchBar")
|
||||
@@ -24,6 +25,147 @@ const searchDialog = document.getElementById("searchDialog")
|
||||
const searchClose = document.getElementById("searchClose")
|
||||
const searchcontent = document.getElementById("searchContent")
|
||||
|
||||
const durationBar = document.getElementById("duration")
|
||||
const durationText = document.getElementById("durationText")
|
||||
|
||||
|
||||
const stDialog = document.getElementById("stDialog")
|
||||
const settings = document.getElementById("settings")
|
||||
const stClose = document.getElementById("stClose")
|
||||
|
||||
const volCursor = document.getElementById("volCursor")
|
||||
const volPct = document.getElementById("volPct")
|
||||
const restart = document.getElementById("restart")
|
||||
|
||||
restart.addEventListener("click", () => {
|
||||
|
||||
stDialog.close()
|
||||
ipc.send("restart")
|
||||
|
||||
})
|
||||
|
||||
var durationAll = 0
|
||||
var durationProgress = 0
|
||||
var isPlaying = false
|
||||
var changeMusic = null
|
||||
|
||||
|
||||
settings.addEventListener("click", () => {
|
||||
|
||||
stDialog.showModal()
|
||||
|
||||
})
|
||||
|
||||
stClose.addEventListener("click", () => {
|
||||
|
||||
stDialog.close()
|
||||
})
|
||||
|
||||
durationBar.value = 0
|
||||
listNumber.classList.add("exitNotShow")
|
||||
|
||||
|
||||
|
||||
function setTime() {
|
||||
|
||||
|
||||
|
||||
durationBar.max = durationAll
|
||||
durationProgress += 1000
|
||||
durationBar.value = durationProgress
|
||||
|
||||
|
||||
const maxhours = Math.floor(durationAll / 3600000);
|
||||
const nowhours = Math.floor(durationProgress / 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);
|
||||
var nowmin = Math.trunc(durationProgress / 60000) - (Math.floor(durationProgress / 60000 / 60) * 60);
|
||||
var nowsec = Math.floor(durationProgress / 1000) - (Math.floor(durationProgress / 1000 / 60) * 60);
|
||||
|
||||
console.log(durationAll)
|
||||
console.log(durationProgress)
|
||||
console.log("---------------------")
|
||||
|
||||
var now = ""
|
||||
var max = ""
|
||||
|
||||
|
||||
if (maxmin < 10) {
|
||||
maxmin = `0${maxmin}`;
|
||||
}
|
||||
|
||||
if (nowmin < 10) {
|
||||
nowmin = `0${nowmin}`;
|
||||
}
|
||||
|
||||
if (maxsec < 10) {
|
||||
maxsec = `0${maxsec}`;
|
||||
}
|
||||
|
||||
if (nowsec < 10) {
|
||||
nowsec = `0${nowsec}`;
|
||||
}
|
||||
|
||||
if(maxhours != 0) {
|
||||
|
||||
max = maxhours + ":" + maxmin + ":" + maxsec
|
||||
} else {
|
||||
max = maxmin + ":" + maxsec
|
||||
|
||||
}
|
||||
|
||||
if(nowhours != 0) {
|
||||
|
||||
now = nowhours + ":" + nowmin + ":" + nowsec
|
||||
} else {
|
||||
now = nowmin + ":" + nowsec
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
durationText.innerHTML = now + "/" + max
|
||||
}
|
||||
|
||||
|
||||
setInterval(() => {
|
||||
|
||||
if(isPlaying == true) {
|
||||
setTime()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}, 1000)
|
||||
|
||||
|
||||
durationBar.addEventListener("change", () => {
|
||||
|
||||
ipc.send("seek", durationBar.value)
|
||||
|
||||
})
|
||||
|
||||
volCursor.addEventListener("change", () => {
|
||||
|
||||
ipc.send("volume", volCursor.value)
|
||||
|
||||
})
|
||||
|
||||
const loop = document.getElementById("loop")
|
||||
|
||||
|
||||
|
||||
loop.addEventListener("click", () => {
|
||||
|
||||
ipc.send("loop")
|
||||
})
|
||||
|
||||
|
||||
listClear.addEventListener("click", () => {
|
||||
|
||||
ipc.send("listClear")
|
||||
@@ -38,7 +180,6 @@ searchBar.addEventListener("change", () => {
|
||||
})
|
||||
|
||||
ipc.on("findResult", (ev, list) => {
|
||||
|
||||
|
||||
if(list.tracks != null) {
|
||||
const data = list.tracks
|
||||
@@ -151,19 +292,55 @@ forward.addEventListener("click" ,() => {
|
||||
})
|
||||
|
||||
ipc.on("actualize", (ev, data) => {
|
||||
|
||||
|
||||
isPlaying = false
|
||||
|
||||
|
||||
|
||||
|
||||
console.log(data)
|
||||
onlineNumber.innerHTML = data.onlineNumber
|
||||
|
||||
if(data.playing == 1) {
|
||||
play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-pause"></i>'
|
||||
if(data.loop == true) {
|
||||
loop.innerHTML = '<i class="third-join fa fa-retweet"></i>'
|
||||
|
||||
} else {
|
||||
|
||||
loop.innerHTML = '<i class="fa fa-retweet"></i>'
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if(data.playing == 1) {
|
||||
play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-pause"></i>'
|
||||
isPlaying = true
|
||||
|
||||
} else {
|
||||
|
||||
|
||||
play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-play"></i>'
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
if(data.volume) {
|
||||
volCursor.step = 1
|
||||
volCursor.max = 100
|
||||
volCursor.value = Math.trunc(data.volume / 10)
|
||||
volPct.innerHTML = Math.trunc(data.volume / 10) + "%"
|
||||
|
||||
} else {
|
||||
|
||||
volPct.innerHTML = "0%"
|
||||
}
|
||||
|
||||
if(data.isOnline == true) {
|
||||
|
||||
exitSpan.classList.remove("exitNotShow")
|
||||
loop.classList.remove("exitNotShow")
|
||||
exitSpan.innerHTML = ' <button id="exit" class="third-leave"><i class="fa fa-phone-slash"></i></button>'
|
||||
|
||||
const exit = document.getElementById("exit")
|
||||
@@ -173,9 +350,24 @@ ipc.on("actualize", (ev, data) => {
|
||||
ipc.send("exitBot")
|
||||
|
||||
})
|
||||
} else {
|
||||
|
||||
volCursor.disabled = false
|
||||
volCursor.classList.remove("grised")
|
||||
|
||||
|
||||
durationBar.disabled = false
|
||||
durationBar.classList.remove("grised")
|
||||
} else {
|
||||
exitSpan.classList.add("exitNotShow")
|
||||
loop.classList.add("exitNotShow")
|
||||
exitSpan.innerHTML = ""
|
||||
durationBar.disabled = true
|
||||
durationBar.classList.add("grised")
|
||||
durationBar.value = 0
|
||||
|
||||
volCursor.disabled = true
|
||||
volCursor.classList.add("grised")
|
||||
volCursor.value = 0
|
||||
}
|
||||
|
||||
|
||||
@@ -183,19 +375,23 @@ ipc.on("actualize", (ev, data) => {
|
||||
if(data.queue != null) {
|
||||
|
||||
var contentToPush = new Array()
|
||||
var queueNum = 0
|
||||
|
||||
for(var title of data.queue) {
|
||||
|
||||
queueNum += 1
|
||||
console.log(queueNum)
|
||||
console.log(data.queue.indexOf(title) + " - " + title.title)
|
||||
contentToPush.push(' <div class="song"> <img class="thumbnail" src="' + title.thumbnail + '"><div class="titleSong"> <p class="listTitle">' + title.title + '</p></div> <button id="' + data.queue.indexOf(title) + '_delete" class="buttonClose"><i class="fa fa-trash"></i></button> </div>')
|
||||
}
|
||||
|
||||
if(contentToPush.join("") == "") {
|
||||
|
||||
|
||||
listNumber.classList.add("exitNotShow")
|
||||
listcontent.innerHTML = '<p class="error">Aucun morceau dans la liste de lecture !</p>'
|
||||
|
||||
} else {
|
||||
|
||||
listNumber.innerHTML = '<span class="numtext">' + queueNum + '</span>'
|
||||
listNumber.classList.remove("exitNotShow")
|
||||
listcontent.innerHTML = contentToPush.join("")
|
||||
}
|
||||
|
||||
@@ -215,7 +411,7 @@ ipc.on("actualize", (ev, data) => {
|
||||
} else {
|
||||
|
||||
listcontent.innerHTML = '<p class="error">Aucun morceau dans la liste de lecture !</p>'
|
||||
|
||||
listNumber.classList.add("exitNotShow")
|
||||
}
|
||||
|
||||
if(data.current == null) {
|
||||
@@ -223,10 +419,53 @@ ipc.on("actualize", (ev, data) => {
|
||||
musicURL.innerHTML = '<img class="thumbnail" src="../common/Mediamodifier-Design.svg">'
|
||||
musicTitle.innerHTML = "Aucun titre joué"
|
||||
} else {
|
||||
|
||||
setTime()
|
||||
musicURL.innerHTML = '<img class="thumbnail" src="' + data.current.thumbnail + '">'
|
||||
musicTitle.innerHTML = data.current.title
|
||||
}
|
||||
|
||||
|
||||
if(data.changeMusic != changeMusic && changeMusic != null) {
|
||||
|
||||
changeMusic = data.changeMusic
|
||||
durationProgress = 0
|
||||
setTime()
|
||||
}
|
||||
|
||||
if(data.durationAll) {
|
||||
isPlaying = true
|
||||
durationBar.disabled = false
|
||||
durationBar.classList.remove("grised")
|
||||
setTime()
|
||||
|
||||
durationAll = data.durationAll
|
||||
durationProgress = data.durationNow
|
||||
durationBar.value = durationProgress
|
||||
|
||||
} else {
|
||||
isPlaying = false
|
||||
durationAll = 0
|
||||
durationProgress = 0
|
||||
durationBar.disabled = true
|
||||
durationBar.classList.add("grised")
|
||||
durationBar.value = 0
|
||||
durationText.innerHTML = "=:==/=:=="
|
||||
|
||||
}
|
||||
|
||||
|
||||
if(data.playing == 1) {
|
||||
play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-pause"></i>'
|
||||
isPlaying = true
|
||||
|
||||
} else {
|
||||
|
||||
|
||||
play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-play"></i>'
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
ipc.on("updateData", (ev, data) => {
|
||||
|
||||
Reference in New Issue
Block a user