WIP. A little custom music server
feat: persist volume in local storage
+22
-13
+22
-13
web/src/store/player.ts
+22
-13
web/src/store/player.ts
···
1
1
import { create } from "zustand";
2
+
import { persist } from "zustand/middleware";
2
3
import { scale } from "@/lib/utils";
3
4
4
5
const MAX_VOLUME = 0.15;
···
60
61
setVolumePercent: (percent: number) => void;
61
62
}
62
63
63
-
export const usePlayerStore = create<PlayerState>((set) => ({
64
-
// Initial state
65
-
isPlaying: false,
66
-
currentTrack: null,
67
-
volume: 0.02,
64
+
export const usePlayerStore = create<PlayerState>()(
65
+
persist(
66
+
(set) => ({
67
+
// Initial state
68
+
isPlaying: false,
69
+
currentTrack: null,
70
+
volume: 0.02,
68
71
69
-
// Actions
70
-
play: () => set({ isPlaying: true }),
71
-
pause: () => set({ isPlaying: false }),
72
-
togglePlayPause: () => set((state) => ({ isPlaying: !state.isPlaying })),
73
-
setTrack: (fileId: string) => set({ currentTrack: fileId, isPlaying: true }),
74
-
setVolume: (volume: number) => set({ volume }),
75
-
setVolumePercent: (percent: number) => set({ volume: volumeForward(percent) }),
76
-
}));
72
+
// Actions
73
+
play: () => set({ isPlaying: true }),
74
+
pause: () => set({ isPlaying: false }),
75
+
togglePlayPause: () => set((state) => ({ isPlaying: !state.isPlaying })),
76
+
setTrack: (fileId: string) => set({ currentTrack: fileId, isPlaying: true }),
77
+
setVolume: (volume: number) => set({ volume }),
78
+
setVolumePercent: (percent: number) => set({ volume: volumeForward(percent) }),
79
+
}),
80
+
{
81
+
name: "boombox-player-volume",
82
+
partialize: (state) => ({ volume: state.volume }),
83
+
},
84
+
),
85
+
);
77
86
78
87
// Helper to get volume as percentage (0-100)
79
88
export function getVolumePercent(volume: number): number {