feature: improve audio vis a little more

fix: remove some debugging console stuff

public/base.css

@@ -259,6 +259,7 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
 	width: 100%;
 	display: flex;
 	justify-content: space-between;
+	align-content: center;
 	text-align: center;
 	padding: 0 0.5rem;
 }
@@ -286,9 +287,14 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
 .audio-container .audio-controls-container .buttons-container {
 	display: flex;
 	justify-content: space-between;
+	align-content: center;
 	padding: 0 0.5rem;
 }
 
+.audio-container .audio-controls-container .blank {
+	align-content: center;
+}
+
 .audio-container .audio-controls-container .volume {
 	position: relative;
 	width: 100%;
@@ -297,11 +303,11 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
 }
 @media screen and (max-width: 480px) {
 	.audio-container .audio-controls-container .blank {
-		max-width: 0;
+		width: auto;
 	}
 
 	.audio-container .audio-controls-container .volume {
-		max-width: 60px;
+		max-width: 50px;
 	}
 }
 
@@ -504,6 +510,47 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
 	top: 2px;
 }
 
+/* ICON - DOWNLOAD */
+.icon.download {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--ggs, 1));
+	width: 16px;
+	height: 6px;
+	border: 2px solid;
+	border-top: 0;
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+	margin-top: 8px;
+}
+.icon.download::after {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	border-left: 2px solid;
+	border-bottom: 2px solid;
+	transform: rotate(-45deg);
+	left: 2px;
+	bottom: 4px;
+}
+.icon.download::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	border-radius: 3px;
+	width: 2px;
+	height: 10px;
+	background: currentColor;
+	left: 5px;
+	bottom: 5px;
+}
+
+
 /* ICON - EXCHANGE */
 .icon.exchange,
 .icon.exchange::after,

public/js/audioplayer.js

@@ -4,8 +4,10 @@ function human_readable_time(duration) {
 	return new Date(duration * 1000).toISOString().slice(duration > 3600 ? 11 : 14, 19);
 }
 
-const FREQUENCY_SAMPLES = 512;
+const DISPLAY_WINDOW = 1;
-const BAR_WIDTH = 4;
+const BAR_COUNT = 48;
+const BAR_GAP = 2;
+const BAR_CAP_HEIGHT = 8;
 const PROGRESS_TICKS = 1000;
 const MS_BETWEEN_PROGRESS_UPDATES = 200;
 
