diff --git a/src/app/AppShell.tsx b/src/app/AppShell.tsx index b2ad3404..abad825e 100644 --- a/src/app/AppShell.tsx +++ b/src/app/AppShell.tsx @@ -14,7 +14,7 @@ import DevNetworkModeToggle from '../components/DevNetworkModeToggle'; import NowPlayingDropdown from '../components/NowPlayingDropdown'; import QueuePanel from '../components/QueuePanel'; import AppRoutes from './AppRoutes'; -import FullscreenPlayer from '../components/fullscreenPlayer/FullscreenPlayerStatic'; +import FullscreenPlayer from '@/features/fullscreenPlayer'; import ContextMenu from '../components/ContextMenu'; import SongInfoModal from '../components/SongInfoModal'; import DownloadFolderModal from '../components/DownloadFolderModal'; diff --git a/src/components/fullscreenPlayer/FsClock.test.tsx b/src/features/fullscreenPlayer/components/FsClock.test.tsx similarity index 76% rename from src/components/fullscreenPlayer/FsClock.test.tsx rename to src/features/fullscreenPlayer/components/FsClock.test.tsx index 4c63ba1b..a238b574 100644 --- a/src/components/fullscreenPlayer/FsClock.test.tsx +++ b/src/features/fullscreenPlayer/components/FsClock.test.tsx @@ -1,9 +1,9 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; import { screen } from '@testing-library/react'; -import { renderWithProviders } from '../../test/helpers/renderWithProviders'; -import { resetAuthStore } from '../../test/helpers/storeReset'; -import { useAuthStore } from '../../store/authStore'; -import { FsClock } from './FsClock'; +import { renderWithProviders } from '@/test/helpers/renderWithProviders'; +import { resetAuthStore } from '@/test/helpers/storeReset'; +import { useAuthStore } from '@/store/authStore'; +import { FsClock } from '@/features/fullscreenPlayer/components/FsClock'; describe('FsClock', () => { beforeEach(() => { diff --git a/src/components/fullscreenPlayer/FsClock.tsx b/src/features/fullscreenPlayer/components/FsClock.tsx similarity index 91% rename from src/components/fullscreenPlayer/FsClock.tsx rename to src/features/fullscreenPlayer/components/FsClock.tsx index b4c78aa1..83f9ec6c 100644 --- a/src/components/fullscreenPlayer/FsClock.tsx +++ b/src/features/fullscreenPlayer/components/FsClock.tsx @@ -1,7 +1,7 @@ import { memo, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { useAuthStore } from '../../store/authStore'; -import { formatClockTime } from '../../utils/format/formatClockTime'; +import { useAuthStore } from '@/store/authStore'; +import { formatClockTime } from '@/utils/format/formatClockTime'; /** * Standalone wall-clock for the fullscreen player. Owns its own state so the diff --git a/src/components/fullscreenPlayer/FsLyricsApple.tsx b/src/features/fullscreenPlayer/components/FsLyricsApple.tsx similarity index 92% rename from src/components/fullscreenPlayer/FsLyricsApple.tsx rename to src/features/fullscreenPlayer/components/FsLyricsApple.tsx index a9cf10ce..2a130347 100644 --- a/src/components/fullscreenPlayer/FsLyricsApple.tsx +++ b/src/features/fullscreenPlayer/components/FsLyricsApple.tsx @@ -1,12 +1,12 @@ import React, { memo, useCallback, useEffect, useRef, useState } from 'react'; -import { usePlayerStore } from '../../store/playerStore'; -import { useAuthStore } from '../../store/authStore'; -import { useLyrics, type WordLyricsLine } from '../../hooks/useLyrics'; -import { useWordLyricsSync } from '../../hooks/useWordLyricsSync'; -import { getPlaybackProgressSnapshot, subscribePlaybackProgress } from '../../store/playbackProgress'; -import type { LrcLine } from '../../api/lrclib'; -import type { Track } from '../../store/playerStoreTypes'; -import { EaseScroller, targetForFraction } from '../../utils/ui/easeScroll'; +import { usePlayerStore } from '@/store/playerStore'; +import { useAuthStore } from '@/store/authStore'; +import { useLyrics, type WordLyricsLine } from '@/hooks/useLyrics'; +import { useWordLyricsSync } from '@/hooks/useWordLyricsSync'; +import { getPlaybackProgressSnapshot, subscribePlaybackProgress } from '@/store/playbackProgress'; +import type { LrcLine } from '@/api/lrclib'; +import type { Track } from '@/store/playerStoreTypes'; +import { EaseScroller, targetForFraction } from '@/utils/ui/easeScroll'; // Fullscreen synced lyrics. // Full-screen scrollable list. The active line auto-scrolls following the diff --git a/src/components/fullscreenPlayer/FsPlayBtn.tsx b/src/features/fullscreenPlayer/components/FsPlayBtn.tsx similarity index 84% rename from src/components/fullscreenPlayer/FsPlayBtn.tsx rename to src/features/fullscreenPlayer/components/FsPlayBtn.tsx index b5a770e9..5b42d084 100644 --- a/src/components/fullscreenPlayer/FsPlayBtn.tsx +++ b/src/features/fullscreenPlayer/components/FsPlayBtn.tsx @@ -1,11 +1,11 @@ import React, { memo, useRef } from 'react'; import { Moon, Pause, Play, Sunrise } from 'lucide-react'; import { useTranslation } from 'react-i18next'; -import { usePlayerStore } from '../../store/playerStore'; -import { usePlaybackDelayPress } from '../../hooks/usePlaybackDelayPress'; -import { usePlaybackScheduleRemaining } from '../../utils/format/playbackScheduleFormat'; -import PlaybackDelayModal from '../PlaybackDelayModal'; -import PlaybackScheduleBadge from '../PlaybackScheduleBadge'; +import { usePlayerStore } from '@/store/playerStore'; +import { usePlaybackDelayPress } from '@/hooks/usePlaybackDelayPress'; +import { usePlaybackScheduleRemaining } from '@/utils/format/playbackScheduleFormat'; +import PlaybackDelayModal from '@/components/PlaybackDelayModal'; +import PlaybackScheduleBadge from '@/components/PlaybackScheduleBadge'; // Play/Pause button (isolated — subscribes to isPlaying only). export const FsPlayBtn = memo(function FsPlayBtn({ diff --git a/src/components/fullscreenPlayer/FsQueueModal.tsx b/src/features/fullscreenPlayer/components/FsQueueModal.tsx similarity index 89% rename from src/components/fullscreenPlayer/FsQueueModal.tsx rename to src/features/fullscreenPlayer/components/FsQueueModal.tsx index 3f5b54a3..c3edfe66 100644 --- a/src/components/fullscreenPlayer/FsQueueModal.tsx +++ b/src/features/fullscreenPlayer/components/FsQueueModal.tsx @@ -1,14 +1,14 @@ import { memo, useMemo, useSyncExternalStore } from 'react'; import { useTranslation } from 'react-i18next'; import { X } from 'lucide-react'; -import { usePlayerStore } from '../../store/playerStore'; -import type { Track } from '../../store/playerStoreTypes'; -import { resolveQueueTrack } from '../../utils/library/queueTrackView'; +import { usePlayerStore } from '@/store/playerStore'; +import type { Track } from '@/store/playerStoreTypes'; +import { resolveQueueTrack } from '@/utils/library/queueTrackView'; import { getQueueResolverVersion, subscribeQueueResolver, -} from '../../utils/library/queueTrackResolver'; -import { formatTrackTime } from '../../utils/format/formatDuration'; +} from '@/utils/library/queueTrackResolver'; +import { formatTrackTime } from '@/utils/format/formatDuration'; interface Props { onClose: () => void; diff --git a/src/components/fullscreenPlayer/FsTimeReadout.tsx b/src/features/fullscreenPlayer/components/FsTimeReadout.tsx similarity index 88% rename from src/components/fullscreenPlayer/FsTimeReadout.tsx rename to src/features/fullscreenPlayer/components/FsTimeReadout.tsx index 7c28a448..4f9d8af1 100644 --- a/src/components/fullscreenPlayer/FsTimeReadout.tsx +++ b/src/features/fullscreenPlayer/components/FsTimeReadout.tsx @@ -1,6 +1,6 @@ import { memo, useEffect, useRef } from 'react'; -import { getPlaybackProgressSnapshot, subscribePlaybackProgress } from '../../store/playbackProgress'; -import { formatTrackTime } from '../../utils/format/formatDuration'; +import { getPlaybackProgressSnapshot, subscribePlaybackProgress } from '@/store/playbackProgress'; +import { formatTrackTime } from '@/utils/format/formatDuration'; /** * Centered "current / total" readout for the control bar. Updates the current diff --git a/src/components/fullscreenPlayer/FullscreenPlayerStatic.tsx b/src/features/fullscreenPlayer/components/FullscreenPlayerStatic.tsx similarity index 92% rename from src/components/fullscreenPlayer/FullscreenPlayerStatic.tsx rename to src/features/fullscreenPlayer/components/FullscreenPlayerStatic.tsx index 5af854e7..618cde39 100644 --- a/src/components/fullscreenPlayer/FullscreenPlayerStatic.tsx +++ b/src/features/fullscreenPlayer/components/FullscreenPlayerStatic.tsx @@ -4,22 +4,22 @@ import { Shuffle, ListMusic, ChevronDown, Star, MicVocal, } from 'lucide-react'; import { useTranslation } from 'react-i18next'; -import { usePlayerStore } from '../../store/playerStore'; -import { queueSongStar, queueSongRating } from '../../store/pendingStarSync'; -import { useAlbumCoverRef, useArtistCoverRef } from '../../cover/useLibraryCoverRef'; -import { usePlaybackCoverArt } from '../../hooks/usePlaybackCoverArt'; +import { usePlayerStore } from '@/store/playerStore'; +import { queueSongStar, queueSongRating } from '@/store/pendingStarSync'; +import { useAlbumCoverRef, useArtistCoverRef } from '@/cover/useLibraryCoverRef'; +import { usePlaybackCoverArt } from '@/hooks/usePlaybackCoverArt'; import { useCachedUrl } from '@/ui/CachedImage'; -import { useArtistFanart } from '../../cover/useArtistFanart'; -import { backdropFromConfig } from '../../cover/artistBackdrop'; -import { useThemeStore } from '../../store/themeStore'; -import { useFsIdleFade } from '../../hooks/useFsIdleFade'; -import { useQueueTrackAt } from '../../hooks/useQueueTracks'; +import { useArtistFanart } from '@/cover/useArtistFanart'; +import { backdropFromConfig } from '@/cover/artistBackdrop'; +import { useThemeStore } from '@/store/themeStore'; +import { useFsIdleFade } from '@/hooks/useFsIdleFade'; +import { useQueueTrackAt } from '@/hooks/useQueueTracks'; import { WaveformSeek } from '@/features/waveform'; -import { FsQueueModal } from './FsQueueModal'; -import { FsLyricsApple } from './FsLyricsApple'; -import { FsPlayBtn } from './FsPlayBtn'; -import { FsClock } from './FsClock'; -import { FsTimeReadout } from './FsTimeReadout'; +import { FsQueueModal } from '@/features/fullscreenPlayer/components/FsQueueModal'; +import { FsLyricsApple } from '@/features/fullscreenPlayer/components/FsLyricsApple'; +import { FsPlayBtn } from '@/features/fullscreenPlayer/components/FsPlayBtn'; +import { FsClock } from '@/features/fullscreenPlayer/components/FsClock'; +import { FsTimeReadout } from '@/features/fullscreenPlayer/components/FsTimeReadout'; interface Props { onClose: () => void; diff --git a/src/features/fullscreenPlayer/index.ts b/src/features/fullscreenPlayer/index.ts new file mode 100644 index 00000000..6c5b4f80 --- /dev/null +++ b/src/features/fullscreenPlayer/index.ts @@ -0,0 +1,9 @@ +/** + * Fullscreen player feature — the immersive full-window now-playing view + * (artwork, Apple-style synced lyrics, clock, transport, queue modal) rendered + * by the app shell. Its sub-components (Fs*) are internal. + * + * Note: `hooks/useWindowFullscreenState` is NOT part of this feature — it tracks + * the OS window's fullscreen state (app-shell concern), not this player view. + */ +export { default } from './components/FullscreenPlayerStatic';