284 lines
10 KiB
HTML
284 lines
10 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="stylesheet" href="treeview.css">
|
||
<link rel="icon" href="favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/png" />
|
||
</head>
|
||
<body>
|
||
|
||
<dialog id="save-playlist">
|
||
<h1>Save Playlist</h1>
|
||
<button class="close">×</button>
|
||
<form method="dialog">
|
||
<label for="control-playlist-name">Name</label>
|
||
<input type="text" id="control-playlist-name" name="playlist-name" autofocus />
|
||
<button>Save</button>
|
||
</form>
|
||
</dialog>
|
||
|
||
<main>
|
||
<div id="nav">
|
||
<div id="control-admin">
|
||
<button id="connection-state">❌ Disconnected</button> <!-- ❌ Cross Mark -->
|
||
<button>Config</button>
|
||
<button id="control-update-db" disabled="disabled"><span class="loader"></span> 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 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" data-state="off">🔘 repeat</button> <!-- 🔘 Radio Button -->
|
||
<button id="control-shuffle" data-state="off">🔘 shuffle</button> <!-- 🔘 Radio Button -->
|
||
</div><!--/.spaced-->
|
||
<div class="spaced">
|
||
<label for="control-xfade">xfade</label>
|
||
<div>
|
||
<button id="control-xfade-minus">➖</button> <!-- ➖ Minus -->
|
||
<input type="number" id="control-xfade" name="xfade" value="00" />
|
||
<button id="control-xfade-plus">➕</button> <!-- ➕ Plus -->
|
||
</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 class="wide">
|
||
<div>
|
||
<label for="control-track">Now playing:</label>
|
||
<!--<input type="text" id="control-track" name="track" disabled="disabled" />-->
|
||
<div class="marquee" id="control-track">
|
||
<span>Fall On Your Sword - Shatner Of The Mount by Fall On Your Sword</span>
|
||
</div>
|
||
</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><!-- TODO: try to remove this div -->
|
||
<img alt="sanic logo" src="img/sanic-logo.webp" />
|
||
Sanic © 2023
|
||
</div>
|
||
</div><!--/#sanic-logo-->
|
||
</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><!--/#queue-->
|
||
<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><!--/#tabs-->
|
||
<div id="file-browser">
|
||
<div>
|
||
<ul id="tree">
|
||
<li>
|
||
<input type="checkbox"/>
|
||
<span>00_music</span>
|
||
<ul>
|
||
<li>
|
||
<input checked type="checkbox"/>
|
||
<span>autosort</span>
|
||
</li>
|
||
<li>
|
||
<input checked type="checkbox"/>
|
||
<span>reimport</span>
|
||
</li>
|
||
<li>
|
||
<input checked type="checkbox"/>
|
||
<span>unsortable</span>
|
||
</li>
|
||
<li>
|
||
<input checked type="checkbox"/>
|
||
<span>youtube</span>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<input checked type="checkbox"/>
|
||
<span>01_incoming</span>
|
||
<ul>
|
||
<li>
|
||
<input checked type="checkbox"/>
|
||
<span>coon</span>
|
||
<ul>
|
||
<li>
|
||
<input type="checkbox"/>
|
||
<span>Rick Astley - Never Gonna Give You Up</span>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox"/>
|
||
<span>Nyan Cat</span>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox"/>
|
||
<span>cascha</span>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox"/>
|
||
<span>XenGi</span>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox"/>
|
||
<span>02_megablast</span>
|
||
<ul>
|
||
<li>
|
||
<input checked type="checkbox"/>
|
||
<span>dnb</span>
|
||
</li>
|
||
<li>
|
||
<input checked type="checkbox"/>
|
||
<span>mix</span>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox"/>
|
||
<span>03_mfs</span>
|
||
<ul>
|
||
<li>
|
||
<input checked type="checkbox"/>
|
||
<span>ambient</span>
|
||
</li>
|
||
<li>
|
||
<input checked type="checkbox"/>
|
||
<span>electronic</span>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
actions
|
||
</div>
|
||
</div><!--/#file-browser-->
|
||
<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><!--/#search-->
|
||
<div id="playlist-browser" style="display: none">
|
||
<label for="control-playlist-list"></label>
|
||
<select id="control-playlist-list" size="15">
|
||
<option value="1">basedrive</option><!-- TODO: Remove this line -->
|
||
</select><!--/#control-playlist-list-->
|
||
<div>
|
||
<button id="control-replace-playlist">🔄 Replace</button><!-- 🔄 Counterclockwise Arrows Button -->
|
||
<button id="control-attach-playlist">⬆ Attach</button><!-- ⬆️ Up Arrow -->
|
||
<button id="control-save-playlist">💾 Save</button><!-- 💾 Floppy Disk -->
|
||
<button id="control-delete-playlist">🗑️ Delete</button><!-- 🗑️ Wastebasket -->
|
||
</div>
|
||
</div><!--/#playlist-browser-->
|
||
</div><!--/#browser-->
|
||
<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><!--/#result-->
|
||
<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
|
||
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>
|