mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-02 10:53:33 +00:00
Adjust lyrics styling / animations
This commit is contained in:
parent
7cd2077dcd
commit
5dd860735d
5 changed files with 47 additions and 28 deletions
|
|
@ -11,14 +11,21 @@ import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
|
|||
import isElectron from 'is-electron';
|
||||
import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
|
||||
import { SynchronizedLyricsArray } from '/@/renderer/api/types';
|
||||
import styled from 'styled-components';
|
||||
import { Text } from '/@/renderer/components';
|
||||
|
||||
const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
|
||||
|
||||
const SynchronizedLyricsContainer = styled.div`
|
||||
padding: 3rem 0 10rem;
|
||||
`;
|
||||
|
||||
interface SynchronizedLyricsProps {
|
||||
lyrics: SynchronizedLyricsArray;
|
||||
source: string | null;
|
||||
}
|
||||
|
||||
export const SynchronizedLyrics = ({ lyrics }: SynchronizedLyricsProps) => {
|
||||
export const SynchronizedLyrics = ({ lyrics, source }: SynchronizedLyricsProps) => {
|
||||
const playersRef = PlayersRef;
|
||||
const status = useCurrentStatus();
|
||||
const playerType = usePlayerType();
|
||||
|
|
@ -203,7 +210,8 @@ export const SynchronizedLyrics = ({ lyrics }: SynchronizedLyricsProps) => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div className="synchronized-lyrics">
|
||||
<SynchronizedLyricsContainer className="synchronized-lyrics">
|
||||
{source && <Text $noSelect>Lyrics provided by: {source}</Text>}
|
||||
{lyrics.map(([, text], idx) => (
|
||||
<LyricLine
|
||||
key={idx}
|
||||
|
|
@ -211,6 +219,6 @@ export const SynchronizedLyrics = ({ lyrics }: SynchronizedLyricsProps) => {
|
|||
text={text}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SynchronizedLyricsContainer>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue