feat: 灵动岛歌词 by imsyy · Pull Request #5 · SPlayer-Dev/SPlayer-Next

imsyy · 2026-04-16T10:09:20Z

No description provided.

Copilot

Pull request overview

Adds a new “Dynamic Island” (灵动岛) floating lyric window for Windows/Electron, and refactors lyric timing utilities to support high-frequency word highlighting with less reactive overhead.

Changes:

Introduces a new windows/dynamic-island renderer entry (Vue) with drag/mode behavior and lyric rendering.
Adds main-process window management + IPC + tray + settings wiring for Dynamic Island enable/config/visibility.
Extracts lyric sync helpers into shared/utils/lyricSync.ts and updates desktop-lyric to use the shared utilities and a non-reactive playback cursor getter.

Reviewed changes

Copilot reviewed 31 out of 32 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
windows/dynamic-island/main.ts	New Vue entrypoint mounting the Dynamic Island app.
windows/dynamic-island/index.html	New HTML entry for the Dynamic Island renderer window.
windows/dynamic-island/composables/useNowPlayingSync.ts	Snapshot + position sync + RAF anchor interpolation for Dynamic Island.
windows/dynamic-island/composables/useDragWindow.ts	Pointer-based window dragging with rAF throttling and state save.
windows/dynamic-island/components/IslandLyricLine.vue	Word-by-word gradient highlighting driven by a non-reactive currentMs getter.
windows/dynamic-island/App.vue	Dynamic Island UI layout, sizing, mode transitions, and config application.
windows/desktop-lyric/utils.ts	Removes lyric sync helpers now moved to shared utils.
windows/desktop-lyric/composables/useNowPlayingSync.ts	Switches to shared lyric sync helpers; exposes non-reactive currentMs getter and removes `currentMs` ref.
windows/desktop-lyric/components/LyricLine.vue	Moves scroll + word highlight to rAF-driven DOM style updates using currentMs getter; removes `currentMs` prop.
windows/desktop-lyric/App.vue	Updates component import/name and removes passing `currentMs`; updates settings deep-link category.
src/stores/settings.ts	Tracks Dynamic Island open state and subscribes to Dynamic Island config + visibility updates.
src/settings/virtualBindings.ts	Adds virtual binding to toggle Dynamic Island window from settings.
src/settings/schema.ts	Adds “externalLyric” category and Dynamic Island settings section/items.
src/i18n/locales/zh-CN.json	Adds category/section labels + Dynamic Island setting strings (CN).
src/i18n/locales/en-US.json	Adds category/section labels + Dynamic Island setting strings (EN).
src/components/player/FullPlayer/index.vue	Removes debug/extra classes and adjusts comments for lyric ref/mount state.
shared/utils/lyricSync.ts	New shared lyric sync utilities: primary/latest index selection + last-line end clamping.
shared/types/window.ts	Extends preload Window API types to include Dynamic Island controls + DynamicIslandApi.
shared/types/settings.ts	Adds `DynamicIslandSettings` and persisted `windowStates.dynamicIsland`.
shared/defaults/settings.ts	Adds base height constant + default Dynamic Island config and window state.
package.json	Updates pnpm version in `packageManager`.
electron/preload/index.ts	Adds preload APIs for Dynamic Island window + config/mode/cursor events; removes `removeAllListeners` in subscribe helper.
electron/preload/index.d.ts	Exposes `window.api.dynamicIsland` typings.
electron/main/window/main.ts	Adjusts tray/thumbar init timing and passes main window into thumbar initializer.
electron/main/window/index.ts	Re-exports Dynamic Island window functions.
electron/main/window/dynamicIsland.ts	Implements main-process Dynamic Island window creation, sizing, snapping, cursor polling, IPC handlers, and persistence.
electron/main/utils/i18n.ts	Adds tray strings for opening/closing Dynamic Island.
electron/main/services/tray.ts	Adds tray menu item + state sync for Dynamic Island window.
electron/main/services/thumbar.ts	Changes `initThumbar` signature to accept a BrowserWindow parameter.
electron/main/ipc/window.ts	Adds IPC handlers for Dynamic Island toggle/close/open state + drag/resize/height/mode query.
electron/main/ipc/config.ts	Applies/broadcasts Dynamic Island config changes (always-on-top, snapCentered, nonOcclusive).
electron.vite.config.ts	Adds Dynamic Island window HTML as a renderer build input.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-16T10:14:30Z

