diff --git a/src/components/settings/tabs/plugins/index.tsx b/src/components/settings/tabs/plugins/index.tsx index 4894b4eae..896d7f3aa 100644 --- a/src/components/settings/tabs/plugins/index.tsx +++ b/src/components/settings/tabs/plugins/index.tsx @@ -261,10 +261,18 @@ export default function PluginSettings() { .sort((a, b) => a.name.localeCompare(b.name)), []); const [searchValue, setSearchValue] = React.useState({ value: "", status: SearchStatus.ALL }); + const [currentPage, setCurrentPage] = React.useState(1); + const pageSize = 36; const search = searchValue.value.toLowerCase(); - const onSearch = (query: string) => setSearchValue(prev => ({ ...prev, value: query })); - const onStatusChange = (status: SearchStatus) => setSearchValue(prev => ({ ...prev, status })); + const onSearch = (query: string) => { + setSearchValue(prev => ({ ...prev, value: query })); + setCurrentPage(1); + }; + const onStatusChange = (status: SearchStatus) => { + setSearchValue(prev => ({ ...prev, status })); + setCurrentPage(1); + }; const pluginFilter = (plugin: typeof Plugins[keyof typeof Plugins]) => { const { status } = searchValue; @@ -469,6 +477,17 @@ export default function PluginSettings() { const enabledStockPlugins = enabledPlugins.filter(p => !PluginMeta[p].userPlugin).length; const enabledUserPlugins = enabledPlugins.filter(p => PluginMeta[p].userPlugin).length; + const paginatedPlugins = plugins.slice( + (currentPage - 1) * pageSize, + currentPage * pageSize + ); + + const totalPages = Math.ceil(plugins.length / pageSize); + + function goToPage(page: number) { + setCurrentPage(Math.max(1, Math.min(page, totalPages))); + } + return ( @@ -518,17 +537,38 @@ export default function PluginSettings() { {plugins.length || requiredPlugins.length ? ( -
- {plugins.length - ? plugins - : No plugins meet the search criteria. - } -
+ <> +
+ {paginatedPlugins.length + ? paginatedPlugins + : No plugins meet the search criteria. + } +
+ + {totalPages > 1 && ( +
+ + {`Page ${currentPage} of ${totalPages}`} + +
+ )} + ) : } - diff --git a/src/components/settings/tabs/plugins/styles.css b/src/components/settings/tabs/plugins/styles.css index b6de7d517..8266b39c8 100644 --- a/src/components/settings/tabs/plugins/styles.css +++ b/src/components/settings/tabs/plugins/styles.css @@ -279,3 +279,11 @@ flex-direction: column; gap: 1.25em; } + +.vc-plugins-page-buttons { + margin-top: 12px; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; +} \ No newline at end of file diff --git a/src/equicordplugins/betterActivities/index.tsx b/src/equicordplugins/betterActivities/index.tsx index 70b641a67..517252596 100644 --- a/src/equicordplugins/betterActivities/index.tsx +++ b/src/equicordplugins/betterActivities/index.tsx @@ -59,5 +59,21 @@ export default definePlugin({ }, predicate: () => settings.store.userPopout }, + { + find: ".SIDEBAR}),nicknameIcons", + replacement: { + match: /(?<=(\i)\.id\)\}\)\),(\i).*?,)\i\?.{0,250}\i\.card\}\)/, + replace: "$self.showAllActivitiesComponent({ activity: $2, user: $1 })" + }, + predicate: () => settings.store.userPopout + }, + { + find: "#{intl::STATUS_MENU_LABEL}", + replacement: { + match: /(?<=,(\i)=.{0,10}\i\.id.{0,150}userId:(\i).*?,)\i\?.{0,250}onClose:\i\}\)/, + replace: "$self.showAllActivitiesComponent({ activity: $1, user: $2 })" + }, + predicate: () => settings.store.userPopout + } ], }); diff --git a/src/equicordplugins/musicControls/settings.tsx b/src/equicordplugins/musicControls/settings.tsx index 6b3c3cae5..4ac213139 100644 --- a/src/equicordplugins/musicControls/settings.tsx +++ b/src/equicordplugins/musicControls/settings.tsx @@ -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, diff --git a/src/equicordplugins/musicControls/styles.css b/src/equicordplugins/musicControls/styles.css index b0a42927f..d8e671fbf 100644 --- a/src/equicordplugins/musicControls/styles.css +++ b/src/equicordplugins/musicControls/styles.css @@ -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; - } } \ No newline at end of file diff --git a/src/equicordplugins/musicControls/tidal/TidalStore.ts b/src/equicordplugins/musicControls/tidal/TidalStore.ts index a5e1b1ec4..37503be81 100644 --- a/src/equicordplugins/musicControls/tidal/TidalStore.ts +++ b/src/equicordplugins/musicControls/tidal/TidalStore.ts @@ -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; diff --git a/src/equicordplugins/musicControls/tidal/lyrics/components/lyrics.tsx b/src/equicordplugins/musicControls/tidal/lyrics/components/lyrics.tsx index a07f270a7..414448927 100644 --- a/src/equicordplugins/musicControls/tidal/lyrics/components/lyrics.tsx +++ b/src/equicordplugins/musicControls/tidal/lyrics/components/lyrics.tsx @@ -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) => ( - - {word.characters.map((char, j) => { - const charActive = position / 1000 >= char.time && position / 1000 < char.endTime; - return ( - - {char.char} - - ); - })} - {wIdx < line.words.length - 1 && } - - )) - ) : SyncMode === "character" && line.characters && line.characters.length > 0 ? ( - line.characters.map((char, j) => { - const charActive = position / 1000 >= char.time && position / 1000 < char.endTime; - return ( - - {char.char} - - ); - }) - ) : SyncMode === "word" && line.words && line.words.length > 0 ? ( - line.words.map((word, j) => { - const wordActive = position / 1000 >= word.time && position / 1000 < word.endTime; - return ( - - {word.word} - - ); - }) - ) : ( - line.text || NoteElement - )} + {line.text || NoteElement} ))} diff --git a/src/equicordplugins/musicControls/tidal/lyrics/components/modal.tsx b/src/equicordplugins/musicControls/tidal/lyrics/components/modal.tsx index 940e24de1..6016bd5b7 100644 --- a/src/equicordplugins/musicControls/tidal/lyrics/components/modal.tsx +++ b/src/equicordplugins/musicControls/tidal/lyrics/components/modal.tsx @@ -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 ( @@ -61,54 +58,7 @@ export function LyricsModal({ rootProps }: { rootProps: ModalProps; }) { onClick={() => TidalStore.seek(line.time * 1000)} > {formatTime(line.time)} - - {SyncMode === "character" && line.characters && line.characters.length > 0 && line.words && line.words.length > 0 ? ( - line.words.map((word, wIdx) => ( - - {word.characters.map((char, j) => { - const charActive = position / 1000 >= char.time && position / 1000 < char.endTime; - return ( - - {char.char} - - ); - })} - {wIdx < line.words.length - 1 && } - - )) - ) : SyncMode === "character" && line.characters && line.characters.length > 0 ? ( - line.characters.map((char, j) => { - const charActive = position / 1000 >= char.time && position / 1000 < char.endTime; - return ( - - {char.char} - - ); - }) - ) : SyncMode === "word" && line.words && line.words.length > 0 ? ( - line.words.map((word, j) => { - const wordActive = position / 1000 >= word.time && position / 1000 < word.endTime; - return ( - - {word.word} - - ); - }) - ) : ( - line.text || NoteSvg(cl("modal-note")) - )} + {line.text || NoteSvg(cl("modal-note"))} )) ) : (