antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 02:43:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Lint all files

Browse source
This commit is contained in:
jeffvli 2023-07-01 19:10:05 -07:00
parent 22af76b4d6
commit 30e52ebb54
334 changed files with 76519 additions and 75932 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/renderer/features/lyrics/unsynchronized-lyrics.tsx
View file

@ -4,65 +4,65 @@ import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
import { FullLyricsMetadata } from '/@/renderer/api/types';
interface UnsynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
lyrics: string;
lyrics: string;
}
const UnsynchronizedLyricsContainer = styled.div`
display: flex;
flex-direction: column;
gap: 2rem;
width: 100%;
height: 100%;
padding: 10vh 0 6vh;
overflow: scroll;
transform: translateY(-2rem);
display: flex;
flex-direction: column;
gap: 2rem;
width: 100%;
height: 100%;
padding: 10vh 0 6vh;
overflow: scroll;
transform: translateY(-2rem);
mask-image: linear-gradient(
180deg,
transparent 5%,
rgba(0, 0, 0, 100%) 20%,
rgba(0, 0, 0, 100%) 85%,
transparent 95%
);
mask-image: linear-gradient(
180deg,
transparent 5%,
rgba(0, 0, 0, 100%) 20%,
rgba(0, 0, 0, 100%) 85%,
transparent 95%
);
@media screen and (max-width: 768px) {
padding: 5vh 0;
}
@media screen and (max-width: 768px) {
padding: 5vh 0;
}
`;
export const UnsynchronizedLyrics = ({
artist,
lyrics,
name,
remote,
source,
artist,
lyrics,
name,
remote,
source,
}: UnsynchronizedLyricsProps) => {
const lines = useMemo(() => {
return lyrics.split('\n');
}, [lyrics]);
const lines = useMemo(() => {
return lyrics.split('\n');
}, [lyrics]);
return (
<UnsynchronizedLyricsContainer className="unsynchronized-lyrics">
{source && (
<LyricLine
className="lyric-credit"
text={`Provided by ${source}`}
/>
)}
{remote && (
<LyricLine
className="lyric-credit"
text={`"${name} by ${artist}"`}
/>
)}
{lines.map((text, idx) => (
<LyricLine
key={idx}
className="lyric-line"
id={`lyric-${idx}`}
text={text}
/>
))}
</UnsynchronizedLyricsContainer>
);
return (
<UnsynchronizedLyricsContainer className="unsynchronized-lyrics">
{source && (
<LyricLine
className="lyric-credit"
text={`Provided by ${source}`}
/>
)}
{remote && (
<LyricLine
className="lyric-credit"
text={`"${name} by ${artist}"`}
/>
)}
{lines.map((text, idx) => (
<LyricLine
key={idx}
className="lyric-line"
id={`lyric-${idx}`}
text={text}
/>
))}
</UnsynchronizedLyricsContainer>
);
};