187 lines
6.8 KiB
HTML
187 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Sanic</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/png" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div id="nav">
|
|
<div id="control-admin">
|
|
<button id="connection-state">❌ Disconnected</button> <!-- ❌ Cross Mark -->
|
|
<button>Login</button>
|
|
<button>Config</button>
|
|
<button id="control-update-db" disabled="disabled">Update DB</button>
|
|
</div><!--/#control-admin-->
|
|
<div>
|
|
<div class="spaced">
|
|
<button id="control-previous">⏮︎</button> <!-- ⏮️ Last Track Button -->
|
|
<button id="control-stop">⏹︎</button> <!-- ⏹️ Stop Button -->
|
|
<button id="control-play-pause">⏵︎</button> <!-- ▶️ Play or ⏸️ Pause Button -->
|
|
<button id="control-next">⏭︎</button> <!-- ⏭️ Next Track Button -->
|
|
</div><!--/.spaced-->
|
|
<div>
|
|
<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">🔘 repeat</button>
|
|
<button id="control-shuffle">🔘 shuffle</button>
|
|
</div><!--/.spaced-->
|
|
<div class="spaced">
|
|
<label for="control-xfade">xfade</label>
|
|
<div>
|
|
<button id="control-xfade-minus">➖</button>
|
|
<input type="number" id="control-xfade" name="xfade" value="00" />
|
|
<button id="control-xfade-plus">➕</button>
|
|
</div>
|
|
</div><!--/.spaced-->
|
|
<div class="spaced">
|
|
<button id="control-volume-down">🔉</button> <!-- 🔉 Speaker with sound wave -->
|
|
<input id="control-volume" name="volume" type="range" min="0" max="100" value="50" />
|
|
<button id="control-volume-up">🔊</button> <!-- 🔊 Speaker with sound waves -->
|
|
</div><!--/.spaced-->
|
|
</div>
|
|
<div>
|
|
<p>Now playing:</p>
|
|
<div>
|
|
<label for="control-track">Track:</label>
|
|
<input type="text" id="control-track" name="track" disabled="disabled" />
|
|
</div>
|
|
<div>
|
|
<label for="control-time">Time:</label>
|
|
<input type="text" id="control-time" name="time" value="00:00:00/00:00:00" disabled="disabled" />
|
|
</div>
|
|
</div>
|
|
<div id="sanic-logo">
|
|
<div>
|
|
<img alt="sanic logo" src="/img/sanic-logo.webp" />
|
|
Sanic © 2023
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="queue">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Pos</th>
|
|
<th>Artists</th>
|
|
<th>Track</th>
|
|
<th>Album</th>
|
|
<th>Length</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
<div id="browser">
|
|
<div id="tabs">
|
|
<a id="tab-browser" class="active" href="#">File Browser</a>
|
|
<a id="tab-search" href="#">Search</a>
|
|
<a id="tab-playlists" href="#">Playlists</a>
|
|
</div>
|
|
<div id="file-browser">
|
|
<div>
|
|
file browser
|
|
</div>
|
|
<div>
|
|
actions
|
|
</div>
|
|
</div>
|
|
<div id="search" style="display: none">
|
|
<div>
|
|
<label for="control-search"></label>
|
|
<input type="text" id="control-search" name="search" />
|
|
<button>Search</button>
|
|
</div>
|
|
<div>
|
|
actions
|
|
</div>
|
|
</div>
|
|
<div id="playlist-browser" style="display: none">
|
|
<div>
|
|
playlist browser
|
|
</div>
|
|
<div>
|
|
actions
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="result">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Artist</th>
|
|
<th>Title</th>
|
|
<th>Album</th>
|
|
<th>Genre</th>
|
|
<th>Time</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
<footer>
|
|
<a href="https://git.berlin.ccc.de/cccb/sanic"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#ffffff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.034 7.034 0 0 1 2.308-1.539V33.926a7.001 7.001 0 0 1-2.308-1.535 7.049 7.049 0 0 1-1.516-7.7L29.242 14.273 1.734 41.777a5.918 5.918 0 0 0 0 8.371L41.855 90.27a5.92 5.92 0 0 0 8.368 0l39.933-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg></a> Sanic MPD Web UI 0.1.0 - by XenGi and coon © 2023
|
|
</footer>
|
|
</main>
|
|
<script src="controls.js"></script>
|
|
<script>
|
|
const table = document.querySelector("#queue > table > tbody");
|
|
for (let i = 1; i <= 100; i++) {
|
|
const tr = document.createElement("tr");
|
|
if (i === 1) {
|
|
tr.classList.add("playing");
|
|
}
|
|
const pos = document.createElement("td");
|
|
pos.innerText = i.toString();
|
|
const artist = document.createElement("td");
|
|
artist.innerText = `Artist ${i.toString()} with a super long name that should finally bring the length to a maximum`;
|
|
const track = document.createElement("td");
|
|
track.innerText = `Track ${i.toString()} with super long name that could potentially expand the table by a lot!`;
|
|
const album = document.createElement("td");
|
|
album.innerText = `Album ${i.toString()}`;
|
|
const length = document.createElement("td");
|
|
length.innerText = "01:00:00";
|
|
const actions = document.createElement("td");
|
|
actions.classList.add("actions");
|
|
// 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 ${i} up`);
|
|
});
|
|
// 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 ${i} down`);
|
|
});
|
|
// TODO: maybe use a instead of button?
|
|
const remove = document.createElement("button");
|
|
remove.classList.add("borderless");
|
|
remove.innerHTML = "❌"; // ❌ Cross mark; 🗑️ Wastebasket
|
|
remove.addEventListener("click", event => {
|
|
console.log(`DEBUG: remove song ${i} from queue`);
|
|
});
|
|
actions.appendChild(moveUp);
|
|
actions.appendChild(moveDown);
|
|
actions.appendChild(remove);
|
|
tr.appendChild(pos);
|
|
tr.appendChild(artist);
|
|
tr.appendChild(track);
|
|
tr.appendChild(album);
|
|
tr.appendChild(length);
|
|
tr.appendChild(actions);
|
|
table.appendChild(tr);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|