Improved lyric syncing, fetch

- uses a somewhat more sane way to parse lyrics and teardown timeouts
- adds 'seeked' to setCurrentTime to make detecting seeks in lyric much easier
- adds ability to fetch lyrics from genius/netease (desktop only)

src/renderer/features/player/components/playerbar.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 import isElectron from 'is-electron';
 import styled from 'styled-components';
 import { useSettingsStore } from '/@/renderer/store/settings.store';
@@ -16,6 +16,7 @@ import {
 import { CenterControls } from './center-controls';
 import { LeftControls } from './left-controls';
 import { RightControls } from './right-controls';
+import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
 
 const PlayerbarContainer = styled.div`
   width: 100%;
@@ -56,7 +57,7 @@ const utils = isElectron() ? window.electron.utils : null;
 const mpris = isElectron() && utils?.isLinux() ? window.electron.mpris : null;
 
 export const Playerbar = () => {
-  const playersRef = useRef<any>();
+  const playersRef = PlayersRef;
   const settings = useSettingsStore((state) => state.playback);
   const volume = useVolume();
   const player1 = usePlayer1Data();

src/renderer/features/player/hooks/use-center-controls.ts

@@ -60,8 +60,12 @@ export const useCenterControls = (args: { playersRef: any }) => {
 
   const resetNextPlayer = useCallback(() => {
     currentPlayerRef.getInternalPlayer().volume = 0.1;
-    nextPlayerRef.getInternalPlayer().currentTime = 0;
-    nextPlayerRef.getInternalPlayer().pause();
+
+    const nextPlayer = nextPlayerRef.getInternalPlayer();
+    if (nextPlayer) {
+      nextPlayer.currentTime = 0;
+      nextPlayer.pause();
+    }
   }, [currentPlayerRef, nextPlayerRef]);
 
   const stopPlayback = useCallback(() => {
@@ -380,7 +384,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
 
     // Reset the current track more than 10 seconds have elapsed
     if (currentTime >= 10) {
-      setCurrentTime(0);
+      setCurrentTime(0, true);
       handleScrobbleFromSongRestart(currentTime);
       mpris?.updateSeek(0);
       if (isMpvPlayer) {
@@ -509,7 +513,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
 
     const evaluatedTime = currentTime - seconds;
     const newTime = evaluatedTime < 0 ? 0 : evaluatedTime;
-    setCurrentTime(newTime);
+    setCurrentTime(newTime, true);
     mpris?.updateSeek(newTime);
 
     if (isMpvPlayer) {
@@ -529,7 +533,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
       const newTime = currentTime + seconds;
       mpvPlayer.seek(seconds);
       mpris?.updateSeek(newTime);
-      setCurrentTime(newTime);
+      setCurrentTime(newTime, true);
     } else {
       const checkNewTime = currentTime + seconds;
       const songDuration = currentPlayerRef.player.player.duration;
@@ -538,7 +542,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
       mpris?.updateSeek(newTime);
 
       resetNextPlayer();
-      setCurrentTime(newTime);
+      setCurrentTime(newTime, true);
       currentPlayerRef.seekTo(newTime);
     }
   };
@@ -553,7 +557,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
 
   const handleSeekSlider = useCallback(
     (e: number | any) => {
-      setCurrentTime(e);
+      setCurrentTime(e, true);
       handleScrobbleFromSeek(e);
       debouncedSeek(e);
 

src/renderer/features/player/ref/players-ref.tsx

@@ -0,0 +1,3 @@
+import { createRef } from 'react';
+
+export const PlayersRef = createRef<any>();