From 9389d0c7e418fed3d0a70251e0f1c3c0fd744edb Mon Sep 17 00:00:00 2001
From: sky <sky@skys.day>
Date: Thu, 10 Jul 2025 04:55:08 -0400
Subject: [PATCH] music control

---
 accounts/profile.js |  9 +++++++++
 html/profile.html   | 36 ++++++++++++++++++++++++++++++++----
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/accounts/profile.js b/accounts/profile.js
index 72ce3d1..257bb8e 100755
--- a/accounts/profile.js
+++ b/accounts/profile.js
@@ -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) {
diff --git a/html/profile.html b/html/profile.html
index 28919e8..a2f6e4b 100755
--- a/html/profile.html
+++ b/html/profile.html
@@ -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>