337 lines
12 KiB
HTML
337 lines
12 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 {
|
|
min-height: 4.5em;
|
|
}
|
|
.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;
|
|
}
|
|
.q-item-button {
|
|
margin-right: 5px;
|
|
}
|
|
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 <input type="button" value="Download Queue as Playlist" onclick="download_queue_as_playlist()"/></h2>
|
|
<p id="empty-queue">empty</p>
|
|
<div id="in-queue">
|
|
</div>
|
|
<label for="playlist-upload">Upload Playlist (Adds to Queue Randomly):</label>
|
|
<input id="playlist-upload" type="file" accept=".playlist" onchange="upload_playlist()"/>
|
|
<br>
|
|
<label for="playlist-select">Or Select Playlist:</label>
|
|
<select id="playlist-select">
|
|
[[ for:playlists:playlist ]]
|
|
<option value="[[ playlist ]]">[[ playlist ]]</option>
|
|
[[ endfor ]]
|
|
</select>
|
|
<input type="button" value="Add Playlist" onclick="add_selected_playlist()"/>
|
|
<br>
|
|
<input type="button" value="Download History" onclick="download_history()"/>
|
|
</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 history = []; //like played but with more info
|
|
let queue = [];
|
|
let queue_id_counter = 0;
|
|
let show_title = false;
|
|
let get_next_lyric = true;
|
|
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() {
|
|
if (audio_ele.currentSrc !== "") {
|
|
history.push({
|
|
name: played[played.length - 1],
|
|
length: audio_ele.duration,
|
|
ended: audio_ele.currentTime,
|
|
});
|
|
}
|
|
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());
|
|
}
|
|
if (get_next_lyric) {
|
|
//00:00:03.500 --> 00:00:08.200
|
|
const ct = audio_ele.currentTime;
|
|
const fi = Array.from(captions_ele.track.cues).findIndex((cue) => ct < cue.startTime);
|
|
if (fi !== -1) {
|
|
let next_lyric = document.createElement("DIV");
|
|
next_lyric.classList.add("next-lyric");
|
|
next_lyric.innerText = "Next: ";
|
|
next_lyric.appendChild(captions_ele.track.cues[fi].getCueAsHTML());
|
|
captions_box.appendChild(next_lyric);
|
|
}
|
|
}
|
|
});
|
|
|
|
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_remove = document.createElement("BUTTON");
|
|
queue_remove.className = "q-item-button";
|
|
queue_remove.innerText = "x";
|
|
queue_remove.onclick = () => {
|
|
document.getElementById(queue_id).remove();
|
|
queue = queue.filter((item) => item[1] !== queue_id);
|
|
};
|
|
queue_item.appendChild(queue_remove);
|
|
let queue_up = document.createElement("BUTTON");
|
|
queue_up.className = "q-item-button";
|
|
queue_up.innerText = "^";
|
|
queue_up.onclick = () => {
|
|
if (queue.length === 1) return;
|
|
let i = queue.findIndex((item) => item[1] === queue_id);
|
|
if (i === 0) return;
|
|
let qir = document.getElementById(queue_id);
|
|
qir.remove();
|
|
let t = queue.find((item) => item[1] === queue_id);
|
|
queue = queue.filter((item) => item[1] !== queue_id);
|
|
queue.splice(i-1, 0, t);
|
|
in_queue_ele.insertBefore(qir, in_queue_ele.children.item(i-1));
|
|
};
|
|
queue_item.appendChild(queue_up);
|
|
let queue_name = document.createElement("B");
|
|
queue_name.innerText = name;
|
|
queue_item.appendChild(queue_name);
|
|
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();
|
|
|
|
//playlist file format is just newline separated artist-song
|
|
|
|
function download_queue_as_playlist() {
|
|
let a = document.createElement("A");
|
|
a.href = `data:text/plain;charset=utf-8,${encodeURIComponent(queue.map((q) => q[0]).join("\n"))}`;
|
|
a.download = "queue.playlist";
|
|
a.style.display = "none";
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
}
|
|
|
|
function add_playlist(playlist_songs) {
|
|
//preprocess to expand *
|
|
let playlist_process = [];
|
|
for (const song of playlist_songs) {
|
|
const song_split = song.split("/");
|
|
if (song_split[1] === "*") {
|
|
playlist_process.push(...playable_songs.filter((song) => song.startsWith(`${song_split[0]}/`)));
|
|
} else {
|
|
playlist_process.push(song);
|
|
}
|
|
}
|
|
playlist_songs = playlist_process;
|
|
//add to queue
|
|
let randomized = [];
|
|
const psl = playlist_songs.length;
|
|
for (let u = 0; u < psl; u++) {
|
|
let rand = Math.floor(Math.random() * playlist_songs.length);
|
|
randomized.push(playlist_songs[rand]);
|
|
playlist_songs.splice(rand, 1);
|
|
}
|
|
for (const n of randomized) {
|
|
add_to_queue(n);
|
|
}
|
|
}
|
|
|
|
function upload_playlist() {
|
|
let reader = new FileReader();
|
|
reader.readAsText(document.getElementById("playlist-upload").files[0]);
|
|
reader.addEventListener("load", () => {
|
|
let playlist_songs = reader.result.split("\n");
|
|
add_playlist(playlist_songs);
|
|
});
|
|
}
|
|
|
|
function download_history() {
|
|
let a = document.createElement("A");
|
|
a.href = `data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(history))}`;
|
|
a.download = `${Date.now()}.history`;
|
|
a.style.display = "none";
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
}
|
|
|
|
async function add_selected_playlist() {
|
|
let playlist_songs = (await (await fetch(`/playlists/${document.getElementById("playlist-select").value}`)).text()).split("\n").filter((p) => p.trim() !== "");
|
|
add_playlist(playlist_songs);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|