johnbakhmat.dev
WIP. A little custom music server
fix: warning about empty string audio source
+1
-65
-64
web/src/components/audio-player.tsx
-64
web/src/components/audio-player.tsx
···
1
-
"use client";
2
-
3
-
import { useEffect, useRef } from "react";
4
-
import { usePlayerStore } from "@/store/player";
5
-
import { Controls } from "./player/controls";
6
-
7
-
function usePlayer() {
8
-
const audioRef = useRef<HTMLAudioElement | null>(null);
9
-
10
-
const currentTrack = usePlayerStore((state) => state.currentTrack);
11
-
const isPlaying = usePlayerStore((state) => state.isPlaying);
12
-
const volume = usePlayerStore((state) => state.volume);
13
-
const play = usePlayerStore((state) => state.play);
14
-
const pause = usePlayerStore((state) => state.pause);
15
-
16
-
const link = currentTrack ? `http://localhost:3003/file/${currentTrack}` : "";
17
-
const player = audioRef.current;
18
-
19
-
useEffect(() => {
20
-
if (!player) {
21
-
return;
22
-
}
23
-
24
-
player.volume = volume;
25
-
26
-
if (isPlaying) {
27
-
player.play();
28
-
} else {
29
-
player.pause();
30
-
}
31
-
}, [audioRef, currentTrack, isPlaying]);
32
-
33
-
useEffect(() => {
34
-
if (!player) {
35
-
return;
36
-
}
37
-
player.volume = volume;
38
-
}, [audioRef, volume]);
39
-
40
-
const onPause = () => {
41
-
pause();
42
-
};
43
-
const onPlay = () => {
44
-
play();
45
-
};
46
-
47
-
return {
48
-
ref: audioRef,
49
-
src: link,
50
-
onPause,
51
-
onPlay,
52
-
};
53
-
}
54
-
55
-
export function AudioPlayer() {
56
-
const { ref, src, onPause, onPlay } = usePlayer();
57
-
58
-
return (
59
-
<>
60
-
<Controls />
61
-
<audio ref={ref} src={src} onPause={onPause} onPlay={onPlay}></audio>
62
-
</>
63
-
);
64
-
}