Files
voicebox/app/src/stores/playerStore.ts
T
Jamie Pine f80f870e93 Implement audio player component and integrate with history and sample lists
- Added a new AudioPlayer component for audio playback functionality, utilizing WaveSurfer for waveform visualization.
- Integrated audio playback controls into the HistoryTable and SampleList components, allowing users to play audio directly from their history and samples.
- Updated player state management to handle audio URL, ID, title, and playback state.
- Introduced a custom Slider component for volume control and seek functionality.
- Enhanced UI to ensure the AudioPlayer is always visible except in settings, improving user experience.
2026-01-25 13:12:50 -08:00

56 lines
1.3 KiB
TypeScript

import { create } from 'zustand';
interface PlayerState {
audioUrl: string | null;
audioId: string | null;
title: string | null;
isPlaying: boolean;
currentTime: number;
duration: number;
volume: number;
isLooping: boolean;
setAudio: (url: string, id: string, title?: string) => void;
setIsPlaying: (playing: boolean) => void;
setCurrentTime: (time: number) => void;
setDuration: (duration: number) => void;
setVolume: (volume: number) => void;
toggleLoop: () => void;
reset: () => void;
}
export const usePlayerStore = create<PlayerState>((set) => ({
audioUrl: null,
audioId: null,
title: null,
isPlaying: false,
currentTime: 0,
duration: 0,
volume: 1,
isLooping: false,
setAudio: (url, id, title) =>
set({
audioUrl: url,
audioId: id,
title: title || null,
currentTime: 0,
isPlaying: false,
}),
setIsPlaying: (playing) => set({ isPlaying: playing }),
setCurrentTime: (time) => set({ currentTime: time }),
setDuration: (duration) => set({ duration }),
setVolume: (volume) => set({ volume }),
toggleLoop: () => set((state) => ({ isLooping: !state.isLooping })),
reset: () =>
set({
audioUrl: null,
audioId: null,
title: null,
isPlaying: false,
currentTime: 0,
duration: 0,
isLooping: false,
}),
}));