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

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

18
src/renderer/features/lyrics/synchronized-lyrics.tsx
View file

@ -15,10 +15,10 @@ import styled from 'styled-components';
const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
const SynchronizedLyricsContainer = styled.div`
const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
display: flex;
flex-direction: column;
gap: 2rem;
gap: ${(props) => props.$gap || 5}px;
width: 100%;
height: 100%;
padding: 10vh 0 6vh;
@ -146,7 +146,8 @@ export const SynchronizedLyrics = ({
'sychronized-lyrics-scroll-container',
) as HTMLElement;
const currentLyric = document.querySelector(`#lyric-${index}`) as HTMLElement;
const offsetTop = currentLyric.offsetTop - doc.clientHeight / 2 ?? 0;
// eslint-disable-next-line no-unsafe-optional-chaining
const offsetTop = currentLyric?.offsetTop - doc?.clientHeight / 2 ?? 0;
if (currentLyric === null) {
lyricRef.current = undefined;
@ -295,27 +296,34 @@ export const SynchronizedLyrics = ({
return (
<SynchronizedLyricsContainer
$gap={settings.gap}
className="synchronized-lyrics overlay-scrollbar"
id="sychronized-lyrics-scroll-container"
onMouseEnter={showScrollbar}
onMouseLeave={hideScrollbar}
>
{source && (
{settings.showProvider && source && (
<LyricLine
alignment={settings.alignment}
className="lyric-credit"
fontSize={settings.fontSize}
text={`Provided by ${source}`}
/>
)}
{remote && (
{settings.showMatch && remote && (
<LyricLine
alignment={settings.alignment}
className="lyric-credit"
fontSize={settings.fontSize}
text={`"${name} by ${artist}"`}
/>
)}
{lyrics.map(([, text], idx) => (
<LyricLine
key={idx}
alignment={settings.alignment}
className="lyric-line synchronized"
fontSize={settings.fontSize}
id={`lyric-${idx}`}
text={text}
/>