From f9ae2e8966bedff29359283395c2cc39f2294e92 Mon Sep 17 00:00:00 2001 From: 22 <60903333+nini22P@users.noreply.github.com> Date: Sun, 5 Jan 2025 19:12:58 +0800 Subject: [PATCH] remove the play statu from the player state --- src/components/CommonList/CommonList.tsx | 4 +-- src/hooks/player/usePlayerControl.ts | 8 ++--- src/hooks/player/usePlayerCore.ts | 41 ++++++++---------------- src/locales/en/messages.po | 22 ++++++------- src/locales/zh-CN/messages.po | 22 ++++++------- src/pages/Files/Files.tsx | 6 ++-- src/pages/History.tsx | 4 +-- src/pages/NavBar.tsx | 2 +- src/pages/Player/Audio/Classic.tsx | 6 ++-- src/pages/Player/Audio/Modern.tsx | 6 ++-- src/pages/Player/PlayQueue.tsx | 4 +-- src/pages/Player/PlayerControl.tsx | 6 ++-- src/pages/Playlist/Playlist.tsx | 4 +-- src/store/usePlayerStore.ts | 4 +-- src/types/player.ts | 4 +-- 15 files changed, 61 insertions(+), 82 deletions(-) diff --git a/src/components/CommonList/CommonList.tsx b/src/components/CommonList/CommonList.tsx index 2d15ec7..1a46c10 100644 --- a/src/components/CommonList/CommonList.tsx +++ b/src/components/CommonList/CommonList.tsx @@ -43,7 +43,7 @@ const CommonList = ( const updatePlayQueue = usePlayQueueStore.use.updatePlayQueue() const updateCurrentIndex = usePlayQueueStore.use.updateCurrentIndex() - const updatePlayStatu = usePlayerStore((state) => state.updatePlayStatu) + const updateAutoPlay = usePlayerStore((state) => state.updateAutoPlay) const [anchorEl, setAnchorEl] = useState(null) const [menuOpen, setMenuOpen] = useState(false) @@ -85,7 +85,7 @@ const CommonList = ( const shuffleList = shufflePlayQueue(list) || [] updatePlayQueue(shuffleList) updateCurrentIndex(shuffleList[0].index) - updatePlayStatu('playing') + updateAutoPlay(true) } } diff --git a/src/hooks/player/usePlayerControl.ts b/src/hooks/player/usePlayerControl.ts index ab3a78e..6a727c5 100644 --- a/src/hooks/player/usePlayerControl.ts +++ b/src/hooks/player/usePlayerControl.ts @@ -13,12 +13,12 @@ const usePlayerControl = (player: HTMLVideoElement | null) => { const updatePlayQueue = usePlayQueueStore.use.updatePlayQueue() const [ - updatePlayStatu, + updateAutoPlay, updateCurrentTime, ] = usePlayerStore( useShallow( (state) => [ - state.updatePlayStatu, + state.updateAutoPlay, state.updateCurrentTime, ] ) @@ -46,13 +46,13 @@ const usePlayerControl = (player: HTMLVideoElement | null) => { // 播放开始 const handleClickPlay = () => { - updatePlayStatu('playing') + updateAutoPlay(true) player?.play() } // 播放暂停 const handleClickPause = () => { - updatePlayStatu('paused') + updateAutoPlay(false) player?.pause() } diff --git a/src/hooks/player/usePlayerCore.ts b/src/hooks/player/usePlayerCore.ts index 7bf359d..4424d36 100644 --- a/src/hooks/player/usePlayerCore.ts +++ b/src/hooks/player/usePlayerCore.ts @@ -19,11 +19,11 @@ const usePlayerCore = (player: HTMLVideoElement | null) => { const [ currentMetaData, metadataUpdate, - playStatu, + autoPlay, isLoading, updateCurrentMetaData, updateMetadataUpdate, - updatePlayStatu, + updateAutoPlay, updateIsLoading, updateCover, updateCurrentTime, @@ -33,11 +33,11 @@ const usePlayerCore = (player: HTMLVideoElement | null) => { (state) => [ state.currentMetaData, state.metadataUpdate, - state.playStatu, + state.autoPlay, state.isLoading, state.updateCurrentMetaData, state.updateMetadataUpdate, - state.updatePlayStatu, + state.updateAutoPlay, state.updateIsLoading, state.updateCover, state.updateCurrentTime, @@ -77,7 +77,7 @@ const usePlayerCore = (player: HTMLVideoElement | null) => { }) } catch (error) { console.error(error) - updatePlayStatu('paused') + updateAutoPlay(false) updateIsLoading(false) player?.pause() } @@ -94,27 +94,9 @@ const usePlayerCore = (player: HTMLVideoElement | null) => { updateDuration(0) player.load() player.onloadedmetadata = () => { - if (isLoading && playStatu === 'playing') { + if (isLoading && autoPlay) { player.play() - } - updateIsLoading(false) - updateDuration(player.duration) - } - } - return true - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [url] - ) - - // 插入播放历史 - useEffect( - () => { - if (player !== null && !isLoading && player.src.includes('1drv.com') && currentFile) { - if (playStatu === 'playing') { - console.log('Playing', currentFile.filePath) - if (currentFile.filePath) { - if (historyList !== null) { + if (historyList && currentFile) { insertHistory({ fileName: currentFile.fileName, filePath: currentFile.filePath, @@ -123,11 +105,14 @@ const usePlayerCore = (player: HTMLVideoElement | null) => { }) } } + updateIsLoading(false) + updateDuration(player.duration) } } + return true }, // eslint-disable-next-line react-hooks/exhaustive-deps - [currentFile, playStatu] + [url] ) // 设置当前播放进度 @@ -150,9 +135,9 @@ const usePlayerCore = (player: HTMLVideoElement | null) => { player?.play() } else if (repeat === 'off' || repeat === 'all') { if (isPlayQueueEnd || !next) { - if (repeat === 'off'){ - updatePlayStatu('paused') + if (repeat === 'off') { player?.pause() + updateAutoPlay(false) } updateCurrentIndex(playQueue[0].index) } else diff --git a/src/locales/en/messages.po b/src/locales/en/messages.po index d0b2873..d77ca7f 100644 --- a/src/locales/en/messages.po +++ b/src/locales/en/messages.po @@ -75,7 +75,7 @@ msgid "Clear" msgstr "Clear" #: src/pages/PictureView/PictureView.tsx:72 -#: src/pages/Player/Audio/Modern.tsx:154 +#: src/pages/Player/Audio/Modern.tsx:152 #: src/pages/Player/VideoPlayerTopbar.tsx:56 msgid "Close" msgstr "Close" @@ -88,6 +88,10 @@ msgstr "Color mode" msgid "Current" msgstr "Current" +#: src/pages/NavBar.tsx:122 +msgid "Currently using a development version, please be careful with your data!" +msgstr "Currently using a development version, please be careful with your data!" + #: src/pages/Setting.tsx:127 msgid "Customize" msgstr "Customize" @@ -120,8 +124,8 @@ msgstr "Files" msgid "Folders first" msgstr "Folders first" -#: src/pages/Player/Audio/Modern.tsx:204 -#: src/pages/Player/PlayerControl.tsx:318 +#: src/pages/Player/Audio/Modern.tsx:202 +#: src/pages/Player/PlayerControl.tsx:316 msgid "Fullscreen" msgstr "Fullscreen" @@ -157,7 +161,7 @@ msgstr "List" msgid "Local metaData cache" msgstr "Local metaData cache" -#: src/pages/Player/Audio/Modern.tsx:187 +#: src/pages/Player/Audio/Modern.tsx:185 msgid "Lyrics" msgstr "Lyrics" @@ -198,7 +202,7 @@ msgid "New playlist" msgstr "New playlist" #: src/components/Lyrics/Lyrics.tsx:87 -#: src/pages/Player/Audio/Modern.tsx:285 +#: src/pages/Player/Audio/Modern.tsx:283 msgid "No lyrics" msgstr "No lyrics" @@ -220,8 +224,8 @@ msgstr "Open source dependencies" msgid "Play all" msgstr "Play all" -#: src/pages/Player/Audio/Modern.tsx:172 -#: src/pages/Player/PlayerControl.tsx:308 +#: src/pages/Player/Audio/Modern.tsx:170 +#: src/pages/Player/PlayerControl.tsx:306 #: src/pages/Player/PlayerMenu.tsx:221 msgid "Play queue" msgstr "Play queue" @@ -297,10 +301,6 @@ msgstr "Switch fullscreen" msgid "Switch theme" msgstr "Switch theme" -#: src/pages/NavBar.tsx:122 -msgid "The current version in use is a development version. Please be cautious about data security!" -msgstr "The current version in use is a development version. Please be cautious about data security!" - #: src/pages/Playlist/Playlist.tsx:237 msgid "The playlist will be deleted" msgstr "The playlist will be deleted" diff --git a/src/locales/zh-CN/messages.po b/src/locales/zh-CN/messages.po index caaadca..1b3c801 100644 --- a/src/locales/zh-CN/messages.po +++ b/src/locales/zh-CN/messages.po @@ -75,7 +75,7 @@ msgid "Clear" msgstr "清除" #: src/pages/PictureView/PictureView.tsx:72 -#: src/pages/Player/Audio/Modern.tsx:154 +#: src/pages/Player/Audio/Modern.tsx:152 #: src/pages/Player/VideoPlayerTopbar.tsx:56 msgid "Close" msgstr "关闭" @@ -88,6 +88,10 @@ msgstr "颜色模式" msgid "Current" msgstr "当前" +#: src/pages/NavBar.tsx:122 +msgid "Currently using a development version, please be careful with your data!" +msgstr "当前正在使用开发版本，请注意数据安全!" + #: src/pages/Setting.tsx:127 msgid "Customize" msgstr "定制" @@ -120,8 +124,8 @@ msgstr "文件" msgid "Folders first" msgstr "文件夹优先" -#: src/pages/Player/Audio/Modern.tsx:204 -#: src/pages/Player/PlayerControl.tsx:318 +#: src/pages/Player/Audio/Modern.tsx:202 +#: src/pages/Player/PlayerControl.tsx:316 msgid "Fullscreen" msgstr "全屏" @@ -157,7 +161,7 @@ msgstr "列表" msgid "Local metaData cache" msgstr "本地元数据缓存" -#: src/pages/Player/Audio/Modern.tsx:187 +#: src/pages/Player/Audio/Modern.tsx:185 msgid "Lyrics" msgstr "歌词" @@ -198,7 +202,7 @@ msgid "New playlist" msgstr "新播放列表" #: src/components/Lyrics/Lyrics.tsx:87 -#: src/pages/Player/Audio/Modern.tsx:285 +#: src/pages/Player/Audio/Modern.tsx:283 msgid "No lyrics" msgstr "无歌词" @@ -220,8 +224,8 @@ msgstr "开源库" msgid "Play all" msgstr "全部播放" -#: src/pages/Player/Audio/Modern.tsx:172 -#: src/pages/Player/PlayerControl.tsx:308 +#: src/pages/Player/Audio/Modern.tsx:170 +#: src/pages/Player/PlayerControl.tsx:306 #: src/pages/Player/PlayerMenu.tsx:221 msgid "Play queue" msgstr "播放队列" @@ -297,10 +301,6 @@ msgstr "切换全屏" msgid "Switch theme" msgstr "切换主题" -#: src/pages/NavBar.tsx:122 -msgid "The current version in use is a development version. Please be cautious about data security!" -msgstr "当前正在使用开发版本，请注意保护数据安全!" - #: src/pages/Playlist/Playlist.tsx:237 msgid "The playlist will be deleted" msgstr "播放列表将会被删除" diff --git a/src/pages/Files/Files.tsx b/src/pages/Files/Files.tsx index 58f2eb6..c271c19 100644 --- a/src/pages/Files/Files.tsx +++ b/src/pages/Files/Files.tsx @@ -55,7 +55,7 @@ const Files = () => { const updatePlayQueue = usePlayQueueStore.use.updatePlayQueue() const updateCurrentIndex = usePlayQueueStore.use.updateCurrentIndex() - const updatePlayStatu = usePlayerStore(state => state.updatePlayStatu) + const updateAutoPlay = usePlayerStore(state => state.updateAutoPlay) const { getFilesData } = useFilesData() const navigate = useNavigate() @@ -143,7 +143,7 @@ const Files = () => { } updatePlayQueue(list) updateCurrentIndex(list.find(item => pathConvert(item.filePath) === pathConvert(currentFile.filePath))?.index || 0) - updatePlayStatu('playing') + updateAutoPlay(true) if (currentFile.fileType === 'video') { updateVideoViewIsShow(true) } @@ -165,7 +165,7 @@ const Files = () => { } updatePlayQueue(list) updateCurrentIndex(0) - updatePlayStatu('playing') + updateAutoPlay(true) if (list[0].fileType === 'video') { updateVideoViewIsShow(true) } diff --git a/src/pages/History.tsx b/src/pages/History.tsx index 23dc8b4..80810f3 100644 --- a/src/pages/History.tsx +++ b/src/pages/History.tsx @@ -18,7 +18,7 @@ const History = () => { const updatePlayQueue = usePlayQueueStore.use.updatePlayQueue() const updateCurrentIndex = usePlayQueueStore.use.updateCurrentIndex() - const updatePlayStatu = usePlayerStore(state => state.updatePlayStatu) + const updateAutoPlay = usePlayerStore(state => state.updateAutoPlay) const open = (index: number) => { const listData = historyList @@ -32,7 +32,7 @@ const History = () => { } updatePlayQueue(list) updateCurrentIndex(list[index].index) - updatePlayStatu('playing') + updateAutoPlay(true) if (checkFileType(currentFile.fileName) === 'video') { updateVideoViewIsShow(true) } diff --git a/src/pages/NavBar.tsx b/src/pages/NavBar.tsx index 4954ade..f8be49d 100644 --- a/src/pages/NavBar.tsx +++ b/src/pages/NavBar.tsx @@ -119,7 +119,7 @@ const NavBar = () => { OMP { INFO.dev && - + [ state.currentMetaData, - state.playStatu, state.isLoading, state.cover, state.currentTime, @@ -227,13 +225,13 @@ const Classic = ({ player, styles }: { player: HTMLVideoElement | null, styles: { - (!isLoading && playStatu === 'paused') && + (!isLoading && player?.paused) && handleClickPlay()}> } { - (!isLoading && playStatu === 'playing') && + (!isLoading && !player?.paused) && handleClickPause()}> diff --git a/src/pages/Player/Audio/Modern.tsx b/src/pages/Player/Audio/Modern.tsx index 480c513..9097954 100644 --- a/src/pages/Player/Audio/Modern.tsx +++ b/src/pages/Player/Audio/Modern.tsx @@ -62,7 +62,6 @@ const Modern = ({ player, styles }: { player: HTMLVideoElement | null, styles: { const [ currentMetaData, - playStatu, isLoading, cover, currentTime, @@ -71,7 +70,6 @@ const Modern = ({ player, styles }: { player: HTMLVideoElement | null, styles: { useShallow( (state) => [ state.currentMetaData, - state.playStatu, state.isLoading, state.cover, state.currentTime, @@ -350,13 +348,13 @@ const Modern = ({ player, styles }: { player: HTMLVideoElement | null, styles: { { - (!isLoading && playStatu === 'paused') && + (!isLoading && player?.paused) && handleClickPlay()}> } { - (!isLoading && playStatu === 'playing') && + (!isLoading && !player?.paused) && handleClickPause()}> diff --git a/src/pages/Player/PlayQueue.tsx b/src/pages/Player/PlayQueue.tsx index c3fffb2..f9b92f4 100644 --- a/src/pages/Player/PlayQueue.tsx +++ b/src/pages/Player/PlayQueue.tsx @@ -29,11 +29,11 @@ const PlayQueue = () => { ) ) - const updatePlayStatu = usePlayerStore(state => state.updatePlayStatu) + const updateAutoPlay = usePlayerStore(state => state.updateAutoPlay) const open = (index: number) => { if (playQueue) { - updatePlayStatu('playing') + updateAutoPlay(true) updateCurrentIndex(playQueue[index].index) } } diff --git a/src/pages/Player/PlayerControl.tsx b/src/pages/Player/PlayerControl.tsx index 5f9cd4f..3ec1b94 100644 --- a/src/pages/Player/PlayerControl.tsx +++ b/src/pages/Player/PlayerControl.tsx @@ -65,7 +65,6 @@ const PlayerControl = ({ player }: { player: HTMLVideoElement | null }) => { const [ currentMetaData, - playStatu, isLoading, cover, currentTime, @@ -74,7 +73,6 @@ const PlayerControl = ({ player }: { player: HTMLVideoElement | null }) => { useShallow( (state) => [ state.currentMetaData, - state.playStatu, state.isLoading, state.cover, state.currentTime, @@ -252,13 +250,13 @@ const PlayerControl = ({ player }: { player: HTMLVideoElement | null }) => { { - (!isLoading && playStatu === 'paused') && + (!isLoading && player?.paused) && handleClickPlay()}> } { - (!isLoading && playStatu === 'playing') && + (!isLoading && !player?.paused) && handleClickPause()}> diff --git a/src/pages/Playlist/Playlist.tsx b/src/pages/Playlist/Playlist.tsx index 4cdd8df..b4cb0f1 100644 --- a/src/pages/Playlist/Playlist.tsx +++ b/src/pages/Playlist/Playlist.tsx @@ -26,7 +26,7 @@ const Playlist = () => { const updatePlayQueue = usePlayQueueStore.use.updatePlayQueue() const updateCurrentIndex = usePlayQueueStore.use.updateCurrentIndex() - const updatePlayStatu = usePlayerStore((state) => state.updatePlayStatu) + const updateAutoPlay = usePlayerStore(state => state.updateAutoPlay) const [playlists, renamePlaylist, removePlaylist, removeFilesFromPlaylist] = usePlaylistsStore( useShallow((state) => [state.playlists, state.renamePlaylist, state.removePlaylist, state.removeFilesFromPlaylist]) @@ -66,7 +66,7 @@ const Playlist = () => { } updatePlayQueue(list) updateCurrentIndex(list[index].index) - updatePlayStatu('playing') + updateAutoPlay(true) if (checkFileType(currentFile.fileName) === 'video') { updateVideoViewIsShow(true) } diff --git a/src/store/usePlayerStore.ts b/src/store/usePlayerStore.ts index a65758a..553c436 100644 --- a/src/store/usePlayerStore.ts +++ b/src/store/usePlayerStore.ts @@ -4,7 +4,7 @@ import { PlayerStatus, PlayerAction } from '../types/player' const initialState: PlayerStatus = { currentMetaData: null, metadataUpdate: false, - playStatu: 'paused', + autoPlay: false, isLoading: false, cover: './cover.svg', currentTime: 0, @@ -16,7 +16,7 @@ const usePlayerStore = create( ...initialState, updateCurrentMetaData: (currentMetaData) => set(() => ({ currentMetaData: currentMetaData })), updateMetadataUpdate: () => set((state) => ({ metadataUpdate: !state.metadataUpdate })), - updatePlayStatu: (playStatu) => set(() => ({ playStatu: playStatu })), + updateAutoPlay: (autoPlay) => set(() => ({ autoPlay })), updateIsLoading: (isLading) => set(() => ({ isLoading: isLading })), updateCover: (cover) => set(() => (({ cover: cover }))), updateCurrentTime: (currentTime) => set(() => ({ currentTime: currentTime })), diff --git a/src/types/player.ts b/src/types/player.ts index a1a581a..7a219e8 100644 --- a/src/types/player.ts +++ b/src/types/player.ts @@ -3,7 +3,7 @@ import { MetaData } from './MetaData' export interface PlayerStatus { currentMetaData: MetaData | null, metadataUpdate: boolean, - playStatu: 'paused' | 'playing', + autoPlay: boolean, isLoading: boolean, cover: string, currentTime: number, @@ -13,7 +13,7 @@ export interface PlayerStatus { export interface PlayerAction { updateCurrentMetaData: (currentMetaData: PlayerStatus['currentMetaData']) => void, updateMetadataUpdate: () => void, - updatePlayStatu: (isPlaying: PlayerStatus['playStatu']) => void, + updateAutoPlay: (autoPlay: PlayerStatus['autoPlay']) => void, updateIsLoading: (isLoading: PlayerStatus['isLoading']) => void, updateCover: (cover: PlayerStatus['cover']) => void, updateCurrentTime: (currentTime: PlayerStatus['currentTime']) => void,