26 lines
1.1 KiB
JavaScript
26 lines
1.1 KiB
JavaScript
import React from "react";
|
|
import { Typography, Paper } from "@mui/material";
|
|
import styles from './RecordLyrics.module.css';
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
|
|
function isHighlight(currentTime, { start, end }) {
|
|
currentTime *= 1000;
|
|
return (currentTime > start) && (currentTime <= end);
|
|
}
|
|
|
|
|
|
|
|
export default function ({ currentLyric, currentTime }) {
|
|
const currentIndex = useSelector(state => state.recorder.currentIndex);
|
|
const recordList = useSelector(state => state.recorder.list);
|
|
|
|
if (recordList.length === 0) return <React.Fragment />;
|
|
|
|
return <Paper className={styles.lyricsBrowser}>
|
|
{recordList.at(currentIndex).type === 1 ? (typeof currentLyric === "object" ? currentLyric.map((lyric, index) => {
|
|
return <div className={styles.lyricItem}>
|
|
<Typography align="left" color={isHighlight(currentTime, lyric) ? "red" : "black"}>{lyric.text}</Typography>
|
|
</div>
|
|
}) : <React.Fragment />) : <div style={{ whiteSpace: "pre-wrap" }}>{typeof currentLyric === "string" ? currentLyric : ""}</div>}
|
|
</Paper>
|
|
} |