SheWhoReignsSupreme/Equicord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MusicControls: Tidal Updates

Browse source
This commit is contained in:
thororen1234 2025-08-09 16:22:25 -04:00
parent 9b948728d6
commit 58b37af697
No known key found for this signature in database
5 changed files with 4 additions and 197 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/equicordplugins/musicControls/settings.tsx
View file

@ -159,16 +159,6 @@ export const settings = definePluginSettings({
default: 0,
...sliderOptions
},
SyncMode: {
description: "Lyrics sync mode",
type: OptionType.SELECT,
options: [
{ value: "line", label: "Line" },
{ value: "word", label: "Word", default: true },
{ value: "character", label: "Character" },
],
default: "word",
},
PurgeLyricsCache: {
description: "Purge the lyrics cache",
type: OptionType.COMPONENT,

86
src/equicordplugins/musicControls/styles.css
View file

@ -158,90 +158,4 @@
.eq-tidal-lyrics-modal-no-lyrics {
text-align: center;
padding: 1rem;
}
/* Character sync styles */
.eq-tidal-lyrics-char {
color: var(--text-muted);
padding: 0 1px;
display: inline-block;
transition: color .15s ease, opacity .15s ease, transform .15s ease, text-shadow .15s ease;
will-change: transform, color, opacity, text-shadow;
}
.eq-tidal-lyrics-char-active {
color: var(--brand-experiment);
font-weight: 600;
text-shadow: 0 0 .25em currentcolor;
}
.eq-tidal-lyrics-word {
color: var(--text-muted);
border-radius: 4px;
padding: 0 1px;
margin-right: 2px;
border: 1px solid transparent;
display: inline-block;
transition: color .15s ease, opacity .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
will-change: transform, color, opacity, background-color, box-shadow;
}
.eq-tidal-lyrics-word:last-child {
margin-right: 0;
}
.eq-tidal-lyrics-word-active {
color: var(--brand-experiment);
background: none;
box-shadow: none;
text-shadow: 0 0 .25em currentcolor;
}
.eq-tidal-lyrics-current,
.eq-tidal-lyrics-next,
.eq-tidal-lyrics-prev {
transition: color .2s ease, opacity .2s ease, transform .2s ease, text-shadow .2s ease;
}
.eq-tidal-lyrics-current {
font-weight: 600;
text-shadow: 0 0 .35em rgb(0 0 0 / 15%);
}
.eq-tidal-lyrics-next {
opacity: .85;
}
.eq-tidal-lyrics-prev {
opacity: .65;
}
.eq-tidal-lyrics-current .eq-tidal-lyrics-char,
.eq-tidal-lyrics-current .eq-tidal-lyrics-word {
color: var(--text-normal);
}
.eq-tidal-lyrics-next .eq-tidal-lyrics-char,
.eq-tidal-lyrics-prev .eq-tidal-lyrics-char,
.eq-tidal-lyrics-next .eq-tidal-lyrics-word,
.eq-tidal-lyrics-prev .eq-tidal-lyrics-word {
color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
.eq-tidal-lyrics-current,
.eq-tidal-lyrics-next,
.eq-tidal-lyrics-prev,
.eq-tidal-lyrics-char,
.eq-tidal-lyrics-word {
transition: none;
text-shadow: none;
}
.eq-tidal-lyrics-char-active,
.eq-tidal-lyrics-word-active {
transform: none;
}
}

2
src/equicordplugins/musicControls/tidal/TidalStore.ts
View file

@ -149,7 +149,7 @@ export const TidalStore = proxyLazyWebpack(() => {
public repeat: Repeat = 0;
public shuffle = false;
public volume = 100;
private playerElement: HTMLElement | null = null;
public playerElement: HTMLElement | null = null;
public socket = new TidalSocket((message: Message) => {
if (message.type === "update" && message.all && message.fields) {
const apiData = message.fields;

51
src/equicordplugins/musicControls/tidal/lyrics/components/lyrics.tsx
View file

@ -15,11 +15,10 @@ import { LyricsModal } from "./modal";
import { cl, NoteSvg, useLyrics } from "./util";
function LyricsDisplay({ scroll = true }: { scroll?: boolean; }) {
const { ShowMusicNoteOnNoLyrics, SyncMode } = settings.use(["ShowMusicNoteOnNoLyrics", "SyncMode"]);
const { ShowMusicNoteOnNoLyrics } = settings.use(["ShowMusicNoteOnNoLyrics"]);
const { lyrics, lyricRefs, currLrcIndex, nextLyric } = useLyrics({ scroll });
const currentLyrics = lyrics || null;
const NoteElement = NoteSvg(cl("music-note"));
const position = useStateFromStores([TidalStore], () => TidalStore.mPosition);
const makeClassName = (index: number): string => {
if (currLrcIndex === null) return "";
@ -52,53 +51,7 @@ function LyricsDisplay({ scroll = true }: { scroll?: boolean; }) {
variant={currLrcIndex === i ? "text-sm/normal" : "text-xs/normal"}
className={makeClassName(i)}
>
{SyncMode === "character" && line.characters && line.characters.length > 0 && line.words && line.words.length > 0 ? (
line.words.map((word, wIdx) => (
<span key={wIdx}>
{word.characters.map((char, j) => {
const charActive = position / 1000 >= char.time && position / 1000 < char.endTime;
return (
<span
key={j}
className={charActive ? "eq-tidal-lyrics-char-active" : "eq-tidal-lyrics-char"}
style={{ opacity: charActive ? 1 : 0.5 }}
>
{char.char}
</span>
);
})}
{wIdx < line.words.length - 1 && <span> </span>}
</span>
))
) : SyncMode === "character" && line.characters && line.characters.length > 0 ? (
line.characters.map((char, j) => {
const charActive = position / 1000 >= char.time && position / 1000 < char.endTime;
return (
<span
key={j}
className={charActive ? "eq-tidal-lyrics-char-active" : "eq-tidal-lyrics-char"}
style={{ opacity: charActive ? 1 : 0.5 }}
>
{char.char}
</span>
);
})
) : SyncMode === "word" && line.words && line.words.length > 0 ? (
line.words.map((word, j) => {
const wordActive = position / 1000 >= word.time && position / 1000 < word.endTime;
return (
<span
key={j}
className={wordActive ? "eq-tidal-lyrics-word-active" : "eq-tidal-lyrics-word"}
style={{ opacity: wordActive ? 1 : 0.5 }}
>
{word.word}
</span>
);
})
) : (
line.text || NoteElement
)}
{line.text || NoteElement}
</Text>
</div>
))}

52
src/equicordplugins/musicControls/tidal/lyrics/components/modal.tsx
View file

@ -7,7 +7,6 @@
import { ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
import { Text } from "@webpack/common";
import { settings } from "../../../settings";
import { TidalStore, Track } from "../../TidalStore";
import { cl, NoteSvg, scrollClasses, useLyrics } from "./util";
@ -41,8 +40,6 @@ function ModalHeaderContent({ track }: { track: Track; }) {
export function LyricsModal({ rootProps }: { rootProps: ModalProps; }) {
const { track, lyrics, currLrcIndex } = useLyrics({ scroll: false });
const currentLyrics = lyrics || null;
const position = track ? TidalStore.mPosition : 0;
const { SyncMode } = settings.use(["SyncMode"]);
return (
<ModalRoot {...rootProps}>
@ -61,54 +58,7 @@ export function LyricsModal({ rootProps }: { rootProps: ModalProps; }) {
onClick={() => TidalStore.seek(line.time * 1000)}
>
{formatTime(line.time)}
</span>
{SyncMode === "character" && line.characters && line.characters.length > 0 && line.words && line.words.length > 0 ? (
line.words.map((word, wIdx) => (
<span key={wIdx}>
{word.characters.map((char, j) => {
const charActive = position / 1000 >= char.time && position / 1000 < char.endTime;
return (
<span
key={j}
className={charActive ? cl("char-active") : cl("char")}
style={{ opacity: charActive ? 1 : 0.5 }}
>
{char.char}
</span>
);
})}
{wIdx < line.words.length - 1 && <span> </span>}
</span>
))
) : SyncMode === "character" && line.characters && line.characters.length > 0 ? (
line.characters.map((char, j) => {
const charActive = position / 1000 >= char.time && position / 1000 < char.endTime;
return (
<span
key={j}
className={charActive ? cl("char-active") : cl("char")}
style={{ opacity: charActive ? 1 : 0.5 }}
>
{char.char}
</span>
);
})
) : SyncMode === "word" && line.words && line.words.length > 0 ? (
line.words.map((word, j) => {
const wordActive = position / 1000 >= word.time && position / 1000 < word.endTime;
return (
<span
key={j}
className={wordActive ? cl("word-active") : cl("word")}
style={{ opacity: wordActive ? 1 : 0.5, marginRight: 2 }}
>
{word.word}
</span>
);
})
) : (
line.text || NoteSvg(cl("modal-note"))
)}
</span>{line.text || NoteSvg(cl("modal-note"))}
</Text>
))
) : (