music control
This commit is contained in:
@ -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) {
|
||||
|
@ -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>
|
||||
|
Reference in New Issue
Block a user