149 |
154 |
157 |
160 |
167 |
170 |
173 |
179 |
185 |
186 | );
187 | };
188 |
--------------------------------------------------------------------------------
/src/components/PlayList.tsx:
--------------------------------------------------------------------------------
1 | import { BsMusicNoteBeamed } from 'react-icons/bs';
2 |
3 | import {
4 | Track,
5 | useAudioPlayerContext,
6 | } from '../context/audio-player-context';
7 | import { tracks } from '../data/tracks';
8 |
9 | export const PlayList = () => {
10 | const { currentTrack, setIsPlaying, setCurrentTrack } =
11 | useAudioPlayerContext();
12 |
13 | const handleClick = (track: Track) => {
14 | setCurrentTrack(track);
15 | setIsPlaying(true);
16 | };
17 |
18 | return (
19 | -
20 | {tracks.map((track, index) => (
21 |
- {
28 | if (e.key === 'Enter' || e.key === ' ') {
29 | handleClick(track);
30 | }
31 | }}
32 | onClick={() => handleClick(track)}
33 | >
34 | 35 | {track.thumbnail ? ( 36 |49 |
41 | ) : ( 42 |
43 | 44 |47 | )} 48 |45 | 46 | 50 |53 |{track.title}
51 |{track.author}
52 |
54 | ))}
55 |
43 | {formatTime(timeProgress)}
44 |
51 | {formatTime(duration)}
52 |
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/src/components/TrackInfo.tsx:
--------------------------------------------------------------------------------
1 | import { BsMusicNoteBeamed } from 'react-icons/bs';
2 |
3 | import { useAudioPlayerContext } from '../context/audio-player-context';
4 |
5 | export const TrackInfo = () => {
6 | const { currentTrack } = useAudioPlayerContext();
7 |
8 | return (
9 |
10 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/components/VolumeControl.tsx:
--------------------------------------------------------------------------------
1 | import { ChangeEvent, useEffect, useState } from 'react';
2 |
3 | import {
4 | IoMdVolumeHigh,
5 | IoMdVolumeOff,
6 | IoMdVolumeLow,
7 | } from 'react-icons/io';
8 | import { useAudioPlayerContext } from '../context/audio-player-context';
9 |
10 | export const VolumeControl = () => {
11 | const [volume, setVolume] = useState
11 | {currentTrack.thumbnail ? (
12 | 
17 | ) : (
18 |
25 |
19 |
20 |
23 | )}
24 |
26 |
31 | 27 | {currentTrack.title} 28 |
29 |{currentTrack.author}
30 |
28 |
51 | );
52 | };
53 |
--------------------------------------------------------------------------------
/src/context/audio-player-context.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | createContext,
3 | useContext,
4 | useState,
5 | ReactNode,
6 | Dispatch,
7 | SetStateAction,
8 | RefObject,
9 | useRef,
10 | } from 'react';
11 |
12 | import { tracks } from '../data/tracks';
13 |
14 | export interface Track {
15 | title: string;
16 | src: string;
17 | author: string;
18 | thumbnail?: string;
19 | }
20 |
21 | interface AudioPlayerContextType {
22 | currentTrack: Track;
23 | setCurrentTrack: Dispatch
29 |
38 |
49 |
50 |