Fix song index skip when viewing synchronized lyrics

This commit is contained in:
jeffvli 2024-09-03 21:51:18 -07:00
parent 4a8cd63046
commit 2e3c69e61c

View file

@ -1,11 +1,13 @@
import { useCallback, useEffect, useRef } from 'react'; import { useCallback, useEffect, useRef } from 'react';
import { import {
useCurrentPlayer,
useCurrentStatus, useCurrentStatus,
useCurrentTime, useCurrentTime,
useLyricsSettings, useLyricsSettings,
usePlaybackType, usePlaybackType,
usePlayerData, usePlayerData,
useSeeked, useSeeked,
useSetCurrentTime,
} from '/@/renderer/store'; } from '/@/renderer/store';
import { PlaybackType, PlayerStatus } from '/@/renderer/types'; import { PlaybackType, PlayerStatus } from '/@/renderer/types';
import { LyricLine } from '/@/renderer/features/lyrics/lyric-line'; import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
@ -13,9 +15,11 @@ import isElectron from 'is-electron';
import { PlayersRef } from '/@/renderer/features/player/ref/players-ref'; import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
import { FullLyricsMetadata, SynchronizedLyricsArray } from '/@/renderer/api/types'; import { FullLyricsMetadata, SynchronizedLyricsArray } from '/@/renderer/api/types';
import styled from 'styled-components'; import styled from 'styled-components';
import { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls'; import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null; const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
const utils = isElectron() ? window.electron.utils : null;
const mpris = isElectron() && utils?.isLinux() ? window.electron.mpris : null;
const SynchronizedLyricsContainer = styled.div<{ $gap: number }>` const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
display: flex; display: flex;
@ -66,7 +70,25 @@ export const SynchronizedLyrics = ({
const playerData = usePlayerData(); const playerData = usePlayerData();
const now = useCurrentTime(); const now = useCurrentTime();
const settings = useLyricsSettings(); const settings = useLyricsSettings();
const centerControls = useCenterControls({ playersRef }); const currentPlayer = useCurrentPlayer();
const currentPlayerRef =
currentPlayer === 1 ? playersRef.current?.player1 : playersRef.current?.player2;
const setCurrentTime = useSetCurrentTime();
const { handleScrobbleFromSeek } = useScrobble();
const handleSeek = useCallback(
(time: number) => {
if (playbackType === PlaybackType.LOCAL && mpvPlayer) {
mpvPlayer.seekTo(time);
} else {
setCurrentTime(time, true);
handleScrobbleFromSeek(time);
mpris?.updateSeek(time);
currentPlayerRef?.seekTo(time);
}
},
[currentPlayerRef, handleScrobbleFromSeek, playbackType, setCurrentTime],
);
const seeked = useSeeked(); const seeked = useSeeked();
@ -349,7 +371,7 @@ export const SynchronizedLyrics = ({
fontSize={settings.fontSize} fontSize={settings.fontSize}
id={`lyric-${idx}`} id={`lyric-${idx}`}
text={text} text={text}
onClick={() => centerControls.handleSeekSlider(time / 1000)} onClick={() => handleSeek(time / 1000)}
/> />
))} ))}
</SynchronizedLyricsContainer> </SynchronizedLyricsContainer>