123 lines
4.7 KiB
HTML
123 lines
4.7 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%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#main {
|
|
margin: 10px;
|
|
}
|
|
.player {
|
|
margin: 15px;
|
|
}
|
|
#filters-container {
|
|
padding-left: 15px;
|
|
}
|
|
.artist-song-filter {
|
|
padding-left: 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="main">
|
|
<a href="/">Front page</a>
|
|
<div class="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>
|
|
</audio>
|
|
</div>
|
|
<!--I would use <details> here, but maybe too abusive-->
|
|
<div>
|
|
<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 ]]</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 = [];
|
|
//set random song
|
|
let audio_ele = document.getElementById("audio");
|
|
const random_song_start = playable_songs[Math.floor(Math.random() * playable_songs.length)];
|
|
document.getElementById("current-song").innerText = random_song_start;
|
|
played.push(played);
|
|
audio_ele.src = `/music_assets/${random_song_start}.mp3`;
|
|
//"ended" event
|
|
audio_ele.addEventListener("ended", () => {
|
|
const not_played = playable_songs.filter((song) => !played.includes(song));
|
|
if (not_played.length === 0) return;
|
|
let random_song_next = not_played[Math.floor(Math.random() * not_played.length)];
|
|
document.getElementById("current-song").innerText = random_song_next;
|
|
played.push(random_song_next);
|
|
audio_ele.src = `/music_assets/${random_song_next}.mp3`;
|
|
audio_ele.play();
|
|
});
|
|
//show filters toggle
|
|
const show_filters = document.getElementById("show-filters");
|
|
function filter_check() {
|
|
if (show_filters.checked) {
|
|
document.getElementById("filters-container").style.display = "block";
|
|
} else {
|
|
document.getElementById("filters-container").style.display = "none";
|
|
}
|
|
}
|
|
show_filters.onchange = filter_check;
|
|
filter_check();
|
|
//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_select_all() {
|
|
document.querySelectorAll(".artist-filter > input[type=\"checkbox\"]").forEach((c) => {
|
|
c.checked = true;
|
|
c.onchange();
|
|
});
|
|
}
|
|
function filter_deselect_all() {
|
|
document.querySelectorAll(".artist-filter > input[type=\"checkbox\"]").forEach((c) => {
|
|
c.checked = false;
|
|
c.onchange();
|
|
});
|
|
}
|
|
filter_select_all();
|
|
</script>
|
|
</body>
|
|
</html>
|