implement new lyrics

Author: SuspiciousLookingOwl

src/apps/app/views/lyrics/lyrics.view.tsx

@@ -1,8 +1,7 @@
 import { useApp } from "@app/providers";
-import { Container, Icon, Spinner } from "@common";
-import { useQueue } from "@queue";
-import { useLyrics } from "@youtube";
-import { For, Match, Switch, createMemo, onMount, type Component } from "solid-js";
+import { Container, Icon, Spinner, useTimedText } from "@common";
+import { LyricsUtil, useLyrics, useQueue } from "@queue";
+import { For, Match, Switch, createEffect, onMount, type Component } from "solid-js";
 import "./lyrics.style.css";
 
 const LyricsNotFound: Component = () => {
@@ -24,54 +23,108 @@ const Loading: Component = () => {
 
 export const Lyrics: Component = () => {
 	let container!: HTMLDivElement;
-	const queue = useQueue()!;
 	const app = useApp()!;
-	const currentId = createMemo(() => queue.data.nowPlaying?.mediaSource.playedYoutubeVideoId || "");
-	const lyrics = useLyrics(currentId);
-	// let initialScroll = true;
-	// let lastScrollTime = 0;
+	const queue = useQueue()!;
+	const lyrics = useLyrics();
+	const timedText = useTimedText(() => {
+		const lyrics = syncedLyrics();
+		return {
+			elapsed: queue.data.position / 1000,
+			timedTexts: lyrics || [],
+		};
+	});
 
 	onMount(() => app.setTitle("Lyrics"));
 
-	// createEffect(() => {
-	// 	if (timedText.index() === -1 && container) {
-	// 		container.scrollTop = 0;
-	// 	} else {
-	// 		if (Date.now() - lastScrollTime < 3000) return;
-	// 		const index = timedText.index();
-	// 		if (initialScroll) {
-	// 			setTimeout(() => scrollTo(index), 200);
-	// 			initialScroll = false;
-	// 		} else {
-	// 			scrollTo(index);
-	// 		}
-	// 	}
-	// });
-
-	// const scrollTo = (index: number) => {
-	// 	const element = container?.childNodes[index] as HTMLDivElement;
-	// 	if (!element) return;
-	// 	container.scrollTop = element.offsetTop - container.offsetHeight / 2.5 + element.offsetHeight / 2;
-	// };
-
-	// const onContainerScrollHandler = () => {
-	// 	lastScrollTime = Date.now();
-	// };
+	let initialScroll = true;
+	let lastScrollTime = 0;
+
+	const syncedLyrics = () => {
+		const nowPlaying = queue.data.nowPlaying;
+		if (!nowPlaying) return null;
+
+		const lyricsOptions = lyrics.data();
+		if (!lyricsOptions?.length) return null;
+
+		const bestMatch = lyricsOptions
+			.sort((a, b) => {
+				const aDiff = Math.abs(a.duration - nowPlaying.mediaSource.duration);
+				const bDiff = Math.abs(b.duration - nowPlaying.mediaSource.duration);
+				return aDiff - bDiff;
+			})
+			.at(0)?.synced;
+
+		return bestMatch ? LyricsUtil.parse(bestMatch).synced : null;
+	};
+
+	const normalLyrics = () => {
+		const nowPlaying = queue.data.nowPlaying;
+		if (!nowPlaying) return null;
+
+		const lyricsOptions = lyrics.data();
+		if (!lyricsOptions?.length) return null;
+
+		const unsyncedLyrics = lyricsOptions.find((l) => l.unsynced);
+		if (unsyncedLyrics?.unsynced) {
+			return {
+				content: unsyncedLyrics.unsynced,
+				description: unsyncedLyrics.source,
+			};
+		}
+
+		const synced = lyricsOptions.find((l) => l.synced);
+		if (synced?.synced) {
+			return {
+				content:
+					LyricsUtil.parse(synced.synced)
+						.synced?.map((s) => s.text)
+						.join("\n") || "",
+				description: synced.source,
+			};
+		}
+
+		return null;
+	};
+
+	createEffect(() => {
+		if (timedText.index() === -1 && container) {
+			container.scrollTop = 0;
+		} else {
+			if (Date.now() - lastScrollTime < 3000) return;
+			const index = timedText.index();
+			if (initialScroll) {
+				setTimeout(() => scrollTo(index), 200);
+				initialScroll = false;
+			} else {
+				scrollTo(index);
+			}
+		}
+	});
+
+	const scrollTo = (index: number) => {
+		const element = container?.childNodes[index] as HTMLDivElement;
+		if (!element) return;
+		container.scrollTop = element.offsetTop - container.offsetHeight / 2.5 + element.offsetHeight / 2;
+	};
+
+	const onContainerScrollHandler = () => {
+		lastScrollTime = Date.now();
+	};
 
 	return (
 		<Container
 			size="full"
 			extraClass="h-full flex flex-col items-center space-y-2.5"
 			centered
 			ref={container}
-			// onScroll={onContainerScrollHandler}
+			onScroll={onContainerScrollHandler}
 		>
 			<Switch fallback={<LyricsNotFound />}>
 				<Match when={lyrics.data.loading}>
 					<Loading />
 				</Match>
-				{/* <Match when={videoTranscripts.data().length}>
-					<For each={videoTranscripts.data()}>
+				<Match when={syncedLyrics()} keyed>
+					<For each={syncedLyrics()}>
 						{(t, i) => (
 							<div
 								class="space-y-1 py-2 text"
@@ -84,12 +137,12 @@ export const Lyrics: Component = () => {
 									"font-semibold text-2xl md:text-3xl !text-neutral-100": i() === timedText.index(),
 								}}
 							>
-								<For each={t.texts}>{(text) => <div>{text}</div>}</For>
+								<div>{t.text}</div>
 							</div>
 						)}
 					</For>
-				</Match> */}
-				<Match when={lyrics.data()} keyed>
+				</Match>
+				<Match when={normalLyrics()} keyed>
 					{({ content, description }) => (
 						<>
 							<For each={content.split(/\r?\n/)}>

src/libs/common/hooks/timed-text.hook.ts

@@ -1,9 +1,9 @@
 import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js";
 
 export type TimedText = {
-	texts: string[];
-	start: number;
-	end: number;
+	text: string;
+	startTime: number;
+	endTime?: number;
 };
 
 type Params = {
@@ -25,22 +25,25 @@ export const useTimedText = (params: Accessor<Params>) => {
 
 		const indexes = [];
 		for (const [i, t] of data.entries()) {
-			if (t.start <= elapsed && t.end >= elapsed) indexes.push(i);
+			if (t.startTime <= elapsed && (!t.endTime || t.endTime >= elapsed)) indexes.push(i);
 		}
 
-		let index = indexes.length > 1 ? indexes[indexes.length - 1] : data.findIndex((t) => elapsed <= t.end);
+		let index =
+			indexes.length > 1
+				? indexes[indexes.length - 1]
+				: data.findIndex((t) => elapsed <= (t.endTime ?? Infinity));
 		const timedText = data.at(index);
 		if (!timedText) return;
 
 		let delay = 0;
-		const next = data.at(elapsed >= timedText.start ? index + 1 : index--);
-		if (next) delay = next.start - elapsed;
+		const next = data.at(elapsed >= timedText.startTime ? index + 1 : index--);
+		if (next) delay = next.startTime - elapsed;
 
 		const last = data.at(-1);
-		if (last && elapsed >= last.end) setIndex(data.length - 1);
+		if (last && elapsed >= (last.endTime ?? Infinity)) setIndex(data.length - 1);
 		else setIndex(index);
 
-		if (delay < 1000 && elapsed < data[data.length - 1].end && !last) {
+		if (delay < 5000 && elapsed < (data[data.length - 1].endTime ?? Infinity) && !last) {
 			optimisticUpdateTimeout = setTimeout(() => setIndex((v) => v + 1), delay);
 		}
 	});

src/libs/queue/apis/queue.ts

@@ -101,6 +101,14 @@ export type IChangeAutoplayOptions = Partial<IAutoplayOptions> & {
 	removeExcludedMemberId?: string;
 };
 
+export interface ILyrics {
+	source: string;
+	richSynced: string | null;
+	synced: string | null;
+	unsynced: string | null;
+	duration: number;
+}
+
 export class QueueApi {
 	constructor(private client: AxiosInstance) {}
 
@@ -192,4 +200,10 @@ export class QueueApi {
 	jam = async (queueId: string, count: number): Promise<void> => {
 		await this.client.post(`/queues/${queueId}/jam`, { count: Math.min(count, 5) });
 	};
+
+	lyrics = async (queueId: string): Promise<ILyrics[]> => {
+		const response = await this.client.get(`/queues/${queueId}/lyrics`);
+		if (response.status !== 200) return [];
+		return response.data;
+	};
 }

src/libs/queue/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./lyrics.hook";

src/libs/queue/hooks/lyrics.hook.ts

@@ -0,0 +1,22 @@
+import { useApi } from "@common";
+import { createResource } from "solid-js";
+import { QueueApi } from "../apis";
+import { useQueue } from "../providers";
+
+export const useLyrics = () => {
+	const queue = useQueue()!;
+	const api = useApi();
+	const queueApi = new QueueApi(api.client);
+
+	const [data, { refetch, mutate }] = createResource(
+		() => queue?.data.nowPlaying,
+		(nowPlaying) => (nowPlaying ? queueApi.lyrics(queue.data.voiceChannel.id) : null),
+		{ initialValue: null }
+	);
+
+	return {
+		data,
+		mutate,
+		refetch,
+	};
+};

src/libs/queue/index.ts

@@ -1,4 +1,6 @@
 export * from "./apis";
 export * from "./components";
 export * from "./constants";
+export * from "./hooks";
 export * from "./providers";
+export * from "./utils";

src/libs/queue/providers/queue/hooks/player-position-updater.hook.ts

@@ -12,11 +12,11 @@ export const usePlayerPositionUpdater = ({ queue, setQueue }: Params) => {
 
 	createEffect(() => {
 		clearInterval(tickInterval);
-		if (!queue.isPaused && queue.nowPlaying?.playedAt) tickInterval = setInterval(tick, 1000);
+		if (!queue.isPaused && queue.nowPlaying?.playedAt) tickInterval = setInterval(tick, 250);
 	});
 
 	const tick = () => {
 		const multiplier = (queue.filtersState.timescale.speed || 1) * (queue.filtersState.timescale.rate || 1);
-		setQueue("position", (p) => p + 1000 * multiplier);
+		setQueue("position", (p) => p + 250 * multiplier);
 	};
 };

src/libs/queue/utils/index.ts

@@ -0,0 +1 @@
+export * from "./lyrics.util";

src/libs/queue/utils/lyrics.util.ts

@@ -0,0 +1,61 @@
+// from https://github.com/notigorwastaken/lrclib-api/blob/main/packages/lrclib-api/src/utils.ts
+
+type SyncedLyricLine = {
+	text: string;
+	startTime: number;
+};
+
+type UnsyncedLyricLine = {
+	text: string;
+};
+
+type ParsedLyrics = {
+	synced: SyncedLyricLine[] | null;
+	unsynced: UnsyncedLyricLine[];
+};
+
+export class LyricsUtil {
+	public static parse(lyrics: string): ParsedLyrics {
+		// Preprocess lyrics by removing [tags] (e.g., [artist:Name]) and trimming extra whitespace
+		const lines = lyrics
+			.replace(/\[[a-zA-Z]+:.+\]/g, "") // Removes metadata tags like [artist:Name]
+			.trim()
+			.split("\n"); // Splits the lyrics into an array of lines
+
+		// Regular expressions for matching synced and karaoke timestamps
+		const syncedTimestamp = /\[([0-9:.]+)\]/; // Matches [00:12.34]
+
+		const unsynced: UnsyncedLyricLine[] = []; // Array to store unsynchronized lyrics
+		const synced: SyncedLyricLine[] = []; // Array to store synchronized lyrics
+
+		// Process each line to extract lyrics and timing information
+		lines.forEach((line) => {
+			// Match synchronized lyrics
+			const syncMatch = line.match(syncedTimestamp);
+			if (syncMatch) {
+				const startTime = this.parseTime(syncMatch[1]);
+				const text = line.replace(syncedTimestamp, "").trim();
+				if (text) {
+					synced.push({ text, startTime });
+				}
+			}
+			// Add to unsynchronized lyrics if no timestamps are found
+			else {
+				const text = line.trim();
+				if (text) {
+					unsynced.push({ text });
+				}
+			}
+		});
+
+		return {
+			synced: synced.length > 0 ? synced : null,
+			unsynced,
+		};
+	}
+
+	private static parseTime(time: string): number {
+		const [minutes, seconds] = time.split(":").map(Number);
+		return minutes * 60 + seconds;
+	}
+}

src/libs/youtube/hooks/video-transcript.hook.ts

@@ -19,18 +19,19 @@ export const useVideoTranscript = (videoId: IUseTranscriptProps) => {
 			let text = transcript.text?.replaceAll("♪", "");
 			if (!text.trim()) text = transcript.text;
 
-			const index = formatted.findIndex((t) => t.start === transcript.start && t.end === transcript.end);
+			const index = formatted.findIndex((t) => t.startTime === transcript.start && t.endTime === transcript.end);
 			if (index === -1) {
 				formatted.push({
-					...transcript,
-					texts: [text],
+					startTime: transcript.start,
+					endTime: transcript.end,
+					text,
 				});
-			} else if (!formatted[index].texts.includes(text)) {
-				formatted[index].texts.push(text);
+			} else if (!formatted[index].text.includes(text)) {
+				formatted[index].text += `\n${text}`;
 			}
 		}
 
-		return formatted.sort((a, b) => a.start - b.start);
+		return formatted.sort((a, b) => a.startTime - b.startTime);
 	});
 
 	const isLoading = () => _data.loading;