Replaced buttons with hyprlinks to make my lsp happy
Replaced scroll icon with a better handle that's easier to use on mobile Fixed deletion logic
This commit is contained in:
parent
2ac96108d8
commit
4d336e0913
1 changed files with 24 additions and 26 deletions
|
|
@ -72,43 +72,42 @@
|
|||
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="flex-grow flex flex-col md:flex-row-reverse gap-4 m-2">
|
||||
<div class="flex-3 bg-base-200 rounded-md shadow-md">
|
||||
<ul class="list bg-base-100 rounded-box shadow-md m-1 overflow-y-scroll" id="songlist-merged">
|
||||
<div class="flex-grow flex flex-col md:flex-row-reverse gap-4 m-2 min-h-0 overflow-hidden">
|
||||
<div class="flex-3 bg-base-200 rounded-md shadow-md min-h-0 overflow-hidden flex flex-col">
|
||||
<ul class="list bg-base-100 rounded-box shadow-md m-1 flex-1 overflow-y-auto" id="songlist-merged">
|
||||
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Merged Queue</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex-5 md:flex-4 lg:flex-5 bg-base-200 rounded-md shadow-md">
|
||||
<ul class="list bg-base-100 rounded-box shadow-md m-1 overflow-y-scroll" id="songlist-personal">
|
||||
<div class="flex-5 md:flex-4 lg:flex-5 bg-base-200 rounded-md shadow-md min-h-0 overflow-hidden flex flex-col">
|
||||
<ul class="list bg-base-100 rounded-box shadow-md m-1 flex-1 overflow-y-auto" id="songlist-personal">
|
||||
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Personal Queue</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Mobile dock -->
|
||||
<div class="dock md:hidden justify-self-end z-0 static">
|
||||
<button class="dock-active">
|
||||
<a class="dock-active">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256" class="size-[1.2em]">
|
||||
<path fill="currentColor"
|
||||
d="M32 64a8 8 0 0 1 8-8h176a8 8 0 0 1 0 16H40a8 8 0 0 1-8-8m104 56H40a8 8 0 0 0 0 16h96a8 8 0 0 0 0-16m0 64H40a8 8 0 0 0 0 16h96a8 8 0 0 0 0-16m112-24a8 8 0 0 1-3.76 6.78l-64 40A8 8 0 0 1 168 200v-80a8 8 0 0 1 12.24-6.78l64 40A8 8 0 0 1 248 160m-23.09 0L184 134.43v51.14Z" />
|
||||
</svg>
|
||||
<span class="dock-label">Queues</span>
|
||||
</button>
|
||||
<button id="search-dock-button">
|
||||
</a>
|
||||
<a id="search-dock-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="size-[1.2em]">
|
||||
<path fill="currentColor"
|
||||
d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14" />
|
||||
</svg>
|
||||
<span class="dock-label">Search</span>
|
||||
</button>
|
||||
<button id="dock-logout">
|
||||
</a>
|
||||
<a id="dock-logout">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="size-[1.2em]">
|
||||
<path fill="currentColor"
|
||||
d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h6q.425 0 .713.288T12 4t-.288.713T11 5H5v14h6q.425 0 .713.288T12 20t-.288.713T11 21zm12.175-8H10q-.425 0-.712-.288T9 12t.288-.712T10 11h7.175L15.3 9.125q-.275-.275-.275-.675t.275-.7t.7-.313t.725.288L20.3 11.3q.3.3.3.7t-.3.7l-3.575 3.575q-.3.3-.712.288t-.713-.313q-.275-.3-.262-.712t.287-.688z" />
|
||||
</svg>
|
||||
<span class="dock-label">Logout</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<dialog id="pmodal" class="modal modal-bottom sm:modal-middle">
|
||||
|
|
@ -124,19 +123,24 @@
|
|||
<!-- template song personal -->
|
||||
<template id="template-song-personal">
|
||||
<li class="list-row song " draggable="true">
|
||||
<div class="drag-handle cursor-move select-none touch-none text-2xl opacity-50 mr-2">⋮⋮</div>
|
||||
<a class="btn btn-square btn-ghost drag-handle cursor-move select-none touch-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="size-[2em]">
|
||||
<path fill="currentColor"
|
||||
d="M5 15q-.425 0-.712-.288T4 14t.288-.712T5 13h14q.425 0 .713.288T20 14t-.288.713T19 15zm0-4q-.425 0-.712-.288T4 10t.288-.712T5 9h14q.425 0 .713.288T20 10t-.288.713T19 11z" />
|
||||
</svg>
|
||||
</a>
|
||||
<div><img class="size-10 rounded-box"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="thumbnail"></div>
|
||||
<div class="list-col-grow">
|
||||
<div class="song-songname">Songname</div>
|
||||
<div class="text-xs uppercase font-semibold opacity-60 song-artistname">Artistname</div>
|
||||
</div>
|
||||
<button class="btn btn-square btn-soft btn-error">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="size-[1.2em]">
|
||||
<a class="btn btn-square btn-soft btn-error">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="size-[1.6em]">
|
||||
<path fill="currentColor"
|
||||
d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
|
|
@ -166,7 +170,7 @@
|
|||
<div class="song-songname">Songname</div>
|
||||
<div class="text-xs uppercase font-semibold opacity-60 song-artistname">Artist name</div>
|
||||
</div>
|
||||
<button class="btn btn-square btn-soft btn-success">
|
||||
<button class="btn btn-square btn-soft btn-success text-2xl">
|
||||
+
|
||||
</button>
|
||||
</li>
|
||||
|
|
@ -277,9 +281,7 @@
|
|||
},
|
||||
set personal(newV) {
|
||||
this._personal = newV;
|
||||
(DOMMainSongPersonal.querySelectorAll(".song") ?? []).forEach(v => {
|
||||
DOMMainSongPersonal.removeChild(v);
|
||||
})
|
||||
(DOMMainSongPersonal.querySelectorAll(".song") ?? []).forEach(v => v.remove())
|
||||
|
||||
if (newV.length === 0) {
|
||||
const el = document.importNode(DOMTemplateSongPersonal.content, true);
|
||||
|
|
@ -302,7 +304,7 @@
|
|||
el.querySelector(".song-songname").innerText = song.name;
|
||||
el.querySelector(".song-artistname").innerText = song.artists.join(", ");
|
||||
el.querySelector("img").src = song.album?.coverUrl ?? "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
|
||||
el.querySelector("button").addEventListener("click", () => removeSongFromQueue(index))
|
||||
el.querySelector("a.btn-error").addEventListener("click", () => removeSongFromQueue(index))
|
||||
|
||||
DOMMainSongPersonal.append(el);
|
||||
|
||||
|
|
@ -314,9 +316,7 @@
|
|||
},
|
||||
set merged(newV) {
|
||||
this._merged = newV;
|
||||
(DOMMainSongMerged.querySelectorAll(".song") ?? []).forEach(v => {
|
||||
DOMMainSongMerged.removeChild(v);
|
||||
})
|
||||
(DOMMainSongMerged.querySelectorAll(".song") ?? []).forEach(v => v.remove())
|
||||
|
||||
if (newV.length === 0) {
|
||||
const el = document.importNode(DOMTemplateSongMerged.content, true);
|
||||
|
|
@ -390,7 +390,6 @@
|
|||
const msg = JSON.parse(e.data);
|
||||
if (msg.c === 'ping') {ws.send(JSON.stringify({c: 'pong'})); return;}
|
||||
else if (msg.c === 'getqueue') {
|
||||
console.log(msg.d)
|
||||
queues.personal = msg.d.personal || [];
|
||||
queues.merged = msg.d.merged || [];
|
||||
}
|
||||
|
|
@ -462,7 +461,6 @@
|
|||
location.reload();
|
||||
}
|
||||
function removeSongFromQueue(index) {
|
||||
console.log(index)
|
||||
queues.personal.splice(index, 1)
|
||||
queues.personal = [...queues.personal];
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue