Description:
ListPlayer is a React component that provides a user interface to control playback of a list of media items.
It is fully responsive, and will, by default, adapt to the size of its container element. It also comes with several built-in sizes that the component can “snap” to or smoothly switched between.
How to use it:
1. Install and import the react-playlist-player component.
# NPM $ npm install bouzidanas/react-playlist-player}
import { useState } from 'react';
import { ListPlayer } from './ListPlayer'
import { ListPlayerContext } from './ListPlayerContext';}2. Use the component in your app.
/* List info
{
type: 'playlist',
name: 'Liked Songs',
creationDate: "12/12/2020",
numTracks: 10,
duration: "30 min",
imageSrc: "https://res.cloudinary.com/dqriqmsdk/image/upload/v1704626899/bird-berry.%7E.e1a90b8aa388f4da20db23617643eda5.jpg"
}
*/
const myListInfo = {};
/* Tracks here
[
{
title: [
{
type: 'text',
content: 'Sos',
className: 'title'
},
{
type: 'badge',
content: 'New',
className: 'new'
}
],
artist: [
{
type: 'text',
content: 'Timothy Fleet',
className: 'artist',
link: 'https://music.youtube.com/channel/UCmGqnW6VmhOV4KW67vhzPCA'
},
{
type: 'text',
content: '&',
className: 'artist'
},
{
type: 'text',
content: 'Wayne Murray and company',
className: 'artist',
link: 'https://music.youtube.com/channel/UCkZXltuX3Rta9OiD-O505xg'
}
],
album: [
{
type: 'text',
content: 'Vintage Radio: 1980s',
className: 'album'
},
{
type: 'badge',
content: 'Explicit',
className: 'explicit'
}
],
duration: "2:37"
},
]
*/
const myTracks = [...];
function App() {
const [selectedTrack, setSelectedTrack] = useState(-1);
const [isPlaying, setIsPlaying] = useState(false);
const [isMuted, setIsMuted] = useState(false);
return (
<ListPlayerContext.Provider value={{selectedTrack, setSelectedTrack, isPlaying, setIsPlaying, isMuted, setIsMuted}}>
<div className='container-for-sizing-player'>
<ListPlayer
tracks={testTracks}
listInfo={testListInfo}
/>
</div>
</ListPlayerContext.Provider>
)
}Preview:
