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

Add additional lyrics customizability options (#146)

Browse source
This commit is contained in:
jeffvli 2023-08-04 19:32:41 -07:00
parent 72b4a60c7b
commit fca135ce2b
7 changed files with 230 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/renderer/features/lyrics/lyric-line.tsx
View file

@ -1,31 +1,41 @@
import { ComponentPropsWithoutRef } from 'react';
import { TextTitle } from '/@/renderer/components/text-title';
import { TitleProps } from '@mantine/core';
import styled from 'styled-components';
interface LyricLineProps extends ComponentPropsWithoutRef<'div'> {
alignment: 'left' | 'center' | 'right';
fontSize: number;
text: string;
}
const StyledText = styled(TextTitle)`
const StyledText = styled(TextTitle)<TitleProps & { $alignment: string; $fontSize: number }>`
color: var(--main-fg);
font-weight: 400;
font-size: 2.5vmax;
transform: scale(0.95);
text-align: ${(props) => props.$alignment};
font-size: ${(props) => props.$fontSize}px;
opacity: 0.5;
&.active {
font-weight: 800;
transform: scale(1);
opacity: 1;
}
&.active.unsynchronized {
opacity: 0.8;
&.unsynchronized {
opacity: 1;
}
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
`;
export const LyricLine = ({ text, ...props }: LyricLineProps) => {
return <StyledText {...props}>{text}</StyledText>;
export const LyricLine = ({ text, alignment, fontSize, ...props }: LyricLineProps) => {
return (
<StyledText
$alignment={alignment}
$fontSize={fontSize}
{...props}
>
{text}
</StyledText>
);
};