From 24af937e705cdabd614cb508696d4edad207f8ab Mon Sep 17 00:00:00 2001 From: memorydream <34763046+memorydream@users.noreply.github.com> Date: Fri, 15 Apr 2022 00:34:07 +0800 Subject: [PATCH] feat: updates (#1530) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 支持repeat mode切换 * feat: 歌单页面的播放按钮可以暂停 * fix: 专辑页面播放按钮 考虑私人FM的情况 解决按钮闪烁问题 * fix: SvgName报错 * update --- src/renderer/components/Player.tsx | 33 +++++++++++++++---- src/renderer/components/SvgIcon.tsx | 3 +- src/renderer/pages/Album.tsx | 35 ++++++++++---------- src/renderer/pages/Library.tsx | 4 +-- src/renderer/pages/Playlist.tsx | 51 ++++++++++++++++++++++++++--- 5 files changed, 96 insertions(+), 30 deletions(-) diff --git a/src/renderer/components/Player.tsx b/src/renderer/components/Player.tsx index cf60de6..789ec7c 100644 --- a/src/renderer/components/Player.tsx +++ b/src/renderer/components/Player.tsx @@ -10,6 +10,7 @@ import { resizeImage } from '@/renderer/utils/common' import { State as PlayerState, Mode as PlayerMode, + RepeatMode as PlayerRepeatMode, } from '@/renderer/utils/player' const PlayingTrack = () => { @@ -130,25 +131,45 @@ const MediaControls = () => { const Others = () => { const playerSnapshot = useSnapshot(player) - const mode = useMemo(() => playerSnapshot.mode, [playerSnapshot.mode]) + + const switchRepeatMode = () => { + if (playerSnapshot.repeatMode === PlayerRepeatMode.OFF) { + player.repeatMode = PlayerRepeatMode.ON + } else if (playerSnapshot.repeatMode === PlayerRepeatMode.ON) { + player.repeatMode = PlayerRepeatMode.ONE + } else { + player.repeatMode = PlayerRepeatMode.OFF + } + } return (
toast('Work in progress')} - disabled={mode === PlayerMode.FM} + disabled={playerSnapshot.mode === PlayerMode.FM} > toast('施工中...')} - disabled={mode === PlayerMode.FM} + onClick={switchRepeatMode} + disabled={playerSnapshot.mode === PlayerMode.FM} > - + toast('施工中...')} - disabled={mode === PlayerMode.FM} + disabled={playerSnapshot.mode === PlayerMode.FM} > diff --git a/src/renderer/components/SvgIcon.tsx b/src/renderer/components/SvgIcon.tsx index 4552fdf..85c02d2 100644 --- a/src/renderer/components/SvgIcon.tsx +++ b/src/renderer/components/SvgIcon.tsx @@ -1,4 +1,4 @@ -type SvgName = +export type SvgName = | 'back' | 'dislike' | 'dj' @@ -35,6 +35,7 @@ type SvgName = | 'volume-mute' | 'volume' | 'windows-close' + | 'windows-minimize' | 'windows-maximize' | 'windows-un-maximize' | 'x' diff --git a/src/renderer/pages/Album.tsx b/src/renderer/pages/Album.tsx index 0d12320..863f62c 100644 --- a/src/renderer/pages/Album.tsx +++ b/src/renderer/pages/Album.tsx @@ -8,7 +8,11 @@ import TracksAlbum from '@/renderer/components/TracksAlbum' import useAlbum from '@/renderer/hooks/useAlbum' import useArtistAlbums from '@/renderer/hooks/useArtistAlbums' import { player } from '@/renderer/store' -import { State as PlayerState } from '@/renderer/utils/player' +import { + Mode as PlayerMode, + State as PlayerState, + TrackListSourceType, +} from '@/renderer/utils/player' import { formatDate, formatDuration, @@ -27,40 +31,37 @@ const PlayButton = ({ isLoading, }: { album: Album | undefined - isLoading: boolean handlePlay: () => void + isLoading: boolean }) => { const playerSnapshot = useSnapshot(player) - const isPlaying = useMemo( - () => playerSnapshot.state === PlayerState.PLAYING, - [playerSnapshot.state] - ) const isThisAlbumPlaying = useMemo( () => - playerSnapshot.trackListSource?.type === 'album' && + playerSnapshot.mode === PlayerMode.PLAYLIST && + playerSnapshot.trackListSource?.type === TrackListSourceType.ALBUM && playerSnapshot.trackListSource?.id === album?.id, [playerSnapshot.trackListSource, album?.id] ) + const isPlaying = + isThisAlbumPlaying && + [PlayerState.PLAYING, PlayerState.LOADING].includes(playerSnapshot.state) + const wrappedHandlePlay = () => { - if (isPlaying && isThisAlbumPlaying) { - player.pause() - return + if (isThisAlbumPlaying) { + player.playOrPause() + } else { + handlePlay() } - if (!isPlaying && isThisAlbumPlaying) { - player.play() - return - } - handlePlay() } return ( ) } diff --git a/src/renderer/pages/Library.tsx b/src/renderer/pages/Library.tsx index a5efadd..39893a0 100644 --- a/src/renderer/pages/Library.tsx +++ b/src/renderer/pages/Library.tsx @@ -1,5 +1,5 @@ import CoverRow, { Subtitle } from '@/renderer/components/CoverRow' -import SvgIcon from '@/renderer/components/SvgIcon' +import SvgIcon, { SvgName } from '@/renderer/components/SvgIcon' import useUserAlbums from '@/renderer/hooks/useUserAlbums' import useLyric from '@/renderer/hooks/useLyric' import usePlaylist from '@/renderer/hooks/usePlaylist' @@ -105,7 +105,7 @@ const OtherCard = ({ className, }: { name: string - icon: string + icon: SvgName className?: string }) => { return ( diff --git a/src/renderer/pages/Playlist.tsx b/src/renderer/pages/Playlist.tsx index 4cea968..ab76a4a 100644 --- a/src/renderer/pages/Playlist.tsx +++ b/src/renderer/pages/Playlist.tsx @@ -12,9 +12,55 @@ import useUserPlaylists, { useMutationLikeAPlaylist, } from '@/renderer/hooks/useUserPlaylists' import useUser from '@/renderer/hooks/useUser' +import { + Mode as PlayerMode, + TrackListSourceType, + State as PlayerState, +} from '@/renderer/utils/player' const enableRenderLog = true +const PlayButton = ({ + playlist, + handlePlay, + isLoading, +}: { + playlist: Playlist | undefined + handlePlay: () => void + isLoading: boolean +}) => { + const playerSnapshot = useSnapshot(player) + const isThisPlaylistPlaying = useMemo( + () => + playerSnapshot.mode === PlayerMode.PLAYLIST && + playerSnapshot.trackListSource?.type === TrackListSourceType.PLAYLIST && + playerSnapshot.trackListSource?.id === playlist?.id, + [playerSnapshot.trackListSource, playlist?.id] + ) + + const wrappedHandlePlay = () => { + if (isThisPlaylistPlaying) { + player.playOrPause() + } else { + handlePlay() + } + } + + const isPlaying = + isThisPlaylistPlaying && + [PlayerState.PLAYING, PlayerState.LOADING].includes(playerSnapshot.state) + + return ( + + ) +} + const Header = memo( ({ playlist, @@ -127,10 +173,7 @@ const Header = memo( {/* */}
- + {!isThisPlaylistCreatedByCurrentUser && (