226 lines
8.0 KiB
HTML
226 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>possibly a music player</title>
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#top {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
}
|
|
#main {
|
|
margin: 10px;
|
|
}
|
|
#player {
|
|
margin: 15px;
|
|
}
|
|
#filters-container {
|
|
padding-left: 15px;
|
|
}
|
|
#captions-box {
|
|
height: 1em;
|
|
}
|
|
.artist-song-filter {
|
|
padding-left: 15px;
|
|
}
|
|
.add-to-queue-btns {
|
|
display: none;
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
border: none;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
padding-left: 2px;
|
|
}
|
|
label:hover > .add-to-queue-btns {
|
|
display: inline-block;
|
|
}
|
|
.add-to-queue-btns:hover {
|
|
text-decoration: underline;
|
|
}
|
|
@media only screen and (max-width: 800px) {
|
|
#top {
|
|
grid-template-columns: auto;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="main">
|
|
<a href="/">Front page</a>
|
|
<div id="top">
|
|
<div id="player">
|
|
<h2 style="display: inline-block;">shuffling</h2>
|
|
<b>Current Song <span id="current-song"></span></b>
|
|
<br>
|
|
<audio id="audio" type="audio/mpeg" controls>
|
|
<track id="audio-captions" default kind="captions" src=""/>
|
|
</audio>
|
|
<div id="captions-box">
|
|
</div>
|
|
<br>
|
|
<input type="button" value="Skip Song" onclick="next_song()"/>
|
|
</div>
|
|
<div id="queue">
|
|
<h2>queue</h2>
|
|
<p id="empty-queue">empty</p>
|
|
<div id="in-queue">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--I would use <details> here, but maybe too abusive-->
|
|
<div>
|
|
<input type="checkbox" id="show-title"/>
|
|
<label for="show-title">Show Current Track in Page Title</label>
|
|
<br>
|
|
<input type="checkbox" id="show-filters"/>
|
|
<label for="show-filters">Show Filters</label>
|
|
<div id="filters-container" style="display: none;">
|
|
<input type="button" value="Select All" onclick="filter_select_all()"/>
|
|
<input type="button" value="Deselect All" onclick="filter_deselect_all()"/>
|
|
[[ for:artists:artist ]]
|
|
<div class="artist-filter">
|
|
<input type="checkbox" id="[[ artist.sanitized_name ]]-checkbox" onchange="artist_filter_toggle('[[ artist.sanitized_name ]]')"/>
|
|
<label for="[[ artist.sanitized_name ]]-checkbox">[[ if:artist.favourite ]]★[[ endif ]][[ artist.name ]]</label>
|
|
<div id="[[ artist.sanitized_name ]]-song-filter" class="artist-song-filter">
|
|
[[ for:artist.songs:song ]]
|
|
<input type="checkbox" id="[[ artist.sanitized_name ]]-[[ song.sanitized_name ]]-checkbox" onchange="update_playable_songs()"/>
|
|
<label for="[[ artist.sanitized_name ]]-[[ song.sanitized_name ]]-checkbox">[[ if:song.favourite ]]★[[ endif ]][[ song.name ]][[ if:song.subbed ]] (subbed)[[ endif ]] <button class="add-to-queue-btns" onclick="add_to_queue('[[ artist.sanitized_name ]]/[[ song.sanitized_name ]]')">Add to Queue</button></label>
|
|
[[ endfor ]]
|
|
</div>
|
|
</div>
|
|
[[ endfor ]]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="songs" style="display: none;">
|
|
[[ for:songs:song ]]
|
|
<span>[[ song ]]</span>
|
|
[[ endfor ]]
|
|
</div>
|
|
<script>
|
|
//help where are all the type annotations
|
|
const songs = Array.from(document.getElementById("songs").children).map((c) => c.innerText);
|
|
let playable_songs = songs;
|
|
let played = [];
|
|
let queue = [];
|
|
let queue_id_counter = 0;
|
|
let show_title = false;
|
|
let in_queue_ele = document.getElementById("in-queue");
|
|
let empty_ele = document.getElementById("empty-queue");
|
|
let audio_ele = document.getElementById("audio");
|
|
let captions_ele = document.getElementById("audio-captions");
|
|
let captions_box = document.getElementById("captions-box");
|
|
|
|
//"ended" event
|
|
function next_song() {
|
|
captions_box.innerHTML = "";
|
|
const not_played = playable_songs.filter((song) => !played.includes(song));
|
|
if (not_played.length === 0) return;
|
|
let next = not_played[Math.floor(Math.random() * not_played.length)];
|
|
if (queue.length > 0) {
|
|
next = queue.shift()[0];
|
|
in_queue_ele.children[0].remove();
|
|
if (queue.length === 0) empty_ele.style.display = "block";
|
|
}
|
|
document.getElementById("current-song").innerText = next;
|
|
played.push(next);
|
|
audio_ele.src = `/music_assets/${next}.mp3`;
|
|
audio_ele.play();
|
|
if (show_title) {
|
|
document.title = `Now playing: ${next}`;
|
|
} else {
|
|
document.title = "possibly a music player";
|
|
}
|
|
captions_ele.src = `/music_subtitle_assets/${next}.vtt`;
|
|
}
|
|
audio_ele.addEventListener("ended", next_song);
|
|
|
|
captions_ele.addEventListener("cuechange", () => {
|
|
//do we need to sanitize this? surely not, right?
|
|
captions_box.innerHTML = "";
|
|
let active_cue = captions_ele.track.activeCues[0];
|
|
if (active_cue) {
|
|
captions_box.appendChild(active_cue.getCueAsHTML());
|
|
}
|
|
});
|
|
|
|
function add_to_queue(name) {
|
|
let queue_id = `queue-item-${queue_id_counter}`;
|
|
queue.push([name, queue_id]);
|
|
empty_ele.style.display = "none";
|
|
//<template> is not supported in IE. Yes, I know this is for TOR browser, but still feels wrong. also its not that useful here
|
|
let queue_item = document.createElement("DIV");
|
|
queue_item.id = queue_id;
|
|
let queue_name = document.createElement("B");
|
|
queue_name.innerText = name;
|
|
queue_item.appendChild(queue_name);
|
|
let queue_remove = document.createElement("BUTTON");
|
|
queue_remove.innerText = "Remove From Queue";
|
|
queue_remove.onclick = () => {
|
|
document.getElementById(queue_id).remove();
|
|
queue = queue.filter((item) => item[1] !== queue_id);
|
|
};
|
|
queue_item.appendChild(queue_remove);
|
|
in_queue_ele.appendChild(queue_item);
|
|
queue_id_counter++;
|
|
}
|
|
|
|
//show filters toggle
|
|
const show_filters_ele = document.getElementById("show-filters");
|
|
function filter_check() {
|
|
if (show_filters_ele.checked) {
|
|
document.getElementById("filters-container").style.display = "block";
|
|
} else {
|
|
document.getElementById("filters-container").style.display = "none";
|
|
}
|
|
}
|
|
show_filters_ele.onchange = filter_check;
|
|
filter_check();
|
|
|
|
//show track in page title toggle
|
|
const show_title_ele = document.getElementById("show-title");
|
|
function title_check() {
|
|
show_title = show_title_ele.checked;
|
|
}
|
|
show_title_ele.onchange = title_check;
|
|
title_check();
|
|
next_song();
|
|
|
|
//artist and artist song filter toggle
|
|
function artist_filter_toggle(artist) {
|
|
document.querySelectorAll(`#${artist}-song-filter > input[type=\"checkbox\"]`).forEach((c) => {
|
|
c.checked = document.getElementById(`${artist}-checkbox`).checked;
|
|
c.onchange();
|
|
});
|
|
}
|
|
|
|
function update_playable_songs() {
|
|
playable_songs = songs.filter((song) => document.getElementById(`${song.replace("/", "-").replaceAll("\"", "\\\"")}-checkbox`).checked);
|
|
}
|
|
|
|
function filter_deselect_all() {
|
|
document.querySelectorAll(".artist-filter > input[type=\"checkbox\"]").forEach((c) => {
|
|
c.checked = false;
|
|
c.onchange();
|
|
});
|
|
}
|
|
|
|
function filter_select_all() {
|
|
document.querySelectorAll(".artist-filter > input[type=\"checkbox\"]").forEach((c) => {
|
|
c.checked = true;
|
|
c.onchange();
|
|
});
|
|
}
|
|
|
|
filter_select_all();
|
|
</script>
|
|
</body>
|
|
</html>
|