+    wordByWord: true,
+    playedColor: "#rgba(255, 255, 255, 1)",
+    unplayedColor: "rgba(255, 255, 255, 0.5)",
+    backgroundColor: "rgba(0, 0, 0, 1)",


dynamicIsland.playedColor is set to #rgba(255, 255, 255, 1), which is not a valid CSS color. This will break the CSS variable --di-played and can make the Dynamic Island text invisible or incorrectly colored. Use rgba(255, 255, 255, 1) or a hex color like #ffffff.

@copilot apply changes based on this feedback

已按反馈修复，dynamicIsland.playedColor 已改为合法 CSS 颜色 rgba(255, 255, 255, 1)，对应提交：cd51046。
截图如下：

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 31 out of 32 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-16T10:30:49Z

+    // 订阅灵动岛配置变化
+    onConfigChange: (callback: (config: unknown) => void) =>
+      subscribe("dynamicIsland:configChange", callback),


dynamicIsland.onConfigChange currently types the callback payload as unknown, which loses type-safety and is incompatible with the DynamicIslandApi contract (expects DynamicIslandSettings). Import and use the proper type for the callback payload so renderer consumers get correct typing.

Copilot · 2026-04-16T10:30:49Z

+const renderFrame = (): void => {
+  if (props.wordByWord) {
+    const currentMs = getNowPlayingCurrentMs();
+    for (let i = 0; i < props.line.words.length; i++) {
+      const el = wordRefs[i];
+      if (!el) continue;
+      const progress = getWordProgress(props.line.words[i], currentMs);
+      if (lastWordProgress[i] !== progress) {
+        lastWordProgress[i] = progress;
+        el.style.setProperty("--p", progress);
+      }
+    }
+  }
+  rafId = requestAnimationFrame(renderFrame);
+};
+
+watch(() => [props.wordByWord, props.line], resetRenderCache);
+
+onMounted(() => {
+  renderFrame();
+});
+
+onBeforeUnmount(() => {
+  if (rafId !== 0) {
+    cancelAnimationFrame(rafId);
+    rafId = 0;
+  }


renderFrame() schedules a new requestAnimationFrame unconditionally, even when wordByWord is false (no per-frame updates occur). This keeps a permanent 60fps loop running for no benefit. Consider starting/stopping the RAF loop based on wordByWord (and canceling when disabled) to reduce CPU usage.

Suggested change

const renderFrame = (): void => {

if (props.wordByWord) {

const currentMs = getNowPlayingCurrentMs();

for (let i = 0; i < props.line.words.length; i++) {

const el = wordRefs[i];

if (!el) continue;

const progress = getWordProgress(props.line.words[i], currentMs);

if (lastWordProgress[i] !== progress) {

lastWordProgress[i] = progress;

el.style.setProperty("--p", progress);

}

}

}

rafId = requestAnimationFrame(renderFrame);

};

watch(() => [props.wordByWord, props.line], resetRenderCache);

onMounted(() => {

renderFrame();

});

onBeforeUnmount(() => {

if (rafId !== 0) {

cancelAnimationFrame(rafId);

rafId = 0;

}

const stopRenderLoop = (): void => {

if (rafId !== 0) {

cancelAnimationFrame(rafId);

rafId = 0;

}

};

const renderFrame = (): void => {

if (!props.wordByWord) {

rafId = 0;

return;

}

const currentMs = getNowPlayingCurrentMs();

for (let i = 0; i < props.line.words.length; i++) {

const el = wordRefs[i];

if (!el) continue;

const progress = getWordProgress(props.line.words[i], currentMs);

if (lastWordProgress[i] !== progress) {

lastWordProgress[i] = progress;

el.style.setProperty("--p", progress);

}

}

rafId = requestAnimationFrame(renderFrame);

};

const startRenderLoop = (): void => {

if (rafId === 0 && props.wordByWord) {

renderFrame();

}

};

watch(

() => props.wordByWord,

(wordByWord) => {

resetRenderCache();

if (wordByWord) {

startRenderLoop();

} else {

stopRenderLoop();

}

},

);

watch(() => props.line, resetRenderCache);

onMounted(() => {

startRenderLoop();

});

onBeforeUnmount(() => {

stopRenderLoop();

Copilot · 2026-04-16T10:30:49Z

+  measureCtx.font = `${config.fontWeight} ${sizePx}px ${family}`;
+  return Math.ceil(measureCtx.measureText(text).width);
+};
+


config.scale and config.fontWeight affect fontSize/padding/cover size and also the measured text width (measureTextWidth), but there is no watcher that recomputes lyricWidth + calls resizeWindow() when these values change. As a result, adjusting scale/font weight from settings can leave the window width stale and cause clipping/misalignment. Consider watching the relevant sizing inputs (e.g. config.scale, config.fontWeight, maybe fontSize) and re-running measureTarget() + resizeWindow() (ideally without triggering the shrink/expand swap animation).

Suggested change

const refreshMeasuredLayout = async () => {

await nextTick();

if (typeof measureTarget === "function") {

measureTarget();

}

if (typeof resizeWindow === "function") {

resizeWindow();

}

};

watch(

() => [config.scale, config.fontWeight, fontSize.value],

() => {

refreshMeasuredLayout();

},

{ flush: "post" },

);

Agent-Logs-Url: https://github.com/SPlayer-Dev/SPlayer-Next/sessions/d7d72eb9-46a2-4858-abda-901a0ab14060 Co-authored-by: imsyy <42232682+imsyy@users.noreply.github.com>

Copilot · 2026-04-16T10:35:19Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

npmmirror.com
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node install.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

- IslandLyricLine: wordByWord=false 时停止 RAF，避免 60fps 空转 - App: 监听 scale/fontWeight 变化，即时重测并 resize 窗口宽度 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 31 out of 32 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

imsyy and others added 7 commits April 15, 2026 23:55

优化桌面歌词逐帧重渲染

c3b7339

灵动岛歌词基础实现

1924d27

完善灵动岛歌词

61e5383

解决首帧不展开

3f1aea9

新增灵动岛配置

0ef5adb

完善吸附隐藏

cab2e14

添加双行模式

0377a24

Copilot AI review requested due to automatic review settings April 16, 2026 10:09

Copilot started reviewing on behalf of imsyy April 16, 2026 10:09 View session

格式化内容

2ed5d0b

Copilot AI reviewed Apr 16, 2026

View reviewed changes

Update shared/defaults/settings.ts

4137f94

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot started work on behalf of imsyy April 16, 2026 10:24 View session

Copilot AI review requested due to automatic review settings April 16, 2026 10:24

Copilot started reviewing on behalf of imsyy April 16, 2026 10:24 View session

Copilot AI reviewed Apr 16, 2026

View reviewed changes

fix: 修正灵动岛默认歌词颜色为合法CSS值

cd51046

Agent-Logs-Url: https://github.com/SPlayer-Dev/SPlayer-Next/sessions/d7d72eb9-46a2-4858-abda-901a0ab14060 Co-authored-by: imsyy <42232682+imsyy@users.noreply.github.com>

Copilot finished work on behalf of imsyy April 16, 2026 10:35

fix: 灵动岛歌词逐字循环空转与尺寸变更宽度陈旧

d652565

- IslandLyricLine: wordByWord=false 时停止 RAF，避免 60fps 空转 - App: 监听 scale/fontWeight 变化，即时重测并 resize 窗口宽度 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings April 16, 2026 13:54

Copilot started reviewing on behalf of imsyy April 16, 2026 13:55 View session

Copilot AI reviewed Apr 16, 2026

View reviewed changes

对齐默认颜色

e806b60

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

imsyy merged commit c0b4e71 into dev Apr 16, 2026
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 灵动岛歌词#5

feat: 灵动岛歌词#5
imsyy merged 12 commits intodevfrom
lyric-land

imsyy commented Apr 16, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

imsyy Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI commented Apr 16, 2026

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

+const refreshMeasuredLayout = async () => {
+  await nextTick();
+  if (typeof measureTarget === "function") {
+    measureTarget();
+  }
+  if (typeof resizeWindow === "function") {
+    resizeWindow();
+  }
+};
+watch(
+  () => [config.scale, config.fontWeight, fontSize.value],
+  () => {
+    refreshMeasuredLayout();
+  },
+  { flush: "post" },
+);

Conversation

imsyy commented Apr 16, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

imsyy Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Apr 16, 2026

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants