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/settings/components/playback/lyric-settings.tsx

@@ -0,0 +1,88 @@
+import { Switch } from '@mantine/core';
+import {
+  SettingOption,
+  SettingsSection,
+} from '/@/renderer/features/settings/components/settings-section';
+import { useLyricsSettings, useSettingsStoreActions } from '/@/renderer/store';
+import { MultiSelect, MultiSelectProps } from '/@/renderer/components';
+import isElectron from 'is-electron';
+import styled from 'styled-components';
+import { LyricSource } from '/@/renderer/types';
+
+const localSettings = isElectron() ? window.electron.localSettings : null;
+
+const WorkingButtonSelect = styled(MultiSelect)<MultiSelectProps>`
+  & button {
+    padding: 0;
+  }
+`;
+
+export const LyricSettings = () => {
+  const settings = useLyricsSettings();
+  const { setSettings } = useSettingsStoreActions();
+
+  const lyricOptions: SettingOption[] = [
+    {
+      control: (
+        <Switch
+          aria-label="Follow lyrics"
+          defaultChecked={settings.follow}
+          onChange={(e) => {
+            setSettings({
+              lyrics: {
+                ...settings,
+                follow: e.currentTarget.checked,
+              },
+            });
+          }}
+        />
+      ),
+      description: 'Enable or disable following of current lyric',
+      title: 'Follow current lyric',
+    },
+    {
+      control: (
+        <Switch
+          aria-label="Enable fetching lyrics"
+          defaultChecked={settings.fetch}
+          onChange={(e) => {
+            setSettings({
+              lyrics: {
+                ...settings,
+                fetch: e.currentTarget.checked,
+              },
+            });
+          }}
+        />
+      ),
+      description: 'Enable or disable fetching lyrics for the current song',
+      isHidden: !isElectron(),
+      title: 'Fetch lyrics from the internet',
+    },
+    {
+      control: (
+        <WorkingButtonSelect
+          clearable
+          aria-label="Lyric providers"
+          data={Object.values(LyricSource)}
+          defaultValue={settings.sources}
+          width={300}
+          onChange={(e: LyricSource[]) => {
+            localSettings?.set('lyrics', e);
+            setSettings({
+              lyrics: {
+                ...settings,
+                sources: e,
+              },
+            });
+          }}
+        />
+      ),
+      description: 'List of lyric fetchers (in order of preference)',
+      isHidden: !isElectron(),
+      title: 'Providers to fetch music',
+    },
+  ];
+
+  return <SettingsSection options={lyricOptions} />;
+};

src/renderer/features/settings/components/playback/playback-tab.tsx

@@ -3,6 +3,7 @@ import { Divider, Stack } from '@mantine/core';
 import { AudioSettings } from '/@/renderer/features/settings/components/playback/audio-settings';
 import { ScrobbleSettings } from '/@/renderer/features/settings/components/playback/scrobble-settings';
 import isElectron from 'is-electron';
+import { LyricSettings } from '/@/renderer/features/settings/components/playback/lyric-settings';
 
 const MpvSettings = lazy(() =>
   import('/@/renderer/features/settings/components/playback/mpv-settings').then((module) => {
@@ -17,6 +18,8 @@ export const PlaybackTab = () => {
       <Suspense fallback={<></>}>{isElectron() && <MpvSettings />}</Suspense>
       <Divider />
       <ScrobbleSettings />
+      <Divider />
+      <LyricSettings />
     </Stack>
   );
 };