diff --git a/public/base.css b/public/base.css index d94292e..f1a1117 100644 --- a/public/base.css +++ b/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, diff --git a/public/js/audioplayer.js b/public/js/audioplayer.js index a8737d5..faf00ea 100644 --- a/public/js/audioplayer.js +++ b/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 BAR_WIDTH = 4; +const DISPLAY_WINDOW = 1; +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) { - // normalize the value - const value = DATA[i] / 255; - const y = CANVAS.height - CANVAS.height * value; - 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))})`; - CTX.fillRect(i, y, 2, 8); + for (let i = 0; i < BAR_COUNT; ++i) { + const value = DATA[i * stride]; + + const cap_value = value > previous_max_values[i] ? value : previous_max_values[i]; + const cap_color_value = 0.33 + cap_value / 255; + 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); diff --git a/public/tabs/profile/profile.html b/public/tabs/profile/profile.html index 9f60c8c..c4ba12a 100644 --- a/public/tabs/profile/profile.html +++ b/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]"); diff --git a/public/tabs/talk/talk.js b/public/tabs/talk/talk.js index da5a073..fa322ee 100644 --- a/public/tabs/talk/talk.js +++ b/public/tabs/talk/talk.js @@ -98,10 +98,6 @@ const URL_MATCH_HANDLERS = [ return; } - console.dir({ - action, - video_id, - }); return `
@@ -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 `
A gif from ${link_info.domain}
`; @@ -201,7 +192,11 @@ const URL_MATCH_HANDLERS = [
00:00
-
+
+ +
+ +
diff --git a/tests/api/rooms/events/get_events.test.ts b/tests/api/rooms/events/get_events.test.ts index 8a64024..b665474 100644 --- a/tests/api/rooms/events/get_events.test.ts +++ b/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();