diff --git a/CustomApps/lyrics-plus/Pages.js b/CustomApps/lyrics-plus/Pages.js index 1b960236f6..b31172ae71 100755 --- a/CustomApps/lyrics-plus/Pages.js +++ b/CustomApps/lyrics-plus/Pages.js @@ -31,9 +31,24 @@ const IdlingIndicator = ({ isActive, progress, delay }) => { "--indicator-delay": `${delay}ms`, }, }, - react.createElement("div", { className: `lyrics-idling-indicator__circle ${progress >= 0.05 ? "active" : ""}` }), - react.createElement("div", { className: `lyrics-idling-indicator__circle ${progress >= 0.33 ? "active" : ""}` }), - react.createElement("div", { className: `lyrics-idling-indicator__circle ${progress >= 0.66 ? "active" : ""}` }) + [0.05, 0.33, 0.66].map((threshold) => + react.createElement("div", { className: `lyrics-idling-indicator__circle ${progress >= threshold ? "active" : ""}` }) + ) + ); +}; + +const InlineIdlingIndicator = ({ progress, isActive }) => { + return react.createElement( + "span", + { + className: `lyrics-inline-idling-indicator${isActive ? " active" : ""}`, + }, + [0.05, 0.33, 0.66].map((threshold, idx) => + react.createElement("span", { + key: idx, + className: `lyrics-inline-idling-dot${progress >= threshold ? " active" : ""}`, + }) + ) ); }; @@ -145,6 +160,37 @@ const SyncedLyricsPage = react.memo(({ lyrics = [], provider, copyright, isKara delay: activeLines[2].startTime / 3, }); } + if (text === "♪") { + let className = "lyrics-lyricsContainer-LyricsLine"; + let ref; + if (Math.min(activeLineIndex, CONFIG.visual["lines-before"] + 1) === i) { + className += " lyrics-lyricsContainer-LyricsLine-active"; + ref = activeLineEle; + } + const animationIndex = activeLineIndex <= CONFIG.visual["lines-before"] ? i - activeLineIndex : i - CONFIG.visual["lines-before"] - 1; + const nextLine = activeLines[i + 1]; + const timeToNext = nextLine ? nextLine.startTime - startTime : 1000; + const progress = Math.min(1, (position - startTime) / (timeToNext || 1)); + return react.createElement( + "div", + { + className, + style: { + cursor: "pointer", + "--position-index": animationIndex, + "--animation-index": (animationIndex < 0 ? 0 : animationIndex) + 1, + "--blur-index": Math.abs(animationIndex), + }, + key: lineNumber, + dir: "auto", + ref, + onClick: () => { + if (startTime) Spicetify.Player.seek(startTime); + }, + }, + react.createElement("p", {}, react.createElement(InlineIdlingIndicator, { progress, isActive: progress >= 1 })) + ); + } let className = "lyrics-lyricsContainer-LyricsLine"; const activeElementIndex = Math.min(activeLineIndex, CONFIG.visual["lines-before"] + 1); diff --git a/CustomApps/lyrics-plus/style.css b/CustomApps/lyrics-plus/style.css index 298b2ddbe1..0028cf908a 100644 --- a/CustomApps/lyrics-plus/style.css +++ b/CustomApps/lyrics-plus/style.css @@ -728,3 +728,65 @@ div.lyrics-tabBar-headerItemLink { margin-left: 100px; } } + +.lyrics-inline-idling-indicator { + display: inline-flex; + align-items: center; + gap: 0.25em; + margin-left: 0.2em; + opacity: 0.5; + transition: opacity 0.2s; + vertical-align: middle; +} +.lyrics-inline-idling-indicator.active { + opacity: 1; +} +.lyrics-inline-idling-dot { + width: 0.5em; + height: 0.5em; + border-radius: 50%; + background: var(--lyrics-idling-dot-color, #888); + opacity: 0.3; + transform: scale(0.7); + transition: + background 0.2s, + opacity 0.2s, + transform 0.2s; + display: inline-block; +} +.lyrics-inline-idling-dot.active { + background: var(--lyrics-idling-dot-active-color, #fff); + opacity: 1; + transform: scale(1.1); +} + +.lyrics-idling-indicator { + display: flex; + align-items: center; + gap: 0.4em; + justify-content: center; + margin: 0.5em 0; + opacity: 0.7; + transition: opacity 0.2s; +} +.lyrics-idling-indicator.active { + opacity: 1; +} +.lyrics-idling-dot { + width: 0.7em; + height: 0.7em; + border-radius: 50%; + background: var(--lyrics-idling-dot-color, #888); + opacity: 0.3; + transform: scale(0.7); + transition: + background 0.2s, + opacity 0.2s, + transform 0.2s; + display: inline-block; +} +.lyrics-idling-dot.active { + background: var(--lyrics-idling-dot-active-color, #fff); + opacity: 1; + transform: scale(1.1); +}