From f30a706eef5bde2d8226e4cb1556a334454d4914 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Sun, 2 Nov 2025 18:52:59 -0800 Subject: [PATCH] rework player events to use properties object instead of flat value --- .../audio-player/listener/player-events.tsx | 32 +++++----- .../listener/use-player-events.ts | 24 ++------ src/renderer/store/player.store.ts | 58 ++++++++++++------- 3 files changed, 61 insertions(+), 53 deletions(-) diff --git a/src/renderer/components/audio-player/listener/player-events.tsx b/src/renderer/components/audio-player/listener/player-events.tsx index 2f38ad9fd..b3a36f684 100644 --- a/src/renderer/components/audio-player/listener/player-events.tsx +++ b/src/renderer/components/audio-player/listener/player-events.tsx @@ -17,26 +17,32 @@ export interface PlayerEvents { } export interface PlayerEventsCallbacks { - onCurrentTrackChange?: ( - track: { index: number; track: QueueSong | undefined }, - prevTrack: { index: number; track: QueueSong | undefined }, + onCurrentSongChange?: ( + properties: { index: number; song: QueueSong | undefined }, + prev: { index: number; song: QueueSong | undefined }, ) => void; - onPlayerMute?: (muted: boolean, prevMuted: boolean) => void; - onPlayerProgress?: (timestamp: number, prevTimestamp: number) => void; - onPlayerQueueChange?: (queue: QueueData, prevQueue: QueueData) => void; - onPlayerSeek?: (seconds: number, prevSeconds: number) => void; - onPlayerSeekToTimestamp?: (timestamp: number, prevTimestamp: number) => void; - onPlayerSpeed?: (speed: number, prevSpeed: number) => void; - onPlayerStatus?: (status: PlayerStatus, prevStatus: PlayerStatus) => void; - onPlayerVolume?: (volume: number, prevVolume: number) => void; + onPlayerMute?: (properties: { muted: boolean }, prev: { muted: boolean }) => void; + onPlayerProgress?: (properties: { timestamp: number }, prev: { timestamp: number }) => void; + onPlayerQueueChange?: (queue: QueueData, prev: QueueData) => void; + onPlayerSeek?: (properties: { seconds: number }, prev: { seconds: number }) => void; + onPlayerSeekToTimestamp?: ( + properties: { timestamp: number }, + prev: { timestamp: number }, + ) => void; + onPlayerSpeed?: (properties: { speed: number }, prev: { speed: number }) => void; + onPlayerStatus?: ( + properties: { song: QueueSong | undefined; status: PlayerStatus }, + prev: { song: QueueSong | undefined; status: PlayerStatus }, + ) => void; + onPlayerVolume?: (properties: { volume: number }, prev: { volume: number }) => void; } export function createPlayerEvents(callbacks: PlayerEventsCallbacks): PlayerEvents { const unsubscribers: (() => void)[] = []; // Subscribe to current track changes - if (callbacks.onCurrentTrackChange) { - const unsubscribe = subscribeCurrentTrack(callbacks.onCurrentTrackChange); + if (callbacks.onCurrentSongChange) { + const unsubscribe = subscribeCurrentTrack(callbacks.onCurrentSongChange); unsubscribers.push(unsubscribe); } diff --git a/src/renderer/components/audio-player/listener/use-player-events.ts b/src/renderer/components/audio-player/listener/use-player-events.ts index 8ccde042c..2cc6d57cc 100644 --- a/src/renderer/components/audio-player/listener/use-player-events.ts +++ b/src/renderer/components/audio-player/listener/use-player-events.ts @@ -1,25 +1,11 @@ import { useEffect } from 'react'; -import { createPlayerEvents } from '/@/renderer/components/audio-player/listener/player-events'; -import { QueueData } from '/@/renderer/store'; -import { QueueSong } from '/@/shared/types/domain-types'; -import { PlayerStatus } from '/@/shared/types/types'; +import { + createPlayerEvents, + PlayerEventsCallbacks, +} from '/@/renderer/components/audio-player/listener/player-events'; -export interface PlayerEvents { - onCurrentTrackChange?: ( - track: { index: number; track: QueueSong | undefined }, - prevTrack: { index: number; track: QueueSong | undefined }, - ) => void; - onPlayerMute?: (muted: boolean, prevMuted: boolean) => void; - onPlayerProgress?: (timestamp: number, prevTimestamp: number) => void; - onPlayerQueueChange?: (queue: QueueData, prevQueue: QueueData) => void; - onPlayerSeekToTimestamp?: (timestamp: number, prevTimestamp: number) => void; - onPlayerSpeed?: (speed: number, prevSpeed: number) => void; - onPlayerStatus?: (status: PlayerStatus, prevStatus: PlayerStatus) => void; - onPlayerVolume?: (volume: number, prevVolume: number) => void; -} - -export function usePlayerEvents(callbacks: PlayerEvents, deps: React.DependencyList) { +export function usePlayerEvents(callbacks: PlayerEventsCallbacks, deps: React.DependencyList) { useEffect(() => { const engine = createPlayerEvents(callbacks); diff --git a/src/renderer/store/player.store.ts b/src/renderer/store/player.store.ts index 7798bb726..e9d2ac070 100644 --- a/src/renderer/store/player.store.ts +++ b/src/renderer/store/player.store.ts @@ -54,7 +54,7 @@ interface Actions { clearQueue: () => void; clearSelected: (items: QueueSong[]) => void; decreaseVolume: (value: number) => void; - getCurrentTrack: () => QueueSong | undefined; + getCurrentSong: () => QueueSong | undefined; getQueue: (groupBy?: QueueGroupingProperty) => GroupedQueue; getQueueOrder: () => { groups: { count: number; name: string }[]; @@ -411,7 +411,7 @@ export const usePlayerStoreBase = create()( state.player.volume = Math.max(0, state.player.volume - value); }); }, - getCurrentTrack: () => { + getCurrentSong: () => { const queue = get().getQueue(); return queue.items[get().player.index]; }, @@ -1127,52 +1127,64 @@ export const subscribePlayerQueue = ( export const subscribeCurrentTrack = ( onChange: ( - track: { index: number; track: QueueSong | undefined }, - prevTrack: { index: number; track: QueueSong | undefined }, + properties: { index: number; song: QueueSong | undefined }, + prev: { index: number; song: QueueSong | undefined }, ) => void, ) => { return usePlayerStoreBase.subscribe( (state) => { const queue = state.getQueue(); const index = state.player.index; - return { index, track: queue.items[index] }; + return { index, song: queue.items[index] }; }, - (track, prevTrack) => { - onChange(track, prevTrack); + (song, prevSong) => { + onChange(song, prevSong); }, { equalityFn: (a, b) => { - return a.track?.uniqueId === b.track?.uniqueId; + return a.song?.uniqueId === b.song?.uniqueId; }, }, ); }; export const subscribePlayerProgress = ( - onChange: (timestamp: number, prevTimestamp: number) => void, + onChange: (properties: { timestamp: number }, prev: { timestamp: number }) => void, ) => { return usePlayerStoreBase.subscribe( (state) => state.player.timestamp, (timestamp, prevTimestamp) => { - onChange(timestamp, prevTimestamp); + onChange({ timestamp }, { timestamp: prevTimestamp }); }, ); }; -export const subscribePlayerVolume = (onChange: (volume: number, prevVolume: number) => void) => { +export const subscribePlayerVolume = ( + onChange: (properties: { volume: number }, prev: { volume: number }) => void, +) => { return usePlayerStoreBase.subscribe( (state) => state.player.volume, (volume, prevVolume) => { - onChange(volume, prevVolume); + onChange({ volume }, { volume: prevVolume }); }, ); }; export const subscribePlayerStatus = ( - onChange: (status: PlayerStatus, prevStatus: PlayerStatus) => void, + onChange: ( + properties: { song: QueueSong | undefined; status: PlayerStatus }, + prev: { song: QueueSong | undefined; status: PlayerStatus }, + ) => void, ) => { return usePlayerStoreBase.subscribe( - (state) => state.player.status, + (state) => { + const currentSong = state.getCurrentSong(); + + return { + song: currentSong, + status: state.player.status, + }; + }, (status, prevStatus) => { onChange(status, prevStatus); }, @@ -1180,33 +1192,37 @@ export const subscribePlayerStatus = ( }; export const subscribePlayerSeekToTimestamp = ( - onChange: (timestamp: number, prevTimestamp: number) => void, + onChange: (properties: { timestamp: number }, prev: { timestamp: number }) => void, ) => { return usePlayerStoreBase.subscribe( (state) => state.player.seekToTimestamp, (timestamp, prevTimestamp) => { onChange( - parseUniqueSeekToTimestamp(timestamp), - parseUniqueSeekToTimestamp(prevTimestamp), + { timestamp: parseUniqueSeekToTimestamp(timestamp) }, + { timestamp: parseUniqueSeekToTimestamp(prevTimestamp) }, ); }, ); }; -export const subscribePlayerMute = (onChange: (muted: boolean, prevMuted: boolean) => void) => { +export const subscribePlayerMute = ( + onChange: (properties: { muted: boolean }, prev: { muted: boolean }) => void, +) => { return usePlayerStoreBase.subscribe( (state) => state.player.muted, (muted, prevMuted) => { - onChange(muted, prevMuted); + onChange({ muted }, { muted: prevMuted }); }, ); }; -export const subscribePlayerSpeed = (onChange: (speed: number, prevSpeed: number) => void) => { +export const subscribePlayerSpeed = ( + onChange: (properties: { speed: number }, prev: { speed: number }) => void, +) => { return usePlayerStoreBase.subscribe( (state) => state.player.speed, (speed, prevSpeed) => { - onChange(speed, prevSpeed); + onChange({ speed }, { speed: prevSpeed }); }, ); };