Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | "use client";
/**
* Abaci adapter for the shared Tidepool karaoke package.
*
* Abaci owns the immutable alignment fetch and query cache; the package owns
* playback, synchronization, seeking, variants, and presentation. Keeping
* this adapter preserves the existing app-facing API while removing the local
* player implementation.
*/
import {
KaraokePlayer,
type KaraokePlayerProps,
type SongLyricsSection,
} from "@tidepool/karaoke-player";
import { useSongAlignment } from "@/hooks/useSongAlignment";
export type SyncedLyricsVariant = NonNullable<KaraokePlayerProps["variant"]>;
export interface SyncedLyricsPlayerProps
extends Omit<KaraokePlayerProps, "audioSrc" | "alignment" | "lyrics"> {
audioPath: string;
alignmentPath: string | null;
lyrics: SongLyricsSection[];
}
export function SyncedLyricsPlayer({
audioPath,
alignmentPath,
lyrics,
...props
}: SyncedLyricsPlayerProps) {
const alignmentQuery = useSongAlignment(alignmentPath);
return (
<KaraokePlayer
{...props}
audioSrc={audioPath}
lyrics={lyrics}
alignment={alignmentQuery.data ?? null}
/>
);
}
|