Add Lyrics button to right-controls. (#1363)

* Add Microphone icon to right-controls to show/hide lyrics.

src/i18n/locales/en.json

@@ -562,6 +562,7 @@
         "addNextShuffled": "add next (shuffled)",
         "holdToShuffle": "hold to shuffle",
         "favorite": "favorite",
+        "lyrics": "lyrics",
         "mute": "mute",
         "muted": "muted",
         "next": "next",

src/renderer/features/player/components/right-controls.tsx

@@ -13,16 +13,19 @@ import {
     useAppStoreActions,
     useAutoDJSettings,
     useCurrentServer,
+    useFullScreenPlayerStore,
     useGeneralSettings,
     useHotkeySettings,
     usePlayerData,
     usePlayerMuted,
     usePlayerSong,
     usePlayerVolume,
+    useSetFullScreenPlayerStore,
     useSettingsStore,
     useSettingsStoreActions,
     useSidebarRightExpanded,
 } from '/@/renderer/store';
+import { useFullScreenPlayerStoreActions } from '/@/renderer/store/full-screen-player.store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Button } from '/@/shared/components/button/button';
 import { Flex } from '/@/shared/components/flex/flex';
@@ -66,6 +69,7 @@ export const RightControls = () => {
             </Group>
             <Group align="center" gap="xs" wrap="nowrap">
                 <PlayerConfig />
+                <LyricsButton />
                 <FavoriteButton />
                 <QueueButton />
                 <VolumeButton />
@@ -147,6 +151,40 @@ const QueueButton = () => {
     return <PopoverPlayQueue />;
 };
 
+const LyricsButton = () => {
+    const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
+    const activeTab = useFullScreenPlayerStore((state) => state.activeTab);
+
+    const { setStore } = useFullScreenPlayerStoreActions();
+    const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
+
+    const expandFullScreenPlayer = () => {
+        setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
+    };
+
+    return (
+        <ActionIcon
+            icon="microphone"
+            iconProps={{
+                color: activeTab === 'lyrics' && isFullScreenPlayerExpanded ? 'primary' : undefined,
+                size: 'lg',
+            }}
+            onClick={(e) => {
+                e.stopPropagation();
+                if (!isFullScreenPlayerExpanded) setStore({ activeTab: 'lyrics' });
+                expandFullScreenPlayer();
+            }}
+            role="button"
+            size="sm"
+            tooltip={{
+                label: t('player.lyrics', { postProcess: 'titleCase' }),
+                openDelay: 0,
+            }}
+            variant="subtle"
+        />
+    );
+};
+
 const FavoriteButton = () => {
     const currentSong = usePlayerSong();
     const { bindings } = useHotkeySettings();

src/shared/components/icon/icon.tsx

@@ -68,6 +68,7 @@ import {
     LuLogIn,
     LuLogOut,
     LuMenu,
+    LuMicVocal,
     LuMinus,
     LuMoon,
     LuMusic,
@@ -194,6 +195,7 @@ export const AppIcon = {
     mediaStop: LuSquare,
     menu: LuMenu,
     metadata: LuBookOpen,
+    microphone: LuMicVocal,
     minus: LuMinus,
     panelRightClose: LuPanelRightClose,
     panelRightOpen: LuPanelRightOpen,