diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index b3887e78f..192d3ea6f 100644 --- a/src/i18n/locales/en.json +++ b/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", diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx index ec5532af4..7cf3ea41a 100644 --- a/src/renderer/features/player/components/right-controls.tsx +++ b/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 = () => { + @@ -147,6 +151,40 @@ const QueueButton = () => { return ; }; +const LyricsButton = () => { + const setFullScreenPlayerStore = useSetFullScreenPlayerStore(); + const activeTab = useFullScreenPlayerStore((state) => state.activeTab); + + const { setStore } = useFullScreenPlayerStoreActions(); + const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore(); + + const expandFullScreenPlayer = () => { + setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded }); + }; + + return ( + { + 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(); diff --git a/src/shared/components/icon/icon.tsx b/src/shared/components/icon/icon.tsx index 405917409..4c68c3c6d 100644 --- a/src/shared/components/icon/icon.tsx +++ b/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,