betterncm-mac 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "betterncm-mac",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "BetterNCM II for NetEase Cloud Music on macOS, injected over the Chrome DevTools Protocol without modifying the app",
   "keywords": [
     "betterncm",

package/resources/lyrics/web/css/compat.css

@@ -8,7 +8,8 @@ body.bncm-cover-paused #rnp-view .n-single .cdin {
   transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-body.bncm-roaming #rnp-view .am-music-controls .rnp-amll-playlist { display: none !important; }
+/* roaming has one play mode: 减少推荐 takes the mode button's place */
+body.bncm-roaming #rnp-view .am-music-controls .rnp-amll-play-mode { display: none !important; }
 body:not(.bncm-roaming) #rnp-view .am-music-controls .bncm-rnp-dislike { display: none !important; }
 #rnp-view .am-music-controls .bncm-rnp-dislike svg { width: 22px; height: 22px; }
 

package/resources/lyrics/web/css/settings.css

@@ -15,10 +15,11 @@
   top: 56px;
   right: 14px;
   z-index: 1000; /* above #rnp-view (998) */
-  width: min(488px, calc(100vw - 28px));
+  width: min(448px, calc(100vw - 28px)); /* as wide as the tab bar */
   /* one size whatever is shown: the groups scroll inside it */
   height: min(600px, calc(100vh - 70px));
   display: flex;
+  flex-direction: column;
   box-sizing: border-box;
   background: rgba(var(--bg), .5);
   -webkit-backdrop-filter: blur(40px) saturate(1.6);
@@ -51,29 +52,30 @@
 .bncm-settings [hidden] { display: none !important; }
 .bncm-settings svg { display: block; flex: none; }
 
-/* --- sidebar ------------------------------------------------------------------------------------ */
+/* --- tab bar: one pill per group across the top; the column below gets the whole width -------- */
 .bncm-set-side {
   flex: none;
-  width: 132px;
-  padding: 12px 8px;
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
   gap: 2px;
-  background: rgba(var(--fg), .035);
-  border-right: .5px solid var(--line);
+  padding: 10px 14px;
+  overflow: auto hidden;
+  scrollbar-width: none;
+  border-bottom: .5px solid var(--line);
 }
-.bncm-set-tab {
+.bncm-set-side::-webkit-scrollbar { display: none; }
+.bncm-settings .bncm-set-tab { /* over the button reset */
+  flex: none;
   display: flex;
   align-items: center;
-  gap: 8px;
-  height: 32px;
-  padding: 0 10px;
-  border-radius: 8px;
+  gap: 5px;
+  height: 28px;
+  padding: 0 11px 0 9px;
+  border-radius: 14px;
   color: var(--t2) !important;
   white-space: nowrap;
 }
-.bncm-set-tab svg { width: 17px; height: 17px; opacity: .85; }
-.bncm-set-tab span { overflow: hidden; text-overflow: ellipsis; }
+.bncm-set-tab svg { width: 15px; height: 15px; opacity: .85; }
 .bncm-set-tab:hover { background: rgba(var(--fg), .06) !important; color: var(--t1) !important; }
 .bncm-set-tab.on { background: var(--fill2) !important; color: var(--t1) !important; font-weight: 500; }
 .bncm-set-tab.on svg { color: rgb(var(--ac)); opacity: 1; }
@@ -81,7 +83,7 @@
 /* --- pages -------------------------------------------------------------------------------------- */
 .bncm-set-main {
   flex: 1;
-  min-width: 0;
+  min-height: 0;
   overflow: hidden auto;
   overscroll-behavior: contain;
   padding: 6px 14px 18px;
@@ -302,10 +304,9 @@
 body.rnp-light .bncm-settings, body.rnp-auto.rnp-system-light .bncm-settings { box-shadow: 0 16px 44px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .12); }
 body.rnp-light .bncm-set-danger, body.rnp-auto.rnp-system-light .bncm-set-danger { color: rgb(215, 0, 21) !important; }
 
-/* small windows: the sidebar keeps only its icons */
-@media (max-width: 600px) {
-  .bncm-set-side { width: 48px; padding: 12px 6px; }
-  .bncm-set-tab { justify-content: center; padding: 0; }
+/* narrow windows: the tabs keep only their icons */
+@media (max-width: 480px) {
+  .bncm-settings .bncm-set-tab { padding: 0 9px; }
   .bncm-set-tab span { display: none; }
 }
 @media (prefers-reduced-motion: reduce) {

package/resources/lyrics/web/js/settings-ui.js

@@ -103,7 +103,7 @@ const GROUPS = [
     ],
   },
   {
-    id: 'cover', label: '封面与信息', sections: [
+    id: 'cover', label: '封面与信息', tab: '封面', sections: [
       {
         title: '封面', rows: [
           { type: 'seg', k: 'coverShape', label: '形状', options: SEG([['square', '方形'], ['round', '圆形']]) },
@@ -137,6 +137,7 @@ const GROUPS = [
           { type: 'info', label: '视觉设计', value: `RefinedNowPlayingNext ${RNPN_VERSION}` },
           { type: 'info', label: '作者', value: 'MiHN' },
           { type: 'info', label: '原作者', value: 'solstice23' },
+          { type: 'info', label: '性能与视觉优化', value: 'OyangDer' },
           { type: 'note', text: '歌词窗口沿用 RefinedNowPlayingNext 的界面设计（MIT 许可），以更省电的方式重新实现。' },
         ],
       },
@@ -161,7 +162,7 @@ let side = null;
 let main = null;
 let isOpen = false;
 let groupId = 'lyrics';
-let jumpUntil = 0; // while a jump scrolls, the sidebar keeps the group it was sent to
+let jumpUntil = 0; // while a jump scrolls, the tab bar keeps the group it was sent to
 let swallowTimer = 0;
 const syncs = [];
 const S = () => state.settings || DEFAULTS;
@@ -541,12 +542,12 @@ function build() {
   root.hidden = true;
   root.setAttribute('role', 'dialog');
   root.setAttribute('aria-label', '设置');
-  // every group in one scrolling column; the sidebar jumps to one and follows the scroll
+  // every group in one scrolling column; the tab bar above jumps to one and follows the scroll
   side = el('nav', 'bncm-set-side');
   side.setAttribute('aria-label', '设置分类');
   main = el('div', 'bncm-set-main');
   for (const g of GROUPS) {
-    const tab = button('bncm-set-tab', `${ICONS[g.id]}<span>${g.label}</span>`);
+    const tab = button('bncm-set-tab', `${ICONS[g.id]}<span>${g.tab || g.label}</span>`);
     tab.dataset.g = g.id;
     tab.addEventListener('click', () => jumpTo(g.id));
     side.append(tab);
@@ -599,6 +600,8 @@ function markGroup(id) {
     const on = t.dataset.g === id;
     t.classList.toggle('on', on);
     if (on) t.setAttribute('aria-current', 'true'); else t.removeAttribute('aria-current');
+    // a bar too narrow for every tab scrolls the marked one into view
+    if (on && side.scrollWidth > side.clientWidth) t.scrollIntoView({ block: 'nearest', inline: 'nearest' });
   }
 }
 

package/resources/lyrics/web/js/side.js

@@ -438,7 +438,8 @@ function addDislike(collapse) {
   btn.setAttribute('aria-label', '减少推荐');
   // NCM's dislike opens a modal inside its own window, which this one covers
   btn.addEventListener('click', (e) => { e.stopPropagation(); send('dislike'); collapse(); });
-  els.controls.append(btn);
+  // in the play mode's place, which roaming has no use for (compat.css swaps the two)
+  els.mode.after(btn);
   watch('dislikeIcon', (svg) => { btn.replaceChildren(...[safeSvg(svg)].filter(Boolean)); });
 }