sealday/danmu-sim
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 关联歌词

Browse Source
This commit is contained in:
sealday 2024-04-07 04:40:34 +08:00
parent ec1620462d
commit 7c393f0541
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/danmu/controls.tsx
View File

@ -1,6 +1,7 @@
"use client"; "use client";
import { useRef, useState, useEffect } from "react"; import { useRef, useState, useEffect, useContext } from "react";
import { query } from "@/lib/actions/lyrics"; import { query } from "@/lib/actions/lyrics";
import { DanmuContext } from "./provider";
const useLyricsRunner = (runner: (lyric: string) => void, interval: number) => { const useLyricsRunner = (runner: (lyric: string) => void, interval: number) => {
const [lyrics, setLyrics] = useState<string[]>([]); const [lyrics, setLyrics] = useState<string[]>([]);
@ -70,13 +71,14 @@ interface LyricItem {
export default function Controls(): JSX.Element { export default function Controls(): JSX.Element {
const ref = useRef<HTMLDialogElement | null>(null); const ref = useRef<HTMLDialogElement | null>(null);
const [history, setHistory] = useState<LyricItem[]>([]); const [history, setHistory] = useState<LyricItem[]>([]);
const { songId, songName, songArtist } = useContext(DanmuContext);
const { start, resume, pause, setLyrics, offset, setOffset } = const { start, resume, pause, setLyrics, offset, setOffset } =
useLyricsRunner((line) => { useLyricsRunner((line) => {
setHistory((items) => [ setHistory((items) => [
{ {
content: line.slice(0, 10), timestamp: line.slice(0, 10),
timestamp: line.slice(10), content: line.slice(10),
}, },
...items, ...items,
]); ]);
@ -128,7 +130,8 @@ export default function Controls(): JSX.Element {
className="btn join-item btn-sm" className="btn join-item btn-sm"
onClick={() => { onClick={() => {
query({ query({
name: "音乐弹幕", name: songName,
artist: songArtist,
}) })
.then((result) => { .then((result) => {
// eslint-disable-next-line no-console -- temp // eslint-disable-next-line no-console -- temp
@ -146,6 +149,7 @@ export default function Controls(): JSX.Element {
}); });
}} }}
type="button" type="button"
disabled={!songId}
> >
开始 开始
</button> </button>
@ -161,8 +165,8 @@ export default function Controls(): JSX.Element {
<ul className="timeline timeline-vertical"> <ul className="timeline timeline-vertical">
{history.map((item, i) => ( {history.map((item, i) => (
<li key={i}> <li key={i}>
<div className="timeline-start">{item.timestamp}</div> <div className="timeline-middle">{item.timestamp}{item.content}</div>
<div className="timeline-middle"> {/* <div className="timeline-end">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@ -175,8 +179,7 @@ export default function Controls(): JSX.Element {
clipRule="evenodd" clipRule="evenodd"
/> />
</svg> </svg>
</div> </div> */}
<div className="timeline-end timeline-box">{item.content}</div>
<hr /> <hr />
</li> </li>
))} ))}