From 1bef02d25ffa1776153a117d959d88dd038b34c3 Mon Sep 17 00:00:00 2001
From: Chris Xiong <chirs241097@gmail.com>
Date: Wed, 22 Jan 2025 22:35:59 -0500
Subject: Correctly resize visualization canvas with the content area.
Small tweaks to misc visualization parameters.
---
libs/music/player.d/main_static.js | 21 +++++++++++++++++++--
libs/music/player.d/styles.css | 8 ++------
2 files changed, 21 insertions(+), 8 deletions(-)
(limited to 'libs')
diff --git a/libs/music/player.d/main_static.js b/libs/music/player.d/main_static.js
index bb2c112..c489cd4 100644
--- a/libs/music/player.d/main_static.js
+++ b/libs/music/player.d/main_static.js
@@ -212,6 +212,16 @@ NSUI={
this.swformat=sh.elem('formatsw');
if(!(sh.getcookie('preferredformat') in NSPlayer.served_formats))
sh.setcookie('preferredformat','');
+ NSUI.resize_canvas();
+ try {
+ const ro = new ResizeObserver(() => {
+ console.log("size changed!");
+ NSUI.resize_canvas();
+ });
+ ro.observe(sh.elem("content"));
+ } catch(e) {
+ console.error(e);
+ }
const fmt=NSPlayer.get_preferred_or_default_format();
const cantplay=(NSUI.audio.canPlayType(NSPlayer.served_formats[fmt].mime)=='')?' !':'';
this.swformat.innerHTML=`[${NSPlayer.served_formats[fmt].disp}${cantplay}]`;
@@ -300,6 +310,13 @@ NSUI={
return true;
};
},
+ resize_canvas: function()
+ {
+ sh.elem("cvsdiv").style.width = `calc(100% - 1em - ${window.getComputedStyle(sh.elem("content")).marginLeft})`;
+ NSUI.canvas.width = NSUI.canvas.clientWidth * window.devicePixelRatio;
+ NSUI.canvas.height = NSUI.canvas.clientHeight * window.devicePixelRatio;
+ NSInk.inkPrepare();
+ },
load_playlists:async function()
{
const moi=this;
@@ -536,7 +553,7 @@ NSVisualization={
_61spvelcap:2*6.17274873,
_61spgvel:.06617274873,
_61spelas:.2617274873,
- _61spf:42.617274873,
+ _61spf:61.7274873,
_61spelasth:.1617274873,
_61spcaps:new Float32Array(29),
_61spcapsv:new Float32Array(29),
@@ -870,7 +887,7 @@ NSInk={
}
for (let i = 0; i < 7; ++i)
{
- const multi = [1, 1, 1.1, 1.25, 1.65, 2.5, 2.4];
+ const multi = [1, 1, 1.1, 1.25, 1.65, 2.5, 2.15];
const v = Math.pow(Math.min(evals[i] * multi[i], 1), 2);
const r = 10 + 110 * v;
cctx.fillStyle = `${NSInk.ic2[i].slice(0, -4)}${0.3 + 0.5 * v})`;
diff --git a/libs/music/player.d/styles.css b/libs/music/player.d/styles.css
index 7985f25..5e6819a 100644
--- a/libs/music/player.d/styles.css
+++ b/libs/music/player.d/styles.css
@@ -62,15 +62,11 @@ canvas#cvs{width:100%;height:100%;}
a.listitem{padding-left:160px !important;margin-left:-160px;}
div#cvsdiv{
position: absolute;
- width: calc(100% - 16.5em);
+ width: calc(100% - 17em);
height: calc(100% - 9.6em);
- top: 0;
+ top: 0.3em;
z-index: -1;
}
-@media (max-width:768px)
-{
- div#cvsdiv{width:calc(100% - 1.5em);}
-}
ul#plists
{
list-style-type:none;
--
cgit v1.2.3