cccb/sanic
cccb/sanic
11
1
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Activity

update js code

Browse source
This commit is contained in:
XenGi 2024-01-21 14:55:31 +01:00
parent 3bdf933493
commit d97a33b800
Signed by: xengi
SSH key fingerprint: SHA256:FGp51kRvGOcWnTHiOI39ImwVO4A3fpvR30nPX3LpV7g
4 changed files with 114 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

48
static/controls.js vendored
View file

@ -69,6 +69,7 @@ control_update_db.addEventListener("click", e => {
if (r.status === 200) {
const job_id = await r.text();
console.log(`Update started (Job ID: ${job_id})`)
e.target.disabled = true;
} else {
console.error(`API returned ${r.status}: ${r.statusText}`)
}
@ -94,18 +95,22 @@ control_progress.addEventListener("change", e => {
fetch(`${API_URL}/seek/${e.target.value}`)
});
control_repeat.addEventListener("click", e => {
if (e.target.innerHTML === "🔴 repeat") { // TODO: check is never true
if (e.target.dataset.state === "on") { // TODO: check is never true
e.target.innerHTML = "🔘 repeat";
e.target.dataset.state = "off";
} else {
e.target.innerHTML = "🔴 repeat";
e.target.dataset.state = "on";
}
fetch(`${API_URL}/repeat`);
});
control_shuffle.addEventListener("click", e => {
if (e.target.innerHTML === "🔴 shuffle") { // TODO: check is never true
if (e.target.dataset.state === "on") { // TODO: check is never true
e.target.innerHTML = "🔘 shuffle";
e.target.dataset.state = "off";
} else {
e.target.innerHTML = "🔴 shuffle";
e.target.dataset.state = "on";
}
fetch(`${API_URL}/random`);
});
@ -194,8 +199,10 @@ socket.addEventListener("message", (e) => {
if ("repeat" in msg.mpd_status) {
if (msg.mpd_status.repeat === "1") {
control_repeat.innerHTML = "🔴 repeat"; // 🔴 Red Circle
control_repeat.dataset.state = "on";
} else {
control_repeat.innerHTML = "🔘 repeat"; // 🔘 Radio Button
control_repeat.dataset.state = "off";
}
}
@ -203,8 +210,10 @@ socket.addEventListener("message", (e) => {
if ("random" in msg.mpd_status) {
if (msg.mpd_status.random === "1") {
control_shuffle.innerHTML = "🔴 shuffle"; // 🔴 Red Circle
control_shuffle.dataset.state = "on";
} else {
control_shuffle.innerHTML = "🔘 shuffle"; // 🔘 Radio Button
control_shuffle.dataset.state = "off";
}
}
@ -254,14 +263,39 @@ socket.addEventListener("message", (e) => {
const duration_seconds = Math.floor(elem.duration - duration_hours * 3600 - duration_minutes * 60);
length.innerText = `${duration_hours}:${duration_minutes.toString().padStart(2, '0')}:${duration_seconds.toString().padStart(2, '0')}`;
const actions = document.createElement("td");
const del = document.createElement("button");
del.innerHTML = "🗑️";
del.addEventListener("click", e => {
// TODO: maybe use a instead of button?
const moveUp = document.createElement("button");
moveUp.classList.add("borderless");
moveUp.innerHTML = "🔺"; // 🔺 Red Triangle Pointed Down
moveUp.addEventListener("click", event => {
console.log(`DEBUG: move song ${elem.Pos} up`);
// fetch(`${API_URL}/queue_del/${elem.Pos}`).then(r => {
// console.log(r.text());
// });
});
// TODO: maybe use a instead of button?
const moveDown = document.createElement("button");
moveDown.classList.add("borderless");
moveDown.innerHTML = "🔻"; // 🔻 Red Triangle Pointed Up
moveDown.addEventListener("click", event => {
console.log(`DEBUG: move song ${elem.Pos} down`);
// fetch(`${API_URL}/queue_del/${elem.Pos}`).then(r => {
// console.log(r.text());
// });
});
// TODO: maybe use a instead of button?
const remove = document.createElement("button");
remove.classList.add("borderless");
remove.innerHTML = "❌"; // ❌ Cross mark
remove.addEventListener("click", event => {
console.log(`DEBUG: remove song ${elem.Pos} from queue`);
fetch(`${API_URL}/queue_del/${elem.Pos}`).then(r => {
console.log(r.text());
})
});
});
actions.appendChild(del);
actions.appendChild(moveUp);
actions.appendChild(moveDown);
actions.appendChild(remove);
tr.appendChild(pos);
tr.appendChild(artist);
tr.appendChild(track);

7
static/img/expand-collapse.svg
View file

@ -1,7 +0,0 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20">
<g fill="#fff">
<path d="m5 9h4v-4h2v4h4v2h-4v4h-2v-4h-4z"/>
<path d="m25 9h10v2h-10z"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 199 B

14
static/index.html
View file

@ -11,9 +11,8 @@
<div id="nav">
<div id="control-admin">
<button id="connection-state">&#x274C; Disconnected</button> <!-- ❌ Cross Mark -->
<button>Login</button>
<button>Config</button>
<button id="control-update-db" disabled="disabled">Update DB</button>
<button id="control-update-db" disabled="disabled"><span class="loader"></span> Update DB</button>
</div><!--/#control-admin-->
<div>
<div class="spaced">
@ -22,15 +21,15 @@
<button id="control-play-pause">&#x23F5;&#xFE0E;</button> <!-- ▶️ Play or ⏸️ Pause Button -->
<button id="control-next">&#x23ED;&#xFE0E;</button> <!-- ⏭️ Next Track Button -->
</div><!--/.spaced-->
<div>
<div class="spaced">
<label for="control-progress"></label>
<input type="range" id="control-progress" name="progress" min="0" step="1" />
</div>
</div>
<div>
<div class="spaced">
<button id="control-repeat">&#x1F518; repeat</button> <!-- 🔘 Radio Button -->
<button id="control-shuffle">&#x1F518; shuffle</button> <!-- 🔘 Radio Button -->
<button id="control-repeat" data-state="off">&#x1F518; repeat</button> <!-- 🔘 Radio Button -->
<button id="control-shuffle" data-state="off">&#x1F518; shuffle</button> <!-- 🔘 Radio Button -->
</div><!--/.spaced-->
<div class="spaced">
<label for="control-xfade">xfade</label>
@ -46,10 +45,9 @@
<button id="control-volume-up">&#x1F50A;</button> <!-- 🔊 Speaker with sound waves -->
</div><!--/.spaced-->
</div>
<div>
<p>Now playing:</p>
<div class="wide">
<div>
<label for="control-track">Track:</label>
<label for="control-track">Now playing:</label>
<input type="text" id="control-track" name="track" disabled="disabled" />
</div>
<div>

77
static/style.css
View file

@ -1,5 +1,9 @@
:root {
--ribbon-width: 160px;
--ribbon-height: 80px;
--background-color: #041936;
--text-color: #bbb;
}
/* #################### */
@ -16,7 +20,7 @@ main {
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 1fr 1fr;
grid-template-rows: var(--ribbon-height) 1fr 1fr;
gap: 0 0;
grid-template-areas: "nav nav" "queue queue" "browser result" "footer footer";
}
@ -31,6 +35,10 @@ main {
display: flex;
}
#nav > div {
width: var(--ribbon-width);
}
#result {
grid-area: result;
overflow: auto;
@ -43,7 +51,7 @@ main {
main footer {
grid-area: footer;
overflow: auto;
background-color: #041936;
background-color: var(--background-color);
text-align: right;
}
@ -84,6 +92,23 @@ table {
/* ### pretty stuff ### */
/* #################### */
#control-progress {
width: var(--ribbon-width);
}
#control-volume {
width: 80px;
}
#nav > div.wide {
width: 280px;
}
#nav > div.wide div {
display: flex;
justify-content: space-between;
}
/* Disable arrows in input */
/* Chrome, Safari, Edge, Opera */
@ -155,7 +180,7 @@ table {
html, body {
background-color: #09101d;
color: #bbb;
color: var(--text-color);
scrollbar-color: #490b00 #09101d; /* only in firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color */
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
@ -163,19 +188,51 @@ html, body {
}
a {
color: #bbb;
color: var(--text-color);
text-decoration: none;
}
button {
background-color: #28374a;
color: #bbb;
color: var(--text-color);
border-top-color: #545454;
border-right-color: #3a3a3a;
border-bottom-color: #3a3a3a;
border-left-color: #545454;
}
button[disabled] {
color: var(--background-color);
}
button[disabled] .loader {
display: inline-block;
}
button .loader {
display: none;
}
.loader {
width: 10pt;
height: 10pt;
border: 3px solid var(--text-color);
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* borderless button used in queue */
.borderless {
border: none;
@ -185,7 +242,7 @@ button {
input[type=text] {
background-color: #28374a;
color: white;
color: var(--text-color);
border: 1px solid black;
border-right-color: #545454;
border-bottom-color: #545454;
@ -279,7 +336,7 @@ table tr:hover td {
display: inline-block;
text-align: center;
background-color: #28374a;
color: #bbb;
color: var(--text-color);
border: 1px solid #545454;
border-top-left-radius: 5pt;
border-top-right-radius: 5pt;
@ -287,7 +344,7 @@ table tr:hover td {
#tabs a.active {
background-color: #1a1a1a;
color: #bbb;
color: var(--text-color);
border-bottom: none;
/*border-top-color: #1a1a1a;*/
/*border-right-color: #545454;*/
@ -304,7 +361,7 @@ table tr:hover td {
font-size: 12pt;
width: 100%;
background-color: #28374a;
color: white;
color: var(--text-color);
border: 1px solid black;
border-right-color: #545454;
border-bottom-color: #545454;
@ -312,7 +369,7 @@ table tr:hover td {
}
footer svg {
color: white;
color: var(--text-color);
width: 12pt;
height: 12pt;
}