music control

This commit is contained in:
sky
2025-07-10 04:55:08 -04:00
parent daf54267b4
commit 9389d0c7e4
2 changed files with 41 additions and 4 deletions

View File

@ -295,6 +295,7 @@ async function generateAccountPage(name, cookie, admin) {
return modified_ban;
}
let modifiedHTML = rawEditProfileHTML;
let songData = JSON.parse(userData.music) || false;
modifiedHTML = modifiedHTML.replaceAll("{{ name }}", sanitizeHtml(userData.name, sanitizeConfig));
modifiedHTML = modifiedHTML.replaceAll("{{ username }}", userData.username);
modifiedHTML = modifiedHTML.replaceAll("{{ join_date }}", dayjs(userData.createdAt).fromNow());
@ -304,6 +305,14 @@ async function generateAccountPage(name, cookie, admin) {
modifiedHTML = modifiedHTML.replaceAll("{{ url_gen }}", `https://selenite.cc/u/${userData.username}`);
modifiedHTML = modifiedHTML.replaceAll("{{ online_time }}", dayjs(userData.last_login).fromNow());
modifiedHTML = modifiedHTML.replaceAll("{{ css_edit }}", (userData.badges ? userData.badges.length : 0) > 0 ? '<img src="/img/edit.svg" id="edit" />' : "");
if(songData) {
modifiedHTML = modifiedHTML.replaceAll("{{ song_title }}", sanitizeHtml(songData.name, allowNone));
modifiedHTML = modifiedHTML.replaceAll("{{ song_artist }}", sanitizeHtml(songData.artist, allowNone));
modifiedHTML = modifiedHTML.replaceAll("{{ song_url }}", sanitizeHtml(songData.path, allowNone));
modifiedHTML = modifiedHTML.replaceAll("{{ is_music }}", "true");
} else {
modifiedHTML = modifiedHTML.replaceAll("{{ is_music }}", "false");
}
let badges_html = "";
if (userData.badges !== null) {

View File

@ -49,9 +49,10 @@
let audioObject;
document.addEventListener("DOMContentLoaded", ()=>{
let music = {{ is_music }};
let audioObject;
if(music) {
let url = "{{ song_url }}";
let audioObject = new Audio(url);
audioObject = new Audio(url);
document.getElementById("enter").addEventListener("click", async ()=>{
document.getElementById("enter").style.backgroundColor = "#00000000"
document.getElementById("enter").style.backdropFilter = "blur(0px)"
@ -65,6 +66,33 @@
} else {
document.getElementById("enter").style.display = "none";
}
document.getElementById("playPause").addEventListener("click", ()=>{
if(audioObject.paused) {
document.getElementById("playPause").src = "/img/pause.svg";
audioObject.play();
} else {
document.getElementById("playPause").src = "/img/play.svg";
audioObject.pause();
}
});
document.getElementById("mute").addEventListener("click", ()=>{
if(audioObject.volume == 0) {
document.getElementById("mute").src = "/img/volume.svg";
audioObject.volume = 1;
} else {
document.getElementById("mute").src = "/img/muted.svg";
audioObject.volume = 0;
}
});
document.getElementById("playbar").addEventListener("input", (e) => {
audioObject.currentTime = document.getElementById("playbar").value/1000*audioObject.duration;
document.getElementById("playbar").value = (audioObject.currentTime / audioObject.duration) * 1000;
});
audioObject.addEventListener("timeupdate", (e) => {
document.getElementById("totalLength").innerText = `${Math.floor(audioObject.duration/60)}:${String(Math.floor(audioObject.duration%60)).padStart(2, "0")}`
document.getElementById("curPos").innerText = `${Math.floor(audioObject.currentTime/60)}:${String(Math.floor(audioObject.currentTime%60)).padStart(2, "0")}`
document.getElementById("playbar").value = (audioObject.currentTime / audioObject.duration) * 1000;
})
})
</script>
</head>
@ -74,12 +102,12 @@
<h1 class="title">{{ name }}'s profile</h1>
<section>
<img src="{{ user_pfp }}" class="pfp" />
<div>
<div class="profile-element">
<h1>{{ name }}</h1>
<p>/u/{{ username }}</p>
<div class="badges">{{ badges }}</div>
</div>
<div>
<div class="profile-element">
<h2>{{ song_title }}</h2>
<h3>{{ song_artist }}</h3>
<div class="samerow">
@ -92,7 +120,7 @@
<img id="mute" src="/img/volume.svg" class="controls"/>
</div>
</div>
<div>
<div class="profile-element">
<h2>Joined {{ join_date }}</h2>
<h2>Last online {{ online_time }}</h2>
</div>