@@ -54,12 +56,6 @@ new MutationObserver((mutations) => {
 
 		player.addEventListener("keydown", (event) => {
 			const key = event.which ?? event.keyCode;
-
-			console.dir({
-				key,
-				playing: player.dataset.playing,
-			});
-
 			switch (key) {
 				case 32: // space
 					event.preventDefault();
@@ -145,6 +141,9 @@ new MutationObserver((mutations) => {
 
 		function init() {
 			CANVAS = CANVAS ?? player.querySelector("canvas");
+			CANVAS.height = 255;
+			CANVAS.width = BAR_COUNT * (16 + BAR_GAP);
+
 			VIZ_RGB = window
 				.getComputedStyle(CANVAS)
 				.color.slice(4, -1)
@@ -155,8 +154,6 @@ new MutationObserver((mutations) => {
 
 			if (!ANALYSER) {
 				ANALYSER = ACTX.createAnalyser();
-				ANALYSER.fftSize = 4 * FREQUENCY_SAMPLES;
-				ANALYSER.smoothingTimeConstant = 0.8;
 			}
 
 			DATA = DATA ?? new Uint8Array(ANALYSER.frequencyBinCount);
@@ -174,22 +171,54 @@ new MutationObserver((mutations) => {
 			}
 		}
 
+		let previous_max_values;
 		function draw() {
+			previous_max_values =
+				previous_max_values ?? new Array(ANALYSER.frequencyBinCount).fill(0);
+
 			if (!player.dataset.playing) {
-				return;
+				if (previous_max_values.all((v) => v === 0)) return;
 			}
 
 			ANALYSER.getByteFrequencyData(DATA);
 
-			// draw on the canvas element
+			const gradient = CTX.createLinearGradient(0, 0, 0, CANVAS.height);
+			gradient.addColorStop(
+				0.4,
+				`rgba( ${parseInt(VIZ_RGB[0] / 4)}, ${parseInt(VIZ_RGB[1] / 4)}, ${parseInt(VIZ_RGB[2] / 4)}, 0)`,
+			);
+			gradient.addColorStop(1, `rgba( ${VIZ_RGB[0]}, ${VIZ_RGB[1]}, ${VIZ_RGB[2]}, 0.25)`);
+
+			const bar_width = parseInt(CANVAS.width / BAR_COUNT);
+			const stride = parseInt((DATA.length * DISPLAY_WINDOW) / BAR_COUNT);
+
 			CTX.clearRect(0, 0, CANVAS.width, CANVAS.height);
 
-			for (let i = 0; i < DATA.length; i = i + BAR_WIDTH) {
+			for (let i = 0; i < BAR_COUNT; ++i) {
-				// normalize the value
+				const value = DATA[i * stride];
-				const value = DATA[i] / 255;
+
-				const y = CANVAS.height - CANVAS.height * value;
+				const cap_value = value > previous_max_values[i] ? value : previous_max_values[i];
-				CTX.fillStyle = `rgb(${Math.min(255, parseInt(value * VIZ_RGB[0] + VIZ_RGB[0] * 0.25))}, ${Math.min(255, parseInt(value * VIZ_RGB[1] + VIZ_RGB[1] * 0.25))}, ${Math.min(255, parseInt(value * VIZ_RGB[2] + VIZ_RGB[2] * 0.25))})`;
+				const cap_color_value = 0.33 + cap_value / 255;
-				CTX.fillRect(i, y, 2, 8);
+				CTX.fillStyle = `rgba(${VIZ_RGB[0]}, ${VIZ_RGB[1]}, ${VIZ_RGB[2]}, 0.8)`;
+				CTX.fillRect(
+					i * (bar_width + BAR_GAP),
+					CANVAS.height - cap_value,
+					bar_width,
+					BAR_CAP_HEIGHT,
+				);
+
+				previous_max_values[i] =
+					value > previous_max_values[i]
+						? value
+						: previous_max_values[i] - BAR_CAP_HEIGHT / 2;
+
+				CTX.fillStyle = gradient;
+				CTX.fillRect(
+					i * (bar_width + BAR_GAP),
+					CANVAS.height - value + BAR_CAP_HEIGHT + BAR_CAP_HEIGHT,
+					bar_width,
+					value,
+				);
 			}
 
 			requestAnimationFrame(draw);

public/tabs/profile/profile.html

@@ -13,10 +13,6 @@
 						},
 					};
 
-			console.dir({
-				user_json,
-				user,
-			});
 			const ids = document.querySelectorAll("[data-bind__user_id]");
 			for (const id of ids) {
 				const bound_to =
@@ -29,19 +25,12 @@
 
 			const avatars = document.querySelectorAll("[data-bind__user_meta_avatar]");
 			for (const avatar of avatars) {
-				console.dir({
-					avatar,
-				});
 				const bound_to =
 					typeof avatar.dataset["bind__user_meta_avatar"] === "string" &&
 					avatar.dataset["bind__user_meta_avatar"].length
 						? avatar.dataset["bind__user_meta_avatar"]
 						: "innerHTML";
 				avatar[bound_to] = user.meta?.avatar ?? DEFAULT_AVATAR_URL;
-
-				console.dir({
-					avatar,
-				});
 			}
 
 			const usernames = document.querySelectorAll("[data-bind__user_username]");

public/tabs/talk/talk.js

@@ -98,10 +98,6 @@ const URL_MATCH_HANDLERS = [
 			return;
 		}
 
-		console.dir({
-			action,
-			video_id,
-		});
 		return `
 		<div class="embed-container iframe ${action === "shorts" ? "vertical" : "letterbox"} youtube">
 			<div class="embed-actions-container">
@@ -159,14 +155,9 @@ const URL_MATCH_HANDLERS = [
 		// const punycode = get_punycode();
 		// const punycoded_url = punycode.encode(match[0]);
 
-		console.dir({
-			link_info,
-		});
 		if (typeof link_info.extension === "string") {
 			const mime_types = get_mime_types(link_info.extension);
-			console.dir({
+
-				mime_types,
-			});
 			if (mime_types.length) {
 				if (mime_types.includes("image/gif")) {
 					return `<div class="embed-container image gif"><img src="${link_info.url}" alt="A gif from ${link_info.domain}" /></div>`;
@@ -201,7 +192,11 @@ const URL_MATCH_HANDLERS = [
 									<div class="time-container"><span class="duration">00:00</span></div>
 								</div>
 								<div class="buttons-container">
-									<div class="audio-control blank"></div>
+									<div class="audio-control blank">
+										<a href="${link_info.url}" download>
+											<div class="icon download"></div>
+										</a>
+									</div>
 									<div class="audio-control skip-back"><div class="icon skip-back"></div></div>
 									<div class="audio-control play-pause-toggle"><div class="icon play"></div><div class="icon pause"></div></div>
 									<div class="audio-control skip-forward"><div class="icon skip-forward"></div></div>

tests/api/rooms/events/get_events.test.ts

@@ -115,10 +115,8 @@ Deno.test({
 				asserts.assert(Array.isArray(long_polled_events));
 				asserts.assertEquals(long_polled_events.length, 1);
 				asserts.assertEquals(long_polled_events[0].data?.i, 12345);
-				console.log('done');
 			});
 		} finally {
-			console.log('finally');
 			clear_room_events_cache();
 			if (test_server_info) {
 				await test_server_info.server.stop();