feat: 关联歌词

app/danmu/controls.tsx

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